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

Question

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 ?

Vega · Accepted Answer · 2017-08-25 19:52:49Z

7

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

edited Aug 25, 2017 at 19:52

Vega

28.8k28 gold badges121 silver badges151 bronze badges

answered Aug 25, 2017 at 18:38

rgk

8301 gold badge12 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

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

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