HTML tag input on ion-input

Ionic Framework ionic-v3
1

Hello,

I have to retrieve the html tag “input” of a ion-input for use the autocomplete of places provides by google.

I try to use the query selector on my ion-input elementRef but my result is always “null”, maybe i don’t have the right query selector tag ?

this is my code : for my .ts file

  @ViewChild('inputStart', { read: ElementRef }) inputStart: ElementRef;
  inputStartElem: HTMLInputElement = null;

  this.inputStartElem = this.inputStart.nativeElement.querySelector('input');

and my code for .html file :

        <ion-input id="inputStart" #inputStart ></ion-input>

So this.inputStartElem is always null.

If someone can help me on this :slight_smile:

Thanks a lot.

2

The .ts code you are writing is for your parent component, the <ion-input> is a child component of that inside its view. Now, depending on where you are trying to reference it in code, the child component might not be existing yet. So to make sure every child has been properly instantiated and initialised, you have to hook on to the parent component’s life-cycle event ngAfterViewInit() and initialise your ref variable there.

3

Yes, i tried this solution but same result.

I’ve juste fixed this by use the « ionviewdidenter » method. My bug was that my ion-input wasn’t fully loaded.

Thanks a lot !

1 Like