webapp/src/app/@theme/components/search-input/search-input.component.ts

   1 import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
   2
   3 @Component({
   4   selector: 'ngx-search-input',
   5   styleUrls: ['./search-input.component.scss'],
   6   template: `
   7     <i class="control-icon ion ion-ios-search"
   8        (click)="showInput()"></i>
   9     <input placeholder="Type your search request here..."
  10            #input
  11            [class.hidden]="!isInputShown"
  12            (blur)="hideInput()"
  13            (input)="onInput($event)">
  14   `,
  15 })
  16 export class SearchInputComponent {
  17   @ViewChild('input') input: ElementRef;
  18
  19   @Output() search: EventEmitter<string> = new EventEmitter<string>();
  20
  21   isInputShown = false;
  22
  23   showInput() {
  24     this.isInputShown = true;
  25     this.input.nativeElement.focus();
  26   }
  27
  28   hideInput() {
  29     this.isInputShown = false;
  30   }
  31
  32   onInput(val: string) {
  33     this.search.emit(val);
  34   }
  35 }