Checkbox Inside Ngfor, Only First Checkbox Is Getting Selected & Deselected Everytime When Clicking Any Other Checkbox

checkbox inside ngFor, only first checkbox is getting selected & deselected everytime when clicking any other checkbox

Check value for name, you've used different for each element: num.value. This should be the same so that it works:

<div *ngFor="let num of count" class="m-b-20">
    <div class="checkbox"> <input type="checkbox" name="checkbox-list" [(ngModel)]="num.checked" (click)="clicked(num)" ngDefaultControl/> 
    <label for="check"></label> </div>{{num.checked}}
</div>

checkbox-list is the new name

checkbox inside ngFor, only first checkbox is getting selected & deselected everytime when clicking any other checkbox

Check value for name, you've used different for each element: num.value. This should be the same so that it works:

<div *ngFor="let num of count" class="m-b-20">
    <div class="checkbox"> <input type="checkbox" name="checkbox-list" [(ngModel)]="num.checked" (click)="clicked(num)" ngDefaultControl/> 
    <label for="check"></label> </div>{{num.checked}}
</div>

checkbox-list is the new name

Related Topics