How to find out which ngl-lookup was clicked on?

Question

I'm generating ngl-lookup's in a for loop. For each ngl-lookup I will have a drop down which will define the source of the lookup function. For example, if user selects from a drop down value "cat", I want to display in a ngl-lookup all the cats names. For the second ngl-lookup from the list, if a user selects "dog", dogs names should be displayed.

I was trying to provide the object id to the lookup function but then I'm not getting the query which I'm entering into the search field.

Also, once I've chosen a value from the suggestion list, I would like to perform additional logic.

Any idea on how to solve it with Angular 4?

This doesn't work:

<div *ngFor="let myObject of myObjects">
      <ngl-lookup [lookup]="lookup(myObject.id)" [(pick)]="onPick(myObject.id, selectedValue)" debounce="0" placeholder="Search">
      </ngl-lookup>
</div>

Angular component:

lookup(query: string, objectId: number): string[] {
        if (!query) {
            return null;
        }

        let myObject = this.myObjects.find(x => x.id === objectId);
        return myObject.values.filter((d: string) => d.toLowerCase().indexOf(query.toLowerCase()) > -1);
    }

onPick(objectId: number, selectedValue: string) {
    this.myObjects.find(x => x.id === objectId).value = selectedValue;
    this.performAdditionalLogic();

}

Answer 1

<ngl-lookup [lookup]="lookup(myObject.id)" [(pick)]="onPick(myObject.id, selectedValue.value)" debounce="0" placeholder="Search" #selectedValue> </ngl-lookup> // try using a template reference

Sorry for bad edit on mobile