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!

Answer 1

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