Performance impact of change detection in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a standalone Angular component with OnPush change detection.

Angular

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

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

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

ACheckOnce

BOnPush

CDetached

DDefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using Default strategy causes Angular to check the component every time change detection runs.

Detached and CheckOnce are less commonly used and not the best for this example.

The OnPush strategy tells Angular to check the component only when its inputs change or an event occurs, improving performance.

2fill in blank

medium

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

Angular

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

@Component({
  selector: 'app-checker',
  template: `<button (click)="update()">Update</button>`,
  standalone: true
})
export class CheckerComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  update() {
    // some update logic
    this.cdr.[1]();
  }
}

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

AdetectChanges

BcheckNoChanges

CmarkForCheck

Ddetach

Attempts:

3 left

💡 Hint

Common Mistakes

Using detectChanges runs change detection immediately, which is not always desired.

detach stops change detection for the component.

markForCheck() tells Angular to check this component and its ancestors during the next change detection cycle.

3fill in blank

hard

Fix the error in the code to prevent unnecessary change detection cycles.

Angular

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

@Component({
  selector: 'app-list',
  template: `<ul><li *ngFor="let item of items">{{item}}</li></ul>`,
  changeDetection: ChangeDetectionStrategy.[1],
  standalone: true
})
export class ListComponent {
  items = [1, 2, 3];

  addItem(newItem: number) {
    this.items.push(newItem);
  }
}

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

ADefault

BOnPush

CCheckAlways

DDetached

Attempts:

3 left

💡 Hint

Common Mistakes

Using OnPush without immutable updates causes UI not to update.

Detached disables change detection, so updates won't show.

Using Default change detection ensures Angular notices changes when the array is mutated directly. OnPush requires immutable data changes.

4fill in blank

hard

Fill both blanks to create an immutable update and use OnPush change detection.

Angular

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

@Component({
  selector: 'app-items',
  template: `<ul><li *ngFor="let item of items">{{item}}</li></ul>`,
  changeDetection: ChangeDetectionStrategy.[1],
  standalone: true
})
export class ItemsComponent {
  items = [1, 2, 3];

  addItem(newItem: number) {
    this.items = this.items.[2]([newItem]);
  }
}

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

AOnPush

BDefault

Cconcat

Dpush

Attempts:

3 left

💡 Hint

Common Mistakes

Using push mutates the array and does not trigger OnPush change detection.

Using Default change detection with immutable updates is less efficient.

Using OnPush with immutable updates like concat creates a new array reference, triggering change detection.

5fill in blank

hard

Fill all three blanks to optimize change detection with a trackBy function in *ngFor.

Angular

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

@Component({
  selector: 'app-users',
  template: `
    <ul>
      <li *ngFor="let user of users; trackBy: [1]">{{user.name}}</li>
    </ul>
  `,
  changeDetection: ChangeDetectionStrategy.[2],
  standalone: true
})
export class UsersComponent {
  users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];

  [3](index: number, user: { id: number; name: string }) {
    return user.id;
  }
}

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

AtrackById

BOnPush

CDefault

DtrackByUser

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching trackBy function names between template and class.

Using Default change detection without trackBy can cause unnecessary re-renders.

Using OnPush with a trackBy function like trackById helps Angular optimize rendering by tracking items by their unique id.