Prevent State Change in Angular Switch component

15 Dec 20241 minute to read

The beforeChange event is triggered before the switch’s state is altered. This event provides an opportunity to intercept and potentially cancel the change action before it is applied. It allows for implementing conditional logic or validating the change prior to it being rendered on the UI.

app.component.ts

import { Component } from '@angular/core';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { BeforeChangeEventArgs } from '@syncfusion/ej2-buttons';

@Component({
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <!-- Render Switch with checked state and beforeChange event -->
      <ejs-switch [checked]="true" (beforeChange)="beforeChange($event)"></ejs-switch>
    </div>
  `,
  standalone: true,
  imports: [SwitchModule],
})
export class AppComponent {
  beforeChange(args: BeforeChangeEventArgs): void {
    // Set cancel to true to prevent the switch state change
    args.cancel = true;
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));