Set focus on <input> element

I am working a front-end application with Angular 5, and I need to have a search box hidden, but on click of a button, the search box should be displayed and focused.

I have tried a few ways found on StackOverflow with directive or so, but can't succeed.

Here is the sample code:

@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello</h2>
</div>
<button (click) ="showSearch()">Show Search</button>
<p></p>
<form>
<div >
<input *ngIf="show" #search type="text" />
</div>
</form>
`,
})
export class App implements AfterViewInit {
@ViewChild('search') searchElement: ElementRef;

show: false;
name:string;
constructor() {
}

showSearch(){
this.show = !this.show;
this.searchElement.nativeElement.focus();
alert("focus");
}

ngAfterViewInit() {
this.firstNameElement.nativeElement.focus();
}


The search box is not set to focus.

How can I do that?

Continue reading...