How to show data from multiple checkbox in Array? Angular app

Question

I have a problem with show checked data in Array in Angular app. When I click on the checkbox I get a true value, but data not show. Data has null value.

StackBlitz: https://stackblitz.com/edit/angular-ivy-kt2uag?file=src%2Fapp%2Fapp.component.ts

code:

component.ts

I use this function:

fetchSelectedItems() { this.selectedItemsList = this.checkboxesDataList.filter((value, index) => { console.log(value.selected); return value.selected === true; }); } fetchCheckedIDs() { this.checkedIDs = []; this.checkboxesDataList.forEach((value, index) => { if ((value.selected)) { this.checkedIDs.push(value.code); } }); } 

Answer 1

You are calling fetchCheckedIDs() just on ngOnInit(){}. Call the method in your fetchSelectedItems() too:

 fetchSelectedItems() { this.fetchCheckedIDs(); //call here this.selectedItemsList = this.checkboxesDataList.filter((value, index) => { console.log(value.selected); return value.selected === true; }); }