Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 875
Pedro Mello Avatar asked Feb 05 '17 22:02

Pedro Mello


2 Answers

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' }}
like image 191
Matthew Kelly Avatar answered Nov 09 '22 23:11

Matthew Kelly


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

like image 41
angularrocks.com Avatar answered Nov 09 '22 21:11

angularrocks.com