Things to know about Pipes in Angular

Here's what you need to know about using pipes in your Angular application .

Things to know about Pipes in Angular Picture 1

What is Pipes in Angular?

Pipes in Angular are data transformation tools that make apps more dynamic. They take a value as input and return a converted value as output. Data transformations can be as simple as formatting dates, or currencies, or as complex as filtering or sorting a list of items.

You can use pipes in Angular components and templates. Using Pipes is easy and you can chain them to create more complex transformations.

Angular provides a number of pipes including DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe and AsyncPipe. It also provides custom pipe creation.

Each built-in Angular pipe implements a unique function and can help you transform data.

DataPipe

DataPipe formats and displays date & month variables in the format specified in your locale. Unlike other frameworks that need a JavaScript package to format dates & months, Angular uses DataPipe. To use DatePipe in your application, add the pipe symbol (|) followed by date and any other additional parameters.

For example:

Today's date is {{ currentDate | date }}

In this example, you pass the currentDate variable to a DataPipe, then format it to the default date format. You define the currentDate variable in the TypeScript file of your component.

For example:

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { currentDate: any = new Date(); }

You can also pass additional parameters to the DataPipe to customize the results:

Today's date is {{ currentDate | date:'shortDate' }}

The above code block passed the shortDate parameter to DatePipe . This tells the DatePipe to format the date in a short style. Besides the shortDate parameter , you can configure the DatePipe using various parameters, including z , longDate , and custom date formats such as dd/MM/YY .

UpperCasePipe and LowerCasePipe

UpperCasePipe & LowerCasePipe transform your text. You can convert text to uppercase with UpperCasePipe and lowercase with LowerCasePipe .

To use UpperCasePipe and LowerCasePipe , add the pipe symbol (|) followed by lowercase to use LowerCasePipe or upercase to use UperCasePipe .

Here is an example of how to use UpperCasePipe and LowerCasePipe :

{{ message | uppercase}}

{{ message | lowercase}}

CurrencyPipe

Using CurrencyPipe , you can format numbers to in-app currency. CurrencyPipe formats numbers according to your language. To format numbers with CurrencyPipe , use the pipe symbol followed by currency .

For example:

{{ number | currency }}

In this example, CurrencyPipe converts the variable to currency. By default, CurrencyPipe converts variables to dollars. To change this, you can configure CurrencyPipe to convert to another currency by passing additional parameters.

For example:

{{ number | currency: 'GBP' }}

Here you pass the GBP parameter to CurrencyPipe . This ensures the number variable converts to the British pound currency.

DecimalPipe and PercentPipe

DecimalPipe converts numbers to decimals, and PercentPipe converts numbers to percentages.

To use DecimalPipe , use the pipe symbol followed by the number and additional parameters. To use PercentPipe , do the same thing but replace number with percent and no additional parameters.

For example:

{{ number | number: '1.2-3' }}

{{ number | percent }}

The additional parameter is passed to DecimalPipe , which controls the integers and fractions displayed. Parameter 1 specifies that there must be at least one integer digit. For comparison, parameter 2.3 indicates that there are at least 2 and up to 3 fractional digits.

JsonPipe

JsonPipe is a built-in pipe that converts data into JSON string format. It is mainly used for debugging purposes. You can use JsonPipe for both objects and arrays.

Syntax:

{{ expression | json }}

Here, expression is the data you want to convert to JSON format. The pipe operator ( | ) applies JsonPipe to this expression

For example, define an object and an array in your component:

import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.scss"], }) export class AppComponent { user: data = { firstname: "John", lastname: "Doe", }; profiles: data[] = [ { firstname: "John", lastname: "Doe", }, { firstname: "Peter", lastname: "Parker", }, ]; } interface data { firstname: string; lastname: string; }

The above code block defines the user object and the profiles array . You can now use JsonPipe to convert objects and arrays to JSON.

{{ user | json}}

{{ profiles | json}}

Here, JsonPipe will convert the user object and the profiles array to a JSON string that you can quickly examine in the template during development or debugging.

SlicePipe

SlicePipe is similar to JavaScript's slice() method . SlicePipe formats arrays or strings by retrieving elements to create new arrays or strings.

To use SlicePipe , you use the pipe icon , then the slice and the two parameters, the start and end indexes. The starting index is the position in the array or string where the pipe begins to access the elements, and the ending index is where the pipe will use to access the elements.

Example of how to use SlicePipe :

{{ string | slice: 0:2}}

{{ array | slice: 0:1}}

In this example, SlicePipe will retrieve the first two elements from the string variable, the element at index 0 and the element at index 1. Furthermore, it will retrieve the first element from the array variable. SlicePipe is useful when you only want to show part of the data in the template.

AsyncPipe

AsyncPipe is an integrated Angular pipe that automatically subscribes and unsubscribes to an Observale or Promise. It returns the latest value emitted by Observable or Promise.

The syntax to use AsyncPipe is as follows:

{{ expression | async }}

Here, the expression is the Observable or Promise you want to subscribe to. For example:

let numbers = of(1, 2, 3, 4, 5);

You can use AsyncPipe to subscribe to the Observable and show the last played value like this:

{{ numbers | async }}

This block of code will output the latest number from the Observable. AsyncPipe is very useful when dealing with asynchronous operations in templates. It automatically subscribes to Observable or Promise when the component initializes and unsubscribes when it is destroyed.

Threading Pipes in Angular

You can chain pipes together to implement multiple transformations in an expression. Pipe chaining is as simple as using multiple pipe operators (|) in an expression. The output of each pipe becomes the input to the next pipe.

Basic syntax:

{{ expression | pipe1 | pipe2 | . }}

For example, you can convert a date object to a string using DatePipe, and then convert that string to uppercase using UpperCasePipe.

Today's date is {{ currentDate | date:'shortDate' | uppercase }}

Pipes are a powerful feature in Angular that allows you to mutate data before it shows up in the viewport. Hopefully through the article, you know how to use Pipe in Angular effectively.

Samuel Daniel

Update 11 August 2023