How to use built-in pipes in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using Angular built-in pipes provides ready-made solutions for common data transformation needs including formatting dates, numbers, currencies, and handling asynchronous data streams. As the creator of CoreUI with extensive Angular experience since 2014, I’ve utilized built-in pipes extensively in enterprise applications for internationalization, data presentation, and reactive programming patterns. The most efficient approach involves understanding each built-in pipe’s parameters and use cases to apply appropriate transformations directly in templates. This method leverages Angular’s optimized pipe implementations while maintaining clean, declarative templates with proper change detection handling.
Use Angular’s built-in pipes with appropriate parameters to handle common data transformation scenarios in templates.
@Component({
selector: 'app-builtin-pipes',
template: `
<div class="pipe-examples">
<!-- Date pipes with various formats -->
<h3>Date Formatting</h3>
<p>Default: {{ currentDate | date }}</p>
<p>Short: {{ currentDate | date:'short' }}</p>
<p>Medium: {{ currentDate | date:'medium' }}</p>
<p>Custom: {{ currentDate | date:'dd-MM-yyyy HH:mm' }}</p>
<p>Timezone: {{ currentDate | date:'medium':'UTC' }}</p>
<!-- Number and currency pipes -->
<h3>Number Formatting</h3>
<p>Decimal: {{ price | number:'1.2-3' }}</p>
<p>Currency: {{ price | currency:'EUR':'symbol':'1.2-2' }}</p>
<p>Percent: {{ taxRate | percent:'1.1-2' }}</p>
<!-- String transformation pipes -->
<h3>String Transformation</h3>
<p>Uppercase: {{ title | uppercase }}</p>
<p>Lowercase: {{ title | lowercase }}</p>
<p>Titlecase: {{ description | titlecase }}</p>
<!-- Array and object pipes -->
<h3>Collection Handling</h3>
<p>Slice: {{ numbers | slice:1:4 | json }}</p>
<p>JSON: {{ userObject | json }}</p>
<!-- Async pipe for observables -->
<h3>Async Data</h3>
<div *ngIf="userData$ | async as user">
<p>User: {{ user.name | titlecase }}</p>
<p>Balance: {{ user.balance | currency:'USD':'symbol' }}</p>
<p>Last login: {{ user.lastLogin | date:'medium' }}</p>
</div>
<!-- KeyValue pipe for objects -->
<h3>Object Iteration</h3>
<div *ngFor="let item of settings | keyvalue">
<strong>{{ item.key | titlecase }}:</strong> {{ item.value }}
</div>
</div>
`
})
export class BuiltinPipesComponent {
currentDate = new Date()
price = 1234.56789
taxRate = 0.15
title = 'angular pipes demonstration'
description = 'exploring built-in pipe functionality'
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
userObject = { id: 1, name: 'John Doe', role: 'admin' }
settings = { theme: 'dark', language: 'en', notifications: true }
userData$ = of({
name: 'jane smith',
balance: 2500.75,
lastLogin: new Date('2025-12-07T10:30:00')
})
}
This code demonstrates comprehensive usage of Angular’s built-in pipes including date formatting with various patterns and timezones, number formatting for decimals, currency, and percentages, string transformations for case changes, and collection handling with slice and JSON pipes. The async pipe automatically subscribes to observables and handles subscription cleanup, while the keyvalue pipe enables iteration over object properties in templates.
Best Practice Note:
This is the built-in pipe utilization pattern we implement in CoreUI components for consistent, internationalized data presentation across global enterprise applications. Leverage built-in pipes for performance optimization and consistency before creating custom pipes for specialized transformations.
