Angular Material Checkbox Change Event
March 30, 2021
Angular Material <mat-checkbox>
has two events that are change
and indeterminateChange
. The change
event is emitted when checked value of checkbox changes. The indeterminateChange
event is emitted when indeterminate value of checkbox changes.
Contents
Technologies Used
Find the technologies being used in our example.1. Angular 11.0.3
2. Angular Material 11.2.0
3. Node.js 12.5.0
4. NPM 6.9.0
change
Event
The change
event is emitted when checked value of checkbox changes. Find its declaration from Angular doc.
@Output() change: EventEmitter<MatCheckboxChange>
HTML code:
<mat-checkbox [formControl]="item" (change)="onChangeDemo($event)"> Item </mat-checkbox>
onChangeDemo(ob: MatCheckboxChange) { console.log("checked: " + ob.checked); }
indeterminateChange
Event
The indeterminateChange
event is emitted when indeterminate value of checkbox changes. Find its declaration from Angular doc.
@Output() indeterminateChange: EventEmitter<boolean>
HTML code:
<mat-checkbox [formControl]="allItems" [indeterminate]="isIndeterminate" (indeterminateChange)="onIndeterminateChange($event)" > All Items </mat-checkbox>
isIndeterminate = false; onIndeterminateChange(val: boolean) { console.log('Indeterminate: ' + val); }
Complete Example
app.component.html<h3>change</h3> <section> <mat-checkbox [formControl]="item" (change)="onChangeDemo($event)"> Item </mat-checkbox> </section> <h3>indeterminateChange</h3> <mat-checkbox [formControl]="allItems" (change)="onChkChange($event)" [indeterminate]="isIndeterminate" (indeterminateChange)="onIndeterminateChange($event)" > All Items </mat-checkbox> <ul> <li> <mat-checkbox [formControl]="item1" (change)="onChkChildChange($event)"> Item 1 </mat-checkbox> </li> <li> <mat-checkbox [formControl]="item2" (change)="onChkChildChange($event)"> Item 2 </mat-checkbox> </li> <li> <mat-checkbox [formControl]="item3" (change)="onChkChildChange($event)"> Item 3 </mat-checkbox> </li> </ul>
import {Component} from '@angular/core'; import { MatCheckboxChange } from '@angular/material/checkbox'; import { FormControl } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: 'app.component.html' }) export class AppComponent { isIndeterminate = false; item = new FormControl(); allItems = new FormControl(); item1 = new FormControl(); item2 = new FormControl(); item3 = new FormControl(); isAbcChecked = true; onChangeDemo(ob: MatCheckboxChange) { console.log("checked: " + ob.checked); } onChkChange(ob: MatCheckboxChange) { if (ob.checked) { this.item1.setValue(true); this.item2.setValue(true); this.item3.setValue(true); } else { this.item1.setValue(false); this.item2.setValue(false); this.item3.setValue(false); } } onChkChildChange(ob: MatCheckboxChange) { if (this.item1.value && this.item2.value && this.item3.value) { this.isIndeterminate = false; this.allItems.setValue(true); } else if ((!this.item1.value && !this.item2.value && !this.item3.value)) { this.isIndeterminate = false; this.allItems.setValue(false); } else { this.isIndeterminate = true; this.allItems.setValue(false); } } onIndeterminateChange(val: boolean) { console.log('Indeterminate: ' + val); } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ReactiveFormsModule } from '@angular/forms'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, ReactiveFormsModule, MatCheckboxModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Run Application
To run the application, find the steps.1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.
