OnPush change detection strategy in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the OnPush change detection strategy in an Angular component.

Angular

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

@Component({
  selector: 'app-sample',
  template: `<p>Hello OnPush!</p>`,
  changeDetection: ChangeDetectionStrategy.[1]
})
export class SampleComponent {}

Drag options to blanks, or click blank then click option'

ADetached

BOnPush

CDefault

DCheckAlways

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Default' instead of 'OnPush' will not enable the optimized change detection.

Misspelling 'OnPush' or using an invalid strategy causes errors.

The OnPush strategy tells Angular to check the component only when its inputs change or an event occurs inside it.

2fill in blank

medium

Complete the code to inject ChangeDetectorRef and mark the component for check.

Angular

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

@Component({
  selector: 'app-checker',
  template: `<button (click)="update()">Update</button>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CheckerComponent {
  constructor(private cdr: [1]) {}

  update() {
    // some update logic
    this.cdr.markForCheck();
  }
}

Drag options to blanks, or click blank then click option'

AChangeDetectorRef

BRenderer2

CNgZone

DElementRef

Attempts:

3 left

💡 Hint

Common Mistakes

Injecting Renderer2 or ElementRef does not help with change detection.

Forgetting to inject ChangeDetectorRef causes errors when calling its methods.

ChangeDetectorRef is used to manually trigger change detection or mark the component to be checked.

3fill in blank

hard

Fix the error in the code by completing the blank with the correct input decorator.

Angular

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

@Component({
  selector: 'app-child',
  template: `<p>{{ data }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
  [1] data!: string;
}

Drag options to blanks, or click blank then click option'

A@ContentChild

B@Output

C@Input

D@ViewChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Output instead of @Input will cause errors because outputs are for events.

Forgetting the decorator means Angular won't detect input changes.

The @Input decorator marks a property as an input that can receive data from a parent component, which triggers OnPush change detection.

4fill in blank

hard

Fill both blanks to create a pure pipe that works well with OnPush strategy.

Angular

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'custom',
  pure: [1]
})
export class CustomPipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

// Usage in template: {{ 'hello' | custom }}

Drag options to blanks, or click blank then click option'

Atrue

Bfalse

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Setting pure to false makes the pipe impure and less efficient.

Leaving pure undefined defaults to true, but explicit is better.

Pure pipes are set with pure: true by default and work efficiently with OnPush change detection.

5fill in blank

hard

Fill all three blanks to complete the code that triggers change detection manually in an OnPush component.

Angular

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

