When working with streams of data in Angular, like fetching data from an API, the two most common approaches are to either use the async pipe or subscribe to an observable.
We’ll in this article explain the difference between using the async pipe as opposed to subscribing to observables. If that sounds interesting you should continue reading.
What Is the Async Pipe
The async pipe is a built-in pipe in Angular that lets you subscribe to observable streams without having to worry about memory leaks and other scary stuff.
All subscriptions are automatically taken care of by the async pipe so when a component gets destroyed, the async pipes automatically unsubscribes to the streams inside that component.
Besides automatically taking care of the subscriptions, the async pipe also marks the component to be checked for changes when a new value is emitted.
You can read more about the async pipe here in the official Angular documentation.
Subscribing to Observables in Angular
Subscribing to observables is a common approach to fetch values and perform business logic in Angular applications. When subscribing to an observable you define the callback method which will get executed whenever a new value is emitted.
Compared to using the async pipe, when you subscribe to observables in a function you’ll also need to make sure you unsubscribe to the stream when you’re done with it. If you forget to unsubscribe to a stream when you’re done with it you run the risk of creating memory leaks in your application.
You can read more about how observable subscription works here.
Async Pipe vs Subscribe
Ah, the eternal battle between the async pipe and subscribing to observables! Everyone’s got their two cents on this one. We’ll in this article be as objective as possible when we list the arguments, except maybe sneak in our recommendation.
When to Use the Async Pipe
Here are some arguments as to why you should consider the async pipe:
- It marks the component for change detection when a new value is emitted
- It automatically handles subscriptions
- It reduces the amount of code inside your Angular component
When to use the subscribe() function
Before we list the pros of using the subscribe() function, we want to be clear that, according to us, you should always use the async pipe whenever possible.
Here are the pros of using the subscribe() function:
- It enables you to chain business logic when subscribing to the observable
- You have more access to class properties, which you can use in the subscriptions callback function
- It gives you more control to subscribe/unsubscribe as you want. Personally, can’t think of why you would wanna do this
Conclusion
In conclusion, there are arguments both as to why you should use the async pipe and why you should use the subscribe() function.
We recommend you always use the async pipe whenever possible. This is because it automatically handles subscriptions and reduces the complexity and the amount of code inside your Angular component.
Hope you enjoyed reading this article and don’t forget to check out our other Angular articles here!