When to use OnPush in Angular - Step-by-Step Execution

Concept Flow - When to use OnPush

Component Initialized

↓

Change Detection Triggered

↓

OnPush Strategy?

No→Run Full Change Detection

Yes↓

Check Input References Changed?

No→Skip Change Detection

Yes↓

Run Change Detection for Component

↓

Update View

This flow shows how Angular decides to run change detection with OnPush: it only runs if input references change or an event occurs.

Execution Sample

Angular

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

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

A child component using OnPush change detection that updates only when its input reference changes.

Execution Table

Step	Trigger	Input Reference Changed?	Change Detection Run?	View Updated?
1	Component initialized	N/A	Yes (initial)	Yes
2	Parent updates input with same object	No	No	No
3	Parent updates input with new object	Yes	Yes	Yes
4	User event inside component	N/A	Yes	Yes
5	No changes	No	No	No

💡 Change detection stops when input references do not change and no events occur.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5
inputReferenceChanged	N/A	N/A	No	Yes	N/A	No
changeDetectionRun	Yes	Yes	No	Yes	Yes	No
viewUpdated	Yes	Yes	No	Yes	Yes	No

Key Moments - 2 Insights

Why doesn't the view update when the parent changes the input object but keeps the same reference?

Because OnPush only runs change detection when the input reference changes, not when the object's internal properties change. See execution_table row 2.

Does OnPush run change detection on user events inside the component?

Yes, user events trigger change detection even with OnPush. See execution_table row 4.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the input reference change causing change detection to run?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Check the 'Input Reference Changed?' column in the execution_table.

If the parent updates the input object by mutating its property but keeps the same reference, what happens to the view?

A View updates

B Change detection runs fully

C View does not update

D Component re-initializes

💡 Hint

See execution_table row 2 where input reference is unchanged.

Which event always triggers change detection in OnPush components?

A Input reference unchanged

B User event inside component

C No changes

D Parent does nothing

💡 Hint

Look at execution_table row 4 for user event trigger.

Concept Snapshot

Angular OnPush Strategy:
- Runs change detection only when input references change or events occur.
- Skips checks if inputs are unchanged for better performance.
- Use OnPush for components with immutable inputs or event-driven updates.
- Helps avoid unnecessary view updates.
- Requires careful input management.

Full Transcript

This visual execution shows how Angular's OnPush change detection strategy works. When a component uses OnPush, Angular runs change detection only if the input reference changes or if a user event happens inside the component. If the parent changes the input object's properties but keeps the same reference, OnPush skips updating the view. This improves performance by avoiding unnecessary checks. User events inside the component always trigger change detection. Understanding this helps you decide when to use OnPush for better app speed and predictable updates.

Practice

1. What is the main reason to use ChangeDetectionStrategy.OnPush in an Angular component?

easy

A. To improve performance by checking for changes only when inputs change or events occur

B. To disable change detection completely

C. To force Angular to check for changes on every event

D. To automatically update the component without any input changes

Solution

1. Step 1: Understand OnPush behavior

   OnPush tells Angular to check for changes only when input properties change or events inside the component happen.

2. Step 2: Compare with other options

   It does not disable change detection or force checks on every event, but optimizes performance by limiting checks.

3. Final Answer:

   To improve performance by checking for changes only when inputs change or events occur -> Option A

4. Quick Check:

   OnPush improves performance = A [OK]

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

Common Mistakes:

• Thinking OnPush disables change detection
• Assuming OnPush checks on every event
• Believing OnPush updates without input changes

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

easy

A. @Component({ selector: 'app-example', changeDetection: ChangeDetectionStrategy.Default })

B. @Component({ selector: 'app-example', changeDetection: ChangeDetectionStrategy.OnPush })

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

D. @Component({ selector: 'app-example', changeDetection: true })

Solution

1. Step 1: Recall Angular syntax for change detection

   The correct syntax uses the enum ChangeDetectionStrategy.OnPush inside the component decorator.

2. Step 2: Eliminate incorrect options

   A uses Default strategy, B uses a boolean which is invalid, C uses a string instead of enum.

3. Final Answer:

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

4. Quick Check:

   Use enum OnPush in decorator = D [OK]

Hint: Use ChangeDetectionStrategy.OnPush enum in @Component [OK]

Common Mistakes:

• Using string 'OnPush' instead of enum
• Setting changeDetection to true or false
• Confusing Default with OnPush

3. Given this component using OnPush:

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

What happens if the parent updates count by mutating an object property instead of replacing the input?

medium

A. The component updates only after a manual change detection call

B. The component updates and shows the new count

C. Angular throws a runtime error

D. The component does not update because OnPush requires immutable input changes

Solution

1. Step 1: Understand OnPush input change detection

   OnPush detects changes only when input references change (immutable updates), not when internal properties mutate.

2. Step 2: Analyze mutation effect

   Mutating an object property keeps the same reference, so Angular does not detect the change and does not update the view.

3. Final Answer:

   The component does not update because OnPush requires immutable input changes -> Option D

4. Quick Check:

   OnPush needs new input references = A [OK]

Hint: OnPush needs new input objects, not mutated ones [OK]

Common Mistakes:

• Assuming mutation triggers update
• Expecting runtime errors on mutation
• Thinking manual detection is always needed

4. You have an Angular component with OnPush strategy but the view does not update after input changes. Which fix will solve this problem?

medium

A. Manually call ChangeDetectorRef.detectChanges() after input mutation

B. Switch to Default change detection strategy

C. Replace the input object with a new reference instead of mutating it

D. Remove the @Input() decorator

Solution

1. Step 1: Identify why view doesn't update

   OnPush requires new input references to detect changes; mutating inputs keeps the same reference, so no update.

2. Step 2: Choose the best fix

   Replacing the input with a new object triggers change detection properly without needing manual calls or strategy changes.

3. Final Answer:

   Replace the input object with a new reference instead of mutating it -> Option C

4. Quick Check:

   New input references trigger OnPush updates = C [OK]

Hint: Use new input objects, not mutations, to update OnPush views [OK]

Common Mistakes:

• Relying on manual detectChanges() calls unnecessarily
• Switching to Default without reason
• Removing @Input() breaks data flow

5. You have a parent component passing a list of items to a child component with OnPush strategy. The parent updates the list by adding a new item using items.push(newItem). The child does not update. How should you fix this to ensure the child updates efficiently?

hard

A. Use items = [...items, newItem] to create a new array reference

B. Call markForCheck() on the child's ChangeDetectorRef after push

C. Change child's strategy to Default

D. Manually trigger detectChanges() in the child after push

Solution

1. Step 1: Understand OnPush and input references

   OnPush detects changes only when input references change, so mutating the array with push keeps the same reference.

2. Step 2: Apply immutable update

   Using items = [...items, newItem] creates a new array reference, triggering OnPush change detection in the child.

3. Final Answer:

   Use items = [...items, newItem] to create a new array reference -> Option A

4. Quick Check:

   Immutable input updates trigger OnPush = B [OK]

Hint: Create new input arrays to trigger OnPush updates [OK]

Common Mistakes:

• Mutating arrays with push expecting updates
• Relying on manual detectChanges() calls
• Changing strategy unnecessarily