How to bind data using two way binding in Angular Toggle Switch Button

25 Sep 20268 minutes to read

Angular Toggle Switch Button component supports two way binding.

In this following example, two way binding for Angular Toggle Switch Button is illustrated with CheckBox component. The steps to achieve two way binding in Switch are as follows,

  • Initialize Switch component and bind the checked value using ngModel as in the below code using “banana in a box” syntax,

    <ejs-switch #switch [(ngModel)]="checked"></ejs-switch>

  • Initialize Checkbox component and assign the checked property value like the below code,

    <ejs-checkbox #checkbox [(checked)]="checked"></ejs-checkbox>

  • Now, the changes made in Angular Toggle Switch Button will reflect in CheckBox (i.e When the state of Switch is changed to checked state then the CheckBox state will also change to checked state) and vice versa.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SwitchModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons'
import { FormsModule } from '@angular/forms'
import { enableRipple } from '@syncfusion/ej2-base'




import { Component } from '@angular/core';

@Component({
imports: [
        
        SwitchModule,
        CheckBoxModule,
        FormsModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <div id='container'>
                    <table class='tablealign'>
                        <thead>
                            <th></th>
                            <th>
                                <h4>Switch</h4>
                            </th>
                            <th>
                                <h4>Checkbox</h4>
                            </th>
                        </thead>
                        <tr>
                            <td class='dataalign'>
                                <label>Wi-Fi</label>
                            </td>
                            <td class='dataalign'>
                                <ejs-switch #wswitch [(ngModel)]="checkedwifi">
                                </ejs-switch>
                            </td>
                            <td class='dataalign'>
                                <ejs-checkbox #wcheckbox [(checked)]="checkedwifi">
                                </ejs-checkbox>
                            </td>
                        </tr>
                        <tr>
                            <td class='dataalign'>
                                <label>Bluetooth</label>
                            </td>
                            <td class='dataalign'>
                                <ejs-switch #bswitch [(ngModel)]="checkedbluetooth">
                                </ejs-switch>
                            </td>
                            <td class='dataalign'>
                                <ejs-checkbox #bcheckbox  [(checked)]="checkedbluetooth">
                                </ejs-checkbox>
                            </td>
                        </tr>
                    </table>
               </div>
               </div>`
})

export class AppComponent {
    public checkedwifi: boolean = true;
    public checkedbluetooth: boolean = false;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));