Have you ever noticed that some Angular pipes update immediately, while others only update when you refresh the page? That’s because Angular has two types of pipes: pure pipes and impure pipes. In this blog post, I’ll explain the difference in a super simple way, with real-world examples and easy-to-understand code!
Real-Life Analogy
📌 Think of a Coffee Machine and a Water Dispenser
- Pure Pipe (Coffee Machine ☕) → It only brews coffee when you insert a new coin (input change).
- Impure Pipe (Water Dispenser 💦) → It keeps pouring water as long as you press the button (keeps updating even if nothing changes).
Let’s look at how pure pipes and impure pipes behave differently.
Pure Pipe
👉 Executes only when the input reference changes!
Impure Pipe
👉 Executes on every change detection cycle, even if the input remains the same!
When Should You Use Pure vs. Impure Pipes?
✅ Use Pure Pipes When:
- Formatting dates (
datepipe) - Converting text (
uppercase,lowercase) - Displaying currency (
currencypipe)
❌ Use Impure Pipes Only When Necessary:
- Filtering lists (
filterpipe) - Sorting and modifying objects dynamically
- Updating data in real-time
Difference Between Pure and Impure Pipes
| Feature | Pure Pipes | Impure Pipes |
|---|---|---|
| Execution | Runs only when input changes | Runs on every change detection cycle |
| Performance | ✅ Fast & optimized | ⚠️ Slower, may affect performance |
| Best for | Static transformations (e.g., date, uppercase) | Dynamic changes (e.g., filtering lists) |
| Implementation | Default (pure: true) | Explicitly marked (pure: false) |
👉 Now that you understand the difference between pure and impure pipes, which one do you use most often in your Angular projects? Let me know in the comments below!
