<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://jspm.io/system.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.31/angular2.dev.js"></script>
    <script>
      System.config({
        traceurOptions: {
          annotations: true,
          types: true,
          memberVariables: true
        }
      });
      System.import('contact-manager');
    </script>
  </head>

  <body>
    <contact-manager>loading...</contact-manager>
  </body>

</html>

// Code goes here
import {Component, Directive, View, bootstrap} from 'angular2/angular2';

@Component({
	selector: 'contact-manager'
})
@View({
	templateUrl: 'contact-manager.html'
})
export class ContactManager {
	title: string;

	constructor() {
		this.title = "Contact Manager";
	}
}

bootstrap(ContactManager)
	.then(app => {
		console.log('Bootstrap Successful');
	}, err => {
		console.error(err);
	});
/* Styles go here */
.example .row {
  padding-bottom:10px;
}
<h1>Welcome to {{title}}</h1>
<br />
<div class="container example">
  <div class="row">
    <div class="col-sm-12">
      <label>Use A Text Input</label>
      <input type="text" class="form-control" #color-txt (keyup) value="red" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <label>Or A Button</label>
      <br />
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-danger" (click)="colorTxt.value = 'red'">Red</button>
        <button type="button" class="btn btn-success" (click)="colorTxt.value = 'green'">Green</button>
        <button type="button" class="btn btn-primary" (click)="colorTxt.value = 'blue'">Blue</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <label>Or An HTML5 Color Picker</label>
      <input type="color" class="form-control" #color-ctrl (change)="colorTxt.value = colorCtrl.value" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <label>Or A Range Input</label>
      <input type="range" min="10" max="300" value="32" #size (input) />
      <h2><code>size.value = {{size.value}}</code></h2>
      <h1 [style.color]="colorTxt.value" [style.font-size]="size.value + 'px'">
        My color is magically set!
      </h1>
    </div>
  </div>
</div>