Angular Material Checkbox Change Event

By Arvind Rai, 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.

Technologies Used
change Event
indeterminateChange Event
Complete Example
Run Application
Reference
Download Source Code

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>

Find a sample example.
HTML code:

<mat-checkbox [formControl]="item" (change)="onChangeDemo($event)"> Item </mat-checkbox>

Component code:

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>

Find a sample example.
HTML code:

<mat-checkbox [formControl]="allItems"
 [indeterminate]="isIndeterminate"
 (indeterminateChange)="onIndeterminateChange($event)" > 
   All Items 
</mat-checkbox>

Component code:

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>

app.component.ts

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);
  }
}

app.module.ts

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.