Angular2 RC.1 Table Iteration

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 table</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://npmcdn.com/zone.js@0.6.12"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.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 */

table { width: 70%; margin: 10px; }
td { border: 1px solid black; }

/**
 * PLUNKER VERSION (based on systemjs.config.js in angular.io)
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 * Override at the last minute with global.filterSystemConfig (as plunkers do)
 */
(function(global) {

  var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!

  //map tells the System loader where to look for things
  var  map = {
    'app':                        'src', // 'dist',
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'app.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };

  var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/router',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router-deprecated',
      '@angular/testing',
      '@angular/upgrade',
  ];

  // add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
  packageNames.forEach(function(pkgName) {
    map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
  });

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);


/*
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
*/

//our root app component
import {Component, provide} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {Http, HTTP_PROVIDERS} from '@angular/http';
import {APP_BASE_HREF, LocationStrategy, HashLocationStrategy, NgSwitch, NgSwitchWhen, NgSwitchDefault} from "@angular/common";

@Component({
  selector: 'my-app',
  directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault],
  template : `
    <div>
      <h5>Table iteration example using HTML elements and ngIf - {{dataType}}</h5>
      <table>
        <tbody>
          <tr *ngFor="let row of dataRows">
            <td>{{row.name}}</td>
            <td *ngIf="'currency'===dataType" *ngFor="let cell of row.data['data1']">{{cell}}</td>
            <td *ngIf="'percent'===dataType" *ngFor="let cell of row.data['data1']">{{cell}}</td>
          </tr>
        </tbody>
      </table>
      <h5>Table iteration example using template and ngSwitch - {{dataType}}</h5>
      <table>
        <tbody>
          <template ngFor let-row [ngForOf]="dataRows">
          <tr>
            <td>{{row.name}}</td>
            <template ngFor let-cell [ngForOf]="row.data['data1']" let-j="index">
            <td [ngSwitch]="dataType">
              <template ngSwitchWhen="currency">$ {{cell}} - {{j}}</template>
              <template ngSwitchWhen="percent">{{cell}} % - {{j}}</template>
              <template ngSwitchDefault>{{cell}} - {{j}}</template>
            </td>
          </template>
          </tr>
          </template>
        </tbody>
      </table>
    </div>`
})
export class App {
  dataType = 'currency';
  private dataRows = [
     {
        "name": "Test 1",
        "data": {
          "data1": [1,2,3,4,5,6,7,8,9,10,11,12],
          "data2": [9,9,9,9,9,9,9,9,9,9,9,9]
        }
      },
      {
        "name": "Test 2",
        "data": {
          "data1": [1,2,3,4,5,6,7,8,9,10,11,12],
          "data2": [9,9,9,9,9,9,9,9,9,9,9,9]
        }
      }
    ];
  constructor () {
    
    console.debug(this.dataRows);
  }
}

bootstrap(App, [
  HTTP_PROVIDERS,
  provide(APP_BASE_HREF, { useValue: "/base/app" }),
  provide(LocationStrategy, { useClass: HashLocationStrategy })
  ]).catch(err => console.error(err));

export class TableRow {
  public constructor(type, cells) {
    this.type = type;
    this.cells = cells;
  }
}