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 currency pipe will check the OS and language of your system. It will attempt to output the currency associated with your region.

As you can see, the currency pipe was able to add the correct currency symbol, add a comma, and add a decimal value.

Switching currencies

The currency pipe has a parameter for changing the currency. The documentation for the currency pipe states that we can use an ISO 4217 code. Here’s a list of valid codes: https://en.wikipedia.org/wiki/ISO_4217.

Let’s say we want to switch the currency to the Japanese Yen; we can update the expression to the following:

<p>{{ cost | currency: 'JPY' }}</p>

This will output the following:

¥2,000

Perfect! One thing to keep in mind is that the currency pipe will not perform a conversion on your value. It will merely format it. It’s essential to perform a currency conversion before outputting it. 2000 Yen is not equal to 2000 USD.

Decimal pipe

The next pipe we’ll look at is the DecimalPipe. It’s very similar to the CurrencyPipe because it deals with numeric values. We can use it to help format numbers by adding/removing decimal values.

For example, let’s say we want to output the temperature. Sometimes we may need to calculate the temperature, which may result in a decimal value. Typically, it’s not common to output the temperature with a decimal value. We want to strip it out if that’s the case.

In the app.component.ts component class file, we’ll add a property called temperature.

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

We want to remove the .3 from the value. We can do this in JavaScript, but, for demonstration purposes, we’ll look at how to remove it with the DecimalPipe.

In the app.component.html template, we’ll add the following:

<p>{{ temperature | number: '1.0-0' }}</p>

This will output the following:

25

The number pipe has a parameter, which is the format for the number. On the left side of the dot is the minimum number of digits that should be present in the number. For example, let’s say we updated the parameter to 5.0-0; the output will be the following:

00,025

The number pipe will add 0’s to the number because there are less than five digits in the number.

To the right of the dot, we can set the minimum and the maximum number of digits for the decimal value, respectively. In our example, we’re saying the number can’t have any decimal values. The number pipe will strip out any decimal values present in the number.

Let’s say we updated the parameter to 1.2-5 This will tell the number pipe to output a decimal value with at least two digits. If the value has more than five digits for the decimal value, they will be stripped out.

For example, if we had the temperature property set to 25.123456, then the output would be the following:

25.12345

The goal for this part of the lesson was to output the temperature without decimal values, so we’ll revert the parameter to 1.0-0.

Here’s the completed code for this lesson: