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

Question

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.

This code is not saying very much unfortunately. What are you doing on changed method? — Claudio Redi
– Claudio Redi, Commented Jun 5, 2017 at 18:41
Nothing big yet, just log to check if changed($event) is called — user6808217
– user6808217, Commented Jun 5, 2017 at 18:54
could you try setting a different id AND name to each input? — Claudio Redi
– Claudio Redi, Commented Jun 5, 2017 at 19:00
It would be interesting if you can share an example on plunker on any other collaborative web tool. Your code is very simple, I don't see how it can't fail — Claudio Redi
– Claudio Redi, Commented Jun 5, 2017 at 19:05

Praneeth Reddy · Accepted Answer · 2017-06-05 19:05:23Z

1

<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>

answered Jun 5, 2017 at 19:05

Praneeth Reddy

4243 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related