<!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>
<mdl-card mdl-shadow="3" class="courses-list__wrapper">
    <mdl-card-supporting-text>
        <courses-list></courses-list>
    </mdl-card-supporting-text>
</mdl-card>

<mdl-card mdl-shadow="3" class="course__wrapper">
    <mdl-card-menu>
        <mdl-tabs mdl-ripple mdl-tab-active-index="0">
            <mdl-tab-panel mdl-tab-panel-title="Основна інформація">
                <mdl-tab-panel-title>
                    <mdl-icon class="mdl-color-text--primary">person</mdl-icon><span>Основна інформація</span>
                </mdl-tab-panel-title>
                <mdl-tab-panel-content>
                    <mdl-card-supporting-text>
                        <course-item></course-item>
                    </mdl-card-supporting-text>
                </mdl-tab-panel-content>
            </mdl-tab-panel>
            <mdl-tab-panel mdl-tab-panel-title="Студенти">
                <mdl-tab-panel-title>
                    <mdl-icon class="mdl-color-text--primary">person</mdl-icon><span>Студенти</span>
                </mdl-tab-panel-title>
                <mdl-tab-panel-content>
                    <mdl-card-supporting-text>
                        <!--<course-item></course-item>-->
                    </mdl-card-supporting-text>
                </mdl-tab-panel-content>
            </mdl-tab-panel>
            <mdl-tab-panel mdl-tab-panel-title="Найближчі події">
                <mdl-tab-panel-title>
                    <mdl-icon class="mdl-color-text--primary">person</mdl-icon><span>Найближчі події</span>
                </mdl-tab-panel-title>
                <mdl-tab-panel-content>
                    <mdl-card-supporting-text>
                        <!--<course-item></course-item>-->
                    </mdl-card-supporting-text>
                </mdl-tab-panel-content>
            </mdl-tab-panel>
        </mdl-tabs>
    </mdl-card-menu>
</mdl-card>


import { Component } from "@angular/core"

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
})
export class AppComponent {
    tabChanged(event) {}
}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } 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: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
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
});