# Ion-input and the nativeElement

**URL:** <https://forum.ionicframework.com/t/ion-input-and-the-nativeelement/82049>\
**Category:** ionic-v3\
**Created:** [March 7, 2017, 9:25am UTC](https://forum.ionicframework.com/t/ion-input-and-the-nativeelement/82049 "2017-03-07T09:25:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![clarkdrimlike](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@clarkdrimlike](https://forum.ionicframework.com/u/clarkdrimlike)\
**Post date:** [March 7, 2017, 9:25am UTC](https://forum.ionicframework.com/t/ion-input-and-the-nativeelement/82049/1 "2017-03-07T09:25:22Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![wayback](https://avatars.discourse-cdn.com/v4/letter/w/e56c9b/32.png) [@wayback](https://forum.ionicframework.com/u/wayback)\
**Post date:** [March 22, 2017, 4:02pm UTC](https://forum.ionicframework.com/t/ion-input-and-the-nativeelement/82049/2 "2017-03-22T16:02:12Z")

</div>

Try changing

`@ViewChild("locationSearch")`

To

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

---

<div class="post-metadata">

**Author:** ![media4learning](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/media4learning/32/110537_2.png) [@media4learning](https://forum.ionicframework.com/u/media4learning)\
**Post date:** [July 19, 2017, 4:49pm UTC](https://forum.ionicframework.com/t/ion-input-and-the-nativeelement/82049/3 "2017-07-19T16:49:42Z")

</div>

From the bottom of my heart, thank you wayback 🙂

---

<div class="post-metadata">

**Author:** ![govindappaarun](https://avatars.discourse-cdn.com/v4/letter/g/f6c823/32.png) [@govindappaarun](https://forum.ionicframework.com/u/govindappaarun)\
**Post date:** [November 2, 2017, 7:59am UTC](https://forum.ionicframework.com/t/ion-input-and-the-nativeelement/82049/4 "2017-11-02T07:59:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![govindappaarun](https://avatars.discourse-cdn.com/v4/letter/g/f6c823/32.png) [@govindappaarun](https://forum.ionicframework.com/u/govindappaarun)\
**Post date:** [November 2, 2017, 8:41am UTC](https://forum.ionicframework.com/t/ion-input-and-the-nativeelement/82049/5 "2017-11-02T08:41:00Z")

</div>

> [@wayback](#):
>
> read

It worked, sorry, my template was bad.

---

<div class="post-metadata">

**Author:** ![grplife](https://avatars.discourse-cdn.com/v4/letter/g/da6949/32.png) [@grplife](https://forum.ionicframework.com/u/grplife)\
**Post date:** [November 27, 2024, 12:15am UTC](https://forum.ionicframework.com/t/ion-input-and-the-nativeelement/82049/6 "2024-11-27T00:15:37Z")

</div>

The future thanks you.