Generally use unsubscribe on observables

[boeckMt]

There are a lot of open subscriptions, which we should unsubscribe on ngOnDestroy

• https://levelup.gitconnected.com/unsubscribing-in-angular-the-right-way-6ed82be43ccc
• https://blog.briebug.com/blog/when-should-i-unsubscribe-my-subscriptions-in-angular#container-widget-1597071963072

---

Maybe we can use something like https://github.com/wardbell/subsink

So in general a instance which collects all the stuff and unsubscribes from it

import { Subscription } from 'rxjs';

export class UnSub {
  private privSubs: Subscription[] = [];
  public get subs(): Subscription[] {
    return this.privSubs;
  }


  public set subs(value: Subscription | Subscription[]) {
    if (Array.isArray(value)) {
      this.privSubs.push(...value);
    } else {
      this.privSubs.push(value);
    }
  }


  public unsubscribe(): void {
    this.subs.forEach(s => s.unsubscribe());
  }
}

[boeckMt]

This implementation can be used for rx subscriptions and also for ol observables.

import { Subscription } from 'rxjs';
import { unByKey } from 'ol/Observable';
import { EventsKey } from 'ol/events';

export class CollectSub {
  protected privSubs: Array<Subscription | EventsKey> = [];
  public get subs(): Array<Subscription | EventsKey> {
    return this.privSubs;
  }


  public set subs(value: Subscription | EventsKey | Array<Subscription | EventsKey>) {
    if (Array.isArray(value)) {
      this.privSubs.push(...value);
    } else {
      this.privSubs.push(value);
    }
  }

  public unsubscribe(): void {
    this.subs.forEach(s => {
      console.log(s)
      if (s instanceof Subscription) {
        s.unsubscribe();
      } else if ('listener' in s && 'target' in s && 'type' in s) {
        unByKey(s);
      }
    });
  }
}

Usage

this.collectSub.subs = this.highlightedFeatures$.subscribe((features: Feature<Geometry>[]) => {
   ...
});

this.collectSub.subs = this.mapSvc.map.on('click', () => {
  ...
});
...


ngOnDestroy(): void {
   this.collectSub.unsubscribe();
}