Do we have to unsubscribe when using switchMap operator in rxjs in Angular 2?

If the source observable to which you are subscribing always completes or errors, you don't need to unsubscribe.

However, if you compose another observable from the source using switchMap, whether or not you need to unsubscribe depends upon the observable returned within switchMap. If the returned observable does not always complete or error, then, yes, you will need to unsubscribe.

If the source errors, an automatic unsubscription will occur:

const source = new Rx.Subject();
const composed = source.switchMap(() => Rx.Observable.interval(200));

composed.subscribe(value => console.log(value));
source.next(1);

setTimeout(() => {
  console.log("Erroring...");
  source.error(new Error("Boom!"));
}, 1000);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://unpkg.com/[email protected]/bundles/Rx.min.js"></script>

However, if the source completes, an automatic unsubscription will not occur:

const source = new Rx.Subject();
const composed = source.switchMap(() => Rx.Observable.interval(200));

composed.subscribe(value => console.log(value));
source.next(1);

setTimeout(() => {
  console.log("Completing...");
  source.complete();
}, 1000);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://unpkg.com/[email protected]/bundles/Rx.min.js"></script>

switchMap creates a link between the previous and new observable. If you change the first observable, the second will be always be triggered.

Anything subscribed after the switchMap will be hearing changes on both, the initial observable and the returned observable.

To fully stop the first observable to update the second one or the rest is by using take, takeUntil, or takeWhile. Like:

const howTimerWorks = interval(5000).pipe(
  take(2), // only get 2 responses after 5 seconds each
  switchMap(initialNumber => interval(1000)));

// 0 after 5s, then 1, 2 , 3, (new Subs) 0, 1, ... every sec, forever now.
howTimerWorks.subscribe(console.log)

Tags:

Angular

Rxjs