title: angular2 - Navigate after observable is complete
body: <p>I have an <code>http</code> observable like so, in my <code>UserService</code>:</p>
  
  <pre><code>logout() {
      return this.http.delete(this.baseUrl + url, {
            headers: this.headers()
          }).map((res: IResponse) =&gt; {
            var json = res.json();
            json.headers = res.headers;
            return json;
          }).subscribe((response) =&gt; {
            //DO SOMETHING, THEN ----
            return res;
          });
  }
  </code></pre>
  
  <p>I have created an observable, and created a subscription (<code>response</code>) which is the returned success value.</p>
  
  <p>Now, in my component, I want to call <code>UserService.logout()</code> and THEN navigate to a new route:</p>
  
  <pre><code>logout() {
      this.userService.logout();
      this.router.navigate(['LandingPage']);
    }
  </code></pre>
  
  <p>Obviously, this could happen asynchronously and I may end up navigating before I logout.</p>
  
  <p>Using promises, I could do something like this:</p>
  
  <p><code>this.userService.logout().then(() =&gt; {
      this.router.navigate(['LandingPage']);
  });</code></p>
  
  <p>How can I do the same thing with observables? In my <code>UserService</code> class I want to create an observable, subscribe to it, do some stuff on success or on error, THEN navigate from my view component.</p>