How to detect when an item is removed from an Primeng autocomplete | Angular 6

Question

I am using a dynamic primeng autocomplete to let user select multiple items, but i am stuck on how to detect when user pressed the x to remove the item from the list. i know i can use the [(ngModel)] to detect value change, but my question is:

Is there a way like a callback function to detect the removed item when the x is pressed ?

as defined:

<p-autoComplete
            #autoCompleteObject
            [(ngModel)]="value" [suggestions]="filteredOptions"
            (completeMethod)="filterObjects($event)"
            [multiple]="true"
            [dropdown]="false"
            (onSelect)="emitData()"
            (onUnselect)="emitData()"
            placeholder="{{ label | i18n}}"
    >
        <ng-template let-item pTemplate="selectedItem">
            <div class="selected-item">
                <span >{{item[labelProperty]}}</span>
            </div>
        </ng-template>
        <ng-template let-item pTemplate="item">
            <div class="flex ">
                <span >{{item[labelProperty] | i18n}}</span>
            </div>
        </ng-template>

    </p-autoComplete>

as used

 <my-autocomplete-multiple [(ngModel)]="entryItems" label='type_here' [options]=allItems
                                          ngDefaultControl></my-autocomplete-multiple>

As the photo below, i circled the x with red color

score 0 · Accepted Answer · answered May 27 '19 at 17:04

According to the documentation, the onUnselect() callback method is invoked when a selected value is removed. The $event parameter is the unselected value in multiple mode.

Instead of binding emitData() to both the onSelect() and onUnselect() methods, I recommend using a separate method for each, like so:

(onSelect)="emitAddData($event)"
(onUnselect)="emitRemoveData($event)"

Then the one that's bound to onUnselect() can handle whatever you need to do when an item is removed.

How to detect when an item is removed from an Primeng autocomplete | Angular 6

1 Answers1