'Unsubscribe' for HttpClient in Angular?

When studying RxJS in Angular, people always mention that don’t forget to unsubscribe the Observable. Otherwise, it may occur memory leak issues.

Also, people might feel confuse that should we apply this rule to the Observable from HttpClient? Most tutorials tell you that it will be unsubscribed automatically, and you don’t need to worry about it.

Therefore, this note is written for testing HttpClient to see whether it will be unsubscribed automatically or not.

STEPS:

1. Build a simple template angular project through Angular CLI

    ng new my-app

2. Provide a service for HTTP Request
(You can use some free public web API, then you don’t need to build your back-end service)

    // get Random Image of cat from a free public web API

    // The return type is Observable
    getRandomImage(): Observable {
        return this.httpClient.get('https://api.thecatapi.com/v1/images/search');
    }

3. Provide an another service for returning our custom observable whose value will be changed constantly

    export class MyService {
        // Variables
        public myObservalbe$ = new BehaviorSubject('');
        private count = 0;

        // constructor
        constructor() {

            // Keep notify observer for the value change
            interval(1000).subscribe(
                next => {
                    this.myObservalbe$.next('hello_world_' + this.count);
                    this.count++;
                }
            );
        }

        // return our custom Observable
        getMyObservable(): Observable {
            return this.myObservalbe$.asObservable()
        }
    }

4. On ‘app.component.ts’, subscribe both observable from each service we built

    // Variablses
    httpClietSub = null;
    normalSub = null;

    // constructor
    constructor(
        private catImgService: CatImgService,
        private myService: MyService,
    ) { }

    // ngOnInit
    ngOnInit(): void {

        // Subscription from HttpClient
        this.httpClietSub = this.catImgService.getRandomImage().subscribe(
            next => {
                // Do something
            },
        )

        // Subscription from custom Observable
        this.normalSub = this.myService.getMyObservable().subscribe(
            next => {
                // Do something
            },
        )

        // Unsubscribe custom Observable once timer emit an event
        timer(5000, 1000).subscribe(
            next => {
                this.normalSub.unsubscribe();
            }
        );
    }

    // this function is bound to HTML button click event

    // it will log the 'closed' state of each subscription
    onBtnClicked(): void {
        console.log('httpClietSub', this.httpClietSub.closed);
        console.log('normalSub', this.normalSub.closed);
    }

5. Provide a button in ‘app.component.html’ and bind a click event 'onBtnClicked' to log the ‘closed’ status of both subscription

6. Launch the app, and click the button to see the result in Console

Conclusion:

According to the result from above exp, the ‘closed’ state of HttpClient Observable will be ‘true’.

On the other hand, before unsubscribing custom observable, the ‘closed’ state of custom observable subscription always show ‘false’, but it will turn into ‘true’ once the timer is triggered to unsubscribe it.

Therefore, this result prove that we don’t need to worry about ‘unsubscribe’ for HttpClient Observable because it will be unsubscribed automatically