CODEWITHSUNDEEP
angularngfor
Randika Peiris
Randika Peiris

Reputation: 147

Using *ngFor and $event based checkbox

I'm trying to generate a lists of checkboxes using ngfor. Everything works fine but if I check the 1st checkbox on the bottom card row it seems to think I checked the 1st box of the 1st card row.

Here's a small gif that demonstrates the issue. http://www.giphy.com/gifs/dQpr1jkRci0DaZoLMl

<div *ngFor="let task of taskdata" class="card" >

    <div *ngIf="task.task1" class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="customCheck1" 
                (change)="getdataonID($event.target.checked)" [checked]="task.isDone1">
          <label class="custom-control-label" for="customCheck1">{{task.task1}}</label>
    </div>

Upvotes: 0

Views: 512

Answers (3)

Alok G.
Alok G.

Reputation: 1548

Check this exmaple, I hope it will work for you. Instead of the event I am calling the method and passing element data as param and performing calculations in the component.

Upvotes: 0

JB Nizet
JB Nizet

Reputation: 691715

All your checkboxes have the same ID. And clicking on any of the labels is supposed to select the checkbox identified by customCheck1. But there are many of them. So that can't work.

There might be other problems, but you didn't post all the relevant code.

Upvotes: 3

Sajeetharan
Sajeetharan

Reputation: 222582

use the [(ngModel)] with the checked attribute

 <input type="checkbox" class="custom-control-input" id="customCheck1" 
 (change)="getdataonID($event.target.checked)"  [(ngModel)]="task.isDone1">

Upvotes: 2

Related Questions