Currency Pipe and Decimal Pipe

We’ll be exploring two pipes in this lesson: the currency pipe, and the decimal pipe. Both are used for formatting numeric values.

Currency pipe

The currency pipe will format a number by adding a currency symbol before it and adding decimal values if necessary. In the app.component.ts component class file, we’ll add a property called cost.

export class AppComponent {
  name = 'john doe';
  todaysDate = new Date();
  cost = 2000;
}

This will hold the cost of some imaginary product. We can update the app.component.html template to output the price with the correct currency symbol.

<p>{{ cost | currency }}</p>

This will output the following:

$2,000.00

You may see a different currency because the ...