# \[SOLVED\] Currency pipe in Ionic2

**URL:** <https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571>\
**Category:** ionic-v3\
**Created:** [September 16, 2016, 6:29am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571 "2016-09-16T06:29:48Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 16, 2016, 6:29am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/1 "2016-09-16T06:29:48Z")

</div>

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

> **[Angular](https://angular.io/guide/pipes)**
>
> Angular is a platform for building mobile and desktop web applications.
> Join the community of millions of developers who build compelling user interfaces with Angular.

P.S.: Other posts regarding that subject I found on the forum

> [@Angular 2 currency pipe doesn't work on iOS](https://forum.ionicframework.com/t/angular-2-currency-pipe-doesnt-work-on-ios/58889):
>
> I know this is more of an angular 2 issue, but it says in the angular 2 documenation for CurrencyPipe that it is only supported in Chrome and Opera based browsers. It says you can add a polyfil js library to fix the issue or use this npm package. [https://www.npmjs.com/package/intl](https://www.npmjs.com/package/intl) Will/can this be included by default in the next ionic release to make it easier to build iOS apps Thanks

> [@Pipes not working on iOS](https://forum.ionicframework.com/t/pipes-not-working-on-ios/53489/5):
>
> With your code I only get a Invalid currency code: EUR,true,.2-2

---

<div class="post-metadata">

**Author:** ![maxx0r](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/maxx0r/32/91299_2.png) [@maxx0r](https://forum.ionicframework.com/u/maxx0r)\
**Post date:** [September 16, 2016, 7:33am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/2 "2016-09-16T07:33:41Z")

</div>

Yes, you need the polyfill because the internationalisation API is not yet implemented in Safari.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 16, 2016, 7:42am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/3 "2016-09-16T07:42:49Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![maxx0r](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/maxx0r/32/91299_2.png) [@maxx0r](https://forum.ionicframework.com/u/maxx0r)\
**Post date:** [September 16, 2016, 7:56am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/4 "2016-09-16T07:56:36Z")

</div>

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.

```auto
   <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.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 16, 2016, 8:03am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/5 "2016-09-16T08:03:34Z")

</div>

oki doki thx for the tips!

gonna try later and then close the subject.

---

<div class="post-metadata">

**Author:** ![maxx0r](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/maxx0r/32/91299_2.png) [@maxx0r](https://forum.ionicframework.com/u/maxx0r)\
**Post date:** [September 16, 2016, 8:04am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/6 "2016-09-16T08:04:11Z")

</div>

dont forget to adjust the locales you need in the url of the polyfill

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 16, 2016, 8:21am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/7 "2016-09-16T08:21:53Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![maxx0r](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/maxx0r/32/91299_2.png) [@maxx0r](https://forum.ionicframework.com/u/maxx0r)\
**Post date:** [September 16, 2016, 8:37am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/8 "2016-09-16T08:37:25Z")

</div>

check the docs, you can set the needed locales in the url.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 16, 2016, 8:56am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/9 "2016-09-16T08:56:16Z")

</div>

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:

1. user start the app
2. locales detection
3. load the right polyfill en,fr,de etc.

---

<div class="post-metadata">

**Author:** ![dsac](https://avatars.discourse-cdn.com/v4/letter/d/82dd89/32.png) [@dsac](https://forum.ionicframework.com/u/dsac)\
**Post date:** [October 4, 2016, 11:37am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/10 "2016-10-04T11:37:05Z")

</div>

this solution fails on rc0. Any workarounds?

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [October 5, 2016, 7:46am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/11 "2016-10-05T07:46:23Z")

</div>

What are your errors now?

According following thread on stack overflow, date pipe should had been fixed in angular 2.0.0-RC2.

> <https://stackoverflow.com/questions/35754586/how-to-format-date-as-dd-mm-yyyy-in-angular-2-using-pipes>

---

<div class="post-metadata">

**Author:** ![dsac](https://avatars.discourse-cdn.com/v4/letter/d/82dd89/32.png) [@dsac](https://forum.ionicframework.com/u/dsac)\
**Post date:** [October 5, 2016, 11:25am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/12 "2016-10-05T11:25:47Z")

</div>

we stopped trying and implemented a moment pipe instead

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [October 7, 2016, 8:47am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/13 "2016-10-07T08:47:44Z")

</div>

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](http://country.io/currency.json)

and a list of currency format (symbol, symbol before or after value) there

> **[xsolla/currency-format](https://github.com/xsolla/currency-format)**
>
> currency-format - JSON with information about currencies: codes (ISO 4217), the names, grapheme (symbols), fraction information and formatting.

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.

---

<div class="post-metadata">

**Author:** ![philipphalder](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/philipphalder/32/104004_2.png) [@philipphalder](https://forum.ionicframework.com/u/philipphalder)\
**Post date:** [November 8, 2016, 5:04pm UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/14 "2016-11-08T17:04:42Z")

</div>

we need the number pipe in our project - is there a way how we can use it ?  
thanks

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [November 8, 2016, 7:08pm UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/15 "2016-11-08T19:08:15Z")

</div>

“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

---

<div class="post-metadata">

**Author:** ![philipphalder](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/philipphalder/32/104004_2.png) [@philipphalder](https://forum.ionicframework.com/u/philipphalder)\
**Post date:** [November 9, 2016, 5:10pm UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/16 "2016-11-09T17:10:24Z")

</div>

this one 🙂  
[https://angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html](https://angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html)

---

<div class="post-metadata">

**Author:** ![bruceMJ](https://avatars.discourse-cdn.com/v4/letter/b/e99b99/32.png) [@bruceMJ](https://forum.ionicframework.com/u/bruceMJ)\
**Post date:** [February 21, 2017, 2:14pm UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/17 "2017-02-21T14:14:58Z")

</div>

Can you please share the code  
how to use the ionic 2 currency conversion ?

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [February 21, 2017, 2:46pm UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/18 "2017-02-21T14:46:27Z")

</div>

as @philipphalder pointed out you could try [https://angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html](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

---

<div class="post-metadata">

**Author:** ![bruceMJ](https://avatars.discourse-cdn.com/v4/letter/b/e99b99/32.png) [@bruceMJ](https://forum.ionicframework.com/u/bruceMJ)\
**Post date:** [February 22, 2017, 5:02am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/19 "2017-02-22T05:02:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [February 22, 2017, 6:41am UTC](https://forum.ionicframework.com/t/solved-currency-pipe-in-ionic2/63571/20 "2017-02-22T06:41:40Z")

</div>

Do you mean that file? [https://github.com/xsolla/currency-format](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
            }
        });
```