Angular - Focus on input element that has ngIf

Question

I have two input elements that are shown under *ngIf conditions.

<input type="text" id="textInput" *ngIf="showTextInput">
<input type="number" id="numericInput" *ngIf="showNumericInput">

<button (click)="editButtonClicked($event)">

Clicking on the button should set focus to the appropriate input element.

editButtonClicked(event) {
  // Focus on either #textInput or #numericInput element
}

I've looked into ElementRef to give the html input elements tags like #textInput and then define them on the class for example:

@ViewChild('textInput') textInput: ElementRef;

...but apparently this does not work on elements that have *ngIf conditionals.

How can I focus on an input element, onClick of a button?

Answer 1

You could implement a super simple directive and have the desired effect.

html

<input type="text" autoFocus *ngIf="isInputVisible">

directive

import { Directive, ElementRef, OnInit } from "@angular/core";

@Directive({
  selector: "[autoFocus]"
})
export class AutoFocusDirective implements OnInit {
  private inputElement: HTMLElement;

  constructor(private elementRef: ElementRef) {
    this.inputElement = this.elementRef.nativeElement;
  }

  ngOnInit(): void {
    this.inputElement.focus();
  }
}

Working Demo:

https://stackblitz.com/edit/angular-ivy-vvgcch?file=src%2Fapp%2Fdirectives%2Fauto-focus.directive.ts

Answer 2

Yes @ViewChild will not work for elements who are under the control of a structural directive. There are two workaround that you can apply:

1. Remove the *ngIf directive and hide the element using CSS style: 'display:none' .

2. Select the element from the DOM using vanilla Javascript document.getElementById('someId'); and then focus the element.

I will prefer point 1.

Answer 3

you can also do this by template reference variable if that's what you are looking for

in html

<input #text type="text" id="textInput">
<input #number type="number" id="numericInput">

<button (click)="editButtonClicked($event, text, number)"> Click </button>

in ts

editButtonClicked(e, text, number){
    if(text.value) {
      text.focus()
    } else {
      number.focus()
    }
  }