Angular7 Ng-Multiselect-dropdown Its Adding Dynamically but not updating

Question

  <ng-multiselect-dropdown
            [settings]="settings"
            name="cuisine"
            [placeholder]="'select '"
            [(ngModel)]="data1"
            [data]="Cusinesoptions"
            formControlName="cuisine"``
            id="cuisineselected"
            
            (onSelect)="onItemSelect($event)"
            
    (onDeSelect)="onItemDeSelect($event)"
    
            style="margin-left: 20px; width: 50%;
                ">
            </ng-multiselect-dropdown>

///////////////////////////////////////////////

 this.settings = {
        singleSelection: false,
        idField:'CuisinesName',
        textField:'CuisinesName',
        allowSearchFilter: true,
        limitSelection: -1,
        clearSearchFilter: true,
        maxHeight: 197,
        itemsShowLimit: 3,
        closeDropDownOnSelection: false,
        showSelectedItemsAtTop: false,
        defaultOpen: false,
        enableCheckAll : false,
      };

/////////////////////////////////////////////

  this.outletService.listCuisines().subscribe(
      response => {
        console.log("cuisine list",response);
        
         this.appspinner.spinnerAlert('hide');
         debugger
        this.Cusinesoptions = response.body['cusinies'];
        });

//////////////////////////////////////////////////////

 onSelectAll(items: any) {
      console.log(items);
    }

  onItemSelect(item: any) {
   
   
    console.log('item', item);
   

  }


  onItemDeSelect(items: any){
    
       console.log('item', item);
 }

////////////////////////////////

I tried -Update in single Ng-multiselect Its not Working .I displayed in one multiselct box , And upadated in another box. But that is not condition ... , I tried

<angular-ng-autocomplete>
<angular2-multiselect-dropdown>
<ng-multiselect-dropdown>
<ejs-multiselect>

No one Fit to Angular7 . I need Multiselect -Dropdown

Insert,list,update,delete

in Single box .

Answer 1

My solution was : in .ts:

@ViewChild('multiSelect') multiSelect;

in .html :

<ng-multiselect-dropdown
     #multiSelect
     [data]="data"
     ...
></ng-multiselect-dropdown>

So when i update data, then i do :

this.multiSelect['_data'].push(newDataRow);

So we are directly accessing the data in the ng-multiselect-dropdown component Be sure that your newDataRow have an "id" and "text" attribute.

Answer 2

I achieve this with Reactive forms.

<ng-multiselect-dropdown
  [placeholder]="placeholder"
  [settings]="dropdownSettings"
  [data]="options"
  [formControl]="control"
>
</ng-multiselect-dropdown>

And maybe you can use valueChanges for selected items.

control = new FormControl(null);
ngOnInit(): void {
   this.control.valueChanges.subscribe((value) => {
      console.log(value)
   });
}

Don't forget to unsubscribe!