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
– Eliseo, Commented Aug 8, 2019 at 10:01

Kiran Shinde · Accepted Answer · 2019-08-08 09:46:06Z

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 8, 2019 at 9:46

answered Aug 8, 2019 at 9:30

Kiran Shinde

6,0326 gold badges30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Om Prakash Over a year ago

Html code :<input #usernameField type="password" id="password" name="Password" class="form-control" placeholder="Password" [(ngModel)]="Password" #loginpassword="ngModel" [ngClass]="{'is-invalid':loginpassword.errors && loginpassword.touched}" required minlength="5">

Muhammed Albarmavi Over a year ago

sometime I use his trick I like to share check 👉 stackblitz.com/edit/angular-viewchild-static 😅😅

Kiran Shinde Over a year ago

@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

Muhammed Albarmavi Over a year ago

aggred 😅👍 the new version angular 8 has already fixed this trick by static property

Muhammed Albarmavi Over a year ago

but in all cases timeout function will run after ngAfterViewInit 😃😃

Muhammed Albarmavi · Accepted Answer · 2019-08-08 09:58:24Z

0

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 🧙‍♂️🧙‍♂️

edited Aug 8, 2019 at 9:58

answered Aug 8, 2019 at 9:43

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Comments

Sufyan Shaikh · Accepted Answer · 2019-08-08 10:13:12Z

0

Just inject ElementRef in constructor.

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

answered Aug 8, 2019 at 10:13

Sufyan Shaikh

961 silver badge6 bronze badges

2 Comments

Kiran Shinde Over a year ago

We can't give focus in constructor.... Because view is not available during constructor execution

Sufyan Shaikh Over a year ago

yes. please add same line of code into ngAfterViewInit()

Collectives™ on Stack Overflow

How we set focus on input element in angular7

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related