Creating custom pipes in Angular - Mechanics & Internals

Overview - Creating custom pipes

What is it?

Creating custom pipes in Angular means making your own small functions that change how data looks in your app's display. Pipes take input data and transform it into a new format, like changing text to uppercase or formatting dates. Custom pipes let you do this in your own special way when the built-in pipes don't fit your needs. They help keep your templates clean and your code reusable.

Why it matters

Without custom pipes, you'd have to write the same data-changing code over and over inside your components or templates, making your app messy and harder to maintain. Custom pipes solve this by letting you write the transformation once and use it everywhere. This saves time, reduces mistakes, and makes your app easier to update and understand.

Where it fits

Before learning custom pipes, you should understand Angular components and templates basics. Knowing how data binding works helps a lot. After mastering custom pipes, you can explore Angular directives and services to build more interactive and powerful apps.

Mental Model

Core Idea

A custom pipe is a reusable function that transforms data in Angular templates to change how it looks without changing the original data.

Think of it like...

It's like a coffee filter that changes raw coffee grounds into a smooth drink; the coffee is the data, and the filter (pipe) shapes it into a form you want to enjoy.

Input Data ──▶ [ Custom Pipe ] ──▶ Transformed Output

┌─────────────┐     ┌───────────────┐     ┌───────────────┐
│ Raw Data    │ --> │ Custom Pipe   │ --> │ Display Data  │
└─────────────┘     └───────────────┘     └───────────────┘

Build-Up - 7 Steps

1

Foundation

What is an Angular pipe?

Concept: Introduce the basic idea of pipes as simple data transformers in Angular templates.

In Angular, a pipe is a way to change how data looks when shown in the app. For example, the built-in 'uppercase' pipe changes text to all capital letters. You use pipes in templates with the | symbol, like {{ name | uppercase }}.

Result

You see the text transformed in the app without changing the original data in the code.

Understanding pipes as simple, reusable data formatters helps keep your templates clean and your code DRY (Don't Repeat Yourself).

2

Foundation

How to create a basic custom pipe

Concept: Learn the structure of a custom pipe class and how to implement the transform method.

To make a custom pipe, create a class with the @Pipe decorator and a transform method. The transform method takes input and returns the changed output. For example, a pipe that adds 'Hello' before a name: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'greet' }) export class GreetPipe implements PipeTransform { transform(value: string): string { return 'Hello ' + value; } }

Result

You can use {{ 'Alice' | greet }} in your template and see 'Hello Alice' displayed.

Knowing the transform method is the heart of a pipe lets you customize any data transformation you need.

3

Intermediate

Using parameters in custom pipes

🤔Before reading on: do you think pipes can accept extra information to change their behavior? Commit to yes or no.

Concept: Pipes can take extra arguments to customize how they transform data.

You can add parameters to your transform method after the first input. For example, a pipe that repeats a string a given number of times: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'repeat' }) export class RepeatPipe implements PipeTransform { transform(value: string, times: number): string { return value.repeat(times); } } Use it like {{ 'Hi' | repeat:3 }} to get 'HiHiHi'.

Result

The output changes based on the parameter you pass, making pipes more flexible.

Allowing parameters makes pipes adaptable to many situations without rewriting code.

4

Intermediate

Pure vs impure pipes explained

🤔Before reading on: do you think pipes run every time the app changes or only when input changes? Commit to your answer.

Concept: Pipes can be pure (run only when input changes) or impure (run more often), affecting performance and behavior.

By default, pipes are pure, meaning Angular calls them only when the input value changes. Impure pipes run on every change detection cycle, even if input is the same. You mark a pipe impure by setting pure: false in the @Pipe decorator: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'impureExample', pure: false }) export class ImpureExamplePipe implements PipeTransform { transform(value: any): any { // transformation logic } } Use impure pipes carefully because they can slow down your app.

Result

Pure pipes improve performance by running less often; impure pipes allow reacting to complex changes but can cause slowdowns.

Understanding pipe purity helps you balance app speed and dynamic updates.

5

Intermediate

Registering and using custom pipes

Concept: Learn how to make your custom pipe available in your Angular app by declaring it in a module.

After creating a pipe class, you must add it to the declarations array of an Angular module (usually app.module.ts) to use it in templates: @NgModule({ declarations: [GreetPipe, RepeatPipe, ...], imports: [...], bootstrap: [AppComponent] }) export class AppModule {} Then you can use your pipes anywhere in that module's templates.

Result

Your custom pipes work in the app's templates wherever declared.

Knowing module registration is essential to make your pipes usable and avoid errors.

6

Advanced

Handling complex data in pipes

🤔Before reading on: do you think pipes can transform objects or only simple strings? Commit to your answer.

Concept: Pipes can transform any data type, including objects and arrays, enabling complex formatting.

You can write pipes that take objects or arrays and return formatted strings or filtered data. For example, a pipe that formats a user object: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'userInfo' }) export class UserInfoPipe implements PipeTransform { transform(user: {name: string, age: number}): string { return `${user.name} is ${user.age} years old`; } } Use {{ user | userInfo }} to show a readable string.

Result

Your app can display complex data in user-friendly ways using pipes.

Pipes are powerful tools for shaping any data type for display, not just simple text.

7

Expert

Performance tips and pitfalls with pipes

🤔Before reading on: do you think using many impure pipes affects app speed? Commit to yes or no.

Concept: Understanding how Angular runs pipes helps avoid slow apps and bugs, especially with impure pipes and heavy computations.

