Angular2 currency symbol

问题

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?

回答1:

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' }}

回答2:

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

回答3:

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

回答4:

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

}

回答5:

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.

来源：https://stackoverflow.com/questions/42058225/angular2-currency-symbol

标签

angular

pipe

currency