Angular 6 checkbox triggers change when ngModel value is true

Question

I have ngFor and inside I have checkbox.

<input type="checkbox" name="checkbox-{{i}}"
  (change)="clickOn(test.fav)" [(ngModel)]="test.fav" />

clickOn() event triggers, when test.fav value is true. Anybody used to have this problem? Regards.

Answer 1

Use reference of checkbox element and pass the value or use ngModelChange

Replace the below code

<input type="checkbox" name="checkbox-{{i}}" (change)="clickOn(test.fav)" [(ngModel)]="test.fav" />

by

<input type="checkbox" name="checkbox-{{i}}" #test 
     (change)="clickOn(test.value)" [(ngModel)]="test.fav" />

or

 <input type="checkbox" name="checkbox-{{i}}" #test 
     (ngModelChange)="clickOn($event)" [(ngModel)]="test.fav" />