Angular 2 Example - QuickStart

import {KitchenSinkOperators, Observable} from 'rxjs/Observable';
import {KitchenSinkOperators} from 'rxjs/Rx.KitchenSink';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/exhaustMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/distinctUntilChanged';


let test = 0;

  function getTest () {
    return (<KitchenSinkOperators<any>>Observable.interval(10))
			.subscribe(state => {
			  test = state;
			});
  }
  
getTest();

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-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://npmcdn.com/@reactivex/rxjs@5.0.0-beta.2/dist/global/Rx.KitchenSink.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
    <!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
  </body>

</html>

{
  "state": {
    "value": 1
  }
}

import {Component} from 'angular2/core';
import {HTTP_PROVIDERS, Http, Response} from 'angular2/http';
import {KitchenSinkOperators, Observable} from 'rxjs/Observable';
import {KitchenSinkOperators} from 'rxjs/Rx.KitchenSink';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/exhaustMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/distinctUntilChanged';

var interval = Observable.create((observer) => {
  let register = 0;
  
  function iterate (time) {
    observer.next(register++);
    return setTimeout(() => iterate(time));
  }
  
  let id = iterate (10);
  
  return () {
    clearTimeout(id);
  }
});

@Component({
	selector: 'my-app',
	template: '<h1>Test Result: {{state}}</h1>',
	providers: [HTTP_PROVIDERS]
})
export class AppComponent { 
  public state: int;
  
  constructor (private http: Http) {}
  
  ngOnInit() {
    this.getTest().subscribe(state => {
      this.state = state;
    });
  }
  
  private getTest () {
    return (<KitchenSinkOperators<any>>interval);
  }
}

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/