Signal vs observable comparison in Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a signal in Angular.

Angular

const count = [1](0);

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

Asignal

Bobservable

CSubject

DBehaviorSubject

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'observable' instead of 'signal' to create a signal.

Confusing Subject with signal.

Signals in Angular are created using the signal function.

2fill in blank

medium

Complete the code to subscribe to an observable in Angular.

Angular

myObservable.[1](() => console.log('Data received'));

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

Anext

Bemit

Csubscribe

Dlisten

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'emit' which is for EventEmitters.

Using 'next' which is a method on Subjects, not on observables directly.

To listen to values from an observable, you use the subscribe method.

3fill in blank

hard

Fix the error in the code to update a signal's value.

Angular

count.[1]((val) => val + 1);

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

Aset

Bemit

Cnext

Dupdate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'set' which replaces the value directly but does not take a function.

Using 'next' which is for Subjects.

Signals use the update method to change their value based on the current value.

4fill in blank

hard

Fill both blanks to create an observable from a signal and subscribe to it.

Angular

const obs = toObservable([1]);
obs.[2](() => console.log('Signal changed'));

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

Acount

Bsubscribe

Cnext

Dsignal

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'next' instead of 'subscribe' to listen to observable.

Using 'signal' instead of the signal variable name.

You convert a signal to an observable using toObservable and then subscribe to it with subscribe.

5fill in blank

hard

Fill all three blanks to create a signal, convert it to an observable, and subscribe to it.

Angular

const [1] = [2](0);
const obs = toObservable([3]);
obs.subscribe(() => console.log('Value changed'));

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

Acount

Bsignal

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for the signal and observable conversion.

Using 'observable' instead of 'signal' to create the signal.

First, create a signal named count using signal. Then convert count to an observable.