How to handle mat-checkbox checked and unchecked event

user_19099386 0
Viewed 63

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

angular14 angular-material typescript
1 Answers

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

user_20630960
Related