Angular
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
DEMOS
SUPPORT
FORUM
DOWNLOAD
/ Toggle Switch Button / How To / Bind data using two way binding
Search results

Bind data using two way binding in Angular Toggle Switch Button component

21 Dec 2022 / 2 minutes to read

Switch component supports two way binding.

In this following example, two way binding for Switch 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,
Copied to clipboard
<ejs-switch #switch [(ngModel)]="checked"></ejs-switch>
  • Initialize Checkbox component and assign the checked property value like the below code,
Copied to clipboard
<ejs-checkbox #checkbox [(checked)]="checked"></ejs-checkbox>
  • Now, the changes made in Switch 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.
Copied to clipboard
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `<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>`
})

export class AppComponent {
public checkedwifi: boolean = true;
public checkedbluetooth: boolean = false;
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SwitchModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        SwitchModule,
        CheckBoxModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Toggle Switch Button / Accessibility
Toggle Switch Button / Change Size