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.