Impure pipes run very often, so avoid heavy calculations inside them. Instead, use pure pipes or move logic to components or services. Also, avoid side effects in pipes; they should only transform data. Use memoization or caching inside pipes if needed to improve speed. Remember, pipes run during Angular's change detection, so inefficient pipes can slow down your app.

Result

Your app stays fast and responsive by using pipes wisely.

Knowing Angular's change detection and pipe execution timing is key to writing efficient, bug-free pipes.

Under the Hood

Angular compiles templates into JavaScript code that calls pipe transform methods during change detection. Pure pipes are called only when their input changes, tracked by Angular's change detection system. Impure pipes are called every cycle. Pipes are stateless functions that receive input and optional parameters and return transformed output without side effects.

Why designed this way?

Pipes were designed to separate data transformation from component logic, keeping templates clean and declarative. Pure pipes optimize performance by avoiding unnecessary recalculations. The design balances ease of use, reusability, and app speed.

┌─────────────┐       ┌───────────────┐       ┌───────────────┐
│ Template    │──────▶│ Pipe Transform│──────▶│ Transformed   │
│ Expression  │       │ Method        │       │ Output        │
└─────────────┘       └───────────────┘       └───────────────┘
       ▲                     │                       │
       │                     ▼                       ▼
  Change Detection   Pure or Impure Check       Display Updated

Myth Busters - 4 Common Misconceptions

Quick: Do you think impure pipes run only when input changes? Commit to yes or no.

Common Belief: Impure pipes behave like pure pipes and run only when input changes.

Reality: Impure pipes run on every change detection cycle, regardless of input changes.

Why it matters: Misunderstanding this causes unexpected slowdowns and bugs when impure pipes do heavy work.

Quick: Can pipes modify the original data passed to them? Commit to yes or no.

Common Belief: Pipes can change the original data objects they receive.

Reality: Pipes should never mutate input data; they must return new transformed values without side effects.

Why it matters: Mutating data in pipes breaks Angular's change detection and can cause unpredictable UI bugs.

Quick: Are pipes suitable for fetching data or running asynchronous tasks? Commit to yes or no.

Common Belief: Pipes can perform async operations like fetching data from servers.

Reality: Pipes are synchronous and should not perform async tasks; Angular provides async pipes for that purpose.

Why it matters: Trying to do async work in custom pipes leads to errors and broken UI updates.

Quick: Do you think you must declare a pipe in every module you want to use it? Commit to yes or no.

Common Belief: You can use a pipe anywhere without declaring it in the module.

Reality: Pipes must be declared in the Angular module's declarations array to be usable in that module's templates.

Why it matters: Not declaring pipes causes template errors and confusion about why pipes don't work.

Expert Zone

1

Pure pipes rely on Angular's change detection strategy and input immutability; mutable inputs can cause pipes not to update as expected.

2

Impure pipes can be useful for detecting changes in complex objects or arrays but require careful performance consideration.

3

You can chain multiple pipes in templates, and understanding their execution order is important for correct data transformation.

When NOT to use

Avoid custom pipes for heavy computations or async operations; instead, use component logic, services, or Angular's async pipe. Also, don't use impure pipes unless necessary due to performance costs.

Production Patterns

In real apps, custom pipes are used for formatting currencies, filtering lists, sanitizing HTML, or transforming complex data objects. Teams often create shared pipe libraries for reuse across projects.

Connections

Functional Programming

Custom pipes are pure functions that transform input to output without side effects.

Understanding pure functions from functional programming helps write predictable and testable pipes.

Data Binding in UI Frameworks

Pipes transform data during data binding to update the UI dynamically.

Knowing how data binding works clarifies when and how pipes run to update the display.

Compiler Optimization

Angular's compiler optimizes pipe calls by caching pure pipe results.

Recognizing compiler optimizations explains why pure pipes improve app performance.

Common Pitfalls

#1 Using impure pipes for heavy calculations causing slow app performance.

Wrong approach:

@Pipe({ name: 'heavyCalc', pure: false })
export class HeavyCalcPipe implements PipeTransform {
transform(value: number): number {
// expensive calculation
for(let i=0; i<1000000; i++) { value += Math.sqrt(i); }
return value;
}
}

Correct approach:

@Pipe({ name: 'heavyCalc', pure: true })
export class HeavyCalcPipe implements PipeTransform {
transform(value: number): number {
// expensive calculation
for(let i=0; i<1000000; i++) { value += Math.sqrt(i); }
return value;
}
}

Root cause:

Misunderstanding that impure pipes run every change detection cycle, causing repeated heavy work.

#2 Mutating input data inside a pipe causing UI bugs.

Wrong approach:

transform(value: string[]): string[] {
value.push('new');
return value;
}

Correct approach:

transform(value: string[]): string[] {
return [...value, 'new'];
}

Root cause:

Not realizing pipes must be pure and avoid side effects like changing inputs.

#3 Forgetting to declare the custom pipe in the module, leading to template errors.

Wrong approach:

// Pipe created but not added to module declarations
@Pipe({ name: 'greet' })
export class GreetPipe implements PipeTransform { ... }

Correct approach:

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

Root cause:

Missing module registration step due to unfamiliarity with Angular module system.

Key Takeaways

Custom pipes in Angular let you transform data in templates cleanly and reuse transformations across your app.

The transform method is the core of a pipe, taking input and optional parameters to return formatted output.

Pure pipes run only when inputs change, improving performance; impure pipes run every change detection cycle but can slow your app.

Always declare your custom pipes in an Angular module to use them in templates without errors.

Avoid side effects and heavy computations in pipes to keep your app fast and predictable.