Angular CheckBox - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

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.

View on GitHub

Create a CheckBox

Add DevExtreme to your Angular application and use the following code to create a CheckBox component:

app.component.html
app.component.ts
app.module.ts
  • <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:

  • checked
    the value is true

  • unchecked
    the value is false

  • indeterminate
    the value is undefined or null

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:

app.component.html
  • <dx-check-box
  • [value]="null"
  • [enableThreeStateBehavior]="true"
  • >
  • </dx-check-box>

Configure the CheckBox

To label the CheckBox and add a pop-up hint, specify the text and hint properties.

You can also use the iconSize property to specify a custom width and height for the CheckBox.

app.component.html
  • <dx-check-box ...
  • text="Approve"
  • hint="Approve"
  • iconSize="25"
  • >
  • </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.

app.component.html
app.component.ts
  • <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);
  • }
  • }
  • }