Ion-input currency format


#1

I know there are a lot of posts about currency formatting but none too recent that I have found.

What is the current way ( and simplest ) to format an ion-input for currency?

<ion-input type=“number” elastic placeholder=’{{placeholder}}’ [(ngModel)]=“price”>


#2

I would use the currency pipe from angular:
https://angular.io/docs/ts/latest/api/common/index/CurrencyPipe-pipe.html


#3

How does that work with [(ngModel)]=“price” ?

And does this method still require a polyfill?


#4

I don’t know if it still needs polyfill, but I think so.

You can use it in the template or in your component.

For component usage:

import { CurrencyPipe } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(private currencyPipe: CurrencyPipe) {
    let amount = 1337.1337;
    console.log(this.getCurrency(amount));
  }

  getCurrency(amount: number) {
    return this.currencyPipe.transform(amount, 'EUR', true, '1.2-2');
  }

}

and add Currency Pipe to your app.module.ts providers.

If you want to use it in the template:
<p>{{1337.1337 | currency:'EUR':true:'1.2-2'}}</p>


#5

That’s great and works in component but does not work with the [(ngModel)]
As in, it does not update the price in the example I gave.

I tried:

<ion-input type="number" elastic placeholder='{{placeholder}}' [(ngModel)]="getCurrency(price)"></ion-input>

Do we need to add a listener in the component?
Or what would be the correct template usage?


#6

How should it look in your model and how in your ion-input? And when does it have to convert? After each keystroke or on lost focus?


#7

A 2 decimal number (12.50) displayed as currency ($12.50) that preferably updates on every keystroke but not required.


#8

Sorry I have tried it but found no solution. Did something like this but haven’t found a valid convert algorithm yet. Also the changeDetection does not work properly with this solution. But maybe you can start from here:

<ion-content padding>
  {{myModelVariable}}
  <ion-input type="string" elastic placeholder='{{placeholder}}' [value]="myModelVariable" (keyup)="convert($event)"></ion-input>
</ion-content>
import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  placeholder = 'Please enter...'
  myModelVariable = '';

  convert(event: any) {
    console.log('old:', this.myModelVariable);
    this.myModelVariable = event.target.value.replace(/[^\d\.]/g ,'');
    console.log('new:', this.myModelVariable);
  }

}

#9

Thanks Nexi, that is farther than I got with it.
I will continue work with it later and report back if successful.

Valiant effort - appreciated!


#10

This seems to work except for capturing on every keystroke.

<ion-input type="string" elastic placeholder='{{placeholder}}' [(ngModel)]="box_price_formatted" (change)='onChangePrice($event.target.value)'></ion-input>
box_price = 0;
box_price_formatted= "$10.00";

onChangePrice(evt) {
        this.box_price = evt.replace(/[^0-9.]/g, "");
        this.box_price_formatted = this.getCurrency(this.box_price)
        console.log("box_price_formatted: " + this.box_price_formatted);
    }

#11

I would give ng2-currency-mask a look.


#12

ng2-currency-mask has some issues with not being able to replace numbers within a number.
12345 - selecting 34 and trying to change it does not work.
It also does not work with ion-input

Its close but not being able to select and replace numbers is a little off-putting.
This is in the browser, by the way.
It is already stated as an issue.


#13

Although there may be an entirely different way to achieve this, here is an addition to include eliminating letters from the currency on key stroke:

onChangePrice(evt) {
        this.box_price = evt.replace(/[^0-9.]/g, "");
        if (this.box_price) {
            this.box_price_formatted = this.getCurrency(this.box_price)
            console.log("box_price_formatted: " + this.box_price_formatted);
        }
    }
onPriceUp(evt){
        this.box_price = evt.replace(/[^0-9.]/g, "");
        this.box_price_formatted = String(this.box_price);
    }
<ion-input type="string" elastic placeholder='{{placeholder}}' [(ngModel)]="box_price_formatted" (change)='onChangePrice($event.target.value)' (keyup)="onPriceUp($event.target.value)"></ion-input>

Not glamorous but gets the job done.


Adding a dollar sign to an ion-input