Angular2, Infinite Scroll And Typescript Demo Plunk updated to RC.5 with NgModule

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.4/chance.min.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

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

</html>

/* Styles go here */

### Angular2 Starter Plunker - Typescript - RC.0

A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, http, pipes, and DI usage.

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: './src',
    '@angular': 'https://unpkg.com/@angular',
    '@angular/common': 'https://unpkg.com/@angular/common@4.0.0',
    '@angular/core': 'https://unpkg.com/@angular/core@4.0.0',
    '@angular/compiler': 'https://unpkg.com/@angular/compiler@4.0.0',
    '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic@4.0.0',
    '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser@4.0.0',
    'rxjs': 'https://unpkg.com/rxjs@5.2.0',
    'ngx-infinite-scroll': 'https://unpkg.com/ngx-infinite-scroll@0.7.2'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    '@angular/core': {
      main: 'bundles/core.umd.js',
      defaultExtension: 'js'
    },
    '@angular/compiler': {
      main: 'bundles/compiler.umd.js',
      defaultExtension: 'js'
    },
    '@angular/common': {
      main: 'bundles/common.umd.js',
      defaultExtension: 'js'
    },
    '@angular/platform-browser-dynamic': {
      main: 'bundles/platform-browser-dynamic.umd.js',
      defaultExtension: 'js'
    },
    '@angular/platform-browser': {
      main: 'bundles/platform-browser.umd.js',
      defaultExtension: 'js'
    },
    rxjs: {
      defaultExtension: 'js'
    },
    'angular2-infinite-scroll': {
      main: 'angular2-infinite-scroll.js',
      defaultExtension: 'js'
    }
  }
});

//main entry point
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app';

@NgModule({
  imports:[ BrowserModule, InfiniteScrollModule ],
  declarations: [ AppComponent, ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

//our root app component
import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  styles: [`
    .search-results-wrepper{
      height:300px;
      overflow: scroll;
    }
    .search-results {
      height: 400px;
      overflow: scroll;
    }
    .title {
      position: fixed;
      top: 0;
      left: 0;
      background-color: rgba(0,0,0,.5);
      color: white;
      width: 100%;
    }
    .title small {
      color: #eaeaea;
    }
  `],
  template: `
    <!--h1 class="title well">{{ title }} <small>items: {{sum}}</small></h1-->
    <div class="search-results-wrepper">
      <div class="search-results"
           infinite-scroll
           [infiniteScrollDistance]="scrollDistance"
           [infiniteScrollThrottle]="throttle"
           (scrolled)="onScrollDown()"
           [scrollWindow]="false">
        <p *ngFor="let i of array">
          {{ i }}
        </p>
      </div>
    </div>
  `
})
export class AppComponent {
  array = [];
  sum = 5;
  throttle = 300;
  scrollDistance = 1;
  title = 'Hello InfiniteScroll v0.3, Ng2 Final';

  constructor() {
    this.addItems(0, this.sum)
  }
  
  addItems(startIndex, endIndex) {
    for (let i = 0; i < this.sum; ++i) {
      this.array.push([i, ' ', this.generateWord()].join(''));
    }
  }
  onScrollDown () {
    console.log('scrolled!!');

    // add another 20 items
    const start = this.sum;
    this.sum += 1;
    this.addItems(start, this.sum);
  }
  
  generateWord() {
    return chance.word();
  }
}