How we set focus on input element in angular7

Question

I have already imported ViewChild,ElementRef,Renderer in ts file but it's showing error of "ERROR TypeError: Cannot read property 'nativeElement' of undefined"

import { Component, OnInit,ViewChild,ElementRef,Renderer } from '@angular/core';

@ViewChild('usernameField') input : ElementRef;

this.usernameField.nativeElement.focusIn();

expect focus on input element.

your variable is `this.input`, NOT this.usernameField, the function is `focus()` NOT focusIn() — Eliseo, Aug 08 '19 at 10:01

Kiran Shinde · Answer 1 · 2019-08-08T09:46:06.997

1

I think this will work

Instead of

this.usernameField.nativeElement.focusIn();

try

this.usernameField.nativeElement.focus();

Or else post your html so that we can see what is wrong?

Just check your input tag #usernameField

Like

<input #usernameField

And change your ts

@ViewChild('usernameField') usernameField: ElementRef;

Also make sure you have added focus in ngAfterViewInit

Like

ngAfterViewInit() {
    this.usernameField.nativeElement.focus();
}

edited Aug 08 '19 at 09:46

answered Aug 08 '19 at 09:30

Kiran Shinde

5,732
4
24
41

Html code : – Om Prakash Aug 08 '19 at 09:44
sometime I use his trick I like to share check https://stackblitz.com/edit/angular-viewchild-static – Muhammed Albarmavi Aug 08 '19 at 09:59
@malbarmawi Frankly speaking, I don't like `setTimeout` hack :(, we can't trust on it. So I avoid to use it unless it is very necessary :P – Kiran Shinde Aug 08 '19 at 10:02
aggred the new version angular 8 has already fixed this trick by static property – Muhammed Albarmavi Aug 08 '19 at 10:05
but in all cases timeout function will run after **ngAfterViewInit** – Muhammed Albarmavi Aug 08 '19 at 10:10

Muhammed Albarmavi · Answer 2 · 2019-08-08T09:58:24.300

the input will be set when ngAfterViewInit run mean you can't use before like in ngOnInit() method the value at that time will be undefined

ngAfterViewInit() {
 this.usernameField.nativeElement.focus();
}

in angular verion 8+

@ViewChild('usernameField',{static : true}) usernameField: ElementRef;

ngOnInit() {
 this.usernameField.nativeElement.focus();
}

check this How should I use the new static option for @ViewChild in Angular 8?

check this live demo ‍♂️‍♂️

score 0 · Answer 3 · answered Aug 08 '19 at 10:13

0

Just inject ElementRef in constructor.

constructor(private el:ElementRef){ this.el.nativeElement.querySelector('input[type:"text"]').focus(); }

answered Aug 08 '19 at 10:13

Sufyan Shaikh

94
1
6

We can't give focus in `constructor`.... Because view is not available during constructor execution – Kiran Shinde Aug 08 '19 at 10:54
yes. please add same line of code into ngAfterViewInit() – Sufyan Shaikh Aug 08 '19 at 10:55

How we set focus on input element in angular7

3 Answers3