Creating observables in Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple observable that emits a single value.

Angular

import { Observable } from 'rxjs';

const obs = new Observable(observer => {
  observer.next([1]);
  observer.complete();
});

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

Aobserver.error('Error')

Bconsole.log('Hello')

C'Hello Observable!'

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.log instead of observer.next

Passing null instead of a value

Calling observer.error instead of next

The next method sends a value to subscribers. Here, it emits the string 'Hello Observable!'.

2fill in blank

medium

Complete the code to create an observable from an array of numbers.

Angular

import { from } from 'rxjs';

const numbers = [1, 2, 3, 4];
const obs = [1](numbers);

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

Afrom

Binterval

Cof

Dnew Observable

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'of' which emits the whole array as one value

Using 'interval' which emits numbers over time

Trying to use 'new Observable' without a subscriber function

The from function creates an observable from an array, emitting each item in sequence.

3fill in blank

hard

Fix the error in the observable creation to emit values 1, 2, and 3.

Angular

import { Observable } from 'rxjs';

const obs = new Observable(observer => {
  observer.next(1);
  observer.next(2);
  observer.next([1]);
  observer.complete();
});

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

A4

B3

C'3'

Dobserver.complete()

Attempts:

3 left

💡 Hint

Common Mistakes

Emitting a string '3' instead of number 3

Emitting 4 instead of 3

Calling complete instead of next

The observable should emit the number 3 as the third value before completing.

4fill in blank

hard

Fill both blanks to create an observable that emits 'A' and 'B' using the correct creation function and method.

Angular

import { [1] } from 'rxjs';

const obs = [2]('A', 'B');

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

Aof

Bfrom

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'from' which expects an iterable

Importing the wrong function

Mixing 'of' and 'from'

The of function creates an observable that emits each argument in order.

5fill in blank

hard

Fill both blanks to create an observable that emits the uppercase keys of an object if their values are true.

Angular

import { Observable } from 'rxjs';
const data = { a: true, b: false, c: true };
const obs = new Observable(observer => {
  for (const key in data) {
    if (data[key] [1] true) {
      observer.next(key[2]);
    }
  }
  observer.complete();
});

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

A===

B.toUpperCase()

C!==

D.toLowerCase()

Attempts:

3 left

💡 Hint

Common Mistakes

Using !== instead of ===

Converting keys to lowercase instead of uppercase

Omitting the method call

The observable emits keys whose values are exactly true, converting keys to uppercase before emitting.