Values from API show up in input box but not selected checkboxes of that values using ng-multipleselect-dropdown

Question

HTML file ->

<ng-multiselect-dropdown
     [placeholder]="'Select section'"
     [settings]="dropdownSettings"
     [data]="dropdownList"
     [(ngModel)]="getDropdownValues"
     formControlName="sections"
>
</ng-multiselect-dropdown>

.ts file ->

    this.clientMasterForm = this.formBuilder.group({
            sections: [this.getDropdownValues],
    });
    this.dropdownSettings = {
     singleSelection: false,
     idField: 'id',
     textField: 'sectionName',
     selectAllText: 'Select All',
     unSelectAllText: 'UnSelect All',
     allowSearchFilter: true,
    };
   onItemSelect(item: any) {
    let data = [];
    data.push(item);
    this.selectedDropDownData = data[0];
   }
  onSelectAll(items: any) {
   let data = [];
   data.push(items);
   this.selectedDropDownData = data[0];
  }

   this.getDropdownValues.push(JSON.parse(list).sectionName);

  this.clientMasterForm.get('sections').patchValue(this.getDropdownValues);

Here, I get values that are already added in drop-down patched that value as well but values that are shown in the input box is not selected in checkbox

Here, is my output ->

Here, I get output as mentioned in above image where I get data but not selected in checkbox

Answer 1

ng-multiselect-dropdown is looking for getDropdownValues to pre populate the values. So it should have the properties {id: , sectionName: } as mentioned in the dropdownSettings

instead of

this.getDropdownValues.push(JSON.parse(list).sectionName);

Try

this.getDropdownValues.push({
  id: JSON.parse(list).id,
  sectionName: JSON.parse(list).sectionName
});