title: Chaining RxJS Observables from http data in Angular2 with TypeScript
body: <p>I'm currently trying to teach myself Angular2 and TypeScript after happily working with AngularJS 1.* for the last 4 years! I have to admit I am hating it but I am sure my eureka moment is just around the corner... anyway, I have written a service in my dummy app that will fetch http data from a phoney backend I wrote that serves JSON.</p>
  
  <pre><code>import {Injectable} from 'angular2/core';
  import {Http, Headers, Response} from 'angular2/http';
  import {Observable} from 'rxjs';
  
  @Injectable()
  export class UserData {
  
      constructor(public http: Http) {
      }
  
      getUserStatus(): any {
          var headers = new Headers();
          headers.append('Content-Type', 'application/json');
          return this.http.get('/restservice/userstatus', {headers: headers})
              .map((data: any) =&gt; data.json())
              .catch(this.handleError);
      }
  
      getUserInfo(): any {
          var headers = new Headers();
          headers.append('Content-Type', 'application/json');
          return this.http.get('/restservice/profile/info', {headers: headers})
              .map((data: any) =&gt; data.json())
              .catch(this.handleError);
      }
  
      getUserPhotos(myId): any {
          var headers = new Headers();
          headers.append('Content-Type', 'application/json');
          return this.http.get(`restservice/profile/pictures/overview/${ myId }`, {headers: headers})
              .map((data: any) =&gt; data.json())
              .catch(this.handleError);
      }
  
      private handleError(error: Response) {
          // just logging to the console for now...
          console.error(error);
          return Observable.throw(error.json().error || 'Server error');
      }   
  }
  </code></pre>
  
  <p>Now in a Component I wish to run (or chain) both <code>getUserInfo()</code> and <code>getUserPhotos(myId)</code> methods. In AngularJS this was easy as in my controller I would do something like this to avoid the "Pyramid of doom"...</p>
  
  <pre><code>// Good old AngularJS 1.*
  UserData.getUserInfo().then(function(resp) {
      return UserData.getUserPhotos(resp.UserId);
  }).then(function (resp) {
      // do more stuff...
  }); 
  </code></pre>
  
  <p>Now I have tried doing something similar in my component (replacing <code>.then</code> for <code>.subscribe</code>) however my error console going crazy! </p>
  
  <pre><code>@Component({
      selector: 'profile',
      template: require('app/components/profile/profile.html'),
      providers: [],
      directives: [],
      pipes: []
  })
  export class Profile implements OnInit {
  
      userPhotos: any;
      userInfo: any;
  
      // UserData is my service
      constructor(private userData: UserData) {
      }
  
      ngOnInit() {
  
          // I need to pass my own ID here...
          this.userData.getUserPhotos('123456') // ToDo: Get this from parent or UserData Service
              .subscribe(
              (data) =&gt; {
                  this.userPhotos = data;
              }
          ).getUserInfo().subscribe(
              (data) =&gt; {
                  this.userInfo = data;
              });
      }
  
  }
  </code></pre>
  
  <p>I'm obviously doing something wrong... how would I best with Observables and RxJS? Sorry if I am asking stupid questions... but thanks for the help in advance! I have also noticed the repeated code in my functions when declaring my http headers...</p>