takeUntil for fun and for profit

component_takeUntil.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

import { MyService } from './MyService.ts';

import 'rxjs/add/operator/takeUntil';

@Component({
  selector: 'my-rad-component',
})
export class MyComponent implements OnInit, OnDestroy {

  /* A subject for monitoring the destruction of the component. */
  private destroyed$: Subject<{}> = new Subject();

  /* Inject a service with an observable API. */
  constructor(private myService: MyService) { }

  ngOnInit() {
    this.myService.getData() /* Fetch some data. */
      .takeUntil( this.destroyed$ ) /* Unsubscribe from the stream upon destruction. */
      .subscribe( data => {
        // do something with your data, AKA: define your effects.
      });
  }

  ngOnDestroy() {
    this.destroyed$.next(); /* Emit a notification on the subject. */
  }
}