Ion-input currency format

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”>

1 Like

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

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

And does this method still require a polyfill?

1 Like

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.
image

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

4 Likes

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?

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?

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

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);
  }

}
1 Like

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!

1 Like

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);
    }

I would give ng2-currency-mask a look.

2 Likes

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.

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.

2 Likes

See my answer here.
This is the easiest way I found to do this.