Pure vs Impure Pipes in Angular

Q: When is a pure pipe called?

When the input reference changes.

💡 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!

📄 PDF Download Coming Soon