Ion-input with ngModel and pipe


I would like to know which is the best approach to get a formated ion-input with ngModel. I want something like this:

<ion-input [(ngModel)]="quantity | percentage"></ion-input>

Of course it does not work, but I think it shows what I want: the user see, e.g 10%, and if he writes 5 the ngModel bind to quantity the value 0.05.

And same happens with currency or other pipes… what is the best approach for it?

Thank you


You could try something like this:

<ion-input [ngModel]="qpercent" (change)="updateQuantity($"></ion-input>
quantity: number;
qpercent: string;

constructor() {

updateQuantity(qp:number):void {
  this.quantity = qp / 100;
  this.qpercent = qp + '%';


Maybe it is not the smartest way in the world… but it works :slight_smile:

The only problem is if I want to show the numeric keyboard, I cannot use type=“number”, because we are binding now to a string field (qpercent). How can I show numeric keyboard to enter quantity?

Thank you


I suppose you could have qpercent be quantity * 100 (without the ‘%’ sign), make the input field of type ‘number’, and then display the ‘%’ separately as a label to the right of the input field.