How to use Angular (6,7) Currency Pipe example


In the tutorial, Grokonez introduces how to use Angular CurrencyPipe with examples.

Related posts:
Angular Built-in DatePipe Example | Pre-defined Format + Timezone + Locale + Custom Format
Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example
Angular built-in Slice Pipe | Array SlicePipe + String SlicePipe Example
Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example


CurrencyPipe transforms a number to a currency string.


Input value

Input value has type any .
-> The number to be formatted as currency.


currencyCode is the ISO 4217 currency code
-> Type is string
-> Optional.
-> Default is undefined.

display is the format for the currency indicator.
-> Type is string or boolean
-> Optional
-> Default is symbol.

  • code -> show the code, example USD.
  • symbol(default) -> show the symbol, example $.
  • symbol-narrow -> use the narrow symbol for locales that have two symbols for their currency. Example: symbol CA$ and the symbol-narrow $
  • String -> use the given string value instead of a code or a symbol.

digitsInfo: decimal representation options.
-> Type is string
-> Optional.
-> Default is undefined.
-> Format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

  • minIntegerDigits: minimum number of integer digits before the decimal point. Default is 1.
  • minFractionDigits: minimum number of digits after the decimal point. Default is 2.
  • maxFractionDigits: maximum number of digits after the decimal point. Default is 2.

locale: is a locale code
-> Optional.
-> Default is undefined.


* Note: Need import locale data for fr language, you can do it manually in src/app/app.module.ts file:


-> Project structure:


-> Results:


– Sourcecode: AngularCurrencyPipe

By grokonez | January 29, 2019.

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *