Stop Using Multiple Observable Subscriptions in Angular

This article will guide you through why subscribing to multiple Observables can harm your application and explore efficient alternatives to handle asynchronous data in a clean and performant way.

Observable Subscriptions in Angular

In Angular, it’s common to use multiple subscriptions to handle multiple observables, but doing so can lead to issues such as memory leaks, harder-to-maintain code, and potential race conditions. To avoid using multiple observable subscriptions and improve performance and readability, you can use several strategies:

1. Use async Pipe in Templates

The async pipe allows you to automatically subscribe and unsubscribe from observables within templates without manually managing the subscription. This is a great way to avoid the need for multiple subscriptions in your component class.

Example:

<div *ngIf="data$ | async as data">
  <p>{{ data }}</p>
</div>

• data$ is an observable. The async pipe subscribes to it automatically, and when the component is destroyed, it unsubscribes as well.

2. Use forkJoin or combineLatest for Multiple Observables

If you need to handle multiple observables simultaneously and wait for all of them to complete, you can use operators like forkJoin, combineLatest, or zip.

• forkJoin: Useful when you want to wait for all observables to complete and get the last emitted value from each.
• combineLatest: Useful when you need the latest values from all observables at any point.
• zip: Useful when you need to combine values from multiple observables, emitting results as they arrive.

Example with forkJoin:

import { forkJoin } from 'rxjs';

this.myService.getData1().pipe(
  switchMap(data1 => {
    return forkJoin([
      this.myService.getData2(),
      this.myService.getData3()
    ]).pipe(
      map(([data2, data3]) => {
        return { data1, data2, data3 };
      })
    );
  })
).subscribe(result => {
  console.log(result);
});

3. Use mergeMap, concatMap, or switchMap for Chaining…