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.