How can I get the wrapped input from an ion-input in Ionic2?

Question

I'd like to attach an google.maps.places.Autocomplete to an ion-input, but in Ionic2 ion-input wraps the <input> element and I can't figure out how to get access to it.

I've tried creating a directive and using the passed in ElementRef

import {Directive, ElementRef, Input} from 'angular2/core';

@Directive({
    selector: '[location-picker]'
})

export class LocationPicker {
    constructor(el: ElementRef) {    
        console.log(el.nativeElement);    
    }
}

but nativeElement returns the wrapped input.

<ion-input location-picker="">
    <input class="text-input ng-valid ng-dirty ng-touched" type="text" placeholder="" aria-labelledby="lbl-6" location-picker="" autocomplete="off" autocorrect="off">
    <!--template bindings={}-->
    <!--template bindings={}-->
    <!--template bindings={}-->
</ion-input>

I've also tried creating a custom component similar to this and switching Searchbar to TextInput, but TextInput doesn't have.inputElement`.

Any ideas would be welcome.

Thanks!

Hey, are you able to provide complete code of how you implemented google places Autocomplete with ionic 2 ? :). thanks — LeRoy, May 08 '16 at 18:52

score 4 · Accepted Answer · edited May 23 '17 at 12:17

4

Not sure this is what you're looking for (don't know Ionic)

<ion-input location-picker="">
    <input #myInput class="text-input ng-valid ng-dirty ng-touched" type="text" placeholder="" aria-labelledby="lbl-6" location-picker="" autocomplete="off" autocorrect="off">
    <!--template bindings={}-->
    <!--template bindings={}-->
    <!--template bindings={}-->
</ion-input>

@ViewChild('myInput') input; 

ngAfterViewInit() {
  console.log(this.input.nativeElement.value);
}

See also angular 2 / typescript : get hold of an element in the template

edited May 23 '17 at 12:17

Community

1
1

answered May 01 '16 at 16:11

Günter Zöchbauer

623,577
216
2,003
1,567

Unfortunately that's just the output of `console.log(el.nativeElement);` so I can't edit it in that way. I've edited my question to make it more clear. Thank you though! – cnorris May 01 '16 at 16:29
What about `this.nativeElement.querySelector('input')`? – Günter Zöchbauer May 01 '16 at 16:31
Might be necessary to be moved to `ngAfterViewInit()` to give Angular time to finish building the view. – Günter Zöchbauer May 01 '16 at 16:33

score 0 · Answer 2 · answered Aug 03 '16 at 07:04

Had the same question. A combination of the accepted answer and the comments below it seemed to solve it for me.

Adding this function to my Directive seemed to do it. I'm using Typescript and the typings definition for googlemaps found here: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/googlemaps/google.maps.d.ts

ngAfterViewInit() {
    var input: HTMLInputElement = <HTMLInputElement>this._el.querySelector("input");
    this.autocomplete = new google.maps.places.Autocomplete(input, {});
    google.maps.event.addListener(this.autocomplete, 'place_changed', () => {
      var place: google.maps.places.PlaceResult = this.autocomplete.getPlace();
      this.invokeEvent(place);
    });
  }

Neo Split · Answer 3 · 2017-04-26T21:57:06.663

0

I solved it this way:

<ion-item>
    <ion-label>Search your city</ion-label>
    <ion-input formControlName="placeAutofill" id="googlePlaces" required></ion-input>
</ion-item>

And in my code:

ionViewWillEnter() {
   // Google Places API auto complete
   let input = document.getElementById('googlePlaces').getElementsByTagName('input')[0];
   let autocomplete = new google.maps.places.Autocomplete(input, {types: ['geocode']});
   google.maps.event.addListener(autocomplete, 'place_changed', () => {
     // retrieve the place object for your use
     let place = autocomplete.getPlace();
   });
}

edited Apr 26 '17 at 21:57

answered Apr 26 '17 at 20:59

Neo Split

147
1
6

Still haven't figured out how to port this code to directive. If you have suggestions, let me know! – Neo Split Apr 26 '17 at 22:00

How can I get the wrapped input from an ion-input in Ionic2?

3 Answers3

Linked