Why We Have To Unsubscribe An Observable In An Angular Application?

Unsubscribe An Observable:

In Angular applications, it's always recommended to unsubscribe the observables to gain benefits like:

Avoids Memory Leaks
Aborting HTTP requests to avoid unwanted calls.

So in this demo, we will understand the case studies to unsubscribe an observable.

Memory Leaks:

Now let's implement observables code with memory leaks. So first let's create a service like 'test.service.ts' inside of initialize the 'BehaviourSubject' as below.

services/test.service.ts:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root',
export class TestService {
randNumberSub: BehaviorSubject<number> = new BehaviorSubject<number>(
Math.random()

(Line: 8-10) Initialized 'BehaviorSubject' of type 'number'.

Now let's create components like 'sample1.component.ts' and 'sample2.component.ts' these will consume the 'test.service.ts' and listen for the 'BehaviorSubject' changes.

components/sample1.component.ts:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { TestService } from 'src/app/services/test.service';
@Component({
templateUrl: 'sample1.component.html',
export class Sample1Component implements OnInit {
constructor(private testService: TestService) {}
ngOnInit(): void {
this.testService.randNumberSub.subscribe((data) => {
console.log(`Sample1Component ==> RandomNumber: ${data}`);;

(Line: 8) Injected our 'TestService'.
(Line: 11-13) Listening for the 'BehaviorSubject' changes.

components/sample2.components.ts:

import { Component, OnInit } from '@angular/core';
import { TestService } from 'src/app/services/test.service';
@Component({
templateUrl: 'sample2.component.html',
export class Sample2Component implements OnInit {
constructor(private testService: TestService) {}
ngOnInit(): void {
this.testService.randNumberSub.subscribe((data) => {
console.log(`Sample2Component ==> RandomNumber: ${data}`);
buttonTest() {
this.testService.randNumberSub.next(100);

(Line: 8) Injected the 'TestService'.
(Line: 11-13) Listening for the 'BehaviorSubject' changes.
(Line: 16-18) The method that updates data to our 'BehaviorSubject', this method will be registered as a click event for the UI button.

Now to observe memory leaks follow the below steps:

Run the application, 'Home' route configured to 'Sample1.component'. So in the browser console, we can check the 'BehaviourSubject' logs data to the console.
Now navigate to 'Sample2.Component', since here also we listening for 'BehaviorSubject' we can see console log here is well
In 'Sample2.Component', we have a button that can update the data to our 'BehaviorSubject'. So now we click the button we can observe subscription the 'Sample1.component' also executes in spite of we currently on the 'Sample2.component'. This is called observables memory leak happened due to no unsubscribing them.

Unsubscribe Observable To Resolve Memory Leak:

Now let's update our code to unsubscribe the observable inside of the component.

components/sample1.component.ts:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { TestService } from 'src/app/services/test.service';
@Component({
templateUrl: 'sample1.component.html',
export class Sample1Component implements OnInit, OnDestroy {
sampl1sub?: Subscription;
constructor(private testService: TestService) {}
ngOnInit(): void {
this.sampl1sub = this.testService.randNumberSub.subscribe((data) => {
console.log(`Sample1Component ==> RandomNumber: ${data}`);
ngOnDestroy(): void {
if (this.sampl1sub) {
this.sampl1sub.unsubscribe();

(Line: 9) Added a new 'Subscription' variable like 'sampl1sub'.
(Line: 12) Assigning our 'BehaviorSubject' to the 'Subscription' variable.
(Line: 16-20) finally calling 'unsubscribe' in the 'ngOnDestroy' method.

components/sample2.component.ts:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { TestService } from 'src/app/services/test.service';
@Component({
templateUrl: 'sample2.component.html',
export class Sample2Component implements OnInit, OnDestroy {
sample2sub?: Subscription;
constructor(private testService: TestService) {}
ngOnInit(): void {
this.sample2sub = this.testService.randNumberSub.subscribe((data) => {
console.log(`Sample2Component ==> RandomNumber: ${data}`);
ngOnDestroy(): void {
if (this.sample2sub) {
this.sample2sub.unsubscribe();
buttonTest() {
this.testService.randNumberSub.next(100);

(Line: 9) Added a new 'Subscription' variable like 'sample2sub'.
(Line: 13) Assigning our 'BehaviorSubject' to the 'Subscription' variable.
(Line: 17-21) finally calling 'unsubscribe' in the 'ngOnDestroy' method.

Now if we test again we can observe memory leaks won't appear again.

Abort HTTP Request To Avoid Unwanted calls:

Now for suppose if we won't unsubscribe HTTP request observable, then some cases like when user shifting between components and component had HTTP request they still execute if we navigate to other components.

So let's go through this case study and later we will fix it.

services/test.service.ts:

getAlbums() {
return this.http.get("https://jsonplaceholder.typicode.com/albums");

Add some API call logic in our 'test.service.ts'

Now let's create new components like 'components/apicall.component.ts'

components/apicall.component.ts

import { Component, OnInit } from '@angular/core';
import { TestService } from 'src/app/services/test.service';
@Component({
selector: 'apicall',
templateUrl: 'apicall.component.html',
export class ApiCallComponent implements OnInit {
constructor(private testService: TestService) {}
ngOnInit(): void {
this.testService.getAlbums().subscribe(data => {
console.log(data);

(Line: 11-13) Invoking the API call.

Now run the application, visit the 'apicall.component', and before receiving the API response, just navigate to other components but we can observe that API call's still get executed as below.

So to avoid the unwanted API call's on navigating to some other page, we just need to unsubscribe this HTTP request as well.

components/apicall.component.ts:(Use Unsubscribe)

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { TestService } from 'src/app/services/test.service';
@Component({
selector: 'apicall',
templateUrl: 'apicall.component.html',
export class ApiCallComponent implements OnInit, OnDestroy {
apicallSub?:Subscription;
constructor(private testService: TestService) {}
ngOnInit(): void {
this.apicallSub = this.testService.getAlbums().subscribe(data => {
console.log(data);
ngOnDestroy():void{
if(this.apicallSub){
this.apicallSub.unsubscribe();

(Line: 10) Added a new 'Subscription' API like 'apicallsub'.
(Line: 13) Assigning the HttpRequest observable to our 'apicallsub' variable.
(Line: 17-21) Finally unsubscribing the HttpRequest in the 'ngOnDestroy' method.

Now if we test, our unwanted calls get aborted like below.

Support Me!
Buy Me A Coffee PayPal Me

Video Session:

Wrapping Up:

Hopefully, I think this article delivered some useful information on unsubscribing an observable in angular application. I love to have your feedback, suggestions, and better techniques in the comment section below.

Unsubscribe An Observable:

Memory Leaks:

Unsubscribe Observable To Resolve Memory Leak:

Abort HTTP Request To Avoid Unwanted calls:

Video Session:

Wrapping Up:

Follow Me:

Recommend

Redux with Observable Stores in Angular

Choose Promise or Observable when working with Angular?

6 Ways to Unsubscribe from Observables in Angular

RxJS & Angular — Unsubscribe Like a Pro | by Tal Ohana | Aug, 2020 | Medium

Angular 8 Tutorial: Observable and RXJS Examples

The easiest way to unsubscribe from Observables in Angular

Promise vs Observable in Angular

在 Angular 專案中 RxJS 實現 Unsubscribe 取消訂閱的四種常見方法

Angular Observable vs. Promise & How to Create Them | Infragistics Blog

(译)Angular架构03-如何使用`Observable`数据服务构建`Angular`应用程序及常见的设计...

About Joyk