title: How to make nested Observable calls in Angular2
body: <p>I am having some troubles making nested Observable calls. By that I mean a call to a http service that retrieve a user, then getting the id from the user to make another http call, and finally render the results on screen.</p>
  
  <p>1) HTTP GET 1 : get the User</p>
  
  <p>2) HTTP GET 2: get the User's preferences passing a unique identifier as a parameter</p>
  
  <p>This translates into the following code in component <code>Blah.ts</code>:</p>
  
  <p><strong>version 1</strong> - this code does not display anything</p>
  
  <pre><code> ngOnInit() {
          this.userService.getUser()
              .flatMap(u =&gt; {
                  this.user = u; // save the user
                  return Observable.of(u); // pass on the Observable
              })
              .flatMap(u =&gt; this.userService.getPreferences(this.user.username)) // get the preferences for this user
              .map(p =&gt; {
                  this.preferences = p; // save the preferences
              });
      }
  </code></pre>
  
  <p><strong>version 2</strong> - this code works but seems the wrong approach to me:</p>
  
  <pre><code> this.userService.getUser().subscribe(u =&gt; {
              this.user = u;
              this.userService.getPreferences(this.user.username).subscribe(prefs =&gt; {
                  this.preferences = prefs;
              });
          });
  </code></pre>
  
  <p>And this is the template:</p>
  
  <pre><code>&lt;h3&gt;User&lt;/h3&gt;
  
  &lt;div class="row col-md-12"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;User details&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;table class="table table-condensed"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Username&lt;/th&gt;
                              &lt;th&gt;Full Name&lt;/th&gt;
                              &lt;th&gt;Enabled&lt;/th&gt;                                
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td&gt;{{user?.username}}&lt;/td&gt;
                              &lt;td&gt;{{user?.fullName}}&lt;/td&gt;
                              &lt;td&gt;{{user?.enabled}}&lt;/td&gt;                          
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- end of col 1--&gt;
  
      &lt;div class="col-md-6"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;User preferences&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;table class="table table-condensed"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Language&lt;/th&gt;
                              &lt;th&gt;Locale&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td&gt;{{preferences?.preferences?.get('language')}}&lt;/td&gt;
                              &lt;td&gt;{{preferences?.preferences?.get('locale')}}&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- end of col 2--&gt;
  
  &lt;/div&gt;
  &lt;!-- end of row 1--&gt;
  </code></pre>
  
  <p>I don't think there is any point in showing the service, which simply makes <code>http get()</code> calls like:</p>
  
  <pre><code>  http.get('http://blablah/users/')
          .map((response) =&gt; response.json())
  </code></pre>
  
  <p><strong>Please suggest which is the best working approach to define a chain of Observables.</strong></p>