Uncheck all check boxes created with *ngFor

Since the check boxes are not bound to a property (which could be reset to uncheck the box), you can use a template reference variable (e.g. #checkboxes):

<input #checkboxes type="checkbox" ...>
...
<button type="button" (click)="uncheckAll()"></button>

to retrieve the check boxes with ViewChildren in the code and uncheck each one:

@ViewChildren("checkboxes") checkboxes: QueryList<ElementRef>;

uncheckAll() {
  this.checkboxes.forEach((element) => {
    element.nativeElement.checked = false;
  });
}

See this stackblitz for a demo.

Tags:

Angular