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
Nexi
May 4, 2017, 4:26pm
2
How does that work with [(ngModel)]=“price” ?
And does this method still require a polyfill?
1 Like
Nexi
May 4, 2017, 4:39pm
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>
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?
Nexi
May 4, 2017, 4:49pm
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?
A 2 decimal number (12.50) displayed as currency ($12.50) that preferably updates on every keystroke but not required.
Nexi
May 4, 2017, 5:58pm
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);
}
}
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
rafraph
January 29, 2022, 8:59pm
14
See my answer here .
This is the easiest way I found to do this.