Creating observables in Angular - Try It Yourself

Creating observables

📖 Scenario: You are building a simple Angular component that listens to a stream of numbers emitted over time.This simulates receiving live data updates, like a temperature sensor sending new readings.

🎯 Goal: Create an observable that emits numbers 1, 2, and 3 sequentially.Subscribe to this observable inside the component to update a variable currentNumber with the latest emitted value.

📋 What You'll Learn

Create an observable called numberObservable that emits the numbers 1, 2, and 3.

Create a component property called currentNumber initialized to 0.

Subscribe to numberObservable inside the component constructor.

Update currentNumber with each emitted number from the observable.

💡 Why This Matters

🌍 Real World

Observables are used in Angular to handle asynchronous data streams like user input, HTTP requests, or real-time data updates.

💼 Career

Understanding how to create and subscribe to observables is essential for Angular developers to build responsive and efficient applications.

1

Create the observable

Create an observable called numberObservable using of from rxjs that emits the numbers 1, 2, and 3.

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-number-stream',
  template: `Current number: {{ currentNumber }}`
})
export class NumberStreamComponent {
  // Create numberObservable here
  
}

Hint

Use of(1, 2, 3) from rxjs to create the observable.

2

Add a property to hold the current number

Add a component property called currentNumber and initialize it to 0.

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-number-stream',
  template: `Current number: {{ currentNumber }}`
})
export class NumberStreamComponent {
  numberObservable = of(1, 2, 3);
  // Add currentNumber property here
}

Hint

Declare currentNumber as a number property and set it to 0.

3

Subscribe to the observable

Inside the component constructor, subscribe to numberObservable and update currentNumber with each emitted value.

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-number-stream',
  template: `Current number: {{ currentNumber }}`
})
export class NumberStreamComponent {
  numberObservable = of(1, 2, 3);
  currentNumber = 0;

  constructor() {
    // Subscribe to numberObservable and update currentNumber
  }
}

Hint

Use this.numberObservable.subscribe(value => { this.currentNumber = value; }) inside the constructor.

4

Complete the component template

Ensure the component template displays the currentNumber property inside a paragraph tag as Current number: {{ currentNumber }}.

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-number-stream',
  // Confirm template shows currentNumber
  template: `Current number: {{ currentNumber }}`
})
export class NumberStreamComponent {
  numberObservable = of(1, 2, 3);
  currentNumber = 0;

  constructor() {
    this.numberObservable.subscribe(value => {
      this.currentNumber = value;
    });
  }
}

Hint

Make sure the template uses interpolation to show currentNumber.

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