Angular 2 (w/ Material)

<!DOCTYPE html>
<html class="no-js no-svg">
  <head>
    <title>Angular2 Sandbox</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="//cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/dist/ng2-material.css" />
    <link rel="stylesheet" href="//cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/dist/font.css" />
    <link rel="stylesheet" href="style.css" />
    
    <script src="//cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/node_modules/es6-shim/es6-shim.js"></script>
    <script src="//code.angularjs.org/2.0.0-beta.9/angular2-polyfills.js"></script>
    <script src="//code.angularjs.org/tools/system.js"></script>
    <script src="//code.angularjs.org/tools/typescript.js"></script>
    <script src='//cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src="//code.angularjs.org/2.0.0-beta.9/Rx.js"></script>
    <script src="//code.angularjs.org/2.0.0-beta.9/angular2.min.js"></script>
    <script src="//code.angularjs.org/2.0.0-beta.9/http.min.js"></script>
    <script src="system.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
  </head>
  <body>
    <app>
      <span class="loading-msg">Loading...</span>
    </app>
  </body>
</html>

import {Component} from 'angular2/core';
import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
import {AppToolbarComponent} from './app-toolbar.component'

@Component({
  selector: 'app',
  templateUrl: 'app/app.component.html',
  styleUrls:['app/app.component.css'],
  directives: [MATERIAL_DIRECTIVES, AppToolbarComponent]
})

export class AppComponent {
  public Title : string = 'Angular2 w/ Material';
  
  
}

<div class="app">
  <app-toolbar [title]="Foo"></app-toolbar>
  <div class="app-content">
  </div>
</div>

html{
  margin:0;
  padding:0;
}

body{
  font-family: Roboto, Verdana, Arial, Helvetica, 'Sans-Serif';
  font-size:13px;
  background:white;
  color:#353535;
  margin:0;
  padding:0;
}

.loading-msg{
  width:100px;
  height:30px;
  position:absolute;
  top:50%;
  left:50%;
  text-align:center;
  vertical-align:middle;
  line-height:30px;
  margin-left:-50px;
  margin-top:-15px;
}

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: "./app",
    "ng2-material":"//cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/ng2-material"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    'ng2-material': {
      defaultExtension: 'js'
    }
  }
});

.app{}
.app-title{font-size:2em;}
.app-content{padding:15px;}

//main entry point
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {MATERIAL_PROVIDERS} from 'ng2-material/all';

bootstrap(AppComponent,[MATERIAL_PROVIDERS]).catch(err => console.error(err));

<md-toolbar>
    <div class="md-toolbar-tools">
      <button md-button class="md-icon-button" aria-label="Settings" (click)="clicked('Menu')">
        <i md-icon>menu</i>
      </button>
      <h2>
        <span>{{title}}</span>
      </h2>
      <span flex></span>
      <button md-button class="md-icon-button" aria-label="More" (click)="clicked('Show More')">
        <i md-icon>more_vert</i>
      </button>
    </div>
  </md-toolbar>

import {Component} from 'angular2/core';
import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
import {AppComponent} from './app.component';

@Component({
  selector: 'app-toolbar',
  templateUrl: 'app/app-toolbar.component.html',
  styleUrls:['app/app-toolbar.component.css'],
  directives: [MATERIAL_DIRECTIVES]
})

export class AppToolbarComponent {
  public title: string;
}