Get currency symbol angular 2

Question

I'm building an application using angular 2 and currency pipe, but I can't find a way to get the currency symbol according to the ISO value without any number. What I mean is that I just want the symbol without setting a number to be formatted.

Normal situation $3.00 I want only the $symbol, not the number

You have a number with the currency symbol inside and what to get the symbol only? — Vega, Sep 06 '17 at 14:35
In the dev branch there is a [getLocaleCurrencySymbol](https://github.com/angular/angular/blob/master/packages/common/src/i18n/locale_data_api.ts#L377) — CornelC, Sep 06 '17 at 14:38
{{'' | currency:'USD':true}} will not work as '' is a string. you can try a number and it should work {{90 | currency:'USD':true}} — Aniruddha Das, Sep 06 '17 at 15:03
@trichetriche that doesn't work as the pipe is expecting a number — soni, Sep 06 '17 at 15:06
@AniruddhaDas yeap, but I only want the symbol as I'm not able to use a number — soni, Sep 07 '17 at 07:37

score 12 · Accepted Answer · answered Feb 11 '20 at 12:01

Angular provides an inbuilt method getCurrencySymbol which gives you currency symbol. You can write a pipe as a wrapper over that method as

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

@Pipe({
  name: 'currencySymbol'
})
export class CurrencySymbolPipe implements PipeTransform {

  transform(
    code: string,
    format: 'wide' | 'narrow' = 'narrow',
    locale?: string
  ): any {
    return getCurrencySymbol(code, format, locale);
  }
}

and then use as:

{{'USD'| currencySymbol}} ===> $
{{'INR'| currencySymbol}} ===> ₹

Live Stackblitz Demo:

App Url: https://angular-currency-symbol-pipe.stackblitz.io

Editor Url: https://stackblitz.com/edit/angular-currency-symbol-pipe

I think that today (2020), to use getCurrencySymbol() is what I would do, so I'm going to change your answer as accepted. Thanks! — soni, Feb 11 '20 at 12:11

soni · Answer 2 · 2020-02-11T12:14:37.560

Answered in 2017: As I ONLY wanted the symbol for the currency, I ended up extending currency pipe with a constant number and return only the symbol. It feels sort of a "hack" to have a constant number, but as i don't want to create new currency maps and I'm not able to provide a number, i think is the easiest way.

Here is what I did:

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

@Pipe({name: 'currencySymbol'})
export class CurrencySymbolPipe extends CurrencyPipe implements 
PipeTransform {
    transform(value: string): any {
    let currencyValue = super.transform(0, value,true, "1.0-2");
    return currencyValue.replace(/[0-9]/g, '');
    }
}

Now I can use it as:

{{ 'EUR' | currencySymbol }} and get '€'

Thanks for your help and ideas!

Update: Changed accepted answer to Varun's one as in 2020 I would use getCurrencySymbol() to accomplish that task

Your pipe's name is 'currencySymbol', so you should have used it like {{'EUR' | currencySymbol}} ? — Mojtaba, Jan 02 '19 at 09:59

score 6 · Answer 3 · answered Nov 26 '18 at 15:27

I know this question is quite old but just if someone happens upon it as I have, Angular has a method to do this without having to do weird and wonderful Regex and string manipulation.

I made the following pipe using the getCurrencySymbol method in @angular/common

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

@Pipe({
  name: 'currencySymbol'
})
export class CurrencySymbolPipe implements PipeTransform {
  transform(currencyCode: string, format: 'wide' | 'narrow' = 'narrow', locale?: string): any {
    return getCurrencySymbol(currencyCode, format, locale);
  }
}

score 3 · Answer 4 · answered Nov 01 '18 at 00:58

3

You can use the following code in the template which avoids having to define a new pipe:

{{ ( 0 | currency : currencyCode : 'symbol-narrow' ) | slice:0:1 }}

Where this.currencyCode is set to the three digit currency symbol expected to be shown.

answered Nov 01 '18 at 00:58

salbahra

535
5
5

2

That was exactly my thought, just not sure how to write this correctly.. this should be the top answer! – chriszichrisz Sep 28 '19 at 14:37

score 0 · Answer 5 · answered Sep 06 '17 at 14:40

0

for example

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

answered Sep 06 '17 at 14:40

GomuGomuNoRocket

771
2
11
37

1

The issue is that I don't have a number to use this pipe with the normal implementation. I would like something like currency.getCurrencySymbol('EUR') – soni Sep 06 '17 at 17:41
This is a very bad idea: not all currency symbols are displayed to the left of the number, AND not all currency symbols are a symbol. Try the Currency Formatter at https://marcoscaceres.github.io/jsi18n/#localize_currency to see what I mean. – dohpaz42 Oct 05 '17 at 00:40

Get currency symbol angular 2

5 Answers5

Linked