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.

Practice

1. What is the main purpose of creating an observable in Angular?

easy

A. To create a new component

B. To watch and react to data or events over time

C. To style HTML elements

D. To define routes in the app

Solution

1. Step 1: Understand observable concept

   Observables let you watch data or events and respond when they change.

2. Step 2: Identify purpose in Angular

   Angular uses observables to handle asynchronous data streams and events.

3. Final Answer:

   To watch and react to data or events over time -> Option B

4. Quick Check:

   Observable purpose = watch/react data [OK]

Hint: Observables track data changes over time [OK]

Common Mistakes:

• Confusing observables with components
• Thinking observables style elements
• Mixing observables with routing

2. Which of the following is the correct way to create a new observable in Angular?

easy

A. const obs = new Observable(subscriber => { subscriber.next('Hello'); });

B. const obs = Observable.create('Hello');

C. const obs = new Observable.next('Hello');

D. const obs = Observable('Hello');

Solution

1. Step 1: Recall Observable creation syntax

   Use new Observable() with a function receiving a subscriber.

2. Step 2: Check each option

   Only const obs = new Observable(subscriber => { subscriber.next('Hello'); }); correctly uses new Observable(subscriber => subscriber.next(...)).

3. Final Answer:

   const obs = new Observable(subscriber => { subscriber.next('Hello'); }); -> Option A

4. Quick Check:

   Correct syntax uses new Observable with subscriber function [OK]

Hint: Use new Observable(subscriber => ...) to create [OK]

Common Mistakes:

• Using Observable.create which is deprecated
• Calling next on Observable directly
• Trying to call Observable as a function

3. What will be the output when subscribing to this observable?

const obs = new Observable(subscriber => { subscriber.next(1); subscriber.next(2); subscriber.complete(); subscriber.next(3); });
obs.subscribe(value => console.log(value));

medium

A. 1 2

B. 3

C. 1 2 3

D. No output

Solution

1. Step 1: Analyze subscriber.next calls

   The observable sends 1, then 2, then calls complete(), then tries to send 3.

2. Step 2: Understand complete behavior

   After complete() is called, no more values are sent, so 3 is ignored.

3. Final Answer:

   1 2 -> Option A

4. Quick Check:

   complete stops emissions, so output = 1 2 [OK]

Hint: complete() stops further values from emitting [OK]

Common Mistakes:

• Expecting values after complete()
• Ignoring complete() effect
• Thinking all next() calls always emit

4. Identify the error in this observable creation code:

const obs = new Observable(subscriber => { subscriber.next('Hi'); subscriber.error('Oops'); subscriber.next('Bye'); });

medium

A. No error, code is correct

B. Missing subscriber.complete call

C. Observable constructor syntax is wrong

D. Calling subscriber.next after subscriber.error

Solution

1. Step 1: Review observable error handling

   After calling subscriber.error(), the observable stops and no further next() calls run.

2. Step 2: Check code sequence

   Here, subscriber.next('Bye') is called after error, which is invalid and ignored.

3. Final Answer:

   Calling subscriber.next after subscriber.error -> Option D

4. Quick Check:

   next after error is invalid [OK]

Hint: No next() calls after error() [OK]

Common Mistakes:

• Thinking complete() is required after error()
• Believing next() after error() runs
• Confusing error() with complete()

5. You want to create an observable that emits numbers 1 to 3 with a delay of 1 second between each. Which code correctly achieves this behavior?

hard

A. const obs = new Observable(subscriber => { [1,2,3].forEach(n => { setTimeout(() => subscriber.next(n), 1000); }); });

B. const obs = new Observable(subscriber => { for(let n=1; n<=3; n++) { setTimeout(() => subscriber.next(n), 1000); } });

C. const obs = new Observable(subscriber => { let n=1; const interval = setInterval(() => { subscriber.next(n); if(n===3) clearInterval(interval); n++; }, 1000); });

D. const obs = new Observable(subscriber => { subscriber.next(1); subscriber.next(2); subscriber.next(3); });

Solution

1. Step 1: Understand timing requirements

   We need to emit 1, 2, 3 spaced by 1 second each.

2. Step 2: Analyze each option's timing

   const obs = new Observable(subscriber => { [1,2,3].forEach(n => { setTimeout(() => subscriber.next(n), 1000); }); }); emits 1,2,3 all after 1 second simultaneously.
   const obs = new Observable(subscriber => { for(let n=1; n<=3; n++) { setTimeout(() => subscriber.next(n), 1000); } }); emits all after 1 second simultaneously.
   const obs = new Observable(subscriber => { let n=1; const interval = setInterval(() => { subscriber.next(n); if(n===3) clearInterval(interval); n++; }, 1000); }); uses setInterval to emit each number every 1 second and stops after 3.
   const obs = new Observable(subscriber => { subscriber.next(1); subscriber.next(2); subscriber.next(3); }); emits all immediately without delay.

3. Final Answer:

   const obs = new Observable(subscriber => { let n=1; const interval = setInterval(() => { subscriber.next(n); if(n===3) clearInterval(interval); n++; }, 1000); }); -> Option C

4. Quick Check:

   setInterval with clearInterval emits spaced values [OK]

Hint: Use setInterval and clearInterval for timed emissions [OK]

Common Mistakes:

• Using forEach with setTimeout causes all to run at once
• Not clearing interval causing infinite emissions
• Emitting all values immediately without delay