Signals as modern state primitive in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a signal with initial value 0.

Angular

const count = [1](0);

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

Asignal

BuseState

Cref

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using React's useState instead of Angular's signal

Trying to use ref which is from Vue

Using reactive which is for Angular forms, not signals

In Angular signals, signal() creates a reactive state primitive.

2fill in blank

medium

Complete the code to read the current value of the signal.

Angular

const currentValue = count[1];

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

A()

B.get()

C.value

D[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using .value property which signals do not have

Using .get() which is not part of Angular signals

Using array brackets which is invalid

To get the current value of a signal, call it as a function: count().

3fill in blank

hard

Fix the error in updating the signal value.

Angular

count[1](count() + 1);

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

A[]

B()

C.set

D.value

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign directly like count() = ...

Using .value = which is invalid

Using array brackets which is invalid

To update a signal, use the .set(newValue) method.

4fill in blank

hard

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

Angular

const doubleCount = computed(() => count[1] * [2]);

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

A.value

B2

Ccount

D()

Attempts:

3 left

💡 Hint

Common Mistakes

Using the signal name without calling it inside computed

Using .value instead of ()

Multiplying by count itself instead of a number

Computed signals read source signals by calling them count() and multiply by 2.

5fill in blank

hard

Fill all three blanks to create a signal, update it, and create a computed signal that adds 10.

Angular

const score = [1](5);
score[2](score() + 3);
const bonusScore = computed(() => score() [3] 10);

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

Asignal

B.set

C+

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using .value = instead of .set() to update

Using - instead of + in computed

Not creating the signal with signal()

Create signal with signal(5), update with .set(score() + 3), compute score() + 10.