No se recomienda acceder a dom directamente en Angular. Angular proporciona abstracciones de Renderer (Angular2) y Renderer 2 (Angular4).

Aquí está cómo hacerlo en 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'); } }

En Angular4, Renderer está en desuso y se agrega Renderer2. invoqueElementMethod se eliminó y hay una discusión al respecto: https://github.com/angular/angular/issues/13818#issuecomment-297815331

Aquí está Angular 4 vías:

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

Puede usar una variable de referencia de plantilla en la primera entrada, que le permitirá ejecutar .focus() en ella.

En su plantilla, puede agregar #fieldName1 a su etiqueta de entrada (es decir, <input type="text" #fieldName1> )

en tu controlador haz:

 @ViewChild('fieldName1') fieldName1: any;

ahora puede hacer this.fieldName1.nativeElement.focus() en el controlador o fieldName1.focus() en la plantilla.

Agregando una forma de renderer usando el decorador @ViewChild . Puede omitir el uso del atributo #id como lo menciona @julia arriba.

Se centrará en el elemento de entrada una vez que se inicialice la vista Html:

 <textarea #tasknote name="tasknote"> </textarea>

JS:

 export class MyComponent implements AfterViewInit { @ViewChild('tasknote') input: ElementRef; constructor(private renderer: Renderer2){ } ngAfterViewInit() { //using selectRootElement instead of deprecated invokeElementMethod this.renderer.selectRootElement(this.input["nativeElement"]).focus(); } }

para saber más sobre otras funciones del renderer , siga los documentos oficiales