Try below method
Create a list like :
this.xyzlist = [{
id: 1,
value: 'option1'
}, {
id: 2,
value: 'option2'
}
];
Html :
<div class="checkbox" *ngFor="let list of xyzlist">
<label>
<input formControlName="interestSectors" type="checkbox" value="{{list.id}}"
(change)="onCheckboxChange(list,$event)">{{list.value}}
</label>
</div>
Then in it's component ts :
onCheckboxChange(option, event) {
if (event.target.checked) {
this.checkedList.push(option.id);
} else {
for (var i = 0; i < this.xyzlist.length; i++) {
if (this.checkedList[i] == option.id) {
this.checkedList.splice(i, 1);
}
}
}
console.log(this.checkedList);
}
create a list like :-
this.xyzlist = [
{
id: 1,
value: 'option1'
},
{
id: 2,
value: 'option2'
}
];
Html :-
<div class="checkbox" *ngFor="let list of xyzlist">
<label>
<input formControlName="interestSectors" type="checkbox" value="{{list.id}}" (change)="onCheckboxChange(list,$event)">{{list.value}}</label>
</div>
then in it's component ts :-
onCheckboxChange(option, event) {
if(event.target.checked) {
this.checkedList.push(option.id);
} else {
for(var i=0 ; i < this.xyzlist.length; i++) {
if(this.checkedList[i] == option.id){
this.checkedList.splice(i,1);
}
}
}
console.log(this.checkedList);
}
