Understanding Angular's Built-In Pipes

Pipes are a fundamental feature in Angular that allow developers to modify how data appears before it reaches the user's screen. Think of a pipe as a water filter — water enters, gets processed, and comes out clean. In the same way, Angular pipes accept raw data, apply a transformation, and output the formatted result.

The primary motivation behind using pipes is to enhance readability of the displayed information.

Angular ships with thirteen (13) predefined pipes. Here's the complete list:

  1. AsyncPipe - (Covered in a future discussion on Observables)
  2. CurrencyPipe
  3. DatePipe
  4. DecimalPipe
  5. I18nPluralPipe
  6. I18nSelectPipe
  7. JsonPipe
  8. KeyValuePipe
  9. LowerCasePipe
  10. PercentPipe
  11. SlicePipe
  12. TitleCasePipe
  13. UpperCasePipe

To get started, we'll create a dedicated component named pipe-demo. If you need a refresher on component creation, take a look at this guide.

The intended project layout is shown below:

Built-In Angular Pipes - Part 1 — figure 1

Diving into CurrencyPipe

The CurrencyPipe is designed to format numerical values into a currency format based on the provided country code, currency type, decimal configuration, and locale settings.

When to use it:
Consider an e-commerce platform where you only store the numeric price of products. Before displaying these prices, you need to prepend or append the relevant currency symbol. The CurrencyPipe is the ideal solution for this task.

The Syntax
{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo
[ : locale ] ] ] ] }}

Let's break down each component of this syntax:

value_expression - The raw value you intend to format.

| - This is the pipe operator.

currency - Identifies the specific pipe being used.

currencyCode - This is the ISO 4217 currency code, a global standard.
This parameter is Optional.
It expects a String value.
If omitted, it defaults to USD.

display - This parameter controls how the currency is presented.
You can opt for a symbol (e.g., $), a code (e.g., USD), symbol-narrow, or even a custom string of your own.
This is Optional.
The default setting is Symbol.

digitsInfo - This defines the numerical formatting for the currency. It specifies the number of digits to show before and after the decimal point.
Expects a String value.
This is Optional.
The default is undefined.

locale - This specifies the locale formatting rules to be applied.
If not provided, it uses the project's default locale, otherwise, it remains undefined. This parameter is also optional.

Let's move on to a practical demonstration.

First, we'll add a variable in the component's TypeScript file. We'll call it expense and set its initial value to 786.4589.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pipe-demo',
  templateUrl: './pipe-demo.component.html',
  styleUrls: ['./pipe-demo.component.css']
})
export class PipeDemoComponent implements OnInit {

  expense = 786.4589;

  constructor() { }

  ngOnInit(): void {
  }

}
Enter fullscreen mode Exit fullscreen mode

Next, let's update the component's template with a simple usage of the pipe.

{{ expense | currency }}
Enter fullscreen mode Exit fullscreen mode

When you run the application and navigate to localhost:4200, the output will be as follows:

Built-In Angular Pipes - Part 1 — figure 2
Notice that the default currency is USD, and it's displayed using its symbol.

Now, suppose we want to switch to a different currency, for example, INR (Indian Rupee). Here's the updated template code:

{{ expense | currency: "INR" }}
Enter fullscreen mode Exit fullscreen mode

This will generate the following output:

Built-In Angular Pipes - Part 1 — figure 3
By providing a valid currency code (here, INR), the pipe correctly identifies and displays its corresponding symbol (₹). If an invalid or unsupported currency code is given, the pipe falls back to displaying the currency code text instead of a symbol.

Important Note
If you need to force a specific default symbol, you can pass it directly as the display parameter. This can be set to code, symbol, symbol-narrow, or any custom text.

Let's experiment with different display options in our template:

<hr />
<h3>{{ expense | currency: "INR":"code" }}</h3>
<h3>{{ expense | currency: "CAD":"symbol" }}</h3>
<h3>{{ expense | currency: "CAD":"symbol-narrow" }}</h3>
<h3>{{ expense | currency: "INR":"symbol-narrow" }}</h3>
<h3>{{ expense | currency: "INR":"Indian Rupee" }}</h3>
Enter fullscreen mode Exit fullscreen mode

Here's what you should see:

Built-In Angular Pipes - Part 1 — figure 4

Decoding the Output

{{ expense | currency: "INR":"code" }}
With the currency code set to INR and the display type as code, the output will show "INR" preceding the formatted number.

{{ expense | currency: "CAD":"symbol" }}
For the Canadian Dollar (CAD) with the symbol display, the pipe outputs its standard symbol: CA$.

expense | currency: "CAD":"symbol-narrow"
Interestingly, some currencies like the Canadian Dollar have more than one symbol. A symbol-narrow for CAD gives us just the "$" sign.

expense | currency: "INR":"symbol-narrow"
Since the Indian Rupee does not have a distinct narrow symbol, the pipe defaults to showing the regular rupee symbol (₹).

expense | currency: "INR":"Indian Rupee"
For complete control, you can pass any custom string as the display parameter, which will be shown as-is.

Controlling Decimal Precision

We also have the ability to precisely control the number of decimal places displayed for the currency value. This is done using the digitsInfo parameter.

Take a look at this example:

<hr />
<h3>{{ expense | currency: "INR":"symbol":"4.2-2" }}</h3>
<h3>{{ expense | currency: "INR":"symbol":"3.1-1" }}</h3>
Enter fullscreen mode Exit fullscreen mode

The output will be:

Built-In Angular Pipes - Part 1 — figure 5

{{ expense | currency: "INR":"symbol":"4.2-2" }}
In this case, the 4 indicates the minimum number of digits required before the decimal point. Since our original value only has three digits, a leading zero is added to meet this requirement. The 2-2 part dictates that we need a minimum of two digits and a maximum of two digits after the decimal point.

It's crucial that the minimum value is not greater than the maximum.

<h3>{{ expense | currency: "INR":"symbol":"4.2-1" }}</h3>

If you violate this rule, you will encounter the following error:

Built-In Angular Pipes - Part 1 — figure 6

If you wish to hide decimal points entirely, set the fraction part of the digitsInfo parameter to 0 (e.g., 1.0-0).

The locale parameter will be discussed in more detail later, along with internationalization and localization topics.

We hope this overview has been helpful. Stay tuned for deep dives into the remaining built-in pipes.

Happy Coding!