CODEWITHSUNDEEP
angulartypescriptautofocus
ani
ani

Reputation: 516

set focus on button whenever it gets enabled

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 ?

Upvotes: 1

Views: 3294

Answers (2)

ani
ani

Reputation: 516

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();
        }
      });
  }
}

Upvotes: 2

Beka Kalandadze
Beka Kalandadze

Reputation: 600

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>

Upvotes: 1

Related Questions