@badisi/ngx-safe-subscribe NPM

:zap: Angular <= 13 version available here

:zap: RxJS 5.x version available here

Installation

npm install @badisi/ngx-safe-subscribe --save

yarn add @badisi/ngx-safe-subscribe

Usage

SafeSubscribe is an augmentation method of Observable.

Calling safeSubscribe instead of subscribe will automatically unsubscribe your observable at component destroy.

Example with Angular components

import { Component, OnInit } from '@angular/core';
import { SafeSubscribe } from '@badisi/ngx-safe-subscribe';
import { interval } from 'rxjs';

@SafeSubscribe()
@Component({
   selector: 'app-component'
})
export class AppComponent implements OnInit {
   ngOnInit() {
      interval(1000).safeSubscribe(this, () => {
         console.log('This log will stop on component destroy.')
      });
   }
}

Example with simple class objects

import { SafeSubscribe } from '@badisi/ngx-safe-subscribe';
import { interval } from 'rxjs';

@SafeSubscribe('destroy')
export class MyObject {
   constructor() {
      interval(1000).safeSubscribe(this, () => {
         console.log('This log will stop on object destroy.')
      });
   }
   destroy() {}
}

Api

@SafeSubscribe(destructorName)

Arguments

destructorName: string (default: "ngOnDestroy") - The name of the method that will be called when the object is supposed to be destroyed.

Observable.safeSubscribe(target, ...arguments): Subscription

Arguments

target: any - A reference to the object that is holding the observable.
observerOrNext?: Observer|Function - Either an observer with methods to be called, or the first of three possible handlers, which is the handler for each value emitted from the subscribed Observable.
error?: Function - A handler for a terminal event resulting from an error. If no error handler is provided, the error will be thrown asynchronously as unhandled.
complete?: Function - A handler for a terminal event resulting from successful completion.

Return

A Subscription reference to the registered handler.

Purpose

To quote a great article from Netanel Basal :

When you subscribe to an observable or event in JavaScript, you usually need to unsubscribe at a certain point to release memory in the system. Otherwise, you will have a memory leak.

When subscribing to an observable in an Angular component, you almost always arrange to unsubscribe when the component is destroyed.

But it can quickly become a mess to deal with all those subscriptions and make sure they were properly released.

The idea behind SafeSubscribe is to abstract all the unsubscribe boilerplate and make it easier to use.