Wishtack - Angular 2 ngFor, Observable and TrackBy

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

<!DOCTYPE html>
<html>

  <head>
    <title>Wishtack - Angular 2 Boilerplate</title>

    <script>document.write('<base href="' + document.location + '" />');</script>
    
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.0-rc.2/Rx.js"></script>
    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
    <script src="https://npmcdn.com/zone.js@0.6.21?main=browser"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
    <script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.0-rc.2/Rx.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app/bootstrap').catch(function(err){ console.error(err); });
    </script>
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/bootstrap')
            .then(null, console.error.bind(console));
    </script>

  </head>

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

</html>


(function(global) {

  var ngVer     = '@2.1.0';
  var routerVer = ngVer;

  //map tells the System loader where to look for things
  var  map = {
    'app':                        'app',
    '@angular':                   'https://npmcdn.com/@angular',
    '@angular/router':            'https://npmcdn.com/@angular/router' + routerVer,
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-rc.2',
    'ts':                         'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
    'typescript':                 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
 };

  var packages = {
    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
    'rxjs': {}
  };


  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router-deprecated',
    'upgrade',
  ];

  // Add map entries for each angular package
  // only because we're pinning the version with `ngVer`.
  ngPackageNames.forEach(function(pkgName) {
    map['@angular/'+pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer;
  });

  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {

    // Bundled (~40 requests):
    packages['@angular/'+pkgName] = { main: '', defaultExtension: 'js' };

    // Individual files (~300 requests):
    //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  // No umd for router yet
  packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

  var config = {
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    map: map,
    packages: packages
  }

  System.config(config);

})(this);

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

import { Component } from '@angular/core';

@Component({
    selector: 'wt-app',
    template: `
  <ul>
    <li *ngFor="let user of userList() | async; trackBy:userId">
      <wt-user [user]=user></wt-user>
    </li>
  </ul>
`
})
export class AppComponent implements OnInit {
  
  userListSubject = new Rx.Subject();
  
  ngOnInit() {
    
    setInterval(() => this.userListSubject.next(this._getUserList()), 1000);
    
    // this.userListSubject.subscribe()

  }
  
  userId(index, user) {
    return user.id;
  }
  
  userList() {
    return Promise.resolve(this._getUserList());
  }
  
  private _getUserList() {
    return [
      {
        id: '0',
        firstName: 'A'
      },
      {
        id: '1',
        firstName: 'B'
      },
      {
        id: '2',
        firstName: 'C'
      }
    ];
  }

}

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { UserComponent } from './user.component';
import { SharedModule } from './shared.module';

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


import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  exports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ]
})
export class SharedModule {
  
  static forRoot() {
    return {
      ngModule: SharedModule
    }
  }
  
}


import { Component, Input } from '@angular/core';

let count = 0;

@Component({
  selector: 'wt-user',
  template: `{{id}} {{ user.firstName }}`
})
export class UserComponent {

  id;
  @Input() user;

  constructor() {
    this.id = count++;
  }

}