CODEWITHSUNDEEP
angularcheckboxangular-ngmodelngfor
rgk
rgk

Reputation: 810

How to get checkbox values in ngFor ? In Angular 2+?

Hy, I need collect selected values through checkbox check's which are in ngFor. Below is the code.

 <tr *ngFor="let item of items; let index = index;">
    <td>{{item.bed}}</td>
    <td>{{item.size}}</td>
    <td>{{item.name}}</td>
    <td>
      <input type="checkbox"
             name="domain-{{item.bed}}"
             [(ngModel)]="items[index].id"
      >
    </td>
  </tr>
<button (click)="OnSelect()">Select</button>

In component, Im trying to access like this.

component.ts
items = [];
ngOnInIt() {
  this.items = somepromise.then((items) => this.items );
}
OnSelect() {
  console.log(this.items);
}

On Select, I see all values of items printed instead of selected check box values. Any thoughts ?

Upvotes: 2

Views: 4473

Answers (1)

rgk
rgk

Reputation: 810

 <td>
    <input type="checkbox"
       name="item-{{item.bed}}"
       #myItem
      (change)="OnCheckboxSelect(item.id, $event)"
     >
 </td>

In component:

@ViewChildren('myItem') item;
selectedIds = [];

  OnCheckboxSelect(id, event) {
    if (event.target.checked === true) {
      this.selectedIds.push({id: id, checked: event.target.checked});
      console.log('Selected Ids ', this.selectedIds);
    }
    if (event.target.checked === false) {
      this.selectedIds = this.selectedIds.filter((item) => item.id !== id);
    }
  }

I was able to get what I want in this way.

Upvotes: 7

Related Questions