Angular - OnSelected function not works on tag-input

Question

I'm using ngx-chips, but I can't implement the OnSelected function.

In my app.component.html I have this:

<div class="force-to-the-bottom">
  <tag-input [ngModel]="[]" 
  (onSelect)="onSelected($event)"
  (onRemove)="onItemRemoved($event)">
    <tag-input-dropdown
      [autocompleteItems]="items"
      [showDropdownIfEmpty]="true"
      [dynamicUpdate]="false"            
    >
    </tag-input-dropdown>
  </tag-input>
</div>

In my app.component.ts the functions are implemented in this simple way:

  onSelected($event: any) {
    console.log("Fire Selected");
  }

  onItemRemoved($event: any) {
    console.log("Fire Removed");
  }

The very strange thing is that onItemRemoved works properly, while onSelected not fire.

This is my StackBlitz

I can't understand what I'm doing wrong.

Can someone help me?

Thanks

Answer 1

I think you're just confusing between onAdd and onSelect events. Probably what you're looking for is the onAdd event of ngx-chips. Here's a link to the documentation for all the output events.

<tag-input [ngModel]="[]" (onAdd)="onAdded($event)" (onSelect)="onSelected($event)" (onRemove)="onItemRemoved($event)">
    <tag-input-dropdown
      [autocompleteItems]="items"
      [showDropdownIfEmpty]="true"
      [dynamicUpdate]="false"            
    >
    </tag-input-dropdown>
  </tag-input>

And the TS -

onAdded($event: any) {
    console.log("Fire Added");
  }

Here's a Stackblitz for demo

if you see the Stackblitz, your onSelect works fine as well. It's just an event which is fired when you click on the tag after it has been added to the input. Confusing naming, I know.