Subscription manager for Angular 15, Angular 14, Angular 13, Angular 12, Angular 11, Angular 10, Angular 9, Angular 8, Angular 7, Angular 6 (and less)

subscriptionManager-how-to.md

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<Subscription>();
   

   Alternatively you could just add it to your constructor:

    constructor(private subscrManager: SubscriptionManager<Subscription>){...}
   

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 :)

Select and unsubscribe subscriptions

removeById(id:number)

If you call the add() method it returns an ID that you can write to an variable. After that you can unsubscribe this subscription using removeById(id:number)

removeByTag(tag:string)

You can add a optional argument to an add call for a string. This string is used as a tag. With removeByTag(tag:string) all subscriptions with this tag will be unsubscribed. It's helpful if you need to group subscriptions.

SubscriptionManager.ts

/*
Version 1.2.0
For new versions of this class go to https://gist.github.com/julianpoemp/0c4dc13541b863f6503026333eb6b2b6
License: MIT
*/

export class SubscriptionManager<T> {
  private subscriptions: {
    id: number,
    tag: string,
    subscription: T
  }[];

  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: T, tag?: string): number {
    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 as any).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 as any).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 as any).unsubscribe();
        this.subscriptions.splice(i, 1);
        removed = true;
      }
    }
    return removed;
  }
}