title: Angular RxJS Observable: takeUntil vs. unsubscribe with a Subscription
body: <p>There are several ways to unsubscribe from observables on Angular components (by using ngOnDestroy). Which option below should be preferred and why (e.g. technical reasons, performance, etc.)?</p>
  
  <h2>Option 1: takeUntil</h2>
  
  <p>Using RxJS takeUntil to unsubscribe</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: "app-flights",
    templateUrl: "./flights.component.html"
  })
  export class FlightsComponent implements OnDestroy, OnInit {
    private readonly destroy$ = new Subject();
  
    public flights: FlightModel[];
  
    constructor(private readonly flightService: FlightService) {}
  
    ngOnInit() {
      this.flightService
        .getAll()
        .pipe(takeUntil(this.destroy$))
        .subscribe(flights =&gt; (this.flights = flights));
    }
  
    ngOnDestroy() {
      this.destroy$.next();
      this.destroy$.complete();
    }
  }
  
  </code></pre>
  
  <h2>Option 2: .unsubscribe()</h2>
  
  <p>Explict call .unsubscribe(), e.g. by using a separate subscription instance</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: "app-flights",
    templateUrl: "./flights.component.html"
  })
  export class FlightsComponent implements OnDestroy, OnInit {
    private readonly subscriptions = new Subscription();
  
    public flights: FlightModel[];
  
    constructor(private readonly flightService: FlightService) {}
  
    ngOnInit() {
      const subscription = this.flightService
        .getAll()
        .subscribe(flights =&gt; (this.flights = flights));
  
      this.subscriptions.add(subscription);
    }
  
    ngOnDestroy() {
      this.subscriptions.unsubscribe();
    }
  }
  </code></pre>
  
  <h2>Option 3: takeWhile</h2>
  
  <p>Using RxJS takeWhile unsubscribe</p>
  
  <h2>Option n: ?</h2>