Angular RxJS Observable: takeUntil vs. unsubscribe with a Subscription

Personally, I choose option 1 as well, which is to use takeUntil.

However, it is important for you to place the takeUntil() operator on the last RxJS operator on the pipe sequence, as explained here.

For instance, if we do not place takeUntil() as the last operator, the subscriber will remain subscribed to the subsequent switchMap() operator:

this.flightService.getAll()
  .pipe(
    takeUntil(this.destroy$),
    switchMap(() => this.doSomethingElse()),
  ).subscribe(flights => (this.flights = flights));

Therefore, the right way of doing so would be this:

this.flightService.getAll()
  .pipe(
    switchMap(() => this.doSomethingElse()),
    takeUntil(this.destroy$),
  ).subscribe(flights => (this.flights = flights));

Brian Love has written a really good article on the different ways (including unsubscribe(), and the takeUntil() operator) of unsubscribing to observables. I would recommend you to take a look at it as well.

• Option 1: clean & explicit. Works like a charm
• Option 2: more procedural, less stream-like. Works like a charm. Note that your stream will not get a 'complete' event which can cause unexpected behaviour
• Option 3: takeWhile - will have the subscription stay around untill an emission is created and then the takeWhile is evaluated. This can lead to unexpected behaviour. Still, in the end works

TLDR; there is no wrong here. Choose what you see fits your needs and communicates your intent.

Ben Lesh has also written quite a good post about the different ways to unsubscribe https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87

His opinion:

You should probably be using operators like takeUntil to manage your RxJS subscriptions. As a rule of thumb, if you see two or more subscriptions being managed in a single component, you should wonder if you could be composing those better.