ngModel not updated in ng-select component

Question

I have ng-select component in my code and it initializes as below in HTML.

<ng-select id="SelectType" placeholder="Student" [multiple]="true"
              [items]="students" groupBy="type" [selectableGroup]="false" [(ngModel)]="selectedstudents"
              [closeOnSelect]="false" bindLabel="name" (add)="onSelectFirstDropdown($event)"
              (remove)="onRemoveFirstDropdown($event.value)">

I have select multiple students from the dropdown and after doing some modifications in the ts file I want to remove one student in "selectedstudents" List. But when I remove the item from the list it's not updated to the ng-select and item still remain selected in the dropdown. How can I solve this issue? Thank you

Add more info, show your classes. Suppose ChangeDetectionStrategy is onPush... — Anton Marinenko, May 27 '20 at 13:06
How did you remove an item from selectedstudents? Do you get an new array or is it the same instance? If same instance, then create a new with: this.selectedstudents = [...this.selectedstudents]; — Marc, May 27 '20 at 13:20

score 0 · Answer 1 · answered May 18 '21 at 07:30

To add/remove items dynamically at runtime from the ngModel, you have to create a new instance of the model object then you can add/remove items from it; otherwise, angular not detect the changes.

Create a new instance of selectedstudents -

this.selectedstudents = [...this.selectedstudents];

Remove items from selectedstudents -

this.selectedstudents.pop()

ngModel not updated in ng-select component

1 Answers1