title: Set focus on <input> element
body: <p>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.</p>
  
  <p>I have tried a few ways found on StackOverflow with directive or so, but can't succeed.</p>
  
  <p>Here is the sample code:</p>
  
  <pre><code>@Component({
     selector: 'my-app',
     template: `
      &lt;div&gt;
      &lt;h2&gt;Hello&lt;/h2&gt;
      &lt;/div&gt;
      &lt;button (click) ="showSearch()"&gt;Show Search&lt;/button&gt;
      &lt;p&gt;&lt;/p&gt;
      &lt;form&gt;
        &lt;div &gt;
          &lt;input *ngIf="show" #search type="text"  /&gt;            
        &lt;/div&gt;
      &lt;/form&gt;
      `,
    })
    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();
    }
  </code></pre>
  
  <p>The search box is not set to focus.</p>
  
  <p>How can I do that?</p>