Angular2: undefined errors when trying to set focus to an input field using @ViewChild annotation

Question

I have a input field which I set focus to when my view loads in the following way:

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

this works fine from within the ngAfterViewInit() function but when I try to do it in another part of my view when a button is clicked I get an exception saying that focusInput is undefined. After reading up a bit it seems like ngIf could be the cause of this as the part of the view that contains the input field #focusInput gets shown or hidden using ngIf. Is there any way I can check using ngOnChanges() or anything else whether the #focusInput input field is currently shown and if it is set focus to it?

Try to use setter http://stackoverflow.com/questions/42534524/access-template-reference-inside-a-template-element/42540586#42540586 — yurzui, Mar 27 '17 at 09:03
@yurzui I don't completely understand. So I can set the reference to that html input field before I set focus on it using a setter function? — user2094257, Mar 27 '17 at 09:36
Create plunker that demonstrates your problem. As you said you use ngIf. So that is why your reference null when ngIf returns false. `setter` will help you to recognize whether reference undefined or not — yurzui, Mar 27 '17 at 09:39
The thing is when I try to set focus that element is displayed so that won't help. It seems it's only defined in ngAfterViewInit(). Is there a way for me to re-initialize it using a setter so it's not undefined?hel — user2094257, Mar 27 '17 at 09:41
In setter you will get value. If it is not undefined you can set focus — yurzui, Mar 27 '17 at 09:43
THe issue is I know ngIf will return true as I can see the component rendered but somewhere it becomes undefined. I manage to set focus to it when the view loads for the first time but after that it becomes undefined... So My issue is not determining when it's undefined as it shouldn't be undefined if it's displayed right? — user2094257, Mar 27 '17 at 09:45

score 1 · Answer 1 · answered May 17 '18 at 09:15

It happens when you have ngIf or ngFor directives inside your template and your input can not be linked to focusInput property you added inside your class. Instead use this code:

<input type="text" #myInput />
{{ myInput.focus() }}

Just add {{ myInput.focus() }} right after input inside template

score 0 · Accepted Answer · edited May 23 '17 at 11:54

0

The simplest solution turned out to be writing a custom focus attribute directive. This helped a lot:

How to move focus on form elements the Angular way

edited May 23 '17 at 11:54

Community

1
1

answered Mar 27 '17 at 11:57

user2094257

1,645
4
26
53

score 0 · Answer 3 · answered Jan 29 '21 at 14:17

I know its very late to answer your question. If you want focus after any click or view change so for this you need to call change detector. You can call change detection after your view change or a click by calling detectchanges().

`constructor(private detRef:ChangeDetectorRef) {}
  @ViewChild('name_input') input: ElementRef;

    private buttonClick(): void {
      this.detRef.detectChanges();
      this.input.nativeElement.focus();
    }`

Hope this will helpful.

Angular2: undefined errors when trying to set focus to an input field using @ViewChild annotation

3 Answers3