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
  
}

Need a 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
}

Need a 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
  }
}

Need a 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;
    });
  }
}

Need a hint?

Make sure the template uses interpolation to show currentNumber.