Why performance tuning matters in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a standalone Angular component.

Angular

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

@Component({
  selector: 'app-performance',
  template: `<p>Performance tuning is important!</p>`,
  standalone: [1]
})
export class PerformanceComponent {}

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

Aundefined

Btrue

Cnull

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting standalone to false or omitting it.

The standalone property must be set to true to make the component standalone.

2fill in blank

medium

Complete the code to inject the ChangeDetectorRef service.

Angular

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

@Component({
  selector: 'app-tune',
  template: `<p>Change detection example</p>`,
  standalone: true
})
export class TuneComponent {
  constructor(private [1]: ChangeDetectorRef) {}
}

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

Acdr

BchangeRef

Cdetector

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names that don't match the injection.

The common variable name for ChangeDetectorRef is cdr, but any valid name works. Here, 'cdr' is the intended name.

3fill in blank

hard

Fix the error in the code to properly use the OnPush change detection strategy.

Angular

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

@Component({
  selector: 'app-fast',
  template: `<p>Fast change detection</p>`,
  changeDetection: [1]
})
export class FastComponent {}

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

AChangeDetectionStrategy.Default

BChangeDetectionStrategy.None

CChangeDetectionStrategy.OnPush

DChangeDetectionStrategy.Fast

Attempts:

3 left

💡 Hint

Common Mistakes

Using Default or invalid strategy names.

To enable performance tuning, use ChangeDetectionStrategy.OnPush which tells Angular to check only when inputs change.

4fill in blank

hard

Fill both blanks to create a signal and update it in Angular 17+.

Angular

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

@Component({
  selector: 'app-signal',
  template: `<button (click)="increment()">Count: {{ count() }}</button>`,
  standalone: true
})
export class SignalComponent {
  count = [1](0);

  increment() {
    this.count([2] + 1);
  }
}

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

Asignal

Bthis.count()

Ccount

Dsignal()

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'count' instead of 'signal' to create signals.

Not calling the signal as a function to get its value.

Use signal(0) to create a signal. To update, call this.count(this.count() + 1).

5fill in blank

hard

Fill all three blanks to create a memo that doubles the count signal value.

Angular

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

@Component({
  selector: 'app-memo',
  template: `<p>Double count: {{ doubleCount() }}</p>`,
  standalone: true
})
export class MemoComponent {
  count = [1](5);
  doubleCount = [2](() => this.count() [3] 2);
}

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

Asignal

B+

C*

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+' instead of '*' for doubling.

Using 'signal' instead of 'computed' for memo.

Create a signal with signal(5). Use computed to create a memo that multiplies the count by 2.