Angular 6 how to pass selected checkbox to ngModel

Question

I have problem with pass selected checkbox (which is iterated) to ngModel.

    <label class="btn btn-outline-secondary" 
     *ngFor="let test of tests"  >
      <input type="checkbox">
    </label>

in ts I have model:

     testData = <any>{};

this.tests = [{
    id: 1, name: 'test1' 
  },
  {
    id: 2, name: 'test2' 
  },
  {
    id: 3, name: 'test3' 
  },  
]

I tried with ngModel and ngModelChange, but still have problem with display selected checkbox. How can I do this?

score 9 · Accepted Answer · edited Sep 11 '18 at 15:01

9

use [(ngModel)]="test.name"

 <label class="btn btn-outline-secondary" *ngFor="let test of tests"  >
  <input type="checkbox" [(ngModel)]="test.selected" > {{test.name}} - {{test.selected}}
</label>

Demo

edited Sep 11 '18 at 15:01

Hardik Patel

3,868
1
23
37

answered Sep 11 '18 at 10:43

Sachila Ranawaka

39,756
7
56
80

1

But how to find check uncheck from here? – MukulSharma Sep 11 '18 at 10:57

score 5 · Answer 2 · answered Sep 11 '18 at 11:01

I suggest you add a property in your model and bind it in the template.

<label class="btn btn-outline-secondary" *ngFor="let test of tests"  >
    <input type="checkbox" [(ngModel)]="test.isChecked">
</label>

this.tests = [{
    id: 1, name: 'test1', isChecked: false
  },
  {
    id: 2, name: 'test2', isChecked: true
  },
  {
    id: 3, name: 'test3', isChecked: false 
  },  
]

Angular 6 how to pass selected checkbox to ngModel

2 Answers2