1 import { Input, QueryList, Component, Output, AfterViewInit, EventEmitter, ViewChildren } from '@angular/core'
2 import { SuggestionComponent } from './suggestion.component'
5 selector: 'my-suggestions',
7 <ul role="listbox" class="p-0 m-0">
8 <li *ngFor="let result of results; let i = index" class="d-flex flex-justify-start flex-items-center p-0 f5"
9 role="option" aria-selected="true" (mouseenter)="hoverItem(i)">
10 <my-suggestion [result]="result" [highlight]="highlight"></my-suggestion>
15 export class SuggestionsComponent implements AfterViewInit {
16 @Input() results: any[]
17 @Input() highlight: string
18 @ViewChildren(SuggestionComponent) listItems: QueryList<SuggestionComponent>
19 @Output() init = new EventEmitter()
22 this.init.emit({ items: this.listItems })
23 this.listItems.changes.subscribe(
24 val => this.init.emit({ items: this.listItems })
28 hoverItem (index: number) {
29 this.init.emit({ items: this.listItems, index: index })