En mi aplicación Angular 8, estoy tratando de establecer el enfoque en el botón mat tan pronto como se habilite. El botón de habilitación ocurre después de recibir la respuesta del servicio y validar algunas condiciones. Establecer el enfoque en el botón del tapete dinámicamente no funciona es mi vieja pregunta. Pero por alguna razón no funciona cuando lo usé en mi código original. Así que estoy buscando opciones como la directiva de enfoque automático que podría establecer el enfoque cuando se habilita el botón. ¿Es posible lograrlo?
Con las siguientes modificaciones a la respuesta proporcionada por Beka, pude establecer el foco en el botón
export class InputErrorsExample { @ViewChild('search', {read: ElementRef, static: false}) btn: ElementRef; // to access button in ts city = new FormControl(''); search: boolean = false; constructor(private http: HttpClient) {} fetchCityDetails() { this.http .get('https://countriesnow.space/api/v0.1/countries/population/cities') .subscribe(data => { if (data) { this.btn.nativeElement.disabled = false ; this.btn.nativeElement.focus(); } }); } }Puede ViewChild su elemento de botón:
export class InputErrorsExample { @ViewChild('search', { static: true }) btn: HTMLButtonElement; city = new FormControl(''); search: boolean = false; constructor(private http: HttpClient) {} fetchCityDetails() { this.http .get('https://countriesnow.space/api/v0.1/countries/population/cities') .subscribe(data => { if (data) { this.search = true; this.btn.focus(); } }); } } Pero también debe proporcionar la etiqueta adecuada #search en HTML
<button tabindex="0" #search mat-raised-button color="primary" [disabled] = "!search">Search</button>