Angular 5 - ngFor with pipe and on click event

Question

I loop through an array of objects with *ngFor and apply a couple of pipes which filter the resulting list. One of the pipes uses a user input from a search field. When a user clicks one of the ngFor elements, the object is sent to a function and added to a "selection" array, to be used later.

<input type="search" [(ngModel)]="searchInput"> 
<a *ngFor="let item of items | firstFilter | inputFilter:searchInput; let i = index">
 <span (click)="send(item)"> send {{item.name}} </span>
</a>

I am trying to replicate the behaviour of a search field (like google) where the first result is highlighted and if the user presses enter while typing, it would trigger the same action as clicking on the result send(item) .

Highlighting is easy enough with ngClass checking if the input is not empty and i === 0.

What I got stuck with is the enter key press event.

• How would I listen to the event in the input field, from inside the ngFor loop, and only for the first result (i===0) ?
• Is there a way to record the list of objects (or at least the first one), after the pipes have been applied to the items array?
• How would you suggest to go about this?

Answer 1

Try this:

<input 
    type="search" 
    [(ngModel)]="searchInput"
    (keyup.enter)="selectFirstElement()"> 
<a *ngFor="let item of items | firstFilter | inputFilter:searchInput; let i = index">
 <span 
    (click)="send(item)"> send {{item.name}} </span>
</a>

Add a method selectFirstElement which will access the first element or the one which is highlighted when the user presses enter.