angular ng-select and add event

Question

I'm using ng-select and on selected item fire the callback which does some logic. I face the problem, that (add) event does not fire when I choose the item from the list and I use the (change) event instead. But if I use one item twice from the list the change event not fire, because it's a change event.

<ng-select 
    [clearSearchOnAdd]="true"
    (change)="changeLeagueOwner($event)"
    (add)="test()" ---> nothing here
    [clearable]="false"
    [items]="adminLeagueMembers"
    bindLabel="display_name">
</ng-select>

score 3 · Answer 1 · answered Jul 17 '18 at 07:47

3

change event only get triggered when the value changes. If you want to fire an event if the same item select twice then use the click function,

<ng-select 
    [clearSearchOnAdd]="true"
    (click)="changeLeagueOwner($event)"
    (add)="test()" ---> nothing here
    [clearable]="false"
    [items]="adminLeagueMembers"
    bindLabel="display_name">
</ng-select>

answered Jul 17 '18 at 07:47

Sachila Ranawaka

39,756
7
56
80

1

if i use (click) event the callback function fire when i open the list, before i even choose some item from list – Bogdan Tushevskyi Jul 17 '18 at 07:50

score 2 · Answer 2 · answered Dec 17 '20 at 07:47

2

Just for completion's sake, the reason why (add) is not working in your example is described in the documentation:

(add) is fired when item is added while [multiple]="true". Outputs added item

answered Dec 17 '20 at 07:47

Arnaud P

12,022
7
56
67

score 0 · Answer 3 · answered Jul 17 '18 at 08:33

After some research i find a solution:

In order that (add) event not working, and i using (change) instead, i add ElementRef to list

<ng-select 
    #changeowner       
</ng-select>

Inside my component:

@ViewChild ('changeowner') changeOwnerRef: ElementRef;

and inside callback just set false to selected property of selected item

this.changeOwnerRef['itemsList']['_items'].forEach((item) => {
    for (const value in item) {
      if (value === 'selected') {
        item[value] = false;
      }
    }
});

angular ng-select and add event

3 Answers3