Angular Material 2 Plunker Template

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Material Plunker</title>

    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://angular-code.firebaseapp.com/zone.js/dist/zone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.0/core.min.js"></script>
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.27/dist/system.js"></script>

    <!-- Load Bundle from Asset Host -->
    <script src="https://angular-code.firebaseapp.com/bundle.js?v=alpha5"></script>
    
    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>

    <script>
      System
        .import('app.component.ts')
        .catch(console.error.bind(console));
    </script>
  </head>

  <body>
    <material-app>Loading the Angular 2 Material App...</material-app>
  </body>

</html>

<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {MdInput, MdHint} from '@angular2-material/input';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  directives: [MdInput, MdHint]
})
export class AppComponent {}

bootstrap(AppComponent);

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
 */

<div style="padding: 7px">
  <md-input id="test-date"
          type="date"
          required
          placeholder="Birthday">
    <md-hint>JJ/MM/AAAA</md-hint>
  </md-input>
</div>

<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    }
  },
  map: {
    '@angular': 'node_modules/@angular',
    '@angular2-material': 'node_modules/@angular2-material',
    'rxjs': 'node_modules/rxjs'
  }
});

var _packageConfig = {};
var _defaultPackages = [
  '@angular/core', '@angular/common', '@angular/compiler', '@angular/http', '@angular/router',
  '@angular/platform-browser', '@angular/platform-browser-dynamic', 'rxjs'
];

// Angular Material 2 Packages to load.
var _materialPackages = [
  'core', 'toolbar', 'button', 'card', 'checkbox', 'icon', 'input', 'list', 'progress-bar',
  'progress-circle', 'radio', 'sidenav', 'grid-list', 'tabs', 'slide-toggle'
];

_materialPackages.forEach(function(item) {
  // All Material 2 components are prefixed with  @angular2-material and use
  // the components name as entry point.
  _packageConfig['@angular2-material/' + item] = { main: item };
});

_defaultPackages.forEach(function (item) {
  // Angular's Default Packages are always using `index` as an entry point.
  _packageConfig[item] = { main: 'index' };
});

// Apply the new generated packages to the SystemJS configuration.
System.config({ packages: _packageConfig });

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
 */