Angular Pipes (Angular 20+): Complete Guide to Data Transformation

Introduction

Angular pipes are powerful features that transform data directly within templates. They help developers keep components simple by separating presentation logic from business logic. Whether you’re formatting dates, displaying currency, converting text to uppercase, or creating your own custom transformations, pipes make Angular templates more readable and maintainable.

Angular 20+ continues to support both built-in and custom pipes, making them an essential part of modern Angular development.

What is an Angular Pipe?

An Angular pipe is a feature that transforms data before it is displayed in the template.

Instead of modifying the original data inside the component, a pipe applies a transformation only to the displayed output.

For example, suppose a component contains the following value:

name = 'angular framework';

Without a pipe, the template displays:

<p>{{ name }}</p>

Output:

Using the UpperCasePipe:

<p>{{ name | uppercase }}</p>

Output:

The original value remains unchanged, while the displayed value is transformed.

Why Use Pipes?

Pipes offer several advantages that improve code quality and maintainability.

1. Cleaner Templates

Pipes keep formatting logic inside templates instead of moving it into component classes.

Instead of writing:

formattedDate = new Date().toLocaleDateString();

you can simply use:

{{ today | date }}

2. Reusable Transformations

The same pipe can be used across multiple components, reducing duplicate formatting logic.

3. Better Readability

Templates become easier to understand because data transformations are expressed clearly using pipe syntax.

Example:

{{ salary | currency }}

is much more readable than calling custom formatting methods repeatedly.

4. Separation of Concerns

Components focus on business logic, while pipes handle presentation and formatting.

Pipe Syntax

The basic syntax is:

{{ value | pipeName }}

Multiple pipes can be chained together.

Example:

{{ username | uppercase | slice:0:5 }}

Angular applies transformations from left to right.

Built-in Angular Pipes

Angular provides several built-in pipes for common formatting tasks.

1. UpperCasePipe

Converts text to uppercase.

Example:

{{ 'angular' | uppercase }}

Output:

2. LowerCasePipe

Converts text to lowercase.

Example:

{{ 'Angular Framework' | lowercase }}

Output:

3. TitleCasePipe

Capitalizes the first letter of each word.

Example:

{{ 'angular pipe tutorial' | titlecase }}

Output:

4. DatePipe

Formats date values in various styles.

Example:

today = new Date();

Template:

{{ today | date }}

Possible output:

Custom formatting:

{{ today | date:'dd/MM/yyyy' }}

Output:

Other commonly used formats include:

