CODEWITHSUNDEEP
angularangular-material
Julia
Julia

Reputation: 227

Mat-Checkbox is displayed as checked even when checked property is set to false

I have the following in component.html:

<mat-checkbox (click)="$event.stopPropagation()" (change)="selectRow(row)"
      [checked]="selection.isSelected(row)">

in my component.ts I have:

public selection = new SelectionModel<any>(true, []);

public selectRow(row:any){
  if(this.isValid(row)){
     this.selection.toggle(row);
  }
}

if the row is not valid I do not want the checkbox to be checked. But even when my selection.selected-Array is empty and I am checking for selection.isSelected(row) in my template, the checkbox will be checked, after clicking on it.

Is there a workaround to prevent the checkbox from being checked, just by clicking on it, but rather rely on the return value it is receiving from isSelected(row)?

(This is the basic approach from the angular-material website. I couldn't finde any examples similar to what I am trying to do)

Upvotes: 0

Views: 1805

Answers (1)

Suren
Suren

Reputation: 81

I think this will help you

component.html

<mat-checkbox (change)="selectRow(row, $event)"></mat-checkbox>

component.ts

 public selectRow(event: MatCheckboxChange, row: any) {
   if (this.isValid(row)) {
      this.selection.toggle(row);
   } else {
      event.source.checked = false;
   }
 }

Upvotes: 1

Related Questions