In my Angular 8 application i am trying to set focus on mat button as soon as it gets enabled . Enabling button happens after receiving response from service and validating few conditions . Setting focus on mat button dynamically not working is my old question . But for some reason it is not working when i used in my original code. So i am looking for options something like autofocus directive that could set focus when button gets enabled. Is it possible to achieve ?
With the following modifications to the answer provided by Beka i was able to set focus on button
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();
}
});
}
}
You can ViewChild your button element:
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();
}
});
}
}
But you have to also give proper tag #search in HTML
<button tabindex="0" #search mat-raised-button color="primary" [disabled] = "!search">Search</button>