client/src/app/header/suggestions.component.ts

   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 () {
  22     this.init.emit({ items: this.listItems })
  23     this.listItems.changes.subscribe(
  24       val => this.init.emit({ items: this.listItems })
  25     )
  26   }
  27
  28   hoverItem (index: number) {
  29     this.init.emit({ items: this.listItems, index: index })
  30   }
  31 }