Angular - Custom Pipes

Custom Pipes in Angular

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.

In Angular, pipes are functions that format specified data before displaying it in the View.

Features and Uses of Angular Custom Pipes

The Angular Custom Pipes provides the following features −

• Once you define a custom pipe, you can reuse it wherever needed in the application.
• Like built-in pipes, custom pipes can also be used directly in the template expressions.
• The logic for custom pipes is written in a separate TypeScript class and applied within the template. This helps in maintaining the code and improving the performance.
• There are a number of features that you can add using custom pipes to your Angular application, such as digit count, filtering, sorting, password generation and many more.

Creating a Custom Pipe in Angular

Follow the steps given below to create a Custom pipe in Angular −

• Step 1: Create a TypeScript class and export it. By convention, a pipe class should end with the string "Pipe".

• Step 2: Decorate the created TypeScript class with @Pipe Decorator. Inside this decorator, specify a name for the pipe.

• Step 3: In the end, inherit the PipeTransform interface and implement its transform() method.

Example

The following example explains about creating a custom Pipe and using it inside an Angular application.

Step 1: Open Angular CLI and generate a Pipe using the below command −

ng g pipe digitcount

After executing the above command, you can see these two files −

CREATE src/app/digitcount.pipe.spec.ts (211 bytes)
CREATE src/app/digitcount.pipe.ts (258 bytes)

Step 2: Let's create a logic for counting digits in a number using Pipe. Open digitcount.pipe.ts file and add the below code −

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ 
   name: 'digitcount' 
}) 
export class DigitcountPipe implements PipeTransform { 
   transform(val : number) : number { 
      return val.toString().length; 
   } 
}

Step 3: Navigate to app.component.html file and use the newly created pipe inside the template as shown below −

<div> 
  <h3> Using Custom DigitCount Pipe </h3> 
  <p>Count :- {{ digits | digitcount }}</p> 
</div> 
<router-outlet />

Step 4: Now, we have added logic to count number of digits in a given number. It's time to add the final code in app.component.ts file. Here, we import the DigitcountPipe and define a number.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { DigitcountPipe } from './digitcount.pipe';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, DigitcountPipe],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  digits : number = 100; 
}

Step 5: Now, run the application using ng serve command. The code will display the following result on the browser −

Using Custom DigitCount Pipe
Count :- 3