Angular 4.x: How to bind table checkbox with button in Angular 4.x?

Question

I am new in Angular 4.x. I have a html table. Every row has a checkbox and a checkbox. I want to bind checkbox with button, so that when the checkbox is checked, the button is enabled, and when the checkbox in unchecked, the button is disabled: here is a sample of code, but it is not working :

  <tbody>
    <tr *ngFor="let item of mf.data; let i = index;">
      <td><input type="checkbox" value="" [checked]="item.checked"></td>

      <td>{{i}}</td>
      <td>{{item.name}}</td>
      <td>{{item.email}}</td>
      <td>{{item.age}}</td>
      <td>{{item.city | uppercase}}</td>
      <td><button type="button" class="btn btn-success" [disabled]="item.checked">start</button></td>
    </tr>
  </tbody>

Can you help me to make this work please ?

Sachila Ranawaka · Accepted Answer · 2017-05-22 06:38:01Z

9

use [(ngModel)]. Because check will not enable the two-way binding. It just handles One-way changing

<td><input type="checkbox" value="" [(ngModel)]="item.checked"></td>

make the button disable not equal to item check, like this [disabled]="!item.checked"

<td><button type="button" class="btn btn-success" [disabled]="!item.checked">start</button></td>

answered May 22, 2017 at 6:38

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

Comments

borkovski · Accepted Answer · 2017-05-22 06:40:23Z

3

Currently your checkbox only binds one way. To apply changes by clicking it, add the following to your input tag: (change)="item.checked = !item.checked"

answered May 22, 2017 at 6:40

borkovski

9788 silver badges12 bronze badges

Comments

Jdotero · Accepted Answer · 2018-05-29 15:32:00Z

You don't need checked directive. Just binding the model is enough.

  <tbody>
<tr *ngFor="let item of mf.data; let i = index;">
  <td><input type="checkbox" [(ngModel)]="item.checked"></td>

  <td>{{i}}</td>
  <td>{{item.name}}</td>
  <td>{{item.email}}</td>
  <td>{{item.age}}</td>
  <td>{{item.city | uppercase}}</td>
  <td><button type="button" class="btn btn-success" [disabled]="!item.checked">start</button></td>
<pre>{{item.checked}}</pre>
</tr>
  </tbody>

  <tbody>
    <tr *ngFor="let item of mf.data; let i = index;">
      <td><input type="checkbox" value="" [checked]="item.checked"></td>

      <td>{{i}}</td>
      <td>{{item.name}}</td>
      <td>{{item.email}}</td>
      <td>{{item.age}}</td>
      <td>{{item.city | uppercase}}</td>
      <td><button type="button" class="btn btn-success" [disabled]="item.checked">start</button></td>
    </tr>
  </tbody>

Yashwardhan Pauranik · Accepted Answer · 2019-07-18 06:44:50Z

0

Use this:

    <td>
       <div class="togglebutton">
          <label>
            <input type="checkbox" [checked]="record.status" (change)="changeStatus(record.id,$event)">
             <span class="toggle"></span>

            </label>
       </div>
    </td>

edited Jul 18, 2019 at 6:44

Yashwardhan Pauranik

5,5865 gold badges45 silver badges78 bronze badges

answered Jan 9, 2019 at 10:00

Abdus Salam Azad

5,59252 silver badges37 bronze badges

Collectives™ on Stack Overflow

Angular 4.x: How to bind table checkbox with button in Angular 4.x?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related