RxJS: Observable.sample

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular2 playground</title>
    
    <!-- [ Load: Environment Library ] -->
    <script src="https://unpkg.com/zone.js@0.7.2/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js@0.7.2/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    
    <!-- [ Load: Angular2 Library ] -->
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: {
          emitDecoratorMetadata: true,
          skipLibCheck: true, // ライブラリのnull許容チェックをスキップ
          strictNullChecks: true, // null許容チェックを有効
        },
        paths: {
          // 'cdn'の定義
          'cdn:': 'https://unpkg.com/',
        },
        map: {
          'typescript': 'cdn:typescript@2.1.4',
          'rxjs'      : 'cdn:rxjs@5.0.1',
          '@angular/core'                    : 'cdn:@angular/core@2.3.0',
          '@angular/common'                  : 'cdn:@angular/common@2.3.0',
          '@angular/compiler'                : 'cdn:@angular/compiler@2.3.0',
          '@angular/platform-browser'        : 'cdn:@angular/platform-browser@2.3.0',
          '@angular/platform-browser-dynamic': 'cdn:@angular/platform-browser-dynamic@2.3.0',
          '@angular/http'                    : 'cdn:@angular/http@2.3.0',
          '@angular/router'                  : 'cdn:@angular/router@3.3.0',
          '@angular/forms'                   : 'cdn:@angular/forms@2.3.0',
        },
        packages: {
          app: { defaultExtension: 'ts' },
          rxjs: { defaultExtension: 'js' },
        },
      });

      System.import('app/main.ts').catch(console.error.bind(console));
    </script>
    
    <style>
      @import url(https://fonts.googleapis.com/css?family=Lato:400,700);
      body{
          font-family: Lato;
      }
    </style>
  </head>

  <body>
    <my-app>loading...</my-app>
  </body>

</html>

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { Component, NgModule } from '@angular/core';
import * as rxjs from 'rxjs/Rx';

/**
 * Main Application Component
 */
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello</h2>
    </div>
  `,
})
export class App
{
  public constructor()
  {
    /* With an interval time */
    var source = rxjs.Observable.interval(1000)
        .sample(rxjs.Observable.interval(5000))
        .take(2);
    
    var subscription = source.subscribe(
        function (x) {
            console.log('Next: ' + x);
        },
        function (err) {
            console.log('Error: ' + err);
        },
        function () {
            console.log('Completed');
        });
  }
}

/**
 * Application Module
 */
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ],
})
export class AppModule
{
}

platformBrowserDynamic().bootstrapModule(AppModule);