How to make nested Observable calls in Angular2
<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>