Angular CheckBox - Getting Started
This tutorial shows how to add the CheckBox to your application and configure its core features.
Each section in this tutorial describes a single configuration step. You can also find the full code in the GitHub repository.
Create a CheckBox
Add DevExtreme to your Angular application and use the following code to create a CheckBox component:
- <dx-check-box></dx-check-box>
- import { Component } from '@angular/core';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- }
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { DxCheckBoxModule } from 'devextreme-angular';
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- DxCheckBoxModule
- ],
- providers: [ ],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
Specify the Initial Value
The CheckBox can be in one of the following states depending on its value:
You can turn on the enableThreeStateBehavior option to allow users to cycle through all three states.
The following code specifies the initial value as null
:
- <dx-check-box
- [value]="null"
- [enableThreeStateBehavior]="true"
- >
- </dx-check-box>
Handle the Value Change
Implement the onValueChanged event handler to perform an action when users click the CheckBox.
The code below notifies a user every time the CheckBox is checked.
- <dx-check-box ...
- (onValueChanged)="onValueChanged($event)"
- >
- </dx-check-box>
- import { Component } from '@angular/core';
- import notify from 'devextreme/ui/notify';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- onValueChanged(e) {
- if (e.value) {
- notify("The CheckBox is checked", "success", 500);
- }
- }
- }
If you have technical questions, please create a support ticket in the DevExpress Support Center.