Pure vs impure pipes in Angular - Visual Side-by-Side Comparison

Concept Flow - Pure vs impure pipes

Input value changes?

Yes↓

Pure Pipe transforms input

↓

Output updated in template

↓

Wait for next change

↓

No input change?

No↓

Pure Pipe skips transform

↓

Impure Pipe triggers

↓

Transforms input every change detection

↓

Output updated in template

↓

Wait for next change detection

Pure pipes run only when input changes; impure pipes run every change detection cycle.

Execution Sample

Angular

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'example', pure: true })
export class ExamplePipe implements PipeTransform {
  transform(value: any): any {
    return value + '!';
  }
}

A simple pure pipe that adds an exclamation mark to the input string.

Execution Table

Step	Change Detection Cycle	Input Value	Pipe Type	Transform Called?	Output	Reason
1	Initial	'Hello'	Pure	Yes	'Hello!'	Input changed from undefined to 'Hello'
2	Second	'Hello'	Pure	No	'Hello!'	Input unchanged, pure pipe skips transform
3	Third	'Hello World'	Pure	Yes	'Hello World!'	Input changed, pure pipe transforms
4	Fourth	'Hello World'	Pure	No	'Hello World!'	Input unchanged, pure pipe skips transform
5	Initial	'Hello'	Impure	Yes	'Hello!'	Impure pipe always transforms
6	Second	'Hello'	Impure	Yes	'Hello!'	Impure pipe always transforms
7	Third	'Hello World'	Impure	Yes	'Hello World!'	Impure pipe always transforms
8	Fourth	'Hello World'	Impure	Yes	'Hello World!'	Impure pipe always transforms

💡 Pure pipe stops transforming when input unchanged; impure pipe transforms every cycle.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6	After 7	After 8
inputValue	undefined	'Hello'	'Hello'	'Hello World'	'Hello World'	'Hello'	'Hello'	'Hello World'	'Hello World'
purePipeOutput	undefined	'Hello!'	'Hello!'	'Hello World!'	'Hello World!'	N/A	N/A	N/A	N/A
impurePipeOutput	undefined	N/A	N/A	N/A	N/A	'Hello!'	'Hello!'	'Hello World!'	'Hello World!'

Key Moments - 3 Insights

Why does the pure pipe not transform the input on every change detection?

Because pure pipes only run when their input changes, as shown in execution_table rows 2 and 4 where input is unchanged and transform is skipped.

Why does the impure pipe transform the input every time even if the input is the same?

Impure pipes run on every change detection cycle regardless of input change, as seen in execution_table rows 5 to 8 where transform is always called.

What happens if the input is an object that changes internally but reference stays the same for a pure pipe?

Pure pipe will not detect internal changes because it checks input by reference, so transform won't run unless the object reference changes.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does the pure pipe first skip transforming the input?

A Step 3

B Step 5

C Step 2

D Step 6

💡 Hint

Check the 'Transform Called?' column for pure pipe rows in execution_table.

According to variable_tracker, what is the purePipeOutput after the third change detection?

A 'Hello!'

B 'Hello World!'

C 'Hello World'

D undefined

💡 Hint

Look at the purePipeOutput row under 'After 3' column in variable_tracker.

If the input value changes every cycle, how would the pure pipe's transform calls change?

A Transform called every cycle

B Transform called only once

C Transform never called

D Transform called randomly

💡 Hint

Pure pipes run transform when input changes, see execution_table steps 1 and 3.

Concept Snapshot

Pure pipes run only when input reference changes.
Impure pipes run every change detection cycle.
Use pure pipes for performance when input is immutable.
Impure pipes useful for inputs that change internally.
Declare pipe with @Pipe({pure: true|false}).
Angular calls transform accordingly.

Full Transcript

In Angular, pipes transform data in templates. Pure pipes run their transform method only when the input changes by reference, improving performance by skipping unnecessary work. Impure pipes run their transform method every change detection cycle, regardless of input changes, useful when input changes internally without reference change. The execution table shows pure pipes skipping transform when input is unchanged, while impure pipes always transform. Variable tracker shows how outputs update accordingly. Key moments clarify why pure pipes skip transforms and impure pipes do not. The visual quiz tests understanding of when transforms run and output values. Remember to choose pure pipes for stable inputs and impure pipes for dynamic inputs.