Prevent nested subscriptions in your Angular code

When working with Angular you might find yourself in situations where you need something?from a first observable to be used in a second observable. Making you think the solution in “IMAGE A” seems to be the one to implement, Subscribing to the first observable and then using the data from it in the second observable generating a “Nested Subscription”.

Following good practices in Angular this should be avoided, due memory leaks making the inner subscription inaccessible to be unsubscribed.

In this cases you should use the “mergeMap” operator from RxJs as in “IMAGE B” generating this way a single subscription making it able to be unsubscribed whenever is needed.