Set focus on <input> element

Modify the show search method like this

showSearch(){  this.show = !this.show;    setTimeout(()=>{ // this will make the execution after the above boolean has changed    this.searchElement.nativeElement.focus();  },0);  }

You should use HTML autofocus for this:

<input *ngIf="show" #search type="text" autofocus /> 

Note: if your component is persisted and reused, it will only autofocus the first time the fragment is attached. This can be overcome by having a global DOM listener that checks for autofocus attribute inside a DOM fragment when it is attached and then reapplying it or focus via JavaScript.

Here is an example global listener, it only needs to be placed in your spa application once and autofocus will function regardless of how many times the same fragment is reused:

(new MutationObserver(function (mutations, observer) {    for (let i = 0; i < mutations.length; i++) {        const m = mutations[i];        if (m.type == 'childList') {            for (let k = 0; k < m.addedNodes.length; k++) {                const autofocuses = m.addedNodes[k].querySelectorAll("[autofocus]"); //Note: this ignores the fragment's base element                console.log(autofocuses);                if (autofocuses.length) {                    const a = autofocuses[autofocuses.length - 1]; // focus last autofocus element                    a.focus();                    a.select();                }            }        }    }})).observe(document.body, { attributes: false, childList: true, subtree: true });

This directive will instantly focus and select any text in the element as soon as it's displayed. This might require a setTimeout for some cases, it has not been tested much.

import { Directive, ElementRef, OnInit } from '@angular/core';    @Directive({  selector: '[appPrefixFocusAndSelect]',})export class FocusOnShowDirective implements OnInit {      constructor(private el: ElementRef) {    if (!el.nativeElement['focus']) {      throw new Error('Element does not accept focus.');    }  }      ngOnInit(): void {    const input: HTMLInputElement = this.el.nativeElement as HTMLInputElement;    input.focus();    input.select();  }}

And in the HTML:

<mat-form-field>  <input matInput type="text" appPrefixFocusAndSelect [value]="'etc'"></mat-form-field>