<!DOCTYPE html>

    <title>angular2 playground</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.52/angular2.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.52/http.min.js"></script>


  //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, View, Component} from 'angular2/angular2';
import {Navbar} from './navbar';

    selector: "app"
    directives: [Navbar]
    template: `
export class App {
  constructor() {

bootstrap(App, [])
  .catch(err => console.error(err));
import {Component, View, NgFor} from 'angular2/angular2';
import {Redify} from './directives';

    selector: "navbar",
    directives: [NgFor, Redify], 
    styles: [`
          color: gray;
    template: `
        <h2>Democratic Party presidential candidates</h2>
        <li redify *ngFor="#item of items; #i = index">{{item}} {{i}}</li>
export class Navbar {
    items: Array<String>

    constructor() {
      this.items = [
        "Hillary Clinton",
        "Martin O'Malley",
        "Bernie Sanders"

    ngOnInit() {
        console.log('[Component] navbar ngOnInit');
import {Directive, ElementRef, Renderer} from 'angular2/angular2';

  selector: '[redify]'
export class Redify {

  constructor(private _element: ElementRef, private renderer: Renderer) {
      renderer.setElementStyle(_element, 'color', 'red');