Unsubscribing from an Observable in Angular

In this tutorial let us learn how to Unsubscribe from an observable in angular. An observable which is not Unsubscribed will lead to memory leak & Performance degradation.

Why Unsubscribe

In the example below, we have ChildComponent, which subscribes to an observable in its ngOnInit hook. The observable emits a new value for every 2000 ms.

In the AppComponent, we use the ngIf to show and remove the ChildComponent.

app.component.html

Child.Component.ts

Source Code

The subscription starts to emit values when the child component is rendered by Angular. But when we destroy the component, the observable still keeps emitting new values. We can see this in console window.

If we render the child component again, it starts a new subscription. Now we have two subscriptions running. As and when we create a new instance of the child component, it will create a new subscription, and those subscriptions never cleaned up.

Not Unsubscribing from an Observable in Angular will result in memory leak

How to Unsubscribe

Unsubscribing from an observable as easy as calling Unsubscribe() method on the subscription. It will clean up all listeners and frees up the memory

To do that, first create a variable to store the subscription

Assign the subscription to the obs variable

Call the unsubscribe() method in the ngOnDestroy method.

When we destroy the component, the observable is unsubscribed and cleaned up.

The final code is shown below

Child.Component.ts

Source Code

When to Unsubscribe

There is no need to unsubscribe from every subscription. For Example, the observables, which are finite in nature. Although it does not harm if you do so.

In Angular you do not have to Unsubscribe in the following scenarios

You need to Unsubscribe in the following scenarios

Various ways to Unsubscribe

Use Async Pipe

Use Async pipe to subscribe to an observable, it automatically cleans up, when we destroy the component.

Using Take or First Operator

Convert all infinite observables to finite observable using the Take or First Operators.

The Take Operator emits the first n number of values and then stops the source observable.

The first operator emits the first value and then stops the observable. But It sends an error notification if does not receive any value.

Use Unsubscribe

Using Unsubscribe is the simplest & easiest way.

Store each subscription in a local variable and call unsubscribe on them in the ngOnDestroy hook

Source Code

Using Array to store subscription

Instead of local variable for each subscription, you can create an array and add each subscription into it

Push each subscriptions to array

In the ngDestroy hook, call unsubscribe on each subscriptions

Source Code

Using TakeUntil

We can make use of TakeUntil Operator.

The takeUntil operator emits values from the source observable until the notifier Observable emits a value. It then completes the source observable.

To use takeUntil first, we create a notifier observable stop$

This notifier observable emits a value when the component is destroyed. We do that in ngOnDestroy hook.

We add the takeUntil(this.stop$) to all the observable we subscribe. When the component is destroyed all of them automatically unsubscribed. Remember to add it to the last in the pipe Operator.

Complete code.

Source Code

Using TakeUntil in a base component

Instead of creating the notifier observable in every component, you can create on in a BaseComponent and reuse it everywhere.

base.component.ts

Extend every component using BaseComponent.

child.component.ts

Source Code

Note that if you wish you use the constructor or ngOnDestroy in the child component, then remember to use the super & super.ngOnDestroy() to call the base constructor & ngOnDestroy of the base component.

Reference

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top