@Component({
  selector: 'app-manual',
  template: `<button (click)="refresh()">Refresh</button>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ManualComponent {
  constructor(private [1]: ChangeDetectorRef) {}

  refresh() {
    // some data update logic
    this.[1].[2]();
  }

  ngAfterViewChecked() {
    this.[3].detectChanges();
  }
}

Drag options to blanks, or click blank then click option'

Acdr

BmarkForCheck

CdetectChanges

DchangeDetector

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names inconsistently causes errors.

Calling the wrong method name leads to runtime errors.

The ChangeDetectorRef instance is commonly named cdr. Calling markForCheck() marks the component for checking, and detectChanges() triggers immediate change detection.

Practice

1. What does the OnPush change detection strategy do in Angular?

easy

A. It disables change detection completely.

B. It checks for changes only when input properties change or events occur.

C. It forces Angular to check for changes on every event regardless of inputs.

D. It updates the component only when manually triggered by the developer.

Solution

1. Step 1: Understand OnPush behavior

   OnPush strategy tells Angular to run change detection only when input properties change or events happen inside the component.

2. Step 2: Compare with other options

   Options A, C, and D describe behaviors that are not how OnPush works. It does not disable detection, nor does it check on every event or require manual triggers.

3. Final Answer:

   It checks for changes only when input properties change or events occur. -> Option B

4. Quick Check:

   OnPush triggers on input or event changes = B [OK]

Hint: OnPush triggers only on input or event changes [OK]

Common Mistakes:

• Thinking OnPush disables change detection
• Believing OnPush checks on every event
• Assuming manual triggers are required

2. Which is the correct way to set the OnPush change detection strategy in an Angular component?

easy

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

B. @Component({ selector: 'app', changeDetection: ChangeDetectionStrategy.Default })

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

D. @Component({ selector: 'app', changeDetectionStrategy: OnPush })

Solution

1. Step 1: Recall Angular syntax for change detection

   The correct property name is changeDetection and the value is ChangeDetectionStrategy.OnPush.

2. Step 2: Analyze options

   @Component({ selector: 'app', changeDetection: ChangeDetectionStrategy.OnPush }) uses the correct property and enum value. @Component({ selector: 'app', changeDetection: ChangeDetectionStrategy.Default }) uses Default strategy, C uses a string instead of enum, and D uses a wrong property name.

3. Final Answer:

   @Component({ selector: 'app', changeDetection: ChangeDetectionStrategy.OnPush }) -> Option A

4. Quick Check:

   Use changeDetection with enum OnPush = A [OK]

Hint: Use changeDetection: ChangeDetectionStrategy.OnPush exactly [OK]

Common Mistakes:

• Using string 'OnPush' instead of enum
• Wrong property name like changeDetectionStrategy
• Confusing Default with OnPush

3. Given this Angular component with OnPush strategy:

@Component({
  selector: 'counter',
  template: `{{count}}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
  @Input() count = 0;
}

If the parent updates count from 0 to 1, what will happen?

medium

A. The component updates only if an event inside it triggers change detection.

B. The component view does not update until manually triggered.

C. The component view updates to show 1 immediately.

D. The component throws an error because OnPush disallows input changes.

Solution

1. Step 1: Understand OnPush input update behavior

   OnPush triggers change detection when input properties change, so updating count from parent triggers view update.

2. Step 2: Evaluate other options

   The component view does not update until manually triggered. is wrong because manual trigger is not needed for input changes. The component throws an error because OnPush disallows input changes. is false; OnPush allows input changes. The component updates only if an event inside it triggers change detection. is incomplete because input changes alone trigger detection.

3. Final Answer:

   The component view updates to show 1 immediately. -> Option C

4. Quick Check:

   Input change triggers OnPush update = D [OK]

Hint: Input changes trigger OnPush updates automatically [OK]

Common Mistakes:

• Thinking manual detection is needed for input changes
• Believing OnPush blocks input updates
• Confusing event triggers with input triggers

4. You have an Angular component using OnPush strategy. Inside it, you update a local variable without changing any input. The view does not update. What is the likely cause?

medium

A. The component must use Default strategy to update local variables.

B. OnPush disables all change detection, so no updates happen.

C. You must call detectChanges() manually for every change.

D. OnPush only checks for input changes or events, so local changes don't trigger detection.

Solution

1. Step 1: Recall OnPush detection triggers

   OnPush triggers change detection only on input changes or events inside the component.

2. Step 2: Understand local variable update effect

   Updating a local variable without input change or event does not trigger detection, so view stays the same.

3. Step 3: Analyze other options

   OnPush disables all change detection, so no updates happen. is false; OnPush does not disable detection completely. You must call detectChanges() manually for every change. is sometimes needed but not always. The component must use Default strategy to update local variables. is incorrect; Default strategy is not required for local updates.

4. Final Answer:

   OnPush only checks for input changes or events, so local changes don't trigger detection. -> Option D

5. Quick Check:

   Local changes need input/event to trigger OnPush = A [OK]

Hint: OnPush ignores local changes without input or event triggers [OK]

Common Mistakes:

• Assuming OnPush disables all detection
• Forgetting to trigger detection manually when needed
• Thinking Default strategy is required for local updates

5. You have a parent component passing an object as input to a child component using OnPush strategy. The parent updates a property inside the object without changing the object reference. Will the child detect the change and update its view?

hard

A. No, because OnPush only detects changes when the input reference changes.

B. Yes, but only if you call markForCheck() manually.

C. Yes, because OnPush detects deep changes inside objects automatically.

D. No, because OnPush disables all change detection for objects.

Solution

1. Step 1: Understand OnPush input change detection

   OnPush detects changes by checking if the input reference changes, not deep object mutations.

2. Step 2: Analyze object mutation effect

   Changing a property inside the object without changing the reference does not trigger OnPush detection.

3. Step 3: Evaluate other options

   Yes, because OnPush detects deep changes inside objects automatically. is false because OnPush does not do deep checks. Yes, but only if you call markForCheck() manually. is partially true but not automatic. No, because OnPush disables all change detection for objects. is incorrect; OnPush does not disable detection for objects.

4. Final Answer:

   No, because OnPush only detects changes when the input reference changes. -> Option A

5. Quick Check:

   OnPush detects input reference changes only = C [OK]

Hint: OnPush tracks input references, not deep object changes [OK]

Common Mistakes:

• Assuming deep object changes trigger OnPush
• Thinking OnPush disables detection for objects
• Forgetting to update object reference to trigger detection