title: RxJS: takeUntil() Angular component's ngOnDestroy()
body: <p><em>tl;dr: Basically I want to marry Angular's <code>ngOnDestroy</code> with the Rxjs <code>takeUntil()</code> operator. -- is that possible?</em></p>
  
  <p>I have an Angular component that opens several Rxjs subscriptions.
  These need to be closed when the component is destroyed.</p>
  
  <p>A simple solution for this would be:</p>
  
  <pre><code>class myComponent {
  
    private subscriptionA;
    private subscriptionB;
    private subscriptionC;
  
    constructor(
      private serviceA: ServiceA,
      private serviceB: ServiceB,
      private serviceC: ServiceC) {}
  
    ngOnInit() {
      this.subscriptionA = this.serviceA.subscribe(...);
      this.subscriptionB = this.serviceB.subscribe(...);
      this.subscriptionC = this.serviceC.subscribe(...);
    }
  
    ngOnDestroy() {
      this.subscriptionA.unsubscribe();
      this.subscriptionB.unsubscribe();
      this.subscriptionC.unsubscribe();
    }
  
  }
  </code></pre>
  
  <p>This works, but it's a bit redundant. I especially don't like that
  - The <code>unsubscribe()</code> is somewhere else, so you gotta remember that these are linked.
  - The component state is polluted with the subscription.</p>
  
  <p>I would much prefer using the <code>takeUntil()</code> operator or something similar, to make it look like this:</p>
  
  <pre><code>class myComponent {
  
    constructor(
      private serviceA: ServiceA,
      private serviceB: ServiceB,
      private serviceC: ServiceC) {}
  
    ngOnInit() {
      const destroy = Observable.fromEvent(???).first();
      this.subscriptionA = this.serviceA.subscribe(...).takeUntil(destroy);
      this.subscriptionB = this.serviceB.subscribe(...).takeUntil(destroy);
      this.subscriptionC = this.serviceC.subscribe(...).takeUntil(destroy);
    }
  
  }
  </code></pre>
  
  <p>Is there a destroy event or something similar that would let me use <code>takeUntil()</code> or another way to simplify the component architecture like that?
  I realize I could create an event myself in the constructor or something that gets triggered within <code>ngOnDestroy()</code> but that would in the end not make things that much simpler to read.</p>