Retrieving an Observable within an Observable is a feature found in Angular 9

Question

Retrieving an Observable within an Observable is a feature found in Angular 9

Seeking a solution to return an Observable nested within another Observable. Although I've tried using the pipe and map operators, it doesn't appear to be functioning correctly for me. What could be causing the issue?

My development environment includes Angular 9.1.12 and rxjs ~6.5.4.

For instance:

Service1

import { Observable, of } from 'rxjs';

export class Service1 {

  test(): Observable<string> {
      console.log(1);
      return of('hey');
  }
}

Service2

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export class Service2 {

  constructor(private service1: Service1) {}

  test(): Observable<string> {
    return this.service1.test().pipe(
      map((value: string) => {
        console.log(2);
        return value;
      })
    );
  }
}

Component

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export class Component implements OnInit {

  constructor(private service2: Service2) {}

  test(): Observable<void> {
    return this.service2.test().pipe(
      map((value: string) => {
        console.log(3);
      }));
    }
  }
}

Only "1" is displayed in the console.

angular typescript rxjs pipe observable

Answer 1

Answer №1

It makes sense because you didn't subscribe to the observables, so they were never actually emitted or executed.

You need to subscribe in the component like this.

this.test().subscribe();

I have put together a stackblitz for you to experiment with.

PS: Remember to also unsubscribe when necessary. If these concepts are new to you, I recommend reading this article.

Answer 2

It makes sense because you didn't subscribe to the observables, so they were never actually emitted or executed.

You need to subscribe in the component like this.

this.test().subscribe();

I have put together a stackblitz for you to experiment with.

PS: Remember to also unsubscribe when necessary. If these concepts are new to you, I recommend reading this article.

Answer 3

Answer №2

Similar to how functions only execute the code inside them when called upon, Observables run their code only when you subscribe.

When you call this.service1.test(), you will see an output of 1.

However, outputs 2 and 3 are not visible because you do not subscribe to those specific Observables.

export class Component implements OnInit {

  constructor(private service2: Service2) {}

  test(): void {
    this.service2.test().pipe(
      map(_ => console.log(3))
    ).subscribe();
  }
  
}

Answer 4

Similar to how functions only execute the code inside them when called upon, Observables run their code only when you subscribe.

When you call this.service1.test(), you will see an output of 1.

However, outputs 2 and 3 are not visible because you do not subscribe to those specific Observables.

export class Component implements OnInit {

  constructor(private service2: Service2) {}

  test(): void {
    this.service2.test().pipe(
      map(_ => console.log(3))
    ).subscribe();
  }
  
}

Answer 5

Answer №3

In the world of observables, there are two main categories: hot and cold. For the purpose of this discussion, we will focus on cold observables. Hot observables can be explored further here.

Cold observables, true to their name, wait to execute their internal logic until they have been subscribed to. This means that when you subscribe within a component, it triggers all the observables up to the innermost of('hey').

export class Component implements OnInit {
  constructor(private service2: Service2) {}

  ngOnInit() {
    this.test().subscribe();
  }

  test(): Observable<void> {
    return this.service2.test().pipe(
      tap((value: string) => console.log(value))
    );
  }
}

It's important to note that using the map operator in a component without a return statement will result in returning undefined. The map operator is typically used for transforming incoming values, while the tap operator is more suitable for side-effects like logging.

Unsubscribe

Additionally, subscriptions remain open unless an error occurs or they are explicitly completed. It's advisable to close these subscriptions once they are no longer needed.

For instance, in Angular, it's common practice to handle subscription closure in the ngOnDestroy hook to ensure they are closed when the component is destroyed.

export class Component implements OnInit, OnDestroy {
  sub: Subscription;

  constructor(private service2: Service2) {}

  ngOnInit() {
    this.sub = this.test().subscribe();
  }

  test(): Observable<void> {
    return this.service2.test().pipe(
      tap((value: string) => console.log(value))
    );
  }

  ngOnDestroy() {
    if (!!this.sub)
      this.sub.unsubscribe();
  }
}

There are various ways to gracefully handle closing open subscriptions. More details can be found here:

Answer 6

In the world of observables, there are two main categories: hot and cold. For the purpose of this discussion, we will focus on cold observables. Hot observables can be explored further here.

Cold observables, true to their name, wait to execute their internal logic until they have been subscribed to. This means that when you subscribe within a component, it triggers all the observables up to the innermost of('hey').

export class Component implements OnInit {
  constructor(private service2: Service2) {}

  ngOnInit() {
    this.test().subscribe();
  }

  test(): Observable<void> {
    return this.service2.test().pipe(
      tap((value: string) => console.log(value))
    );
  }
}

It's important to note that using the map operator in a component without a return statement will result in returning undefined. The map operator is typically used for transforming incoming values, while the tap operator is more suitable for side-effects like logging.

Unsubscribe

Additionally, subscriptions remain open unless an error occurs or they are explicitly completed. It's advisable to close these subscriptions once they are no longer needed.

For instance, in Angular, it's common practice to handle subscription closure in the ngOnDestroy hook to ensure they are closed when the component is destroyed.

export class Component implements OnInit, OnDestroy {
  sub: Subscription;

  constructor(private service2: Service2) {}

  ngOnInit() {
    this.sub = this.test().subscribe();
  }

  test(): Observable<void> {
    return this.service2.test().pipe(
      tap((value: string) => console.log(value))
    );
  }

  ngOnDestroy() {
    if (!!this.sub)
      this.sub.unsubscribe();
  }
}

There are various ways to gracefully handle closing open subscriptions. More details can be found here:

Retrieving an Observable within an Observable is a feature found in Angular 9

Answer №1

Answer №2

Answer №3

Unsubscribe

Similar questions

Building a search feature with a customized pipe in Angular

Ensuring a Generic Type in Typescript is a Subset of JSON: Best Practices

Exploring the functionality of angular reactive forms in creating intricate JSON structures

Cypress and Cucumber synergy: Experience automatic page reloads in Cypress with each test scenario in the Describe block

Launch a fresh window in Angular application without the need for a complete restart

Leveraging Angular environment configurations for workspace libraries

Best practices for organizing an array of objects in JavaScript

Passing dynamic values to nested components within an ngFor loop in Angular

Activate the field once the input for the other field is completed

The @input field is failing to show the value entered by the user

Can a function interface be implemented in TypeScript successfully?

LeafletJS tiles are only loaded once the map is being actively moved

Steer clear of mentioning unbound methods, as they can lead to accidental scoping errors with 'this' when invoking static methods

Best approach to inform pages about a variable update in Ionic

Error in Typescript: The type 'string' cannot be assigned to the type '"allName" | `allName.${number}.nestedArray`' within the react hook form

When trying to click on the submit button in Angular forms, it fails to work

Generate the Ionic build and save it to the /dist directory instead of the /www

Authenticating users with Facebook using Ionic, Angular, Capacitor, and Firebase, as well as implementing role-based authentication

"Import data from a text file and store it as an array of objects using Types

Attempting to utilize a namespace-style import for calling or constructing purposes will result in a runtime failure