When to use OnPush in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the change detection strategy to OnPush 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'

A'OnPush'

BDefault

CCheckAlways

DOnPush

Attempts:

3 left

💡 Hint

Common Mistakes

Using Default instead of OnPush

Using string 'OnPush' instead of the enum member

Using a non-existent strategy name

The ChangeDetectionStrategy.OnPush 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 import the correct Angular symbol needed to use OnPush strategy.

Angular

import { Component, [1] } from '@angular/core';

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

AChangeDetectorRef

BChangeDetectionStrategy

CNgZone

DRenderer2

Attempts:

3 left

💡 Hint

Common Mistakes

Importing ChangeDetectorRef instead of ChangeDetectionStrategy

Importing unrelated Angular symbols

You need to import ChangeDetectionStrategy to set the OnPush strategy in the component decorator.

3fill in blank

hard

Fix the error in the component decorator to correctly use OnPush change detection.

Angular

@Component({
  selector: 'app-test',
  template: `<p>Test</p>`,
  changeDetection: [1]
})
export class TestComponent {}

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

AChangeDetectionStrategy.OnPush

BChangeDetectionStrategy.onpush

CChangeDetection.OnPush

DOnPush

Attempts:

3 left

💡 Hint

Common Mistakes

Using just 'OnPush' without the enum

Wrong casing in 'onpush'

Using a non-existent enum name

The correct syntax is ChangeDetectionStrategy.OnPush with exact casing and enum name.

4fill in blank

hard

Fill both blanks to create a component with OnPush strategy and a simple input property.

Angular

import { Component, Input, [1] } from '@angular/core';

@Component({
  selector: 'app-item',
  template: `<p>{{data}}</p>`,
  changeDetection: [2]
})
export class ItemComponent {
  @Input() data!: string;
}

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

AChangeDetectionStrategy

BChangeDetectorRef

CChangeDetectionStrategy.OnPush

DChangeDetectionStrategy.Default

Attempts:

3 left

💡 Hint

Common Mistakes

Importing ChangeDetectorRef instead of ChangeDetectionStrategy

Using Default instead of OnPush in the decorator

You import ChangeDetectionStrategy and set changeDetection to ChangeDetectionStrategy.OnPush to enable OnPush strategy.

5fill in blank

hard

Fill all three blanks to create a component with OnPush strategy, an input property, and a method that triggers change detection manually.

Angular

import { Component, Input, [1], [2] } from '@angular/core';

@Component({
  selector: 'app-detail',
  template: `<p>{{info}}</p>`,
  changeDetection: [3]
})
export class DetailComponent {
  @Input() info!: string;

  constructor(private cd: [2]) {}

  refresh() {
    this.cd.detectChanges();
  }
}

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

AChangeDetectionStrategy

BChangeDetectorRef

CChangeDetectionStrategy.OnPush

DNgZone

Attempts:

3 left

💡 Hint

Common Mistakes

Not importing ChangeDetectorRef

Using Default strategy instead of OnPush

Injecting wrong service in constructor

You import ChangeDetectionStrategy and ChangeDetectorRef. The decorator uses ChangeDetectionStrategy.OnPush. The constructor injects ChangeDetectorRef to manually trigger change detection.