0

https://stackblitz.com/edit/angular-material-wuzktn?file=app%2Fapp.component.css

<mat-checkbox (click)="$event ? masterSelect() : null"
  [checked]="selection.hasValue() && isAllSelected()"
  [indeterminate]="selection.hasValue() && !isAllSelected()" #check>
  Master select
</mat-checkbox>
{{selection.hasValue() && isAllSelected()}}
{{check.checked}}
<mat-checkbox *ngFor="let row of data" (change)="$event ? selection.toggle(row) : null"
  [checked]="selection.isSelected(row)">
  {{selection.isSelected(row)}}
</mat-checkbox>

When i click on "Master checkbox" i want to select all checkboxes below and it works but "Master checkbox" does not change value. When i inspect it mat-checkbox checked property is false. Also mat-checkbox-checked class is absent.

Mirko Markovic
  • 1
  • 2
  • 2
    use `(change)`: https://stackblitz.com/edit/angular-material-hrdzdo?file=app%2Fapp.component.html Also consider not calling methods in `[checked]`. Calling methods like that in template is fired on each change detection, which is often! The more content you have on your page, the more it will be called. In worst case it can seem like an infinite loop. Here's a sample with *ngFor: https://stackoverflow.com/questions/37876533/ngfor-running-an-infinite-loop-in-angular2 So more like a warning for the future that you won't try the same (if you did not know) :) – AT82 Oct 04 '18 at 10:46
  • I understand your suggestion about not calling methods in `checked`, but this module is not very complex so it doesn't worry me a lot :) But i don't understand how did `click -> change` made things work. If you have a moment, could you please try to explain ? – Mirko Markovic Oct 04 '18 at 12:25
  • `click` doesn't target the underlaying input as per: https://github.com/angular/material2/issues/1142#issuecomment-243738995 also if we look at the docs, `change` is what we are supposed to use :) https://material.angular.io/components/checkbox/api#MatCheckbox `@Output() change: Event emitted when the checkbox's checked value changes.` – AT82 Oct 04 '18 at 13:07
  • I didn't know this. Thank you very much for you're kind answer! – Mirko Markovic Oct 07 '18 at 15:24

0 Answers0