Pipes

What are Angular Pipes?

In Angular, pipes are functions that format specified data before displaying it in the View. They help to transform and manage data within interpolation, denoted by {{ | }}. Therefore, pipes are sometimes referred to as filters. It accepts arrays, integers and strings as inputs which are separated by a vertical bar “|” symbol.

Features and Uses of Angular Pipes

Some of the features and uses of Angular pipes are listed below −

Pipes can apply transformations directly within the HTML element.
Once a custom pipe is created, it can be reused throughout the Angular application.
Multiple pipes can be chained together. The output of one pipe can be passed as input to another pipe.
You can use pipes to format and transform numbers, objects, strings, and dates in a way that is suitable for display in the UI.
Pipes are used to filter data which means it can show only certain items from a list based on passed conditions.

How to Use Angular Pipes?

To use Angular pipes in your application, embed the pipe directly inside template expression. This is done using Angular’s pipe operator which is denoted by a vertical bar character “|”.

The pipe operator is a binary operator. On the left of this operator, the input value is passed to the transformation function, and the right side operand is the pipe name.

All the built-in pipes in Angular are available in the @angular/common package. Hence, make sure to import the required pipe from this package by specifying the pipe name in the following command −

import{ Pipe-Name }from'@angular/common';

Syntax

The syntax to use Angular pipe is as follows −

<html-tag-name>{{ input-value | pipe-name }}</html-tag-name>

Where,

html-tag-name can be replaced by any HTML tag, input-value is the input that will be passed into the pipe on the right side of pipe operator.

Chaining Angular Pipes

Chaining multiple pipes together is also possible. The output of one pipe can be passed as input to another pipe. And, the chained pipes run from left to right.

The syntax to chain Angular pipes is as follows −

<html-tag-name>{{ input-value | pipe1 | pipe2 }}</html-tag-name>

Passing Parameters to Angular Pipes

Some Angular pipes allow to configure the transformation by passing parameters. To specify a parameter, append the pipe name with a colon (:) followed by the parameter value.

The syntax to add parameters to Angular pipes is shown below −

<html-tag-name>{{ input-value | pipe : parameter }}</html-tag-name>

Working Example

The following example illustrates how to use the DatePipe in your Angular application to format dates.

Step 1: Create a pipe-app application using the below command:

ng newpipe-app

Step 2: Add the below content in app.component.html file.

<div> 
   Today's date :-{{presentDate}}</div>

Step 3: Import @angular/common package and create an Date object inside app.component.ts file −

import{ Component }from'@angular/core';import{ RouterOutlet }from'@angular/router';import{ DatePipe}from'@angular/common';

@Component({
  selector:'app-root',
  standalone:true,
  imports:[RouterOutlet, DatePipe],
  templateUrl:'./app.component.html',
  styleUrl:'./app.component.css'})exportclassAppComponent{
  title ='pipe-app';
  presentDate =newDate();}

Step 4: Start your application using the below command −

ng serve

It will display the following output on your browser −

Today's date :- Tue Jan 07 2025 11:52:26 GMT+0530 (India Standard Time)

Step 5: Let’s add date pipe in the HTML file.

<div> 
   Today's date :-{{presentDate | date }}</div>

Now, you will see the below output on your screen −

Today's date :- Jan 7, 2025

Step 6: Pass fullDate parameter to the date pipe as shown below −

<div> 
   Today's date :- {{presentDate | date: 'fullDate' }}</div>

Step 7: Now, run your application and you can see the below response −

Today's date :- Tuesday, January 7, 2025

Angular Built-in Pipes

Angular supports a number of built-in pipes, which are as follows −

SNo.	Pipes & Description
1.	DatePipeIt is used to format a given date value.
2.	UpperCasePipeIt converts individual letters of the specified texts into uppercase.
3.	LowerCasePipeIt transforms individual letters of the specified texts into lowercase.
4.	CurrencyPipeThis pipe is used to transform a given number into a currency string.
5.	DecimalPipeThis pipe formats a number into a string of decimal point number.
6.	PercentPipeIt formats specified numbers into a percentage string.
7.	TitleCasePipeIt is used to convert the specified text to a title case.
8.	JsonPipeThis built-in pipe is used to transform an object to its corresponding JSON string representation.
9.	KeyValuePipeUse this pipe to create an array of key-value pairs from a given object or map.
10.	SlicePipeIt returns a new sub-string from the specified string.