Angular 8 focus on material input from method

Question

In my application I'am using Angular 8, reactive forms and material designee.

And in specific case, i need to set focus on one of my input filed from the methods.

While I research I found there was a way to do this with "ElementRef" there was a few example, this is the one of them: Angular 6 Reactive Forms : How to set focus on first invalid input

On this(or any) ElementRef I couldn't find focus() method(also there is no in the nativeElement.focus()).

Is there a way to this directly on formeControle, or any other way.

Answer 1

You cannot do it from formControl , however you can do it by using template variables in the template or @ViewChild in the component.

<mat-form-field>
  <input matInput #myInput>
</mat-form-field>
<-- You can focus from template this way -->
<button (click)="myInput.focus()">Focus</button>

To set the focus on component:

export class MyComponent {

  @ViewChild('myInput') input: MatInput;

  // You can focus from component this way
  focusMyInputFromComponent() {
     this.input.focus();
  }

}