Are you the one posting about the subscribing multiple observables in diverse forums but not getting the right answer or still looking for the right guide to look after?. This article gives you a clear picture of this concept after seeing so many complex conversations and requests that are going on the online forums.

Hey Guys, I am Nagaraj – a passionate angular developer associated with Agira Technologies, as everyone is also a bit confused after seeing multiple answers being posted especially for this concept. So, I wanted to give you a small & clear wrap up on how you can simply subscribe to multiple observables in angular without any hurdles. When you are using observable in your project, anyways it will support the asynchronous process. Unlike the past Angular development strategies, nowadays we are started using the Observable several times in angular applications such as HTTP API access, state management framework, service-based data sharing using Multicasting Observable like Subject, BehaviourSubject.

Of course, there are several ways to subscribe to the multiple Observable in components. So far, many articles you have seen must have shown you the same 4 patterns which are needed to be followed in certain cases but I somehow felt that it needs not to be complicated with 4 patterns which are quite hard to pair and predict then & there. Trust me it can be easily divided into two way and you can utilize either of it based on the conditions I’m going to tell you now. Also, it would be easy for you to understand in case if you have any conflicts in understanding the concept of subscribing multiple components. Explanations apart, let me give you the quick guide on both ways and solution to get it done easily.

Subscribing an observable into another observable.
Subscribing to multiple observables – Combining observables.

Subscribing an observable into another observable

As the headline says, this method can be used to subscribe the dependent Observable. Let me put it in simple words! For example, sometimes when the observable has dependent of another observable or when we subscribe to one observable which is a subscription of another Observable then we can use the condition will fall on this category for which you can use the following methodology.

So, this is the previous method you must be using,

Before:

this.api.logIn(payloads).subsribe((res)=>{
  if(!res) return;
  this.api.getOrderDetails(res.data.profileId).subcribe((res)=>{
    if(!res) return;
    this.orders = res.data.orders;
  });   
});

Now, let me you how you can do it! Moreover, you can do it in two ways as I have listed both models below,

After:

Model 1:

You can use this Model 1 when the subscribed value is required within a TypeScript and view(HTML).

this.api.logIn(payloads).pipe(
 mergeMap(loginRes => {
  if(!loginRes) return EMPTY;
  return this.api.getOrderDetails(loginRes.data.profileId);
})).subsribe((cartDetailsres)=>{
    if(!cartDetailsres) return;
    this.orders = cartDetailsres.data.orders;
  });   
});

Model 2:

In other cases, you can use Model 2 when the value is required only within a view.

*.component.ts

this.orders$ = this.api.logIn(payloads).pipe(
 concatMap(loginRes => {
  if(!loginRes) return Of([]);
  return this.api.getOrderDetails(loginRes.data.profileId);
}));

*.component.html

<ul>
  <li *ngFor="let order of orders$ | async"> order.name </li>
</ul>

Don’t Miss: 10 Common Mistakes That Angular Developers Will Commit

Subscribing to multiple observables – Combining observables

This is another type that used to subscribe to multiple observable but in this type, no observable will be a dependent of another observable. But in some cases, maybe orders of the subscription is required for the proper execution as planned. You will understand when you see the below example.

Before that, let me remind you of the previous way of handling it,

Before:

this.api.getOrderedItemsCount().subcribe((res)=>{
  if(!res) return;
  this.orders = res.data.orders;
}); 
 this.api.getMenuItemsOfTheStore().subcribe((res)=>{
  if(!res) return;
  this.orders = res.data.orders;
});

Note :

If the observables emit only one value or you require only the final value of each observable to be emitted before it’s completion, then forkJoin is the better option and if it’s not the case then you have to combine the latest operator to do it.

After:

Model 1:

Use this model when the value is required within a TypeScript and view(HTML) that are not dependent on any observable.

forkJoin(
this.api.getOrderedItemsCount(),
this.api.getMenuItemsOfTheStore()
).subcribe(([ordersCount, menuItems])=>{
  this.orders = ordersCount.data;
  this.menuItems = menuItems.data;
});

combineLatest(
  this.api.getOrderedItemsCount(),
  this.api.getMenuItemsOfTheStore()
).subcribe(([ordersCountRes, menuItemsRes])=>{
  this.orders = ordersCountRes.data;
  this.menuItems = menuItemsRes.data;
});

Model 2:

When the value is required only within a view that are not dependent of any observable then you can use this Model 2

*.component.ts

this.ordersCount$ = this.api.getOrderedItemsCount();
this.menuItems$ = this.api.getMenuItemsOfTheStore();

*.component.html

<div>
  <h3> Orders Counts: {{this.ordersCount$ | async}} </h3>
</div>
<ul>
  <li *ngFor="let menuItem of menuItems$ | async"> menuItem.name </li>
</ul>

Best To Read: Top 10 Angular Best Practices You Must Know

That’s all guys! Hope I have done justice to this concept and I believed you liked it too. If you found it helpful try to share it with others and help them to understand it! Also, don’t forget to share your views and opinions in the comments below.