Generic List using ngForTemplate

<!DOCTYPE html>
<html>

  <head>
    <title>Generic list using ngForTemplate</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/tools/traceur-runtime.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="config.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.42/angular2.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.42/http.min.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 - Alpha .39

A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, 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"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

//main entry point
import {bootstrap} from 'angular2/angular2';
import {HTTP_BINDINGS} from 'angular2/http';
import {App} from './app';

bootstrap(App, [HTTP_BINDINGS])
  .catch(err => console.error(err));

import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'
import { List} from './list'
import {MyCustomListRow} from './myCustomListRow'

@Component({
  selector: 'my-app'
})
@View({
  template: `
    <list [list-rows]="myRows" >
      <li template="#item #i=index">
        <myCustomListRow>{{item}}</myCustomListRow>
      </li>
    </list>
  `,
  directives: [CORE_DIRECTIVES, List, MyCustomListRow]
})
export class App {
  myRows: MyCustomListRow[]; 
  constructor() {

    this.myRows = [];
    this.myRows.push(new MyCustomListRow());
    this.myRows[0].rowId = "0  :) ";
    this.myRows[0].customProp = "00  :) ";
    this.myRows.push(new MyCustomListRow());
    this.myRows[1].rowId = "1  :) ";
    this.myRows[1].customProp = "11  :) ";
  }
}

import {Component, View, NgFor, Type, TemplateRef, ContentChild, forwardRef } from 'angular2/angular2';
import {ListRow} from './listRow';

export * from './listRow';

@Component({
    selector: 'list',
    properties: [
        'listRows: list-rows'
    ]
})

@View({
    template: `
      <ul>
          <template ng-for  [ng-for-of]="listRows" 
                            [ng-for-template]="contentTpl" >
          </template>
      </ul>
    `,
    directives: [NgFor ] 
})
 
 
export class List {
@ContentChild(TemplateRef) contentTpl: TemplateRef;
    listRows: ListRow[];    

    constructor() {
        this.listRows = [];
        
    }
}

import { Component, View, Directive } from 'angular2/angular2';

@Component({
    selector: 'listRow '// .icb-listrow
    
})
@View({
    template: `
      <ng-content ></ng-content>
      <input  type="button" 
              value="{{rowId}}"
              >`
})

export class ListRow {
    rowId:string;
    
    constructor() {
      this.rowId = ":(";
      console.log('new ListRow');
    }
    
}

import {Component, View, Host} from 'angular2/angular2';
import {ListRow, List} from './list';

@Component({
    selector: 'myCustomListRow'
})
    @View({
        directives:[ListRow],
        template: `
          <listRow>
            {{rowId}} - {{customProp}}   
          </listRow>
        `
})
export class MyCustomListRow extends ListRow {
    customProp: string  = ":(";
    constructor() {
        super();
        this.rowId = ' :( ';
        console.log('new MyCustomListRow'); 
    }
}