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

Discovering all images in Angular

Having trouble installing dependencies in a React project with TypeScript due to conflicts

What could be causing issues with my unit tests in relation to Angular Material tooltips?

Accessing URLs directly with the Angular 2 Router

Angular navigation system featuring hierarchical categories

A Guide to Filtering MongoDB Data Using Array Values

Error in Typescript: The property 'a' is not defined in the type 'A'

What is the best way to click on a particular button without activating every button on the page?

What exactly does the question mark represent in the code structure as indicated in VSCode?

Is the select all checkbox causing disabled checkboxes to be selected in an Angular environment?

When attempting to run npm install for @types/jquery, an error is returned stating "Invalid name: @types/jquery"

Here is a unique version: "Dealing with Node.js ES6 (ESM) Modules in TypeScript can be tricky, especially when the TypeScript Compiler (TSC) fails to emit the

Issue with accessing data in React Admin Show Page using useRecordContext() function leads to undefined return

The placeholder string is being accepted as the input value for the number

Issues arise with Typescript Intellisense in Visual Studio Code causing it to stop functioning

Tips for crafting a test scenario for input alterations within Angular

What causes the variation in Http Post Response between the Console and Network response tab?

Can someone point me in the direction of the AND and BUT keywords within the cucumber library

Having trouble implementing catchError in a unit test for an HttpInterceptor in Angular 11

Roll out a custom-built server for an Angular 7, MongoDB, Express, and Node application