How to set focus on Input Angular2 Form

Question

I have an Input in angular2/Ionic2 form

<input #input1 autofocus type="text" [ngModel]='searchString' name='searchText' required minlength="3" (ngModelChange)="onInputChange($event)">

I want to set focus on it when page/route change.

nativeElement.focus() is not working as @ViewChild(#input1) gives angular2 element not native html element.

it does give nativeElement can you replicate this issue in stacblitz — Rahul Singh, Jan 10 '18 at 09:11
https://stackoverflow.com/questions/32693061/how-can-i-select-an-element-in-a-component-template — Suraj Rao, Jan 10 '18 at 09:13

Luca Taccagni · Answer 1 · 2018-01-10T09:31:37.833

1

what is 'autofocus' for? is not necessary

@ViewChild ('input1') el: ElementRef; // the # is used in html only

....

async ngOnInit() {
  setTimeout(() => {
    this.el.nativeElement.focus(); // with ElementRef should work, but if you encounter any problem just use 'any' type
  }, 1000);
}

edited Jan 10 '18 at 09:31

answered Jan 10 '18 at 09:13

Luca Taccagni

1,059
6
23

I have to wrap this.el.nativeElement.focus(); inside setTimeout – raju Jan 10 '18 at 09:19
Edited for setTimeout (1 sec) – Luca Taccagni Jan 10 '18 at 09:31
Also it is better to use ngAfterViewInit – raju Jan 10 '18 at 09:32
Do it on ngAfterViewInit event and no need in setting the timer! – Alex Klaus Nov 13 '18 at 03:25

How to set focus on Input Angular2 Form

1 Answers1