Skip to content

Instantly share code, notes, and snippets.

@AlexandreMT
Forked from julianpoemp/SubscriptionManager.ts
Last active September 30, 2019 19:17
Show Gist options
  • Select an option

  • Save AlexandreMT/b0297146edcc1c1a0edf89361ab51d25 to your computer and use it in GitHub Desktop.

Select an option

Save AlexandreMT/b0297146edcc1c1a0edf89361ab51d25 to your computer and use it in GitHub Desktop.
Easy and secure way to manage subscriptions in Angular 8 (and less)

The SubscriptionManager

If you are using subscriptions in a component these should always be unsubscribed when the component is destroyed. In order to make it easier to handle subscriptions this class can be used.

How to use it

  1. Create an private attribute in your component something like that:

     private subscrManager = new SubscriptionManager();
    
  2. Wrap your subscription calls in:

     this.subscrManager.add(someObservable.subscribe(...));
    
  3. Implement OnDestroy and ngOnDestroy function like that:

     ngOnDestroy(){
         this.subscrManager.destroy();
     }
    
  4. That's all! This is a easy and secure way to handle Subscriptions :)

/*
Version 1.1.0
For new versions of this class go to https://gist.github.com/julianpoemp/0c4dc13541b863f6503026333eb6b2b6
License: MIT
*/
import {Subscription} from 'rxjs';
export class SubscriptionManager {
private subscriptions: {
id: number,
tag: string,
subscription: Subscription
}[];
private counter: number;
constructor() {
this.subscriptions = [];
this.counter = 0;
}
/**
* add subscription to the manager. Returns the id of the subscriptions
* @param subscription subscription that shall be added
* @param tag optional tag
* @returns number
*/
public add(subscription: Subscription, tag?: string): number {
if (tag !== undefined) { this.removeByTag(tag); }
this.subscriptions.push({
id: ++this.counter,
tag,
subscription
});
return this.counter;
}
/**
* unsubscribes all subscriptions
*/
public destroy() {
if (!(this.subscriptions === null || this.subscriptions === undefined)) {
for (const elem of this.subscriptions) {
elem.subscription.unsubscribe();
}
this.subscriptions = [];
}
}
/**
* unsubscribes specific Subscription with specific id.
* @param id id that is looked for
*/
public removeById(id: number): boolean {
for (let i = 0; i < this.subscriptions.length; i++) {
const element = this.subscriptions[i];
if (element.id === id) {
element.subscription.unsubscribe();
this.subscriptions.splice(i, 1);
return true;
}
}
return false;
}
/***
* unsubscribes all subscriptions with a specific tag
* @param tag name that is tagged to the subscription
*/
public removeByTag(tag: string): boolean {
let removed = false;
for (let i = 0; i < this.subscriptions.length; i++) {
const element = this.subscriptions[i];
if (element.tag === tag) {
element.subscription.unsubscribe();
this.subscriptions.splice(i, 1);
removed = true;
}
}
return removed;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment