How do I use the currency pipe in my Ionic2 app?
Do Ionic2 already support these kind of pipes?
If no, is that on the roadmap?
According the angular2 doc, Safari doesn’t support the angular2 currency pipe and therefore you have to add the polypill script in your website. Is that the same for an Ionic2 app?
Thx in advance for your advices
https://angular.io/docs/ts/latest/guide/pipes.html
P.S.: Other posts regarding that subject I found on the forum
Yes, you need the polyfill because the internationalisation API is not yet implemented in Safari.
Thx for the feedback. May I ask how to reference the polyfill aka like adding the js in the index.html or is there a way to install it thru npm?
Its literally in the page you linked…
The Date and Currency pipes need the ECMAScript Internationalization API. Safari and other older browsers don’t support it. We can add support with a polyfill.
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en">< /script>
you could download it and place it in your app if you like.
oki doki thx for the tips!
gonna try later and then close the subject.
dont forget to adjust the locales you need in the url of the polyfill
Mmmmmh thx for the good notice, means I’ll have to dig a little bit more because my app have to support different locales (like en, de, fr)
check the docs, you can set the needed locales in the url.
yep saw that. but it means that in my case I will have to change / load the polyfill on the fly according the user locales, because I don’t target only one locale, that’s what I meant
something like:
this solution fails on rc0. Any workarounds?
What are your errors now?
According following thread on stack overflow, date pipe should had been fixed in angular 2.0.0-RC2.
we stopped trying and implemented a moment pipe instead
since Ionic2 RC.0 is shipped with polyfill, both date and currency pipe now works in Safari but are still BUGGY in iOS. Seems that the problem is still in Angular2.
For that reason, I wrote my date pipe using momentjs too.
About the currency, furthermore to the issue, I also didn’t find any solution in Angular2 to load on the fly a different currency, seems that right now is only possible to specify a singly currency format for the all application. Therefore fck it, I also wrote my own currency pipe.
For those who want to achieve something similar, you could find
a list of countries and their currencies there
http://country.io/currency.json
and a list of currency format (symbol, symbol before or after value) there
my only still open issue is that the javascript number.toLocaleString doesn’t seems to format correctly the number on iOS, but I can for the moment leave with that.
we need the number pipe in our project - is there a way how we can use it ?
thanks
“Number pipe”? what do you mean, I create my own pipes about date and currency.
Date pipe here you go:
import {Component, Input} from '@angular/core';
import moment from 'moment';
@Component({
templateUrl: 'display-date.html',
selector: 'display-date'
})
export class DisplayDateDirective {
@Input() displayDate:Date;
@Input() pattern:string = 'll';
constructor() {
}
ngAfterViewInit(): void {
}
getFormattedDate():string {
return moment(this.displayDate).format(this.pattern);
}
}
and his relative html page:
<span>getFormattedDate()</span>
to use it, in declare it in your app.module and then in your html pages
<display-date [displayDate]="yourDate"></display-date>
The currency pipe can’t give you it out of the box, he’s deep integrated in my code. But except that I really just used the list of countries and list of format I listed above
Can you please share the code
how to use the ionic 2 currency conversion ?
as @philipphalder pointed out you could try https://angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html otherwise you will have to build you own service using the json data I listed above … sorry can’t do more see my previous answer
Hi
Here is angular way of conversion
23.56 | currency: ‘EUR’:true:'2.2-2’
using template driven approach…
My question is how to use your currency-format ?
Just give me a bit of code and take me out from this issue.
Thanks in advance.
Do you mean that file? https://github.com/xsolla/currency-format
What I did I added this file to my assest folder and then in one of my service I load it, something like
this.http.get('./assets/currency/currency-format.json')
.map((res: Response) => res.json())
.subscribe((res: any) => {
// Do stuffs with json array
});
});
If for example you want to filter the result with the currency your are looking for
let whatIAmLookingFor: any;
Object.keys(res).map((key) => {
if (_.isEqual((key, filter)) { // I use underscore for comparison, filter would be your money like EUR
whatIAmLookingFor = res[key]; // --> the key your are looking for
}
});