Currency Pipe in Angular: Format Numbers as Currency Easily

The CurrencyPipe in Angular formats numbers as currency strings, adding currency symbols and decimal places automatically. It helps display monetary values in a user-friendly way based on locale and currency code.

How It Works

The CurrencyPipe in Angular acts like a translator that takes a plain number and turns it into a money amount that people can easily understand. Imagine you have a price number like 1234.5, and you want to show it as "$1,234.50" or "€1.234,50" depending on the country. The pipe does this formatting for you automatically.

It uses the locale settings of your app to decide how to place commas, decimals, and currency symbols. You just give it the number and optionally the currency code (like USD or EUR), and it returns a nicely formatted string. This saves you from writing complex code to handle different currency formats.

Example

This example shows how to use the CurrencyPipe in an Angular template to format a number as US dollars.

html

<!-- app.component.html -->
<p>Price: {{ price | currency:'USD':'symbol':'1.2-2' }}</p>

<!-- app.component.ts -->
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  price = 1234.5;
}

Output

Price: $1,234.50

When to Use

Use the CurrencyPipe whenever you need to display monetary values in your Angular app. It is perfect for e-commerce sites, financial dashboards, or any app showing prices or costs.

It helps keep your UI consistent and easy to read by automatically applying the right currency symbol and formatting based on the user's locale or your specified currency. This avoids confusion and improves user experience.

Key Points

• The CurrencyPipe formats numbers as currency strings with symbols and decimals.
• You can specify the currency code, display style (symbol, code, or name), and decimal digits.
• It respects locale settings for correct formatting.
• Use it in templates with the pipe syntax: {{ value | currency }}.

Key Takeaways

CurrencyPipe formats numbers into readable currency strings automatically.

Specify currency code and display style to customize output.

It respects locale for correct decimal and symbol placement.

Use it in Angular templates with the pipe syntax for easy formatting.