Angular
Demos
Support
Forum
Download
Search results

Bind data using two way binding

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,

  • Initialize 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 CheckBox will reflect in Switch (i.e When the state of CheckBox is changed to checked state then the Switch state will also change to checked state) and vice versa.
Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'app-container',
    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;
}
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);
#container {
  margin: 8% auto;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

.tablealign {
    align-content: center;
    margin: auto; 
}

.dataalign {
    padding: 10px 30px 20px 20px;
}
Previous
Next