OnPush change detection strategy in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does OnPush affect component updates?

Consider an Angular component using OnPush change detection. Which action will NOT trigger the component to update its view?

A Mutating a property of an @Input() object without changing its reference

B Changing an @Input() property to a new object reference

C Emitting an event from the component

D Calling markForCheck() on the component's ChangeDetectorRef

💡 Hint

OnPush checks only when input references change or events happen.

OnPush strategy triggers change detection only when input references change, events occur, or manual triggers happen. Mutating an object property without changing its reference does not trigger update.

❓ state_output

intermediate

Output of component with OnPush and async pipe

Given this Angular component using OnPush and an async pipe in the template, what will be displayed after 2 seconds?

Angular

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

@Component({
  selector: 'app-counter',
  template: `<div>{{ counter$ | async }}</div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
  counter$ = new BehaviorSubject(0);

  constructor() {
    setTimeout(() => {
      this.counter$.next(1);
    }, 2000);
  }
}

A 1 immediately on load

B 0 initially and stays 0 forever

C 0 initially, then updates to 1 after 2 seconds

D Component throws an error due to OnPush

💡 Hint

Async pipe triggers change detection even with OnPush.

The async pipe subscribes to the observable and triggers change detection when new values arrive, even with OnPush strategy. So the displayed value updates from 0 to 1 after 2 seconds.

❓ lifecycle

advanced

When does ngOnChanges run with OnPush?

In an Angular component with OnPush change detection, when is the ngOnChanges lifecycle hook called?

A Every time change detection runs, regardless of input changes

B Only when an @Input() property reference changes

C Only when a user event triggers change detection

D Never, ngOnChanges is disabled with OnPush

💡 Hint

ngOnChanges depends on input property changes.

ngOnChanges is called only when Angular detects a change in the reference of an @Input() property, even with OnPush strategy.

📝 Syntax

advanced

Correct syntax to set OnPush strategy

Which option correctly sets the OnPush change detection strategy in an Angular component?

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

B @Component({ selector: 'app', template: '', changeDetection: 'OnPush' })

C @Component({ selector: 'app', template: '', changeDetection: OnPush })

D @Component({ selector: 'app', template: '', changeDetection: ChangeDetectionStrategy.OnPush })

💡 Hint

Use the ChangeDetectionStrategy enum with the changeDetection property.

The correct property name is changeDetection and it must be assigned the enum value ChangeDetectionStrategy.OnPush. Using a string or wrong property name causes errors.

🔧 Debug

expert

Why does this OnPush component not update?

This Angular component uses OnPush. The parent updates an object property but the child does not update its view. What is the cause?

Angular

Parent template: <app-child [data]="user"></app-child>

Parent component:
user = { name: 'Alice' };

updateName() {
  this.user.name = 'Bob';
}

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

A The parent mutates the object property without changing the object reference

B OnPush disables all change detection in child components

C The child component lacks ngOnChanges lifecycle hook

D The @Input() property is missing the ! non-null assertion

💡 Hint

OnPush tracks input references, not deep mutations.

OnPush triggers change detection only when input references change. Mutating a property inside the object does not change the reference, so the child does not update.