What Are Pipes in Angular? Types, Uses & Examples Explained

Types of Pipes in Angular

There are mainly two types of pipes in Angular:

• Built-in Pipes
• Custom Pipes

Built-in Pipes

Angular provides a set of built-in pipes for common transformations, which are readily available for use in templates without requiring any additional setup.

Following is the list of built-in pipes:

• DatePipe: Used to format dates.
• DecimalPipe: Used to format numbers.
• CurrencyPipe: Used to format currencies.
• UpperCasePipe: Used to convert text into uppercase.
• LowerCasePipe: Used to convert text into lowercase.
• PercentPipe: Used to format percentages.
• JsonPipe: Used to convert JavaScript objects into JSON strings.

Note: To create and implement pipes in your Angular project or application, ensure that your Angular application is properly set up.

Let’s understand each built-in pipe with examples.

Formatting Date Using DatePipe

app.component.ts file:

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrl: './app.component.css'
})
export class AppComponent implements OnInit{
 title = 'myApp';
 date: any;
 ngOnInit(): void {
     this.date = new Date();
 }
}

app.component.html file:

<h2>Date: {{date | date : 'dd-mm-YYYY'}}</h2>
<h2>Date: {{date | date : 'dd/mm/YYYY'}}</h2>

Output:

Date: 04-57-2024
Date: 04/57/2024

Formatting decimal: using decimal pipe

In this example, we are formatting the decimal (pi value) using the decimal pipe into ‘number’ and ‘1.2-2’ formats.

app.componente.ts file:

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrl: './app.component.css'
})
export class AppComponent {
 pi = 3.14159;
}

app.component.html file:

<h2>PI value: {{pi | number}}</h2>
<h2>PI value: {{pi | number: '1.2-2'}}</h2>

Output:

PI value: 3.142
PI value: 3.14

Formatting currency: using currency pipe

We will use the currency pipe to format the current price into a currency format - 

app.component.ts file:

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrl: './app.component.css'
})
export class AppComponent {
price = 12343.4554;
}

app.component.html file:

<h2>Price (default currency): {{price | currency}}</h2>
<h2>Price (in INR): {{price | currency : 'INR'}}</h2>

Output:

Price (default currency): $12,343.46
Price (in INR): ₹12,343.46

Converting text into upper and lower case:

In the following example, we use the ‘uppercase’ and ‘lowercase’ pipes to convert the text into small(lower) and capital(upper) cases.

app.component.ts file:

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrl: './app.component.css'
})
export class AppComponent {
title = "What are the pipes in Angular ?";
}

app.component.html file:

<h2>Uppercase: {{title | uppercase}}</h2>
<h2>Lowercase: {{title | lowercase}}</h2>

Output:

Uppercase: WHAT ARE THE PIPES IN ANGULAR?
Lowercase: what are the pipes in angular?

Formatting percent: using percent pipe

In the following example, we use the percent pipe to format the current percent rate into the 'percent' and 'percent:'1.2-2' format.

app.component.ts file:

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent{
 discountRate = 12.2423;
}

app.component.html file:

<h2>DiscountRate: {{discountRate | percent}}</h2>
<h2>DiscountRate: {{discountRate | percent: '1.2-2'}}</h2>

Output:

DiscountRate: 1,224%
DiscountRate: 1,224.23%

What are Custom pipes?

In Angular, custom pipes allow you to create reusable and modular transformations for data that is displayed in your templates (HTML). 

You can define custom pipes to perform specific formatting, filtering, or other data manipulations that are not covered by the built-in Angular pipes.

Following are steps to create a custom pipe in your Angular project or application:

Step 1: Create a folder within your app component with the name “pipes,” or you can run the following command in your terminal; it will automatically create a “pipes” folder in your app component along with the custom file.

Step 2: Run the following command to create a custom pipe along with the folder - 

 >> ng generate pipe pipes/agePipe

Where,

ng generate is the command to generate a pipe. You can specify the folder name where you want to create our custom pipe; we have given the folder name as pipes.

"agePipe" is your pipe name; you can keep any name as per your requirement, but make sure the name should be meaningful.

Step 3: After running the above command in your IDE terminal, you might be able to see the below messages:

CREATE src/app/pipes/age-pipe.pipe.spec.ts (192 bytes)
CREATE src/app/pipes/age-pipe.pipe.ts (219 bytes)
UPDATE src/app/app.module.ts (464 bytes)

Step 4: Now you might be able to see two files within your pipes folder as follows:

age-pipe.pipe.spec.ts

import { AgePipePipe } from './age-pipe.pipe';
describe('AgePipePipe', () => {
 it('create an instance', () => {
   const pipe = new AgePipePipe();
   expect(pipe).toBeTruthy();
 });
});

age-pipe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
 name: 'agePipe'
})
export class AgePipePipe implements PipeTransform {
 transform(value: unknown, ...args: unknown[]): unknown {
   return null;
 }
}

You will write all your logic within the age-pipe.pipe.ts file only.

 Step 5: Now open the age-pipe.pipe.ts file and start writing the code below that will format the user's age.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
 name: 'agePipe'
})
export class AgePipePipe implements PipeTransform {
 transform(value: any, ageLimit = 20) {
   const age = new Date().getFullYear() - new Date(value.dob).getFullYear();
   return age > ageLimit;
 }
}

Here, the value is the value of a variable that you want to format using this custom pipe. Loot at the code below for a better understanding.

app.component.ts file:

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent{
 users = [
   {
   "name": "Rahul",
   "dob": "04/01/1999"
  },
  {
   "name": "Vinay",
   "dob": "04/01/2018"
  },
  {
   "name": "Lokesh",
   "dob": "04/01/2000"
  }
]
}

app.component.html file:

<ul>
   <li *ngFor="let u of users">
     Name: {{ u.name }} | Age > 20: {{ u | agePipe: 20 }}
   </li>
 </ul>

Output:

• Name: Rahul | Age > 20: true
• Name: Vinay | Age > 20: false
• Name: Lokesh | Age > 20: true