CODEWITHSUNDEEP
angularangular-ngselect
Bogdan Tushevskyi
Bogdan Tushevskyi

Reputation: 752

angular ng-select and add event

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>

Upvotes: 7

Views: 69040

Answers (3)

Arnaud P
Arnaud P

Reputation: 12627

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

Upvotes: 3

Bogdan Tushevskyi
Bogdan Tushevskyi

Reputation: 752

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;
      }
    }
});

Upvotes: 0

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41447

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>

Upvotes: 3

Related Questions