Why observables matter in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Observable class from RxJS.

Angular

import { [1] } from 'rxjs';

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

AObservable

BSubject

CSubscription

DObserver

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Observer instead of Observable

Using Subject instead of Observable

The Observable class is imported from 'rxjs' to create streams of data in Angular.

2fill in blank

medium

Complete the code to subscribe to an observable and log the emitted value.

Angular

myObservable.subscribe({ next: value => console.[1](value) });

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

Alog

Binfo

Cwarn

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.error which is for errors

Using console.warn which shows warnings

The log method prints the emitted value to the console when the observable emits data.

3fill in blank

hard

Fix the error in the code to correctly create an observable that emits 'Hello'.

Angular

const hello$ = new Observable(observer => { observer.[1]('Hello'); observer.complete(); });

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

Aerror

Bnext

Csubscribe

Demit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'emit' which is not a method on observer

Using 'subscribe' which is for subscribing, not emitting

The next method is used to send data to subscribers of the observable.

4fill in blank

hard

Fill both blanks to create an observable that emits numbers 1 to 3 and then completes.

Angular

const numbers$ = new Observable(observer => { observer.[1](1); observer.[1](2); observer.[1](3); observer.[2](); });

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

Anext

Berror

Ccomplete

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'error' instead of 'complete'

Using 'subscribe' instead of 'complete'

Use next to emit values and complete to signal the end of the stream.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that maps each emitted value to its square if the value is greater than 2.

Angular

const squares = { [1]: [2] for [3] of values if [3] > 2 };

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

Avalue

Bvalue * value

Dval

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names inconsistently

Not squaring the value correctly

Use 'value' as the key and 'value * value' as the value, iterating over 'value' in values, filtering with 'value > 2'.