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.