Pure vs Impure Pipes in Angular
💡 Concept Name
Pure vs. Impure Pipes
📘 Quick Intro
Pipes in Angular transform data in templates. Pure pipes run only when input reference changes, while impure pipes run on every change detection cycle.
🧠 Analogy / Short Story
Think of a pure pipe like a light switch—it only flips when you ask. An impure pipe is like a motion sensor—it checks constantly, even if you’re standing still.
🔧 Technical Explanation
-
✅ Pure Pipes:
- Stateless and side-effect-free.
- Called only when input reference changes.
- Optimal for performance (checked infrequently).
-
❌ Impure Pipes:
- May have internal state or side effects.
- Called on every change detection cycle.
- Can degrade performance if overused.
🎯 Purpose & Use Case
- ✅ Use pure pipes for formatting, casing or simple calculations.
- ✅ Use impure pipes for filtering, sorting arrays in templates.
- ✅ Avoid heavy impure pipes in large lists to maintain performance.
💻 Real Code Example
// pure-counter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'pureCounter' })
export class PureCounterPipe implements PipeTransform {
transform(value: number): number {
return value * 2;
}
}
// impure-filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'impureFilter', pure: false })
export class ImpureFilterPipe implements PipeTransform {
transform(items: any[], search: string): any[] {
return items.filter(i => i.name.includes(search));
}
}
❓ Interview Q&A
Q1: What does `pure: false` do in @Pipe decorator?
A: Marks the pipe as impure to run on every change detection.
Q2: When should you avoid impure pipes?
A: When rendering large lists or complex views.
Q3: Are pure pipes cached by Angular?
A: Yes, until input reference changes.
Q4: Can pure pipes have side effects?
A: No, they should be side-effect-free.
Q5: How do you optimize filtering instead of using impure pipes?
A: Pre-filter data in component and use pure pipes or built-in directives.
📝 MCQs
Q1. When is a pure pipe called?
- Every cycle
- When input reference changes
- On init only
- Never
Q2. What is the default purity of pipes?
- Impure
- Pure
- Neither
- Both
Q3. Which decorator flag makes a pipe impure?
- impure: true
- pure: false
- stateful: true
- detect: always
Q4. What can cause performance issues?
- Pure pipes on static data
- Impure pipes on large lists
- No pipes
- Both
Q5. How to improve performance over impure pipes?
- Use more pipes
- Filter in component
- Use impure pipes
- Use pure pipes only
Q6. Can impure pipes be stateful?
- No
- Yes
- Only pure pipes
- Only custom pipes
Q7. Which pipes run least frequently?
- Impure pipes
- Pure pipes
- All pipes
- No pipes
Q8. Why cache pure pipes?
- To slow down app
- To avoid recomputation
- To use more memory
- To detect changes
Q9. What is change detection in Angular?
- Garbage collection
- Process checking for updates
- Route changes
- DI instantiation
Q10. Which is side-effect-free?
- Impure pipe
- Pure pipe
- Both
- None
💡 Bonus Insight
Use memoization or RxJS operators in components to handle dynamic data rather than impure pipes to keep templates performant.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!