OnPush change detection strategy in Angular - Step-by-Step Execution

Concept Flow - OnPush change detection strategy

Component Initialized with OnPush

↓

Input Property Changes?

No→No Re-render

Yes↓

Mark Component for Check

↓

Angular Runs Change Detection

↓

Component Re-renders

Angular checks OnPush components only when inputs change or events occur, skipping unnecessary re-renders.

Execution Sample

Angular

import { Component, ChangeDetectionStrategy, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `{{data}}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
  @Input() data!: string;
}

A child component using OnPush strategy that only updates when its input 'data' changes.

Execution Table

Step	Input 'data' Value	Change Detection Trigger	Component Checked?	Rendered Output
1	'Hello'	Component initialized	Yes	Hello
2	'Hello'	No input change, no event	No	Hello
3	'World'	Input 'data' changed	Yes	World
4	'World'	No input change, no event	No	World
5	'World!'	Input 'data' changed	Yes	World!
6	'World!'	No input change, no event	No	World!

💡 No re-render occurs when input does not change or no event triggers detection.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	Final
data	undefined	Hello	Hello	World	World	World!	World!
Component Checked	No	Yes	No	Yes	No	Yes	No
Rendered Output		Hello	Hello	World	World	World!	World!

Key Moments - 2 Insights

Why doesn't the component re-render when the input 'data' stays the same?

Because OnPush strategy only triggers change detection when input properties change or events occur, so no input change means no re-render (see steps 2 and 4 in execution_table).

What triggers Angular to check an OnPush component?

Angular checks OnPush components when input properties change or when an event inside the component happens, as shown in steps 1, 3, and 5 where input 'data' changes.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the component first re-render after initialization?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Check the 'Component Checked?' column to see when it changes to 'Yes' after initialization.

According to the variable tracker, what is the value of 'data' after step 5?

A 'Hello'

B 'World'

C 'World!'

D undefined

💡 Hint

Look at the 'data' row under 'After 5' column in variable_tracker.

If the input 'data' never changes, what will happen to the component's rendered output over time?

A It will update every time change detection runs.

B It will update only when an event inside the component occurs.

C It will never update after the first render.

D It will update randomly.

💡 Hint

Recall that OnPush triggers on input changes or events, see concept_flow and execution_table.

Concept Snapshot

OnPush change detection strategy:
- Angular checks component only when inputs change or events occur.
- Skips checks if inputs unchanged, improving performance.
- Use by setting changeDetection: ChangeDetectionStrategy.OnPush in @Component.
- Helps avoid unnecessary re-renders.
- Requires immutable inputs or manual triggers for updates.

Full Transcript

This visual execution shows how Angular's OnPush change detection strategy works. The component only re-renders when its input property 'data' changes or when an event triggers detection. Steps 1, 3, and 5 show re-renders after input changes. Steps 2, 4, and 6 show no re-render because inputs did not change. The variable tracker confirms the input 'data' values and when the component is checked. This strategy improves performance by skipping unnecessary checks.