How to chain pipes in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Chaining pipes in Angular allows you to apply multiple transformations sequentially to data in templates, creating powerful data processing pipelines with clean, readable syntax. As the creator of CoreUI with extensive Angular experience since 2014, I’ve implemented pipe chaining in numerous enterprise applications for complex data formatting and presentation requirements. The most effective approach involves using multiple pipe operators (|) in sequence to transform data through multiple stages for comprehensive formatting. This method provides flexible data transformation while maintaining template readability and leveraging Angular’s optimized pipe performance.
Chain multiple pipes using sequential pipe operators (|) to apply multiple transformations to data in Angular templates.
@Component({
selector: 'app-pipe-chaining',
template: `
<div class="data-display">
<!-- Basic pipe chaining -->
<h3>{{ title | uppercase | slice:0:20 }}</h3>
<!-- Number formatting with chaining -->
<p>Price: {{ price | currency:'USD':'symbol':'1.2-2' | lowercase }}</p>
<!-- Date and string chaining -->
<p>Created: {{ createdDate | date:'fullDate' | titlecase }}</p>
<!-- Complex chaining with multiple transformations -->
<p>Description: {{ description | slice:0:50 | titlecase | concat:'...' }}</p>
<!-- Array processing with chaining -->
<ul>
<li *ngFor="let item of items | slice:0:3 | keyvalue">
{{ item.key | titlecase }}: {{ item.value | uppercase }}
</li>
</ul>
<!-- JSON data with chaining -->
<pre>{{ userData | json | slice:0:100 }}</pre>
<!-- Async pipe chaining -->
<div *ngIf="user$ | async as user">
<p>Welcome, {{ user.name | titlecase | slice:0:20 }}!</p>
<p>Balance: {{ user.balance | currency:'USD' | uppercase }}</p>
</div>
<!-- Custom pipe chaining -->
<p>Search: {{ searchTerm | highlight:query | truncate:30 | uppercase }}</p>
<!-- Complex data transformation -->
<div *ngFor="let product of products">
<h4>{{ product.name | titlecase | slice:0:25 }}</h4>
<p>{{ product.price | currency:'EUR':'symbol' | lowercase }}</p>
<small>{{ product.description | slice:0:40 | titlecase }}</small>
</div>
</div>
`
})
export class PipeChainingComponent {
title = 'angular pipe chaining demonstration'
price = 299.99
createdDate = new Date()
description = 'this is a comprehensive example of how to chain multiple pipes together for data transformation'
items = {
frontend: 'angular',
backend: 'node.js',
database: 'mongodb'
}
userData = {
id: 1,
name: 'John Doe',
email: '[email protected]',
role: 'admin'
}
user$ = of({
name: 'jane smith',
balance: 1250.75
})
searchTerm = 'Angular is a powerful framework for building web applications'
query = 'Angular'
products = [
{
name: 'premium subscription',
price: 49.99,
description: 'access to all premium features and priority support services'
}
]
}
This code demonstrates comprehensive pipe chaining where each pipe processes the output of the previous pipe in sequence from left to right. Angular applies transformations in the order specified, so title | uppercase | slice:0:20 first converts to uppercase, then slices the result. Pipe chaining works with all pipe types including built-in pipes, custom pipes, and async pipes, providing flexible data transformation capabilities while maintaining template readability and performance optimization.
Best Practice Note:
This is the pipe chaining pattern we implement in CoreUI dashboard components for sophisticated data presentation and formatting. Keep pipe chains reasonable in length for readability and consider creating custom pipes when complex chaining becomes difficult to maintain or understand.
