Angular 2 Material Design Lite (angular2-mdl) Plunker Template

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Material Design Lite (angular2-mdl) 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>

<p>The tabs will be displayed once the Observable fetching the data for the tabs 
has been resolved.</p>

<hr />

<div *ngIf="someCondition">
    <p>You should now see an error in the console.</p>
    <hr />
</div>

<div *ngIf="someCondition">
<mdl-tabs mdl-ripple mdl-tab-active-index="0">
	<mdl-tab-panel *ngFor="let leg of myArray; let index = index;">
		<mdl-tab-panel-title>
			Panel Title {{index}}
		</mdl-tab-panel-title>
		<mdl-tab-panel-content>
        Panel Content {{index}}
		</mdl-tab-panel-content>
	</mdl-tab-panel>
</mdl-tabs>
</div>

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

@Component({
  selector: 'demo-app',
  templateUrl: 'app.component.html',
  styles: [
    `
    
    `
  ]
})
export class AppComponent implements OnInit {
    
  myArray: string[] = ['a', 'b', 'c'];
  someCondition: boolean = false;
    
  constructor() {}
  
  ngOnInit() {
    // Simulates a response from an Observable that changes the condition.
    setTimeout(() => {
      this.someCondition = true;
    }, 2000);
  }
  
}

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 'angular2-mdl';
import { AppComponent } from './app.component';

@NgModule({

  imports: [
    BrowserModule,
    FormsModule,
    MdlModule,
  ],

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

platformBrowserDynamic().bootstrapModule(AppModule);

Demo Plunkr for angular2-mdl.


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


var map = {
  '@angular': 'https://unpkg.com/@angular',
  'angular2-mdl': 'https://unpkg.com/angular2-mdl@latest/bundle/angular2-mdl.js',
  'rxjs': 'https://unpkg.com/rxjs',
  'main': 'main.js'
};

var packages = {

}

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