CODEWITHSUNDEEP
javascriptangulartypescriptngx-chips
20.miles
20.miles

Reputation: 189

Angular - OnSelected function not works on tag-input

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

Upvotes: 1

Views: 2568

Answers (1)

Vandesh
Vandesh

Reputation: 6894

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.

Upvotes: 3

Related Questions