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