OnPush change detection strategy in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the OnPush change detection strategy in Angular?

OnPush is a change detection strategy that tells Angular to check a component only when its input properties change or when an event happens inside it. This helps improve performance by reducing unnecessary checks.

intermediate

How does Angular detect changes with OnPush strategy?

Angular runs change detection for an OnPush component only when:<br>1. An input property changes by reference.<br>2. An event originated from the component or its children.<br>3. An observable or async pipe inside the component emits a new value.

intermediate

What happens if you mutate an object input without changing its reference in an OnPush component?

Angular will NOT detect the change because OnPush checks only for new object references. Mutating the object without changing its reference means Angular thinks nothing changed.

advanced

How can you trigger change detection manually in an OnPush component?

You can inject ChangeDetectorRef and call its markForCheck() or detectChanges() methods to tell Angular to check the component for updates.

beginner

Why is OnPush strategy good for performance?

OnPush reduces how often Angular checks components by only running change detection when needed. This lowers CPU work and speeds up apps, especially with many components.

When does Angular run change detection for an OnPush component?

A Never, it disables change detection

B Every time any data changes anywhere in the app

C Only when the user clicks a button

D Only when input references change or events happen inside the component

OnPush runs change detection only when input references change or events inside the component occur.

What happens if you mutate an input object without changing its reference in an OnPush component?

A Angular ignores the change and does not update the view

B Angular throws an error

C Angular detects the change and updates the view

D Angular reloads the entire app

OnPush checks input references, so mutating without changing reference is ignored.

Which Angular service can you use to manually trigger change detection in an OnPush component?

A HttpClient

B Router

C ChangeDetectorRef

D Renderer2

ChangeDetectorRef lets you manually trigger change detection.

What is a main benefit of using OnPush strategy?

A Improves app performance by reducing checks

B Simplifies template syntax

C Automatically fixes bugs

D Disables event handling

OnPush improves performance by reducing unnecessary change detection.

Which of these will NOT trigger change detection in an OnPush component?

A Input property reference changes

B Mutating an input object without changing its reference

C An observable emits a new value used in the template

D User clicks a button inside the component

Mutating an input object without changing its reference does not trigger change detection with OnPush.

Explain how the OnPush change detection strategy works in Angular and why it improves performance.

Think about when Angular decides to update the component view.

Describe how you can handle a situation where an OnPush component does not update after mutating an input object.

Consider how Angular detects changes with OnPush.