When to use OnPush in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does OnPush change Angular component behavior?

Consider an Angular component with ChangeDetectionStrategy.OnPush. What triggers this component to check for updates and re-render?

A It updates on every change detection cycle regardless of inputs or events.

B It updates only when manually triggered by calling <code>detectChanges()</code>.

C It updates only when a global timer triggers change detection.

D It updates only when its input properties change or an event inside the component occurs.

💡 Hint

Think about what Angular watches to decide if a component needs to update when using OnPush.

OnPush tells Angular to check the component only when its inputs change or when an event inside it happens. This improves performance by skipping unnecessary checks.

🧠 Conceptual

intermediate

Why choose OnPush for a component?

What is the main benefit of using ChangeDetectionStrategy.OnPush in Angular components?

A It disables change detection completely for the component.

B It reduces unnecessary checks, improving performance especially in large apps.

C It allows the component to update automatically on any data change anywhere in the app.

D It forces the component to update every second regardless of changes.

💡 Hint

Think about how OnPush affects how often Angular checks the component.

OnPush reduces how often Angular checks the component by only running change detection when inputs change or events happen, which helps performance.

❓ state_output

advanced

What happens if an OnPush component's input object is mutated?

Given an OnPush component receiving an object as input, what happens if the object’s properties change but the object reference stays the same?

A The component will NOT detect changes and will NOT update its view.

B The component will detect changes and update immediately.

C Angular throws an error because mutation is not allowed.

D The component updates only if a manual change detection is triggered.

💡 Hint

OnPush relies on object references, not deep property changes.

OnPush checks for changes by comparing input references. If the object reference does not change, Angular assumes no update is needed, even if properties inside the object changed.

🔧 Debug

advanced

Why does an OnPush component not update after input changes?

An OnPush component receives a new input object but its view does not update. What is the most likely cause?

A The input object reference did not actually change; only its properties were mutated.

B The component is missing the <code>@Input()</code> decorator on the input property.

C The component is using the default change detection strategy instead of OnPush.

D Angular does not support OnPush with object inputs.

💡 Hint

Check if the input object reference changes when updating inputs.

OnPush detects changes by checking if the input reference changes. Mutating properties without changing the reference will not trigger updates.

📝 Syntax

expert

Correct syntax to enable OnPush change detection

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

A @Component({ selector: 'app', templateUrl: './app.html', changeDetectionStrategy: ChangeDetectionStrategy.OnPush })

B @Component({ selector: 'app', templateUrl: './app.html', changeDetection: 'OnPush' })

C @Component({ selector: 'app', templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush })

D @Component({ selector: 'app', templateUrl: './app.html', changeDetection: OnPush })

💡 Hint

Check the exact property name and value type for setting change detection strategy.

The correct property name is changeDetection and the value must be ChangeDetectionStrategy.OnPush (an enum), not a string or undefined identifier.