subscribe/unsubscribe in Angular

think that everyone, at least once during the code optimization, realized that they have forgotten to unsubscribe from an observable. This common issue can be very frustrating and time-consuming, especially when you are working on a complex application. Luckily, there is a solution for that.

During the optimization of the project I’m currently working on, I have encountered this issue that could be prevented by using the Async pipe. The built-in Async pipe in Angular 2+ is a great tool to manage observable subscriptions, which is why I have decided to write this article about it.

What is the Async pipe?

The Async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the Async pipe marks the component to be checked for changes. When the component gets destroyed, the Async pipe unsubscribes automatically to avoid potential memory leaks.

Benefits of using Async pipe

• We can use onPush strategy
• No need to use or worry about subscribe or unsubscribe
• No need to use Angular lifecycles
• Cleaner code

Angular strategies

• checkAlways
• onPush

Angular uses default checkAlwaysstrategy. This means that every component is checked when any change is detected, which will reduce the performance.

This issue can be prevented with Async pipe by using onPush strategy. This means we will minimize change detection cycles to check component only when:

• Input properties change
• Event emits
• Observable emits

Using onPush detection strategy is great for performance, so we should be using the Async pipe as much as possible.

How to start using the Async pipe?

The first step is to split our application into multiple components so that every component will have component, html and service file.

With this approach, developers can easily understand the architecture of the Angular application because every component will be the same.

The file example.services.ts is like a container where we specify from where we are fetching the data for our application. The advantage of this is that all the methods that communicate with the backend will be in one place. This way, our code will become much cleaner and easier to maintain.

The next step is to add change detection in example.component.ts manually, as you can see in the picture below:

Then we will just include service in the component and get the methods we need from it. We don’t have to use Init or Destroy lifecycle in our component. We don’t have to create additional properties where we will save data we get; we will just use observables in HTML.

Therefore, we don’t have to worry if we forgot to unsubscribe in some places, and we will be sure we don’t have memory leaks in the application. Everything is done automatically.

While I was doing the optimization of my current project, I found many places where we forgot to unsubscribe, which consumed a lot of time to fix. That could have been avoided by using the Async pipe in the first place.

The last step is to write this expression in HTML so Angular would know that we are using the Async pipe. Every time our component loads, the Async pipe will be triggered, and it will automatically call the method.

Example:

Reload data on some event

You can see from the code above I used combineLatest method from rxjs to combine users observable with behavior subject. This means that every time the event is triggered, we will get the newest data. We can also use this approach if we need to combine a couple of observables into one, which can be seen in the next example.

Here I also used combineLatest from rxjs, but this time to combine observables. This can be useful when you have a component with multiple methods. In order to have cleaner and more readable code, we can combine all observables into one and use only once Async pipe in HTML.

This article is just a brief example of how we can implement the Async pipe to make our applications reactive and easier to maintain.

Thank you for reading.