How to bind data using two way binding in Angular Checkbox

25 Sep 20267 minutes to read

Angular Checkbox component supports two way binding.

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

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

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

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

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

  • Now, the changes made in Angular Checkbox will reflect in Switch (i.e When the state of Angular Checkbox is changed to checked state then the Switch 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>Checkbox</h4>
                            </th>
                            <th>
                                <h4>Switch</h4>
                            </th>
                        </thead>
                        <tr>
                            <td class='dataalign'>
                                <label>Wi-Fi</label>
                            </td>
                            <td class='dataalign'>
                                <ejs-checkbox #wcheckbox [(ngModel)]="checkedwifi">
                                </ejs-checkbox>
                            </td>
                            <td class='dataalign'>
                                <ejs-switch #wswitch [(checked)]="checkedwifi">
                                </ejs-switch>
                            </td>
                        </tr>
                        <tr>
                            <td class='dataalign'>
                                <label>Bluetooth</label>
                            </td>
                            <td class='dataalign'>
                                <ejs-checkbox #bcheckbox  [(ngModel)]="checkedbluetooth">
                                </ejs-checkbox>
                            </td>
                            <td class='dataalign'>
                                <ejs-switch #bswitch [(checked)]="checkedbluetooth">
                                </ejs-switch>
                            </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));