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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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.