Angular 2 RxJs Observables - HTTP

import {Component} from 'angular2/core';
import {Control, ControlGroup} from 'angular2/common';
import {SearchService} from './services/Search';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Rx';

@Component({
	selector: 'app-root',
	template: `
	  <h1>{{comment}}</h1>
		<div *ngFor="#post of result">
		  {{post.title}}
		</div>
	`
})

export class AppComponent {
	constructor(private searchService:SearchService) {

  // We have 2 observables
  let observable1 = this.searchService.getPosts();
  let observable2 = this.searchService.getPostComment(1);

  // Task 1 (Done): Call http parallely with forkjoin
  // Task 2 (TBD): Run it with interval (Polling)
  // Task 3 (TBD): Distinct - Send data only if it has new data
  
  Observable
    .forkJoin([observable1, observable2])
    .subscribe(res => {
      this.result = res[0].json();
      this.comment = res[1].json()[0].name;;
    })
  
	}
}

import {AppComponent} from './app.component'
import {bootstrap}    from 'angular2/platform/browser'
import {HTTP_BINDINGS} from 'angular2/http'
import {SearchService} from './services/Search'

bootstrap(AppComponent, [HTTP_BINDINGS, SearchService]);

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>
    


    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <app-root>Loading...</app-root>
  </body>

</html>

import {Http} from 'angular2/http';
import {Injectable} from 'angular2/core';

@Injectable()
export class SearchService {
  
  constructor(private http: Http) {}
  
  getPosts():Observable<Array<any>> {
    return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }
  
  getPostComment(postId:number) {
    return this.http.get(`https://jsonplaceholder.typicode.com/posts/${postId}/comments`);
  }
}