Creating observables in Angular - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

Observable subscription behavior in Angular

Consider this Angular component code that creates an observable and subscribes to it. What will be logged to the console when the component initializes?

Angular

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-test',
  template: `<p>Check console output</p>`
})
export class TestComponent implements OnInit {
  data$: Observable<number> = new Observable(observer => {
    observer.next(1);
    observer.next(2);
    observer.complete();
  });

  ngOnInit() {
    this.data$.subscribe(value => console.log(value));
  }
}

A 1

B 2

C 1 2

D No output, observable never emits

💡 Hint

Think about how many times observer.next is called before complete.

The observable emits two values, 1 and 2, before completing. The subscription logs each emitted value in order.

📝 Syntax

intermediate

Correct syntax to create an observable emitting a single value

Which option correctly creates an observable that emits the string 'hello' once and then completes?

A Observable.of('hello')

B new Observable(observer => { observer.next('hello'); observer.complete(); })

C Observable.create(observer => { observer.next('hello'); })

D new Observable(observer => { observer.emit('hello'); observer.complete(); })

💡 Hint

Check the method names and how observables are created in RxJS.

Option B uses the correct Observable constructor and calls observer.next and observer.complete properly.

Option B is invalid because 'of' is a standalone function, not a method on Observable.

Option B uses deprecated Observable.create and misses observer.complete.

Option B uses observer.emit which does not exist.

🔧 Debug

advanced

Why does this observable never emit values?

Given this observable code, why does the subscription never log any values?

Angular

const obs$ = new Observable(observer => {
  setTimeout(() => {
    observer.next('data');
    observer.complete();
  }, 1000);
});

obs$.subscribe(value => console.log(value));

A The observable is cold and subscription triggers the emission after 1 second, so it logs 'data' after 1 second.

B The observable never emits because setTimeout is asynchronous and observer.next is not called synchronously.

C The subscription is missing, so no values are emitted.

D The observable completes before emitting any value.

💡 Hint

Think about how asynchronous code inside observables works.

The observable is cold, so the code inside runs when subscribed. The setTimeout delays emission by 1 second, then emits 'data' and completes. The subscription logs 'data' after 1 second.

❓ state_output

advanced

State of subscription after multiple emissions

What is the state of the subscription after this observable emits three values and completes?

Angular

const obs$ = new Observable(observer => {
  observer.next(10);
  observer.next(20);
  observer.next(30);
  observer.complete();
});

let received = [];
obs$.subscribe(value => received.push(value));

A received is empty and subscription is closed

B received contains [10, 20] and subscription is still open

C received contains [30] and subscription is closed

D received contains [10, 20, 30] and subscription is closed

💡 Hint

Consider what happens when observer.complete is called.

The observable emits three values in order, so received has all three. After complete, the subscription is closed and no more values can be emitted.

🧠 Conceptual

expert

Difference between cold and hot observables in Angular

Which statement correctly describes the difference between cold and hot observables in Angular?

A Cold observables start emitting values only when subscribed; hot observables emit values regardless of subscriptions.

B Cold observables emit values regardless of subscriptions; hot observables start emitting only when subscribed.

C Cold observables cannot be multicasted; hot observables cannot be unsubscribed.

D Cold observables are synchronous; hot observables are always asynchronous.

💡 Hint

Think about when the data starts flowing in each observable type.

Cold observables wait until someone subscribes before emitting data. Hot observables emit data independently of subscriptions, so subscribers may miss some values.

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