What is the CurrencyPipe?

What is the CurrencyPipe?

The CurrencyPipe is a built-in Angular pipe that's designed to format numbers as currency values according to specified locales, currency codes, and display rules. It's a convenient tool for ensuring that monetary values are presented in a way that's familiar and readable for users in different regions of the world.

Basic Usage

The most straightforward way to use the CurrencyPipe is like this in your Angular template:

HTML

<p>Product Price: {{ price | currency }}</p>

• price: The numerical value you want to format as currency.
• currency The pipe's name.

If you don't provide further options, it will use your browser's default locale and currency.

Customization Options

The CurrencyPipe offers several customization options:

1. Currency Code (USD, EUR, etc.)

   HTML

   <p>Product Price: {{ price | currency:'GBP' }}</p> ```
   

2. Display Format

   • 'code': Display the currency code (e.g., USD, EUR).
   • 'symbol' (default): Display the currency symbol (e.g., $, €).
   • 'symbol-narrow': Display a narrow version of the currency symbol when available.
   • Custom string: Provide your own string for formatting.
   HTML

   <p>Product Price: {{ price | currency:'USD':'symbol-narrow' }}</p>
   

   
   

3. Decimal Digits You can control the number of digits after the decimal point using a colon-separated format:

   HTML

   <p>Product Price: {{ price | currency:'USD':'symbol':'1.2-2' }}</p> 
   

   
   

Example

Let's assume the following in your Angular component:

TypeScript

price = 1234.56;

Here are examples of the output with different CurrencyPipe configurations:

Pipe Expression	Output
`{{ price	currency }}`
`{{ price	currency:'EUR' }}`
`{{ price	currency:'JPY':'symbol-narrow':'0.0' }}`
`{{ price	currency:'USD':'code' }}`

Important Note: The CurrencyPipe relies on the browser's internationalization (i18n) support. For older browsers, you might need to include polyfills.

What is the CurrencyPipe?