A Subscription in RxJS is a disposable resource that usually represents the execution of an Observable. It has the unsubscribe method which lets us dispose of the resource held by the subscription when we’re done.

It’s also called ‘Disposable’ in earlier versions of RxJS.

Basic Usage

A basic example of a subscription can be seen in the following code:

import { of } from "rxjs";
const observable = of(1, 2, 3);  
const subscription = observable.subscribe(val => console.log(val));  
subscription.unsubscribe();

In the code above, the subscription returned when we call subscribe on an Observable is a subscription. It has the unsubscribe method, which we called on the last line to clean up when the Observable is unsubscribed.

Combining Subscriptions

We can combine subscriptions with the add method that comes with Subscription objects.

For example, if we have 2 Observables:

import { of } from "rxjs";
const observable1 = of(1, 2, 3);  
const observable2 = of(4, 5, 6);
const subscription1 = observable1.subscribe(val => console.log(val));
const subscription2 = observable2.subscribe(val => console.log(val));
subscription1.add(subscription2);

In the code above, we have 2 Subscriptions, subscription1 and subscription2, which we joined together with the add method of subscription1.

subscription1 is a parent of subscription2.

We should get

1  
2  
3  
4  
5  
6

as the output.

When we join Subscriptions together, we can unsubscribe to all the Subscriptions that were joined together by calling unsubscribe on the first Subscription that the add method is called on.

For example, if we have:

import { interval } from "rxjs";
const observable1 = interval(400);  
const observable2 = interval(300);
const subscription = observable1.subscribe(x => console.log(x));  
const childSubscription = observable2.subscribe(x => console.log(x));
subscription.add(childSubscription);

Then calling unsubscribe on subscription will unsubscribe from all the subscriptions that are joined together.

setTimeout(() => {  
  subscription.unsubscribe();  
}, 1000);

Undoing Child Subscriptions

We can undo child subscriptions by using the Subscription’s remove method. It takes a child Subscription as the argument.

To use it, we can write something like the following code:

import { interval } from "rxjs";

const observable1 = interval(400);  
const observable2 = interval(300);
const subscription = observable1.subscribe(x => console.log(x));  
const childSubscription = observable2.subscribe(x => console.log(x));

subscription.add(childSubscription);

(async () => {  
  await new Promise(resolve => {  
    setTimeout(() => {  
      subscription.remove(childSubscription);  
      resolve();  
    }, 600);  
  }); 

  await new Promise(resolve => {  
    setTimeout(() => {  
      subscription.unsubscribe();  
      childSubscription.unsubscribe();  
      resolve();  
    }, 1200);  
  });  
})();

Once the childSubscription is removed, it’s no longer a child of the subscription Subscription.

Therefore, we’ve to call unsubscribe on both subscriptions separately so that we clean up both subscriptions once we’re done.

Subscriptions let us get the values emitted from an Observable. We can join multiple Subscriptions together with the add method, which takes a child Subscription as its argument.

When they’re joined together, we can unsubscribe to them together.

We can remove a Subscription as a child of another Subscription with the remove method.