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

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.