Awaiting for two methods that return observables in angular

Question

I have two methods that make api calls and return observables.

private method1(): Observable<Home> {
  return homeService.call.get();
}

private method2(): Observable<User> {
  return userService.call.get();
}

Then I have the following two methods:

private method3(): void {
  this.method1().subscribe();
  this.method2().subscribe();
}

and one last one

private method4(): void {
 // does things
 this.method3();
}

I want the method4 to wait for the method3 to finish all is requests in order to proceed, but I have no idea how to achieve it in angular 8. Any tips?

You can check this out :) I answered a question similar to that https://stackoverflow.com/questions/57178820/merge-two-observables-array-into-single-observable-array/57179067#57179067 — wentjun, Jul 26 '19 at 17:00
I know this was already marked as answered, but I have an example here for reference: https://stackblitz.com/edit/angular-todos-deborahk — DeborahK, Jul 26 '19 at 17:13

score 1 · Accepted Answer · answered Jul 26 '19 at 17:04

You are probably looking at a term called flattening observables - having nested observables. (Unless you care only about the final response - forkJoin)

You have variety of operators that can help you achieve what you need. Here are only some of them. Take a look and you will see which of them applies to your code the best way.

switchMap - Has the canceling effect.

mergeMap - "This operator is best used when you wish to flatten an inner observable but want to manually control the number of inner subscriptions."

forkJoin - "This operator is best used when you have a group of observables and only care about the final emitted value of each."

Awaiting for two methods that return observables in angular

1 Answers1