Change switch state using toggle method in Angular Switch component
27 Sep 20232 minutes to read
This section explains about how to toggle between the switch states using toggle
method.
import { Component, ViewChild } from '@angular/core';
import { SwitchComponent } from '@syncfusion/ej2-angular-buttons';
@Component({
selector: 'app-root',
template: `<div class="e-section-control">
<!-- To Render Switch. -->
<ejs-switch #switch onLabel="ON" offLabel="OFF" (created)='created()'></ejs-switch>
</div>`
})
export class AppComponent {
@ViewChild('switch')
public switch: SwitchComponent| any;
public created() {
this.switch.toggle();
}
}
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';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Switch triggers
change
event on every state stage to perform custom operations.