How to handle mat-checkbox checked and unchecked event

Question

Trying to get the value of checked and unchecked checkbox values when clicking on the every checkbox. How to do it? How to handle the mat-checkbox events? If anyone knows please help to find the solutions.

  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
  <mat-option
    *ngFor="let data of filteredData | async"
    [value]="data"
    [disabled]="isDisable(data)"
  >
    <div (click)="optionClicked($event, data)">
      <mat-checkbox
        [checked]="data.selected"
        (change)="toggleSelection(data)"
        (click)="$event.stopPropagation()"
        [disabled]="isDisable(data)"
      >
        {{ data.item }}
      </mat-checkbox>
    </div>
  </mat-option>
</mat-autocomplete>

Demo: https://stackblitz.com/edit/angular-ivy-ebuzba?file=src%2Fapp%2Fshared%2Fmauto%2Fmauto.component.ts

score 0 · Answer 1 · answered Sep 06 '22 at 16:18

Example

 <mat-checkbox
    [checked]="data.selected"
    (change)="toggleSelection($event, data)"
    [disabled]="isDisable(data)">
      {{ data.item }}
  </mat-checkbox>


import { MatCheckboxChange } from '@angular/material/checkbox'

toggleSelection(checkbox: MatCheckboxChange, data: YourDataType) {

  // Where checkbox value would be something like
  // { source: MatCheckbox, checked: true }

  if (checkbox.checked) {
    // Do stuff;
  }
}

NOTE: If you want to update the checkbox value programmatically, you should use either [(ngModel)] or Angular Reactive FormControl

How to handle mat-checkbox checked and unchecked event

1 Answers1