Ion-input and the nativeElement


So I don’t want to post masses of code here. Basically I have an ion-input element.

<ion-input #locationSearch required formControlName="location" type="text"></ion-input>

How do I get hold of the native element?

I have used a class property:

private locationSearchRef: ElementRef;

And thrown it into various types of lifecycle hook with ionic and angular. For example I have tried these ionViewDidLoad or ngAfterViewInit

Utimately what happens is that console.log(this.locationSearchRef) shows me that I am dealing with a TextInput but in all cases, console.log(this.locationSearchRef.nativeElement) returns undefined.

Can anyone point me in the right direction?


Try changing



@ViewChild('locationSearch', { read: ElementRef })


From the bottom of my heart, thank you wayback :slight_smile:

This solution not working for me to read the ElementRef of ion-input, anything changed later?

It worked, sorry, my template was bad.