Checkbox component supports two way binding.
In this following example, two way binding for Checkbox is illustrated with Switch component. The steps to achieve two way binding in CheckBox are as follows,
ngModel
as in the below code using “banana in a box” syntax,<ejs-checkbox #checkbox [(ngModel)]="checked"></ejs-checkbox>
checked
property value like the below code,<ejs-switch #switch [(checked)]="checked"></ejs-switch>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<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>`
})
export class AppComponent {
public checkedwifi: boolean = true;
public checkedbluetooth: boolean = false;
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);