How to add json data to mat options values in angular 14

Issue

Trying to change the mat options checkbox value by json data to but not able to change.I have three buttons, Each button have josn data file.If i click the New Data 1 button i want to set the that value for selectOptions, Same for others. How to do it and How to resolve this issue.

app.component.ts:

addData(url) {
     this.httpClient.get<any>(url).subscribe((data) => { 
     this.selectOptions = data;
  });
  }

Demo : https://stackblitz.com/edit/angular-ivy-kunrso?file=src%2Fapp%2Fapp.component.html

Solution

Instead of ngOnInit(), you should use ngOnChanges that will capture the latest value of selectedOptions to mauto.component.ts.

Inside the ngOnChanges(), you need to patch the value of selectControl, so that filteredData is updated correctly, since your dropdown render's the checkbox options from filteredData, not from rawData. Also, need to reset selectData to remove all the chips.

ngOnChanges(changes: SimpleChanges): void {

    if (changes.data && changes.data.currentValue) {
      this.rawData = [];
      console.log(changes.data.currentValue)
      this.data.forEach((item: string) => {
        this.rawData.push({ item, selected: false });
      });

      this.selectData = [];
      this.selectControl.setValue(this.rawData)
      console.log(this.selectControl)
    }
 
  }

Demo

Answered By - Nehal