Ion-input and the nativeElement

Ionic Framework ionic-v3
1

Hi!

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:

@ViewChild("locationSearch")
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?

Thanks!

2

Try changing

@ViewChild("locationSearch")

To

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

9 Likes
3

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

4

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

5

It worked, sorry, my template was bad.

6

The future thanks you.