![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-42.png\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
Why is this a bad idea? Here are a few reasons:<\/p>\n\n\n\n
- \n
getCurrencyForCountry()<\/code> is never unsubscribed, which can lead to memory leaks<\/a>.<\/li>\n\n\n\n- When the country changes, the Observable that gets the previous country’s currency is not canceled. If that Observable emits again,
this.currency<\/code> will get overwritten.<\/li>\n\n\n\n- Such nested callbacks are hard to read, and as a result, such code is more challenging to maintain.<\/li>\n<\/ul>\n\n\n\n
Let’s imagine our component template is as follows:<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-43.png\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
Then in a scenario where
getCurrencyForCountry()<\/code> emits updates values every second, our component would end up displaying the following values, which become wrong very quickly:<\/p>\n\n\n\n![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/quiz.gif\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
You can take a look at that code here<\/a>.<\/p>\n\n\n\n
The solution to avoid such issues is to use the
switchMap<\/code> operator<\/a> as follows:<\/p>\n\n\n\n![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-44.png\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
The above code works fine because
switchMap<\/code> cancels the previous currency Observable as soon as a new country is emitted fromservice.getCountries()<\/code>. No more memory leaks, and our two Observables are always in sync:<\/p>\n\n\n- When the country changes, the Observable that gets the previous country’s currency is not canceled. If that Observable emits again,
![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/switchmap.gif\")
<\/figure>\n<\/div>\n\n\n