What are Angular pipes and how do pure and impure pipes differ?
Understand Angular pipes and how pure and impure pipes differ, including memoization, change detection behavior, performance trade-offs, and practical examples.
Expected Interview Answer
Angular pipes are template functions that transform displayed data — like formatting dates or currency — without altering the underlying value; pure pipes re-run only when their input reference changes, while impure pipes re-run on every change detection cycle.
A pipe takes an input and optional arguments and returns a transformed output used in the template with the | syntax. Pure pipes (the default) are memoized: Angular only re-invokes them when the input's identity changes, making them efficient. Impure pipes, marked pure: false, execute on every change detection run regardless of input identity, which is needed for mutable data like arrays but can hurt performance if overused.
- Keep display formatting out of component logic
- Reusable across many templates
- Pure pipes are memoized for performance
- Impure pipes handle mutable or async data
- Chainable to compose transformations
AI Mentor Explanation
A pure pipe is like a scoreboard that only recalculates the run rate when the ball count actually changes — it caches the last figure and skips the maths otherwise. An impure pipe is the commentator who recomputes batting averages at every single moment of play, even when nothing new happened, spending far more effort just to stay current.
Step-by-Step Explanation
Step 1
Create the pipe
Use @Pipe with a name and implement PipeTransform's transform(value, ...args) method.
Step 2
Apply in template
Use the | operator, e.g. {{ price | currency:'USD' }}, optionally chaining multiple pipes.
Step 3
Understand pure default
Pipes are pure by default; Angular memoizes results and re-runs only on input identity change.
Step 4
Mark impure when needed
Set pure: false in the decorator so transform runs every change detection cycle for mutable data.
Step 5
Weigh performance
Prefer pure pipes; use impure only when necessary and keep their logic cheap.
What Interviewer Expects
- Definition of a pipe and the transform method
- The pure vs impure distinction and default behavior
- How reference identity affects pure pipe re-runs
- Performance implications of impure pipes
- Awareness of built-in pipes like async, date, currency
Common Mistakes
- Thinking pipes mutate the original data
- Assuming pure pipes update when an array is mutated in place
- Overusing impure pipes and causing performance issues
- Confusing the async pipe's subscription handling with impurity rules
- Forgetting to declare or import the pipe before use
Best Answer (HR Friendly)
“Angular pipes format data for display, like turning a raw number into a currency. Pure pipes only recalculate when the input actually changes, which is fast, while impure pipes recalculate constantly, which is handy for changing data but slower.”
Code Example
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'exclaim' }) // pure by default
export class ExclaimPipe implements PipeTransform {
transform(value: string): string {
return value + '!';
}
}
@Pipe({ name: 'filterActive', pure: false })
export class FilterActivePipe implements PipeTransform {
// Runs every change detection cycle, so it sees in-place array mutations
transform(items: { active: boolean }[]): unknown[] {
return items.filter(i => i.active);
}
}Follow-up Questions
- How does the async pipe work and why is it useful?
- Why can a pure pipe miss updates to a mutated array?
- How do you pass arguments to a pipe?
- What are the performance risks of impure pipes?
- How would you convert an impure pipe into a pure one?
MCQ Practice
1. When does a pure pipe re-run its transform method?
Pure pipes are memoized and re-run only when the input's identity (reference) changes.
2. How do you make a pipe impure?
Setting pure: false in the @Pipe decorator makes it run on every change detection cycle.
3. Which built-in Angular pipe is impure by nature?
The async pipe is impure so it can react to new values emitted by observables or promises.
Flash Cards
What is an Angular pipe? — A template function implementing PipeTransform that formats/transforms displayed data without changing the source value.
When does a pure pipe re-run? — Only when its input reference (identity) changes — results are memoized otherwise.
When does an impure pipe re-run? — On every change detection cycle, regardless of whether the input reference changed.
How do you declare an impure pipe? — Set pure: false in the @Pipe decorator metadata.