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.