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.

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