{{ today | date:'short' }}
{{ today | date:'fullDate'}
{{ today | date:'mediumTime' }}

5. CurrencyPipe

Formats numbers as currency.

Example:

{{ 4999.99 | currency }}

Output:

Specify another currency:

{{ 4999.99 | currency:'EUR' }}

Output:

6. DecimalPipe

Formats decimal numbers.

Example:

{{ 12.34567 | number:'1.2-2' }}

Output:

7. PercentPipe

Displays numbers as percentages.

Example:

{{ 0.75 | percent }}

Output:

8. SlicePipe

Extracts a portion of a string or array.

Example:

{{ 'Angular Framework' | slice:0:7 }}

Output:

It also works with arrays.

9. JsonPipe

Displays objects in JSON format.

Example:

{{ user | json }}

Useful during development for debugging complex objects.

10. AsyncPipe

The AsyncPipe automatically subscribes to Observables and Promises, updates the view when new values arrive, and unsubscribes when the component is destroyed.

Example:

users$ = this.userService.getUsers();

Template:

<ul>
  <li *ngFor="let user of users$ | async">
    {{ user.name }}
  </li>
</ul>

Using the AsyncPipe reduces boilerplate code and helps prevent memory leaks caused by forgotten subscriptions.

11. Chaining Pipes

Multiple pipes can be combined in a single expression.

Example:

{{ username | uppercase | slice:0:4 }}

If:

username = angular

Output:

Angular processes the transformations one after another.

12. Pipe Parameters

Many built-in pipes accept additional parameters.

Example:

{{ amount | currency:'USD':'symbol':'1.2-2' }}

Here:

• USD specifies the currency.
• symbol displays the currency symbol.
• 1.2-2 controls the number format.

Parameters make pipes flexible enough for many formatting scenarios.

Creating a Custom Pipe

Sometimes built-in pipes are not enough. Angular allows you to create your own custom pipes.

Generate a pipe using Angular CLI:

ng generate pipe pipes/reverse

Or:

ng g p pipes/reverse

Angular generates a new pipe class.

Example:

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

Usage:

{{ 'Angular' | reverse }}

Output:

Custom pipes allow developers to encapsulate reusable formatting logic.

Pure and Impure Pipes

Angular supports two categories of pipes.

Pure Pipes

Pure pipes execute only when Angular detects a change in the input reference or primitive value.

They offer excellent performance and are the default type.

Example:

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

Pure pipes are ideal for predictable transformations.

Impure Pipes

Impure pipes execute during every change detection cycle.

Example:

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

Impure pipes are useful when working with mutable objects or arrays but should be used carefully because they can impact performance.

Standalone Pipes in Angular 20+

Angular 20 encourages the use of standalone APIs.

A standalone pipe can be created by setting:

@Pipe({
  name: 'reverse',
  standalone: true
})

Standalone pipes can be imported directly into standalone components without declaring them in an NgModule.

Example:

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [ReversePipe],
  template: `
    <p>{{ 'Angular' | reverse }}</p>
  `
})
export class HomeComponent {}

This approach reduces boilerplate and aligns with Angular’s modern architecture.

Common Mistakes

Developers often make these mistakes when using pipes.

1. Performing Business Logic

Pipes are designed for presentation logic. Business rules and application workflows should remain in components or services.

2. Creating Too Many Impure Pipes

Because impure pipes execute frequently, excessive use can degrade application performance.

3. Replacing Services with Pipes

Pipes should transform displayed values, not fetch data or communicate with APIs.

4. Ignoring Reusability

If the same transformation appears repeatedly, create a reusable custom pipe instead of duplicating formatting logic across templates.

Real-World Example

Imagine an e-commerce application displaying product information.

Component data:

product = {
  name: 'wireless headphones',
  price: 149.99,
  releaseDate: new Date()
};

Template:

<h2>{{ product.name | titlecase }}</h2>
<p>{{ product.price | currency:'USD' }}</p>
<p>{{ product.releaseDate | date:'fullDate' }}</p>

Possible output:

The component remains clean because all formatting is handled by pipes.

Advantages and Disadvantages

Advantages

• Simplifies template formatting
• Improves readability
• Encourages code reuse
• Separates presentation from business logic
• Reduces duplicate formatting code
• Supports custom transformations
• Integrates seamlessly with standalone components
• AsyncPipe helps prevent memory leaks

Disadvantages

• Impure pipes may reduce performance
• Pipes should not contain complex business logic
• Excessive chaining can make templates harder to read
• Very specialized transformations may be better handled elsewhere

When used appropriately, the advantages of pipes greatly outweigh their limitations.

When Should You Use Pipes?

Pipes are ideal whenever data needs to be formatted for display.

Common use cases include:

• Formatting dates and times
• Displaying currency values
• Converting text case
• Formatting numbers and percentages
• Truncating strings
• Displaying JSON during development
• Handling Observables with AsyncPipe
• Creating reusable display transformations

Avoid using pipes for data retrieval, business logic, or state management.

Conclusion

Angular pipes provide a clean, reusable, and efficient way to transform data directly within templates. They allow developers to format text, dates, numbers, currencies, and asynchronous data without cluttering component code.

Angular Pipe – Objective Questions (MCQs)

Related Angular Tutorials