CODEWITHSUNDEEP
htmlcssangular
user6808217
user6808217

Reputation: 49

Angular2: input checkbox with label doesn't work in table

I need to create table with independent checkboxes in one of the columns. The button is styled as here (it forces input inside label). My problem is that it doesn't change states when is located in table. (Beyond table works ok)

<table>

    <thead>
       <tr>
         <th>Check</th>
       </tr>
    </thead>

    <tbody>
     <tr *ngFor="let item of items">
       <td>
         <label class="switch">
           <input type="checkbox" (click)="changed($event)">
           <div class="slider"></div>
         </label>
       </td>
     </tr>
    </tbody>

</table>

I also tried to add specific id to each input but without success.

Upvotes: 2

Views: 534

Answers (1)

Praneeth Reddy
Praneeth Reddy

Reputation: 424

<table>

<thead>
   <tr>
     <th>Check</th>
   </tr>
</thead>

<tbody>
 <tr *ngFor="let item of items">
   <td>
     <label class="switch">
       <input type="checkbox" (change)="changed($event)" >

       <input type="checkbox" (change)="changed($event, item)" [checked]="item.checkbox">
       <div class="slider"></div>
     </label>
   </td>
 </tr>
</tbody>

Upvotes: 1

Related Questions