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 ?

Answer 1

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>