Untitled

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.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-beta.17/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.17/router.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.17/http.min.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

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

</html>

// Code goes here

/* Styles go here */

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'
    }
  }
});

//our root app component
import {Component, Directive, Output, EventEmitter, Input, SimpleChange} from 'angular2/core'
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
//import 'rxjs/Rx';

@Component({
  selector: 'my-app',
  template:`
    <h1>Heading {{defaultValue}}</h1>
    <select type="number" [(ngModel)]="defaultValue">
      <option *ngFor="let app of apps"   [ngValue]="app.name">{{app.name}}</option>
    </select>
    
  `,
})
export class AppComponent {
  defaultValue = "Car";
  apps:Array<Object> = [
      { name: "Car"},
      { name: "BB"},
       { name: "CC"},
        { name: "DD"}
  ];

  
}

//main entry point
import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {AppComponent} from './app';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy, HashLocationStrategy} from 'angular2/platform/common';

bootstrap(AppComponent, [ROUTER_PROVIDERS,
    provide(LocationStrategy, {useClass: HashLocationStrategy}])
  .catch(err => console.error(err));