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

Luik

Did you try something like {{'' | currency:'USD':true}} ? – Tingley

You have a number with the currency symbol inside and what to get the symbol only? – Watercress

In the dev branch there is a getLocaleCurrencySymbol – Rotherham

{{'' | currency:'USD':true}} will not work as '' is a string. you can try a number and it should work {{90 | currency:'USD':true}} – Judge

@trichetriche that doesn't work as the pipe is expecting a number – Luik

@Watercress only the symbol – Luik

@Rotherham i'll have a look on that – Luik

@AniruddhaDas yeap, but I only want the symbol as I'm not able to use a number – Luik

Answer 1

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

Deane

I think that today (2020), to use getCurrencySymbol() is what I would do, so I'm going to change your answer as accepted. Thanks! – Luik

Answer 2

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

Luik

Your pipe's name is 'currencySymbol', so you should have used it like {{'EUR' | currencySymbol}} ? – Helico

Answer 3

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

Rattlepate

Answer 4

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.

Manned

That was exactly my thought, just not sure how to write this correctly.. this should be the top answer! – Health

Answer 5

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

Oleomargarine

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') – Luik

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 marcoscaceres.github.io/jsi18n/#localize_currency to see what I mean. – Biff