Pipe performance considerations in Angular - Step-by-Step Execution

Concept Flow - Pipe performance considerations

Component Template Uses Pipe

↓

Angular Detects Change

↓

Pipe Transform Called?

↓

Pipe Executes

↓

Output Rendered

Angular checks if a pipe needs to run on change detection. Pure pipes run only if inputs change; impure pipes run every time.

Execution Sample

Angular

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

@Pipe({ name: 'example', pure: true })
export class ExamplePipe implements PipeTransform {
  transform(value: string): string {
    console.log('Pipe executed');
    return value.toUpperCase();
  }
}

A pure pipe that converts text to uppercase and logs when it runs.

Execution Table

Step	Change Detection Trigger	Pipe Input	Pipe Called?	Action	Output
1	Initial render	'hello'	Yes	Pipe executes, logs 'Pipe executed'	'HELLO'
2	No input change	'hello'	No	Cached result used, no log	'HELLO'
3	Input changes	'world'	Yes	Pipe executes, logs 'Pipe executed'	'WORLD'
4	No input change	'world'	No	Cached result used, no log	'WORLD'
5	Impure pipe example	'test'	Yes	Pipe executes every time, logs 'Pipe executed'	'TEST'
6	Impure pipe example	'test'	Yes	Pipe executes again, logs 'Pipe executed'	'TEST'

💡 Pure pipe skips execution when input unchanged; impure pipe runs every change detection cycle.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6
pipeInput	undefined	'hello'	'hello'	'world'	'world'	'test'	'test'
pipeCalled	false	true	false	true	false	true	true
pipeOutput	undefined	'HELLO'	'HELLO'	'WORLD'	'WORLD'	'TEST'	'TEST'

Key Moments - 3 Insights

Why doesn't the pure pipe run on every change detection cycle?

Because pure pipes run only when their input changes, as shown in steps 2 and 4 where the input is the same and the pipe is not called.

What happens if a pipe is marked as impure?

Impure pipes run every change detection cycle regardless of input changes, as shown in steps 5 and 6 where the pipe executes repeatedly.

How does Angular improve performance with pure pipes?

Angular caches the output of pure pipes and reuses it if the input hasn't changed, avoiding unnecessary pipe executions.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the pipe first skip execution due to unchanged input?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Check the 'Pipe Called?' column for the first 'No' after initial execution.

According to the variable tracker, what is the pipeOutput after step 3?

A 'WORLD'

B 'HELLO'

C 'test'

D undefined

💡 Hint

Look at the 'pipeOutput' row under 'After Step 3' column.

If the pipe was impure from the start, how would the 'Pipe Called?' column change at step 2?

A It would be 'No'

B It would be 'Yes'

C It would be 'Maybe'

D It would be empty

💡 Hint

Impure pipes run every change detection cycle regardless of input.

Concept Snapshot

Angular pipes transform data in templates.
Pure pipes run only when inputs change, improving performance.
Impure pipes run every change detection cycle.
Use pure pipes for expensive operations.
Angular caches pure pipe results to avoid reruns.
Impure pipes should be used sparingly.

Full Transcript

In Angular, pipes transform data in templates. Pure pipes run only when their input changes, so Angular caches their output and skips running them if inputs are the same. This improves performance by avoiding unnecessary work. Impure pipes run every change detection cycle regardless of input changes, which can slow down the app. The example pipe converts text to uppercase and logs when it runs. On initial render, the pipe runs and logs. On subsequent renders with the same input, the pipe does not run and uses cached output. When input changes, the pipe runs again. Impure pipes run every time, even if input is unchanged. Understanding this helps write efficient Angular apps.