RxJS: Never subscribe in a subscription

During a code review of an Angular code base I noticed the following code snippet:

	ngOnInit() {
	this.paramsSub$ = this.route.params.subscribe(params => {
	this.apiSub$ = dataService.getData(param).subscribe(obj => {
	this.obj = obj;
	});
	});
	}

view raw SampleComponent.ts hosted with ❤ by GitHub

What’s wrong with this code?

We are subscribing inside a subscription. This makes it almost impossible to know what subscriptions are open at what moment. Good luck closing these subscriptions in the correct way(which you are doing, right?).

A solution is to rewrite this code to use only 1 subscription. Closing this subscription will automatically clean up all inner streams. Let’s apply some RxJS magic to fix this:

	ngOnInit() {
	this.sub$ = this.route.params.pipe(
	switchMap(param => dataService.getData(param))
	).subscribe(obj => {
	this.obj = obj;
	});
	}

view raw SampleComponentFixed.ts hosted with ❤ by GitHub