Angular Material Design Lite (angular-mdl) Plunker Template

<!DOCTYPE html>
<html>
  <head>
    <title>Angular Material Design Lite (@angular-mdl/core) Plunker</title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.0.2/typescript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.23/zone.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>


    <script src="systemjs.config.js"></script>

    <script>
      System.import('main.ts')
        .catch(console.error.bind(console));
    </script>
    
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.light_blue-amber.min.css" />
    
    <style>
      
      .mdl-snackbar {
        position: absolute;
      }
      
    </style>
  </head>

  <body>
    <demo-app>Loading...</demo-app>
    
  </body>

</html>

<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
  <mdl-layout-header>
    <mdl-layout-header-row>
      <mdl-layout-title>Title</mdl-layout-title>
      <mdl-layout-spacer></mdl-layout-spacer>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link">Link</a>
      </nav>
    </mdl-layout-header-row>
  </mdl-layout-header>
  <mdl-layout-drawer>
    <mdl-layout-title>Title</mdl-layout-title>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link">Link</a>
    </nav>
  </mdl-layout-drawer>
  <mdl-layout-content class="demo-content">

    <p>
      <mdl-textfield type="text" [(ngModel)]="description" [mdl-tooltip]="description"></mdl-textfield>
    </p>

  </mdl-layout-content>
</mdl-layout>

import { Component } from '@angular/core';
import { MdlSnackbarService } from '@angular-mdl/core';

@Component({
  selector: 'demo-app',
  templateUrl: 'app.component.html',
  styles: [
    `
    .demo-content {
       padding: 12px;
    }
    `
  ]
})
export class AppComponent {
    
  description: string;
}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MdlModule } from '@angular-mdl/core';
import { AppComponent } from './app.component';

@NgModule({

  imports: [
    BrowserModule,
    FormsModule,
    MdlModule,
  ],

  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: []
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

Demo Plunkr for @angular-mdl/core.


System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    }
  }
});


var map = {
  '@angular/core': 'https://unpkg.com/@angular/core@next',
  '@angular/common': 'https://unpkg.com/@angular/common@next',
  '@angular/compiler': 'https://unpkg.com/@angular/compiler@next',
  '@angular/forms': 'https://unpkg.com/@angular/forms@next',
  '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic@next',
  '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser@next',
  '@angular-mdl/core': 'https://unpkg.com/@angular-mdl/core@latest/bundle/core.js',
  'rxjs': 'https://unpkg.com/rxjs',
  'main': 'main.js'
};

var packages = {

}

System.config({
  map: map, 
  packages: packages
});