Why state management matters in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a signal for managing a counter state.

Angular

const counter = [1](0);

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

Asignal

Bref

CuseState

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using React's useState instead of Angular's signal.

Using ref which is not an Angular concept.

Trying to use 'state' directly without signal.

In Angular signals, signal creates a reactive state holder.

2fill in blank

medium

Complete the code to update the counter signal by increasing its value by 1.

Angular

counter.[1](value => value + 1);

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

Aset

Bupdate

Cnext

Dchange

Attempts:

3 left

💡 Hint

Common Mistakes

Using set which replaces the value directly, not with a function.

Using next or change which are not Angular signal methods.

The update method changes the signal's value based on the current value.

3fill in blank

hard

Fix the error in the code to read the current value of the signal.

Angular

const currentValue = counter.[1];

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

Avalue

Bget

Ccurrent

Dread

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call get() which does not exist.

Using current or read which are not valid properties.

Access the current value of a signal using its value property.

4fill in blank

hard

Fill both blanks to create a computed signal that doubles the counter value.

Angular

const doubleCounter = computed(() => counter.[1] * [2]);

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

Avalue

B2

C1

Dcounter

Attempts:

3 left

💡 Hint

Common Mistakes

Using counter directly without .value.

Multiplying by 1 which does not change the value.

Use counter.value to get the current count and multiply by 2 to double it.

5fill in blank

hard

Fill all three blanks to create a standalone component with a signal and a button to increment it.

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <button (click)="increment()">Increment</button>
    <p>Count: {{ '{{' }} counter.[2] {{'}}' }}</p>
  `
})
export class CounterComponent {
  counter = [3](0);

  increment() {
    this.counter.update(value => value + 1);
  }
}

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

Asignal

Bvalue

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to import signal.

Using counter directly in template without .value.

Initializing counter with computed instead of signal.

Import signal to create the state. Use counter.value to display the current count. Initialize counter with signal(0).