]>
Commit | Line | Data |
---|---|---|
6af662a5 RK |
1 | import { Input, QueryList, Component, Output, AfterViewInit, EventEmitter, ViewChildren } from '@angular/core' |
2 | import { SuggestionComponent } from './suggestion.component' | |
3 | ||
4 | @Component({ | |
5 | selector: 'my-suggestions', | |
6 | template: ` | |
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> | |
11 | </li> | |
12 | </ul> | |
13 | ` | |
14 | }) | |
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() | |
20 | ||
21 | ngAfterViewInit () { | |
6af662a5 RK |
22 | this.listItems.changes.subscribe( |
23 | val => this.init.emit({ items: this.listItems }) | |
24 | ) | |
25 | } | |
26 | ||
27 | hoverItem (index: number) { | |
28 | this.init.emit({ items: this.listItems, index: index }) | |
29 | } | |
30 | } |