Angular Basics: Built-in Pipes with Examples of Each

Angular has some built-in pipes that allow us to render numbers and string values in a locale-specific format. Let’s take a look!

Angular is a framework that lets us create interactive web frontends for users in an organized way. One entity that it has are pipes.

Pipes let us render items in component templates in the way we want. Angular comes with a few built-in pipes to let us format data for display.

In this article, we will look at how to use these pipes in our Angular projects.

Built-in Pipes

Angular comes with the following pipes:

• The AsyncPipe lets us take the resolve value of promises or observables and display them on the screen.
• CurrencyPipe lets us format numbers into a currency value for displaying on the screen.
• DatePipe lets us format dates.
• I18PluralPipe lets us get the plural version of a word for a given locale and display it.
• I18nSelectPipe returns a value that corresponds to a given string and shows that.
• JsonPipe lets us show JSON objects on the screen, which is helpful for debugging.
• KeyValuePipe lets us get the keys and the corresponding values in a new object so that we can get them and display them on the screen.
• LowerCasePipe returns a string converted to all lower case.
• PercentPipe converts a decimal number into a locale specific percentage value.
• SlicePipe returns a subset of the elements in an array or string.
• TitleCasePipe converts a string into title case.
• UpperCasePipe converts a string into upper case.

Usage of Each Pipe

We can put pipes in the curly brace after the pipe | sign.

For instance, we write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x = 100;
}

app.component.html

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

to format value x into a currency value with the currency pipe in the app.component.html template.

As a result, we see $100.00 displayed.

AsyncPipe

The AsyncPipe lets us get the resolved value of a promise and display it.

To use it, we write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x: Promise<string> | null = Promise.resolve("hello world");
}

app.component.html

<p>{{x | async}}</p>

We assigned x to a promise which has a resolved value 'hello world'. And to display that, we use the async pipe with x to get the value and display it.

Likewise, we can use it with an observable by writing:

app.component.ts

import { Component } from "@angular/core";
import { Observable, of } from "rxjs";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x: Observable<string> | null = of("hello world");
}

app.component.html

<p>{{x | async}}</p>

We assigned x to an observable returned by of, which returns an observable that returns the value of the value we pass into it as an argument.

Therefore, we get the same result.

CurrencyPipe

The currency pipe lets us format a number into a currency value.

For instance, we write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x = 100;
}

app.component.html

<p>{{x | currency:'CAD':'symbol':'4.2-3':'en'}}</p>

