Angular2 ngFor get only selected values

Question

I have a for loop that populates pre-defined hobbies as checkboxes. hobbies = ['Sport', 'Reading', 'Singing', 'Travelling', 'Movies', 'Cooking'];

<label *ngFor="let hobby of chunk" #checkbox class="mdl-checkbox mdl-js-checkbox">
    <input type="checkbox" name="hobbies" [value]="hobby" 
    [(ngModel)]="hobby.selected" (change)="populateMyHobbies(hobby)" class="mdl-checkbox__input">
    <span class="mdl-checkbox__label">{{hobby}}</span>
</label>

I have created an array my_hobbies: string[]=[]; in which I want to collect only the selected values i.e. ['Sport',..]

My function that collects those values is so far:

populateMyHobbies(value){

    this.my_hobbies.push(value)
    console.log(this.my_hobbies)
}

How can I achieve this? Right now on check and uncheck the values get added even same value multiple times.

Vivek Doshi · Accepted Answer · 2017-04-03T10:25:21.190

3

Template side :

<label *ngFor="let hobby of chunk" #checkbox class="mdl-checkbox mdl-js-checkbox">
    <input type="checkbox" name="hobbies" [value]="hobby" 
    [(ngModel)]="hobby.selected" (change)="populateMyHobbies(hobby,$event.target.checked)" class="mdl-checkbox__input">
    <span class="mdl-checkbox__label">{{hobby}}</span>
</label>

Component side :

selectedHobbies = [];

populateMyHobbies(value , status:boolean)
{
    if(this.selectedHobbies.indexOf(value) === -1 && status)
    {
        this.selectedHobbies.push(value);
    }
    else if(!status)
    {
        let index = this.selectedHobbies.indexOf(value);
        this.selectedHobbies.splice(index, 1);
    }
}

edited Apr 03 '17 at 10:25

answered Apr 03 '17 at 10:21

Vivek Doshi

46,471
9
84
100

Great! This is exactly what I wanted. Thanks a lot! – Thinker Apr 03 '17 at 10:24
@Nitish, Great , will you please accept the answer also? – Vivek Doshi Apr 03 '17 at 10:25
Yes sure! It's just that I have to wait for couple of minutes before I can accept it :0 – Thinker Apr 03 '17 at 10:25

score 0 · Answer 2 · edited May 23 '17 at 11:54

0

You'll want to pass the check event as an argument to populateMyHobbies, and then read event.target.checked to check whether the checkbox is checked or unchecked (Like the answer here).

You can check whether the array contains a value by checking if array.indexOf(value) returns -1, and remove them with array.splice(index,1) (As in this answer).

edited May 23 '17 at 11:54

Community

1
1

answered Apr 03 '17 at 10:26

Haem

879
6
13
24

Angular2 ngFor get only selected values

2 Answers2