Angular 4 is the framework I am working with, and I have a series of checkboxes generated within a loop. When I individually click on them, the (change) function works as expected. However, when I try to use the select all checkbox, it does not trigger the change event on the individual checkbox inputs.
I have set the value of each input to sc.id. My intention was to add them to an array whenever the (change) event occurred, but this does not work when I choose select all.
If anyone can point out what I am doing wrong or has a better suggestion, please share your insights.
Sample HTML Code:
<input type="checkbox" class="custom-control-input" (change)="allSelected = !allSelected">
<div *ngFor="let sc of scs?.data">
<input type="checkbox" class="custom-control-input" [value]="sc.id" [checked]="allSelected" (change)="onSCSelect($event)">
</div>
Sample Component Code:
allSelected = false;
onSCSelect(event) {
console.log(event);
}
To recreate the issue, I have created a Plunker: https://embed.plnkr.co/TFxziXAEeutvLZ5rUXZS/