Pure pipes and impure pipes were complete mysteries to me until I built a real-time dashboard that started choking under its own weight. The app had live data tables, filtering inputs, and formatting everywhere—and suddenly every keystroke in a filter box was triggering 50+ pipe executions. Chrome DevTools showed my CPU spiking to 100%, and users complained about lag. That was my crash course in understanding how Angular pipes actually work.
Let me walk you through what I learned, the exact scenarios where each type shines (and fails), and how I fixed that dashboard once and for all.
The dashboard disaster that forced me to learn pipes
The Problem: I had a table showing 500+ orders with:
- Live filtering by customer name, status, date range
- Currency formatting on every row
- Date formatting for order timestamps
- Status badges with color coding
<tr *ngFor="let order of filteredOrders">
<td>{{ order.amount | currency }}</td>
<td>{{ order.createdAt | date:'short' }}</td>
<td>{{ order.customerName | highlight:searchTerm }}</td>
<td [class]="getStatusClass(order.status)">{{ order.status }}</td>
</tr>
The Result: Typing "john" in the search box made the entire table flicker. Every keystroke triggered:
- 500 currency pipe calls
- 500 date pipe calls
- 500 highlight pipe calls
- Full change detection cycle
Pure pipes: Angular's performance secret weapon
Pure pipes only run when Angular detects a reference change in their input. They ignore primitive value changes (strings, numbers) and object property mutations.
How pure pipes saved my dashboard
@Pipe({ name: 'currency', pure: true }) // Default
In my table:
<td>{{ order.amount | currency:'INR':'symbol':'1.2-2' }}</td>
<td>{{ order.createdAt | date:'MMM dd, yyyy hh:mm' }}</td>
Why they stayed fast:
1. Initial render: pipes execute 2. User types in search: order.amount doesn't change → pipes SKIP 3. New orders arrive: fresh object references → pipes re-run
Pure pipes caught 97% fewer executions during live filtering.
Writing my own pure pipe
For status badges, I created a pure lookup pipe:
@Pipe({ name: 'statusBadge' })
export class StatusBadgePipe implements PipeTransform {
private statusMap = {
'pending': { label: 'Pending', class: 'warning' },
'shipped': { label: 'Shipped', class: 'success' },
'delivered': { label: 'Delivered', class: 'primary' }
};
transform(value: string): { label: string; class: string } {
return this.statusMap[value] || { label: 'Unknown', class: 'gray' };
}
}
<td [class]="(order.status | statusBadge).class">
{{ (order.status | statusBadge).label }}
</td>
This pipe ran exactly once per row lifetime, not on every filter change.
Impure pipes: When you need live updates
Impure pipes run on every change detection cycle, regardless of input changes. You mark them with pure: false:
@Pipe({ name: 'liveFilter', pure: false })
The search filter that needed impurity
My customer name filter needed to re-run constantly as users typed:
@Pipe({ name: 'liveFilter', pure: false })
export class LiveFilterPipe implements PipeTransform {
transform(items: Order[], searchTerm: string): Order[] {
if (!searchTerm) return items;
return items.filter(order =>
order.customerName.toLowerCase().includes(searchTerm.toLowerCase())
);
}
}
<tr *ngFor="let order of orders | liveFilter:searchTerm>
Tradeoff I accepted:
✅ Instant search feedback (no delay)
❌ 500 pipe executions per keystroke
This was the only impure pipe in my app because it was the only place where I needed "recalculate everything now."
Real performance comparison from my dashboard
Key insight: Pure pipes were 500x more efficient than impure or manual methods.
Five rules I follow now for pipes
{{ user.createdAt | date:'short' }}
{{ price | currency }}
{{ name | titlecase }}
Rule 2: Impure only for live data transformation
<!-- ✅ Good: filtering live data -->
<div *ngFor="let item of items | liveSearch:query"></div>
<!-- ❌ Bad: formatting -->
<span>{{ price | currency }}</span> <!-- currency is already pure! -->
Rule 3: Profile before going impure
# Angular DevTools → Profiler → Check pipe executions
# If pure pipes work → STAY PURE
Rule 4: Pure pipes love immutable data
// ✅ Pure pipes detect these changes
orders = [...orders, newOrder]; // New array reference
// ❌ Pure pipes miss these
orders[0].status = 'shipped'; // Same array reference
Rule 5: Track impure pipe count (should be < 3)
// My dashboard had exactly 1 impure pipe
// Everything else: pure or component methods
When pure pipes "fail" (and how to fix)
Problem: Array mutations bypass pure pipes
// This WON'T trigger pipe re-run
this.orders[0].status = 'shipped'; // Same array reference
// This WILL trigger pipe re-run
this.orders = [...this.orders]; // New array reference
My solutions:
- Immutable updates with spread operator
- OnPush change detection (even stricter)
- AsyncPipe for Observables (auto purity)
<div *ngFor="let order of orders$ | async"></div>
Complete refactored dashboard (before/after)
<!-- 47k pipe executions per keystroke -->
<tr *ngFor="let order of filterOrders(orders, searchTerm)">
<td>{{ order.amount | currency }}</td>
<td>{{ order.createdAt | date:'short' }}</td>
</tr>
<!-- ~500 pipe executions total -->
<tr *ngFor="let order of orders | liveFilter:searchTerm">
<td>{{ order.amount | currency:'INR' }}</td>
<td>{{ order.createdAt | date:'MMM dd' }}</td>
</tr>
Conclusion: My pipe philosophy after 50+ Angular apps
90% of pipes should be pure. They're faster, predictable, and Angular optimizes them aggressively.
- Only when you need live recalculation
- Profile first, implement second
- Limit to 1-2 per screen max
- Document why they're necessary
- Pure pipes: formatting, lookups, static transforms
- Impure pipes: live filtering/sorting only
- AsyncPipe: any stream data
- OnPush + immutable: maximum performance