How Do You Create a Custom Pipe in Angular?

1. What is a Custom Pipe?

A custom pipe is a pipe created by the developer to perform an application-specific data transformation that Angular's built-in pipes do not provide.

For example, suppose the database contains:

M
F

but we want to display:

Male
Female

We can create a custom pipe:

{{ gender | gender }}

2. Why Do We Need a Custom Pipe?

Angular provides built-in pipes such as:

uppercase
lowercase
date
currency
percent
async

But applications often require custom transformations.

Examples:

M → Male
A → Active
Long text → shortened text
Employee code → formatted employee code
File size → KB, MB, GB
Custom date/status formatting

Instead of repeating the transformation logic in multiple components, we can place it in a reusable custom pipe.

3. Full Simple Sample Program

Let's create a pipe that converts:

M → Male
F → Female

Step 1: Create the Pipe

Using Angular CLI:

ng generate pipe gender

Short form:

ng g p gender

This creates a pipe file such as:

gender-pipe.ts

depending on your Angular CLI/file-naming configuration.

Step 2: `gender-pipe.ts`

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'gender'
})
export class GenderPipe implements PipeTransform {

  transform(value: string): string {

    if (value === 'M') {
      return 'Male';
    }

    if (value === 'F') {
      return 'Female';
    }

    return 'Unknown';
  }
}

Step 3: `app.ts`

import { Component } from '@angular/core';
import { GenderPipe } from './gender-pipe';

@Component({
  selector: 'app-root',

  imports: [
    GenderPipe
  ],

  templateUrl: './app.html'
})
export class App {

  employeeName = 'Syed';

  gender = 'M';
}

Step 4: `app.html`

<h2>Employee Details</h2>

<p>
  Name: {{ employeeName }}
</p>

<p>
  Gender: {{ gender | gender }}
</p>

Output

Employee Details

Name: Syed
Gender: Male

4. Explanation

The most important part is:

@Pipe({
  name: 'gender'
})

@Pipe tells Angular:

This class is an Angular pipe.

The name:

name: 'gender'

determines how we use the pipe in HTML:

{{ gender | gender }}

`PipeTransform`

Our class implements:

PipeTransform

export class GenderPipe implements PipeTransform

PipeTransform defines the transform() method that performs the actual transformation.

`transform()` Method

transform(value: string): string

The value before | is passed to transform().

For:

{{ gender | gender }}

if:

gender = 'M';

Angular effectively passes:

'M'
 ↓
GenderPipe
 ↓
transform('M')
 ↓
'Male'
 ↓
Displayed in HTML

5. Custom Pipe with Parameters

Custom pipes can also accept parameters.

Suppose we want:

{{ name | greeting:'Mr.' }}

We could create:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greeting'
})
export class GreetingPipe implements PipeTransform {

  transform(value: string, title: string): string {
    return `${title} ${value}`;
  }
}

Usage:

{{ 'Syed' | greeting:'Mr.' }}

Output:

Mr. Syed

Here:

'Syed'
   ↓
value

'Mr.'
   ↓
title

Angular effectively calls:

transform('Syed', 'Mr.')

6. Multiple Parameters

A pipe can accept multiple parameters:

{{ value | myPipe:param1:param2 }}

For example:

transform(
  value: string,
  prefix: string,
  suffix: string
): string {

  return `${prefix} ${value} ${suffix}`;
}

Usage:

{{ 'Syed' | formatName:'Mr.':'Developer' }}

Conceptually:

transform('Syed', 'Mr.', 'Developer')

7. Advantages

Reusable

One custom pipe can be used across multiple components.

Cleaner templates and components

Instead of repeatedly writing transformation logic:

if (gender === 'M') {
   return 'Male';
}

we simply use:

{{ gender | gender }}

Separation of concerns

The component handles application behavior, while the pipe handles presentation-oriented transformations.

Easy to maintain

If the transformation rule changes, we can modify the pipe in one place.

8. Disadvantages

Not suitable for business logic

A pipe should generally perform data transformation, not complex application operations.

Avoid putting things such as:

HTTP requests
Database operations
Complex business workflows
Side effects

inside a pipe.

Performance considerations

Expensive transformations can negatively affect performance, especially when using impure pipes.

9. Pure vs Impure Custom Pipes

By default, Angular pipes are pure.

@Pipe({
  name: 'gender'
})

This is effectively:

@Pipe({
  name: 'gender',
  pure: true
})

A pure pipe runs when Angular detects a change to its input value or object reference.

You can create an impure pipe:

@Pipe({
  name: 'gender',
  pure: false
})

However, impure pipes can execute frequently during change detection, so they should be used carefully.

10. Key Points

Custom pipes are created using the @Pipe decorator.
A pipe normally implements PipeTransform.
The transformation logic goes inside transform().
CLI command:

ng generate pipe gender

or:

ng g p gender

Basic usage:

{{ value | pipeName }}

With parameters:

{{ value | pipeName:param1:param2 }}

Pipes are pure by default.
Custom pipes are useful for reusable, presentation-focused transformations.
In modern standalone Angular, import the pipe directly into the component:

imports: [GenderPipe]

11. Interview Questions and Answers

Q1. How do you create a custom pipe in Angular?

Create a class using the @Pipe decorator, implement PipeTransform, and write the transformation inside transform().

@Pipe({
  name: 'gender'
})
export class GenderPipe implements PipeTransform {

  transform(value: string): string {
    return value === 'M' ? 'Male' : 'Female';
  }
}

Q2. What is `PipeTransform`?

PipeTransform is an Angular interface that defines the:

transform()

method used to transform the input value.

Q3. What is the purpose of `transform()`?

transform() receives the input value and optional parameters and returns the transformed value.

transform(value: string): string {
    return value.toUpperCase();
}

Q4. Can a custom pipe accept parameters?

Yes.

{{ name | greeting:'Mr.' }}

The parameter is received by transform():

transform(value: string, title: string): string

Q5. Are custom pipes pure by default?