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

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.
Angular Material Checkbox Change Event

Reference

Angular Material checkbox

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us