? Custom Pipes in Angular

? Quick Overview

Custom pipes in Angular let you define your own transformation logic for displaying data in templates. They are useful when the built-in pipes (like date, uppercase, currency) do not meet your specific formatting needs.

Angular Custom Pipes PipeTransform

? Key Concepts

Pipe: A class that transforms input data into a desired output for display.
@Pipe decorator: Tells Angular that the class is a pipe and defines its name.
PipeTransform interface: Requires a transform() method that holds transformation logic.
Declaration in module: Every custom pipe must be declared in the declarations array of an Angular module.
Template usage: Once declared, a pipe can be used in templates just like built-in pipes using the | (pipe) operator.

? Syntax & Structure of a Custom Pipe

Use @Pipe({ name: 'pipeName' }) above the class.
Implement PipeTransform and define transform(value: any, ...args: any[]): any.
Write your formatting / transformation logic inside transform().
Declare the pipe in the Angular module that will use it.

? Code Examples

1️⃣ Creating a `ReversePipe`

? View Code Example (reverse.pipe.ts)

// reverse.pipe.ts - custom pipe that reverses strings
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'reverse'
})
export class ReversePipe implements PipeTransform {
transform(value: string): string {
return value.split('').reverse().join('');
}
}

2️⃣ Using the Custom Pipe in a Template

? View Code Example (app.component.html)

<!-- app.component.html - template using the reverse pipe -->
<p>Original: {{ message }}</p>
<p>Reversed: {{ message | reverse }}</p>

3️⃣ Registering the Pipe in a Module

? View Code Example (app.module.ts)

// app.module.ts - registering the custom pipe
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ReversePipe } from './reverse.pipe';

@NgModule({
declarations: [AppComponent, ReversePipe],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule {}

? Live Output / Explanation

What happens at runtime?

You define a component property, for example: message = 'Angular';.
The template prints:
- Original: Angular
- Reversed: ralugnA
The ReversePipe takes the string, splits it into characters, reverses them, and joins them back.
Because the pipe is declared in AppModule, it can be used anywhere in that module’s templates.

In short: custom pipes make your templates cleaner by moving display-only logic out of components and into reusable transformers.

✅ Tips & Best Practices

Use pipes only for display transformations; do not mutate the original data.
Keep pipe logic simple and fast to avoid slowing down change detection.
Custom pipes can accept arguments, e.g. {{ value | myPipe:arg1:arg2 }}, for flexible transformations.
If a pipe performs heavy work, consider making it a pure: false pipe carefully, or move heavy logic to services.
Reuse pipes across components to keep formatting rules consistent in your app.

? Try It Yourself / Practice Tasks

Create a TitleCasePipe that capitalizes the first letter of each word in a string.
Write a NumberFormatPipe that formats a number with thousand separators (e.g. 1234567 → 1,234,567).
Build a pipe that truncates long text and adds ... at the end after a given length.
Use your custom pipes in multiple components to check their reusability and module declarations.
Experiment with passing extra arguments to your pipes (e.g. maximum length, locale, precision).