Angular - 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 new pipe-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'
})
export class AppComponent {
  title = 'pipe-app';
  presentDate = new Date();
}

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 −

Angular Custom Pipes

A custom pipe is a user-defined pipe that allows developers to perform specific transformations that Angular's built-in pipes can't achieve. The built-in pipes provide limited functionalities like formatting dates, numbers and strings. However, you can achieve more than that using custom pipes. For example, sorting and filtering.

To create a custom pipe, run the following command in Angular CLI −

ng generate pipe <pipe-name>

Multiple Choice Questions on Angular Pipes

Now that you have learned the Angular Pipes, let's test your knowledge. Please answer the following questions based on your understanding −