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

Do you click on the chip added? `onSelect` is trigger when you click on a chip already added not when you select an item from the list. — ptesser, Oct 16 '19 at 15:24
If i click on the chip added it works. You are right. But what I wanted was that on item selected from dropdown starts the function — 20.miles, Oct 16 '19 at 15:28

score 3 · Accepted Answer · answered Oct 16 '19 at 15:29

3

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.

answered Oct 16 '19 at 15:29

Vandesh

6,368
1
26
38

Thank you. Everything works properly now. The problem is that on the onAdded I try to open a modal window and I get this error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng2-tag-input--focused: true'. Current value: 'ng2-tag-input--focused: false'. – 20.miles Oct 16 '19 at 15:38
1

Usually, `ExpressionChangedAfterItHasBeenCheckedError` are the nastiest to debug. But most of the times it would narrow down to you changing some value that is already being changed by a library. Should be another question with a lot more context, though. – Vandesh Oct 16 '19 at 15:42

Angular - OnSelected function not works on tag-input

1 Answers1