How to use Angular pipes
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using Angular pipes transforms data in templates without modifying the underlying component data, providing clean separation between data processing and presentation logic. As the creator of CoreUI with extensive Angular experience since 2014, I’ve implemented pipes in numerous enterprise applications for data formatting, localization, and complex data transformations. The most effective approach involves applying pipes directly in template expressions using the pipe operator (|) with optional parameters for customization. This method ensures efficient data transformation with automatic change detection while maintaining readable, declarative template syntax.
Apply pipes in templates using the pipe operator (|) to transform data for display without modifying component properties.
@Component({
selector: 'app-data-display',
template: `
<div class="data-container">
<!-- String transformation -->
<h2>{{ title | uppercase }}</h2>
<p>{{ description | titlecase }}</p>
<!-- Date formatting -->
<p>Created: {{ createdDate | date:'medium' }}</p>
<p>Last updated: {{ lastUpdate | date:'dd/MM/yyyy' }}</p>
<!-- Number formatting -->
<p>Price: {{ price | currency:'USD':'symbol':'1.2-2' }}</p>
<p>Percentage: {{ completion | percent:'1.0-1' }}</p>
<!-- Array transformation -->
<ul>
<li *ngFor="let item of items | slice:0:5">
{{ item | titlecase }}
</li>
</ul>
<!-- JSON display for debugging -->
<pre>{{ userData | json }}</pre>
<!-- Chaining pipes -->
<p>{{ message | slice:0:50 | uppercase }}</p>
<!-- Async pipe for observables -->
<div *ngIf="user$ | async as user">
<p>Welcome, {{ user.name | titlecase }}!</p>
</div>
</div>
`
})
export class DataDisplayComponent {
title = 'user dashboard'
description = 'manage your account settings'
createdDate = new Date()
lastUpdate = new Date('2025-12-01')
price = 99.99
completion = 0.85
items = ['apple', 'banana', 'orange', 'grape', 'kiwi', 'mango']
userData = { id: 1, name: 'John Doe', email: '[email protected]' }
message = 'This is a very long message that needs to be truncated for display'
user$ = this.userService.getCurrentUser()
}
This code demonstrates comprehensive pipe usage including string transformation with uppercase and titlecase, date formatting with custom patterns, number formatting for currency and percentages, and array manipulation with slice. Pipes can be chained using multiple pipe operators, and the async pipe handles observables automatically. Each pipe transforms the display value without affecting the original component data, ensuring clean separation of concerns between data and presentation.
Best Practice Note:
This is the pipe usage pattern we implement in CoreUI dashboard components for consistent data presentation across enterprise applications. Use pipes for presentation logic and keep business logic in components for maintainable, testable Angular applications.
