Is there an Angular2 way to focus on an input field?

Question

At the end of a method, I'll be clearing some fields, which is easy enough:

this.modelname.fieldname1 = "";
this.modelname.fieldname2 = "";

After clearing the fields, I'd like the cursor to appear in field1.

Is there an Angular2 way to do this, or do I just use old fashioned Javascript?

Answer 1

You can use a template reference variable in the first input, that will give you the ability to run .focus() on it.

In your template you can add #fieldName1 to your input tag (i.e. <input type="text" #fieldName1>)

in your controller do:

@ViewChild('fieldName1')
fieldName1: any;

now you can do this.fieldName1.nativeElement.focus() in the controller or fieldName1.focus() in the template.

Answer 2

It is not recommended to access dom directly in Angular. Angular provides Renderer (Angular2) and Renderer 2(Angular4) abstractions.

Here is how to do in Angular 2:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input #inp id="myInput" type="text">
      <button (click)="setFocus()">Set Focus</button>
    </div>
  `,
})
export class App {
  @ViewChild('inp') inp:ElementRef;

  constructor(private renderer: Renderer) {
  }

  setFocus() {
    this.renderer.invokeElementMethod(this.inp.nativeElement, 'focus');
  }
}

In Angular4 Renderer is depricated and Renderer2 is added. invokeElementMethod got removed and there is a discussion about it: https://github.com/angular/angular/issues/13818#issuecomment-297815331

Here is Angular 4 way:

 let onElement = this.renderer2.selectRootElement('#myInput');
 onElement.focus();