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

Issue

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);
      }
    });
  }

Solution

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;
    });
  }