Migrating from observables to signals in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a signal from an observable using Angular's toSignal function.

Angular

const countSignal = [1];

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

Asubscribe(count$)

Bfrom(count$)

Csignal(count$)

DtoSignal(count$)

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'from' which creates an observable from other sources.

Using 'signal' directly on an observable which is incorrect.

Trying to subscribe directly without conversion.

Use toSignal to convert an observable into a signal in Angular.

2fill in blank

medium

Complete the code to update the signal when the observable emits new values.

Angular

const countSignal = toSignal(count$[1] { initialValue: 0 });

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

A,

B.subscribe()

C.pipe()

D()

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot notation instead of comma to separate arguments.

Trying to call subscribe inside toSignal.

Using parentheses incorrectly.

The options object is passed as a second argument separated by a comma.

3fill in blank

hard

Fix the error in the code to correctly convert an observable to a signal with an initial value.

Angular

const userSignal = toSignal(user$[1] { initialValue: null });

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

A.pipe(

B()

C,

D.subscribe(

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot notation or parentheses instead of a comma.

Trying to subscribe manually inside toSignal.

The options object must be passed as the second argument separated by a comma, not with dot or parentheses.

4fill in blank

hard

Complete the code to create a signal from an observable and provide an initial value.

Angular

const dataSignal = toSignal([1], { initialValue: [] });

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

Adata$

B,

C.pipe()

D()

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot notation instead of comma.

Passing the options object as first argument.

The observable variable is passed first, then a comma, then the options object.

5fill in blank

hard

Fill both blanks to convert an observable to a signal, set an initial value, and access the signal's current value.

Angular

const messageSignal = toSignal([1], { initialValue: 'Loading...' });
const currentMessage = messageSignal.[2];

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

Amessage$

B,

Cvalue

D()

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call the signal as a function to get the value.

Passing options incorrectly.

Using wrong variable names.

First pass the observable, then a comma, then options. Access the signal's current value with .value.