title: Observable takeUntil confusion
body: <p>I came across this answer <a href="https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription/41177163#41177163">Angular/RxJs When should I unsubscribe from `Subscription`</a> on how to stop a subscription using takeUntil(). The answer also states that</p>
  
  <blockquote>
    <p>The secret sauce (as noted already by @metamaker) is to call .takeUntil(this.ngUnsubscribe) before each of our .subscribe() calls which will guarantee all subscriptions will be cleaned up when the component is destroyed.</p>
  </blockquote>
  
  <p>I am however having problems understanding why one of my two examples does not stop the subscription. <a href="https://stackblitz.com/edit/takeuntil-example" rel="nofollow noreferrer">Here is a working example</a></p>
  
  <p>My Service:</p>
  
  <pre><code>export class GpsService {
    gps: Observable&lt;any&gt;;
    private ngUnsubscribe: Subject&lt;any&gt; = new Subject&lt;any&gt;();
    constructor() { }
    startFakeGps = (): void =&gt; {
      // This example does not stop the subscription after calling stopGps().
      this.gps = Observable.timer(3000, 1000);
      this.gps.takeUntil(this.ngUnsubscribe);
  
      // This example stops the subscription after calling stopGps().
      // this.gps = Observable.timer(3000, 1000).takeUntil(this.ngUnsubscribe);
    }
  
    stopGps() {
      this.ngUnsubscribe.next();
      this.ngUnsubscribe.complete();
    }
  }
  </code></pre>
  
  <p>My component:</p>
  
  <pre><code>export class ButtonOverviewExample implements OnInit {
  
    constructor(private gspService: GpsService){
  
    }
    ngOnInit(){
      this.gspService.startFakeGps();
      this.gspService.gps.subscribe(data =&gt; {});
    }
  
    // stop gps after clicking a button 
    stopGps(){
      this.gspService.stopGps();
    }
  
  
  }
  </code></pre>
  
  <p><strong>Example 1:</strong></p>
  
  <pre><code>    // This example does not stop the subscription after calling stopGps().
      this.gps = Observable.timer(3000, 1000);
      this.gps.takeUntil(this.ngUnsubscribe);
  </code></pre>
  
  <p><strong>Example 2:</strong></p>
  
  <pre><code>    // This example stops the subscription after calling stopGps().
      this.gps = Observable.timer(3000, 1000).takeUntil(this.ngUnsubscribe);
  </code></pre>
  
  <p>I thought that both examples are using <code>takeUntil()</code> before the actual subscription starts, and that they are the same. Why is it different behaviour on these examples? What am I missing?</p>
  
  <p><a href="https://stackblitz.com/edit/takeuntil-example" rel="nofollow noreferrer">Here is a working example</a></p>