Angular Custom Pipes

What is Custom Pipes in Angular?

A custom pipe is a class with a @Pipe decorator implementing PipeTransform. The transform method receives the value plus any parameters and returns the transformed result.

Custom Pipes example

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

@Pipe({ name: 'stipend', standalone: true })
export class StipendPipe implements PipeTransform {
  transform(value: number | null, unpaidLabel = 'Unpaid'): string {
    if (!value) return unpaidLabel;
    return `₹${value.toLocaleString('en-IN')}/month`;
  }
}

Using it

{{ job.stipend | stipend }}
{{ job.stipend | stipend:'Not disclosed' }}

Key points to remember

• Pipes are pure by default — they re-run only when the input reference changes.
• Set pure: false only when you must react to internal mutations, and expect a performance cost.
• Keep transform side-effect free; it runs during change detection.

Common mistakes with Custom Pipes

• Marking a pipe impure to make it "work", which then runs on every cycle.
• Performing HTTP calls inside a pipe.