Setting ion-input type from an attribute directive

Ionic Framework ionic-v3
1

Hi,

I’m trying to set the ion-input type to “number” from an attribute directive.

The reason for this is on different platforms it plays differently. So I want to detect the platform, then set it to text/number accordingly.

In the directive if I do this

eleRef.nativeElement.setAttribute("type", "number");

It sets on the ion-input, but not on the native input element, so has no effect.

If I do this:

@HostBinding('type') hostType: String = "number";

It seems to set on the ion-input as ng-reflect-type. But doesn’t affect the native input element.

So what would be the correct way to go about what I’m after?

I was trying to avoid getting a reference to the native input element and setting it directly on there.

Thanks!

2

You could simply do

    <ion-item>
      <ion-label>{{inputType}}</ion-label>
      <ion-input [type]="inputType"></ion-input>
    </ion-item>

And let angular’s property binding handle this.

Then in your class, you’d just return a string

3

Thanks @mhartington. How would I go about doing it via an attribute directive?

<ion-input myNumberField></ion-input>

The reason being I have number fields all over the app.

1 Like