Angular2 currency symbol

Question

I'm in Australia trying to show some currency values, I'm doing

{{ portfolio.currentValue | currency : 'AUD' : true : '4.0' }}

and I'm getting as result A$1,300,000, I would like to show $1,300,000 (no A) without having to change to 'USD'.

Is there a way to customise my currency symbol?

It's not mentioned in [the docs](https://angular.io/docs/ts/latest/api/common/index/CurrencyPipe-pipe.html), so probably not. You could subclass or compose your own pipe for that behaviour, though. — jonrsharpe, Feb 05 '17 at 22:53

Matthew Kelly · Answer 1 · 2017-07-03T05:22:47.893

4

You can set your locale to Australia and then for AUD currency, it will just display a $.

In your app providers add the following:

import { LOCALE_ID } from '@angular/core';
...
{ provide: LOCALE_ID, useValue: 'en-AU' }

Then the following will simply display a $ :

{{ portfolio.currentValue | currency : 'AUD' : true : '4.0' }}

edited Jul 03 '17 at 05:22

answered Jun 29 '17 at 02:01

Matthew Kelly

3,094
1
19
10

angularrocks.com · Answer 2 · 2017-02-06T01:47:03.947

Here is whan you want, It will handle not only AUD but all currencies:

import {Pipe, PipeTransform} from '@angular/core'
import {CurrencyPipe} from "@angular/common";

@Pipe({
    name: "myCurrencyPipe"
})
export class MyCurrencyPipe implements PipeTransform {

    constructor(private currencyPipe: CurrencyPipe) {}

    transform(value: any, currencyCode?: string, symbolDisplay?: boolean, digits?: string): string {

        let transformed = this.currencyPipe.transform(value, currencyCode, symbolDisplay, digits);
        let myTransformed:string[] = [];

        for (var i = 0; i < transformed.length; i++) {
            if(!this.isLetter(transformed[i])){
                myTransformed.push(transformed[i])
            }
        }

        return myTransformed.join("");
    }

    isLetter(c) {
        return c.toLowerCase() != c.toUpperCase();
    }
}

Call it like that : {{ portfolio.currentValue | myCurrency : 'AUD' : true : '4.0' }}

First it will do all what the CurrencyPipe is doing by calling this.currencyPipe.transform(value, currencyCode, symbolDisplay, digits); then it is modifying the output by removing all letters from it.

app.module.ts :

@NgModule({
  declarations: [
    //..
    MyCurrencyPipe,
  ],
  providers: [
    //..
    CurrencyPipe
  ]
  //..
})

If you want to you create just a pipe that take care of CurrencyPipe output:

 @Pipe({
    name: 'removeLettersFromStringPipe'
})
export class RemoveLettersFromStringPipe implements PipeTransform {
  transform(value: string){

    let myTransformed:string[] = [];

    for (var i = 0; i < value.length; i++) {
        if(!this.isLetter(value[i])){
            myTransformed.push(value[i])
        }
    }

    return myTransformed.join("");
  }

  isLetter(c) {
      return c.toLowerCase() != c.toUpperCase();
    }
}

Use it as {{ portfolio.currentValue | currency : 'AUD' : true : '4.0' | removeLettersFromStringPipe}}

muetzerich · Answer 3 · 2017-02-05T23:03:07.583

0

The currencyPipe does't provide this possibility. An option would be to write your own custom pipe to remove the "A" and concat these pipes.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'removeAFromString'})
export class RemoveAFromString implements PipeTransform {
  transform(value: number){
    return value.substring(1);

  }
}

Now concat the pipes:

{{ portfolio.currentValue | currency : 'AUD' : true : '4.0' | removeAFromString}}

edited Feb 05 '17 at 23:03

answered Feb 05 '17 at 22:55

muetzerich

5,600
7
37
52

Thanks for your input, but if it's not possible I would prefer a solution like [that](http://stackoverflow.com/a/35044368/7520663) – Pedro Mello Feb 05 '17 at 23:37

score 0 · Answer 4 · answered Feb 06 '17 at 01:30

As suggested in the other answers, we've used a custom pipe for this as I too couldn't find a way to customise the symbol for AUD.

@Pipe({
   name: 'aud'
})
export class AudPipe implements PipeTransform {

transform(value: number): any {

    if (value === undefined || value === null) {
        return null;
    }

    let numberPipe = new DecimalPipe('en-AU');
    return '$' + numberPipe.transform(value, '1.2-2');
}

}

score 0 · Answer 5 · answered Oct 25 '18 at 03:19

symbol-narrow is now supported, and will do what you need.

<!--output 'CA$0,001.35'-->
<p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>

<!--output '$0,001.35'-->
<p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>

https://angular.io/api/common/CurrencyPipe#usage-notes

Works for AUD as well.

Angular2 currency symbol

5 Answers5

Linked