This section explains how to create a simple Switch, and demonstrate the basic usage of the Switch module in an Angular environment.
The following list of dependencies are required to use the Switch module in your application.
|-- @syncfusion/ej2-angular-buttons
|-- @syncfusion/ej2-angular-base
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-buttons
You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.
npm install -g @angular/cli
Start a new Angular application using below Angular CLI command.
ng new my-app
cd my-app
To install Switch package, use the following command.
npm install @syncfusion/ej2-angular-buttons --save
The above package installs Switch dependencies which are required to render the Switch component in the Angular environment.
Import Switch module into Angular application(app.module.ts) from the package
@syncfusion/ej2-angular-buttons
.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// Imported Syncfusion Switch module from buttons package.
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, SwitchModule ], // Registering EJ2 Switch Module.
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Modify the template in app.component.ts
file to render the Switch component.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To Render Switch with checked state. -->
<ejs-switch [checked]="true"></ejs-switch>`
})
export class AppComponent { }
Add Switch component’s styles as given below in style.css
.
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
Run the application in the browser using the following command:
ng serve
The below example shows a basic Switch component,
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To Render Switch with checked state. -->
<ejs-switch [checked]="true"></ejs-switch>`
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SwitchModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
This section explains how to set onLabel
and offLabel
texts on Switch. In the following example, onLabel
is set as
ON
and offLabel
is set as OFF
.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To Render Switch. -->
<ejs-switch onLabel="ON" offLabel="OFF" [checked]="true"></ejs-switch>`
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SwitchModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Switch does not have text support for material themes, and does not support long custom text.