This is the archived documentation for Angular v5. Please visit angular.io to see documentation for the current version of Angular.

CurrencyPipe

npm Package @angular/common
Module import { CurrencyPipe } from '@angular/common';
Source common/src/pipes/number_pipe.ts
NgModule CommonModule

Formats a number as currency using locale rules.

How To Use

number_expression | currency[:currencyCode[:display[:digitInfo[:locale]]]]

Description

Use currency to format a number as currency.

  • currencyCode is the ISO 4217 currency code, such as USD for the US dollar and EUR for the euro.
  • display indicates whether to show the currency symbol or the code.

    • code: use code (e.g. USD).
    • symbol(default): use symbol (e.g. $).
    • symbol-narrow: some countries have two symbols for their currency, one regular and one narrow (e.g. the canadian dollar CAD has the symbol CA$ and the symbol-narrow $).
    • boolean (deprecated from v5): true for symbol and false for code If there is no narrow symbol for the chosen currency, the regular symbol will be used.
  • digitInfo See DecimalPipe for detailed description.
  • locale is a string defining the locale to use (uses the current LOCALE_ID by default)

Example

      
      @Component({
  selector: 'currency-pipe',
  template: `<div>
    <!--output '$0.259'-->
    <p>A: {{a | currency}}</p>

    <!--output 'CA$0.26'-->
    <p>A: {{a | currency:'CAD'}}</p>

    <!--output 'CAD0.26'-->
    <p>A: {{a | currency:'CAD':'code'}}</p>

    <!--output 'CA$0,001.35'-->
    <p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>

    <!--output '$0,001.35'-->
    <p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>

    <!--output '0 001,35 CA$'-->
    <p>B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>
  </div>`
})
export class CurrencyPipeComponent {
  a: number = 0.259;
  b: number = 1.3495;
}