How to properly unsubscribe from this kind of obervable

Question

I have a getDimensions method which returns an Observable<string[]>.

dimension.service.ts

public getDimensions(id: string): Observable<string[]> {
    return this.service.loadDimensions(id);
}

reloader.service.ts

public update(idsToUpdate: string[]): void {

    idsToUpdate.map(id => this.dimensionService.getDimensions(id)).pipe(
        map(
             newDimensions => this.updateDimensions(newDimensions)
        )
    ).subscribe(); // ToDo: unsubscribe

}

Then in another part of the app, I'm calling this method inside update method. The problem is, I don't know how to properly unsubscribe from getDimensions. One possibly solution can be, to create a Subscription and then in OnDestroy call unsubscribe, but for me it's not good solution:

• this is a service, which I'm using in my entire application, so the OnDestroy hook will never occur
• I'm calling the update method every n seconds, so there will be every n seconds a new subscription

Possible solution: (Not good)

reloader.service.ts

private subscriptions: Subscription = new Subscription();

...
...

public update(idsToUpdate: string[]): void {

    const sub = idsToUpdate.map(id => this.dimensionService.getDimensions(id)).pipe(
        map(
             newDimensions => this.updateDimensions(newDimensions)
        )
    ).subscribe(); // ToDo: unsubscribe

    this.subscription.add(sub);

}

...
...

public onDestroy(): void {
    this.subscription.unsubscribe();
}

EDIT:

As @jgerstle mentioned in his comment, if the observable completes (which is my case), there is no need to unsubscribe.

Answer 1

If you want to unsubscribe when you got the data or observable complete

public update(idsToUpdate: string[]): void {

    const sub = idsToUpdate.map(id => this.dimensionService.getDimensions(id)).pipe(
        map(
             newDimensions => this.updateDimensions(newDimensions)
        )
    ).subscribe(() => sub.unsubscribe() ); // or you can use complate 

}

Answer 2

The add function of subscriptions might not do what you are trying to do. From the documentation is states the following.

   /**
     * Adds a tear down to be called during the unsubscribe() of this
     * Subscription.
     *
     * If the tear down being added is a subscription that is already
     * unsubscribed, is the same reference `add` is being called on, or is
     * `Subscription.EMPTY`, it will not be added.
     *
     * If this subscription is already in an `closed` state, the passed
     * tear down logic will be executed immediately.
     *
     * @param {TeardownLogic} teardown The additional logic to execute on
     * teardown.
     * @return {Subscription} Returns the Subscription used or created to be
     * added to the inner subscriptions list. This Subscription can be used with
     * `remove()` to remove the passed teardown logic from the inner subscriptions
     * list.
     */
    add(teardown: TeardownLogic): Subscription;

I guess what you want to do is unsubscribe from your idsToUpdate-subscription. You can do that by keeping the reference of the subscription as you do, and do a sub.unsubscribe()

Here is an example by modifing your code

private sub: Subscription;

...
...

public update(idsToUpdate: string[]): void {

    this.sub = idsToUpdate.map(id => this.dimensionService.getDimensions(id)).pipe(
        map(
             newDimensions => this.updateDimensions(newDimensions)
        )
    ).subscribe(); // ToDo: unsubscribe

}

...
...

public onDestroy(): void {
    if(this.sub) this.sub.unsubscribe();

}