Input signals and model signals in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Angular

const count = signal([1]);

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

A0

Bnull

Cundefined

D''

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or undefined as initial value causes unexpected behavior.

Leaving the initial value empty causes errors.

The signal function creates a reactive signal. Here, we start with 0 as the initial value.

2fill in blank

medium

Complete the code to update the signal value by adding 1.

Angular

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

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

Aget

Bcurrent

Cvalue

Dread

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'value' or 'current' which are not valid methods.

Trying to access the signal value directly without a method.

Use get() to read the current value of a signal before updating it.

3fill in blank

hard

Complete the code to create a signal with initial value 'user'.

Angular

const userModel = [1]('user');

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

AinputSignal

BmodelSignal

CcreateSignal

Dsignal

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent functions like 'modelSignal' or 'inputSignal'.

Confusing Angular signals with other frameworks.

The correct function to create a signal in Angular is signal. Other options are invalid.

4fill in blank

hard

Fill both blanks to create a signal and update it with a new value.

Angular

const name = [1]('');
name.[2]('Alice');

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

Asignal

Bset

Cupdate

DcreateSignal

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'update' instead of 'set' to change the value.

Using 'createSignal' which is not an Angular function.

Use signal to create the signal and set to update its value.

5fill in blank

hard

Fill all three blanks to create a signal, read its value, and update it conditionally.

Angular

const age = [1](20);
const currentAge = age.[2]();
if (currentAge < 30) {
  age.[3](currentAge + 1);
}

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

Asignal

Bget

Cset

Dupdate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'update' instead of 'set' to change the value.

Trying to read the signal value without calling a method.

Create the signal with signal, read its value with get(), and update it with set().