In this post I will show how to avoid subscriptions in RxJs by utilizing the async pipe.
Lately I have seen more and more people discourage manual subscriptions to RxJs observables in Angular components. Instead the recommendation is to use the async pipe to handle subscribing and unsubscribing.
Initially I was a bit hesitant to use the async pipe since I assumed it would be less flexible to rely on the async pipe instead of a manual subscription.
Also, most of the time when I see examples of how to use the async pipe, the examples are usually too trivial to reflect realistic scenarios.
Common scenarios like enabling/disabling spinners and error handling are often left out of the examples.
In the following example I will show how to use the async pipe with a relatively complex observable.
In addition to a complicated http sequence I am also managing a loading indicator and error handling.
Service
Let’s start with the http portion of the observable.
Despite the complexity of the observable with chaining and parallel requests, it’s pretty straightforward.
Component
Let’s move on to the component.
Interesting questions are: How can we manage the spinner and add error handling?
It turns out that the secret to doing processing like turning on and off loading indicators is adding a “do” clause to the observable.
This gives us a hook to set side effects that happen outside of the observable itself, but still depend on the state of the observable.
Error handling can be added using a simple catch block. Notice here that I am transforming the error to a valid response that can be displayed in the template.
The template is where I add the async pipe as seen below:
In the template I am relying on a conditional to render, either the successful response, or an error response.
There you have it, a simple way to avoid manual subscriptions.