在 Angular 9 中单击按钮时自动聚焦在输入字段上

Question

I have add buttons at two separate places inside my component. On click of the button, the input field shows up. I have tried multiple ways to achieve this as follows:

Used autofocus attribute on the input field - as i have two buttons on the screen, autofocus does not seem to work.

Used . focus () method -

HTML File

<button (click) = "addUser()">Add User</button>

<input *ngIf="showInputField" #userName />

TS File

@ViewChild('userName') userName:ElementRef;
addUser() { this.showInputField=true; this.userName.nativeElement.focus(); }

In second case, i got the error "cannot read the property nativeElement of undefined", which is because the HTML loads after the execution of method completes.

Answer 1

You can implement AfterViewChecked in your component and then just remove that this.userName.nativeElement.focus() in addUser() method.

addUser() { 
  this.showInputField = true; 
}

ngAfterViewChecked(): void {
  if (this.showInputField) {
    this.userName.nativeElement.focus();
  }
}

Reference: https://stackblitz.com/edit/angular-ycuvth?file=src/app/autocomplete-auto-active-first-option-example.ts

Answer 2

It's probably not the best solution but you can use setTimeout() to wait for the boolean value to change.

addUser() {
  this.showInputField = true;
  setTimeout(() => this.userName.nativeElement.focus());
}

Seen here : https://stackoverflow.com/a/50014475/6444705