In Angular, pipes let you transform values in your templates — like formatting dates or filtering lists — directly in HTML. But behind the scenes, not all pipes work the same way. Some are pure, others are impure, and understanding the difference can help you write faster and more predictable apps.
Let’s break it down.
🔧 What Is a Pipe?
A pipe is a simple way to format or transform data in Angular templates.
You can use Angular’s built-in pipes (like date, uppercase, or currency) or write your own custom ones.
⚡ Pure Pipes (The Default)
Pure pipes are Angular’s default behavior. They are efficient and only run when the input value changes by reference.
✅ When do Pure Pipes run?
-
Only when the input primitive changes (
number,string, etc.) -
Or when an object or array is replaced with a new one
🟢 Why they’re great:
-
Fast — don’t run unnecessarily
-
Work well with immutable data patterns
🔍 Example: Pure Pipe
This pipe only runs when the number changes.
🔄 Impure Pipes (pure: false)
Impure pipes run every time Angular runs change detection, even if the input is the same.
⚠️ When are they useful?
-
If your data is constantly changing (like a clock, live scores, etc.)
-
Or if the data is mutated, not replaced
🔴 Why they’re risky:
-
Performance cost — re-run on every UI tick
-
Should be used only when necessary
🔍 Example: Impure Pipe
This pipe will re-run on every change detection — even if nothing changed in the input.
🔍 Key Differences
| Feature | Pure Pipe | Impure Pipe |
|---|---|---|
| Trigger | New input reference | Every change detection |
| Performance | ✅ Fast & efficient | ⚠️ Slower (use sparingly) |
| Default Behavior | ✅ Yes | ❌ No (pure: false) |
| Use Case | Static / predictable | Dynamic / live-changing |
❌ Common Misconceptions
1. “All pipes update when data changes.”
Wrong: Only impure pipes do. Pure pipes update only if the input reference changes.
2. “Changing an object property will trigger a pure pipe.”
Wrong: You need to replace the object for the pipe to re-run.
3. “Impure pipes are okay to use anywhere.”
Wrong: They can slow down your app, especially in loops like *ngFor.
4. “Pure pipes are always better.”
Wrong: They’re better for performance, but sometimes don’t work with live data. Choose based on your use case.
5. “If my pure pipe isn’t updating, I should make it impure.”
Wrong: Instead, consider using immutable updates (new objects), or rethink your logic. Impure pipes are a last resort.
💡 Best Practices
| Situation | Recommendation |
|---|---|
| Static display or rarely changing | ✅ Use pure pipe |
| Dynamic data (e.g., clocks, websockets) | ⚠️ Use impure pipe cautiously |
| Working with arrays/objects | 🧠 Replace with a new one if using pure pipe |
In large lists (*ngFor) |
❌ Avoid impure pipes |
📌 In One Sentence
Use pure pipes for performance with static or immutable data, and impure pipes only when working with dynamic or mutated data — but know the performance trade-offs.
🎁 Final Thought
If you want your app to be fast, predictable, and easier to debug, prefer pure pipes and immutable updates. Use impure pipes as a tool — not a crutch — and only when absolutely necessary.