to format 100 into a currency with the currency pipe`.

The first argument is 'CAD', which is the currency to format to.

symbol is the second argument and means we show the currency symbol.

The third string is the format of the number. The first number is the minimum number of integer digits. The second number is the minimum number of fraction digits. And the last number is the maximum number of fraction digits.

The last argument is the locale string.

Arguments passed into pipes are separated by colons.

DatePipe

We can use the DatePipe to format numbers to be displayed on the screen.

For instance, we write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x = new Date(2023, 1, 3, 1, 1, 1);
}

app.component.html

<p>{{x | date: 'YYYY-MM-dd h:mm:ss a'}}</p>

to assign x to a date.

Then we use the date pipe by passing in a date format string as its argument.

The string has codes that represent various formats.

• YYYY formats the year to a four or more digits year.
• MM formats the month into a two-digit month.
• dd formats the day of the month into a two-digit number.
• h formats the hour with the minimum digits
  required.
• mm formats the minutes into a two-digit number.
• ss formats the seconds into a two-digit number.
• And a formats the time period into AM or PM.

As result, 2023-02-03 1:01:01 AM should be displayed since the 1 in the second argument of the Date constructor is February.

DecimalPipe

The DecimalPipe lets us format a number into the format we want.

To use it, we write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x = 100.88;
}

app.component.html

<p>{{x | number: '1.0-1'}}</p>

The argument is the format of the number. The first number is the minimum number of integer digits. The second number is the minimum number of fraction digits. And the last number is the maximum number of fraction digits.

Therefore, 100.9 is displayed since the maximum number of fractional digits is 1. Therefore 100.88 is rounded to 100.9.

I18nPluralPipe

We can use the I18nPluralPipe to get the plural version of a word.

For instance, we write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x = 1;
  mapping: { [k: string]: string } = {
    "=0": "No bottles.",
    "=1": "One bottle.",
    other: "# bottles."
  };
}

app.component.html

<p>{{ x | i18nPlural: mapping }}</p>

to map the value of x into the plural value to display.

If x is 0, then we see 'No bottles.'. If x is 1, then we see 'One bottle.'. Otherwise, we see the value of x followed by 'bottles.'.

Therefore, we see 'One bottle.' since x is 1.

I18nSelectPipe

I18nSelectPipe lets us display a string that corresponds to a given value.

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x = "female";
  mapping: { [k: string]: string } = {
    male: "Tell him.",
    female: "Tell her.",
    other: "Tell them."
  };
}

app.component.html

<p>{{ x | i18nSelect: mapping }}</p>

to convert x to one of the values listed in the mapping object.

If x is 'male', then we see 'Tell him.'. If x is 'female', then we see 'Tell her.'. Otherwise, we see 'Tell them.'

Therefore, we see 'Tell her.' since x is 'female'.

JsonPipe

We can use the JsonPipe to show the value of an object in our component template.

To use it, we write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x: { [k: string]: number } = {
    foo: 1,
    bar: 2,
    baz: 3
  };
}

app.component.html

<p>{{ x | json }}</p>

to define the object x in AppComponent.

Then we display the object’s value by using the json pipe.

As a result, we see { "foo": 1, "bar": 2, "baz": 3 } displayed.

Without the json pipe, we see [object Object] on the screen.

KeyValuePipe

The KeyValuePipe pipe lets us get the keys and values of an object as an iterable object so we can loop through and render the entries.

For example, we write:

app.component.ts

import { KeyValue } from "@angular/common";
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x: { [k: string]: number } = {
    foo: 1,
    bar: 2,
    baz: 3
  };
  sortValues(a: KeyValue<string, number>, b: KeyValue<string, number>) {
    return a.value - b.value;
  }
}

app.component.html

<p *ngFor="let item of x | keyvalue: sortValues">
  {{item.key}}:{{item.value}}
</p>

to define the x object and the sortValues comparator method to let us sort the KeyValue pairs by the value of each pair.

Then we use the keyvalue pipe with the sortValues comparator method to sort the key-value pairs by the values.

Therefore, we see:

foo:1

bar:2

baz:3

LowerCasePipe

The LowerCasePipe lets us convert a string to all lower case.

For instance, we write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x: string = "The quick brown fox jumps over the lazy dog ";
}

app.component.html

<p>{{x | lowercase}}</p>

to use the lowercase to convert string x to lower case and display it.

Therefore, we see the quick brown fox jumps over the lazy dog displayed.

PercentPipe

The PercentPipe lets us format a number into a percentage value.

To use it, we write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x = 0.88888;
}

app.component.html

<p>{{x | percent: '1.0-1': 'en'}}</p>

The first string is the format of the number. The first number is the minimum number of integer digits. The second number is the minimum number of fraction digits. And the last number is the maximum number of fraction digits.

The second value is the locale string.

Therefore, we see 88.9% displayed since we specified that the formatted value should have a maximum 1 decimal digit.

SlicePipe

The SlicePipe lets us return a slice of an array or string and render it.

For instance, we write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x = [1, 2, 3, 4, 5, 6, 7, 8];
}

app.component.html

<p *ngFor="let i of x | slice:1:6">{{i}}</p>

to use the slice pipe with the start and end index of the slice to return the slice of x from index 1 to 5 inclusive.

As a result, we see:

2

3

4

5

6

TitleCasePipe

The TitleCasePipe lets us convert a string to title case.

For instance, we write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x: string = "The quick brown fox jumps over the lazy dog ";
}

app.component.html

<p>{{x | titlecase}}</p>

to use the titlecase to convert string x to lower case and display it.

Therefore, we see The Quick Brown Fox Jumps Over The Lazy Dog displayed.

UpperCasePipe

The UpperCasePipe lets us convert a string to title case.

For instance, we write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x: string = "The quick brown fox jumps over the lazy dog ";
}

app.component.html

<p>{{x | uppercase}}</p>

to use the uppercase to convert string x to lower case and display it.

Therefore, we see THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG displayed.

Conclusion

Pipes let us render items in component templates in the way we want. Angular comes with a few built-in pipes to let us render numbers and string values in a locale-specific format.

Also, we can use pipes to get a slice of arrays or strings and to get values returned from promises and observables.