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.

Practice

1. What does the OnPush change detection strategy do in Angular?

easy

A. It disables change detection completely.

B. It checks for changes only when input properties change or events occur.

C. It forces Angular to check for changes on every event regardless of inputs.

D. It updates the component only when manually triggered by the developer.

Solution

1. Step 1: Understand OnPush behavior

   OnPush strategy tells Angular to run change detection only when input properties change or events happen inside the component.

2. Step 2: Compare with other options

   Options A, C, and D describe behaviors that are not how OnPush works. It does not disable detection, nor does it check on every event or require manual triggers.

3. Final Answer:

   It checks for changes only when input properties change or events occur. -> Option B

4. Quick Check:

   OnPush triggers on input or event changes = B [OK]

Hint: OnPush triggers only on input or event changes [OK]

Common Mistakes:

• Thinking OnPush disables change detection
• Believing OnPush checks on every event
• Assuming manual triggers are required

2. Which is the correct way to set the OnPush change detection strategy in an Angular component?

easy

A. @Component({ selector: 'app', changeDetection: ChangeDetectionStrategy.OnPush })

B. @Component({ selector: 'app', changeDetection: ChangeDetectionStrategy.Default })

C. @Component({ selector: 'app', changeDetection: 'OnPush' })

D. @Component({ selector: 'app', changeDetectionStrategy: OnPush })

Solution

1. Step 1: Recall Angular syntax for change detection

   The correct property name is changeDetection and the value is ChangeDetectionStrategy.OnPush.

2. Step 2: Analyze options

   @Component({ selector: 'app', changeDetection: ChangeDetectionStrategy.OnPush }) uses the correct property and enum value. @Component({ selector: 'app', changeDetection: ChangeDetectionStrategy.Default }) uses Default strategy, C uses a string instead of enum, and D uses a wrong property name.

3. Final Answer:

   @Component({ selector: 'app', changeDetection: ChangeDetectionStrategy.OnPush }) -> Option A

4. Quick Check:

   Use changeDetection with enum OnPush = A [OK]

Hint: Use changeDetection: ChangeDetectionStrategy.OnPush exactly [OK]

Common Mistakes:

• Using string 'OnPush' instead of enum
• Wrong property name like changeDetectionStrategy
• Confusing Default with OnPush

3. Given this Angular component with OnPush strategy:

@Component({
  selector: 'counter',
  template: `{{count}}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
  @Input() count = 0;
}

If the parent updates count from 0 to 1, what will happen?

medium

A. The component updates only if an event inside it triggers change detection.

B. The component view does not update until manually triggered.

C. The component view updates to show 1 immediately.

D. The component throws an error because OnPush disallows input changes.

Solution

1. Step 1: Understand OnPush input update behavior

   OnPush triggers change detection when input properties change, so updating count from parent triggers view update.

2. Step 2: Evaluate other options

   The component view does not update until manually triggered. is wrong because manual trigger is not needed for input changes. The component throws an error because OnPush disallows input changes. is false; OnPush allows input changes. The component updates only if an event inside it triggers change detection. is incomplete because input changes alone trigger detection.

3. Final Answer:

   The component view updates to show 1 immediately. -> Option C

4. Quick Check:

   Input change triggers OnPush update = D [OK]

Hint: Input changes trigger OnPush updates automatically [OK]

Common Mistakes:

• Thinking manual detection is needed for input changes
• Believing OnPush blocks input updates
• Confusing event triggers with input triggers

4. You have an Angular component using OnPush strategy. Inside it, you update a local variable without changing any input. The view does not update. What is the likely cause?

medium

A. The component must use Default strategy to update local variables.

B. OnPush disables all change detection, so no updates happen.

C. You must call detectChanges() manually for every change.

D. OnPush only checks for input changes or events, so local changes don't trigger detection.

Solution

1. Step 1: Recall OnPush detection triggers

   OnPush triggers change detection only on input changes or events inside the component.

2. Step 2: Understand local variable update effect

   Updating a local variable without input change or event does not trigger detection, so view stays the same.

3. Step 3: Analyze other options

   OnPush disables all change detection, so no updates happen. is false; OnPush does not disable detection completely. You must call detectChanges() manually for every change. is sometimes needed but not always. The component must use Default strategy to update local variables. is incorrect; Default strategy is not required for local updates.

4. Final Answer:

   OnPush only checks for input changes or events, so local changes don't trigger detection. -> Option D

5. Quick Check:

   Local changes need input/event to trigger OnPush = A [OK]

Hint: OnPush ignores local changes without input or event triggers [OK]

Common Mistakes:

• Assuming OnPush disables all detection
• Forgetting to trigger detection manually when needed
• Thinking Default strategy is required for local updates

5. You have a parent component passing an object as input to a child component using OnPush strategy. The parent updates a property inside the object without changing the object reference. Will the child detect the change and update its view?

hard

A. No, because OnPush only detects changes when the input reference changes.

B. Yes, but only if you call markForCheck() manually.

C. Yes, because OnPush detects deep changes inside objects automatically.

D. No, because OnPush disables all change detection for objects.

Solution

1. Step 1: Understand OnPush input change detection

   OnPush detects changes by checking if the input reference changes, not deep object mutations.

2. Step 2: Analyze object mutation effect

   Changing a property inside the object without changing the reference does not trigger OnPush detection.

3. Step 3: Evaluate other options

   Yes, because OnPush detects deep changes inside objects automatically. is false because OnPush does not do deep checks. Yes, but only if you call markForCheck() manually. is partially true but not automatic. No, because OnPush disables all change detection for objects. is incorrect; OnPush does not disable detection for objects.

4. Final Answer:

   No, because OnPush only detects changes when the input reference changes. -> Option A

5. Quick Check:

   OnPush detects input reference changes only = C [OK]

Hint: OnPush tracks input references, not deep object changes [OK]

Common Mistakes:

• Assuming deep object changes trigger OnPush
• Thinking OnPush disables detection for objects
• Forgetting to update object reference to trigger detection