A common mistake made in Angular applications is to nest observable subscriptions in the following manner:<\/p>\n\n\n
observable1.subscribe(data<\/span> =><\/span> {\n observable2.subscribe(otherData<\/span> =><\/span> {\n \/\/ Do something with otherData<\/span>\n });\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The above syntax is not recommended because it is hard to read and can lead to subtle bugs and unexpected side effects. For instance, that syntax makes it difficult to unsubscribe properly from all these observables. <\/p>\n\n\n\n
Also, if observable1<\/code> emits more than once in a short amount of time, we might want to cancel the previous subscription to observable2<\/code> and start a new one based on the new data received from observable1<\/code>. The above code does not do any of that.<\/p>\n\n\n\n
The solution: Use the RxJs switchMap<\/code> operator like so:<\/p>\n\n\n
observable1.pipe(data<\/span> =><\/span> {\n switchMap(data<\/span> =><\/span> observable2)\n).subscribe(otherData<\/span> =><\/span> {\n \/\/ Do something with otherData<\/span>\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The switchMap<\/code> operator does all of the following:<\/p>\n\n\n\n
\n
Automatically cancel and unsubscribe from observable2<\/code> if observable1<\/code> emits a new value.<\/li>\n\n\n\n
Automatically unsubscribes from observable2<\/code> if we unsubscribe from observable1<\/code><\/li>\n\n\n\n
Makes sure that observable1<\/code> and observable2<\/code> happen in sequence, one after the other. \n
\n
<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
The following marble diagram is a good illustration of what switchMap<\/code> does:<\/p>\n\n\n\n<\/figure>\n\n\n\n
If you’re not using switchMap<\/code> yet, look in your code for nested calls to .subscribe()<\/code>, and you can start replacing those with the switchMap<\/code> operator to prevent memory leaks and bugs and make your code more readable.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/01\/image.png\")
<\/figure>\n\n\n\n