Get currency symbol angular 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


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