Integrating Material Design Lite with Angular2

Thanks guys,
works like a charm, to wrap this up a complete solution, that works well for me (tested with beta6). Without too much boilerplate code. The only thing I did not get to work are really dynamically added elements via *ngFor depending on a component variable. See dynamic elements in the template. Maybe one of you guys knows how to get around that.

See a working plunkr (the preview must be at least 1024px wide to see the header)

Install MDL

npm i material-design-lite --save

Reference it in your index.html

<script src="https://stackoverflow.com/node_modules/material-design-lite/material.min.js"></script>
<!-- from http://www.getmdl.io/customize/index.html -->
<link rel="stylesheet" href="http://stackoverflow.com/css/customized-material.min.css">

Create MaterialDesignLiteUpgradeElement.ts

import {Directive, AfterViewInit} from 'angular2/core';
declare var componentHandler: any;

@Directive({
    selector: '[mdl]'
})    
export class MDL implements AfterViewInit {
    ngAfterViewInit() {
        componentHandler.upgradeAllRegistered();
    }
}

Then in your component import and register it

import { Component } from '@angular/core';    
import { MDL } from '../../../directives/MaterialDesignLiteUpgradeElement';

@Component ({
  selector: 'my-component',
  directives: [ MDL ],
  templateUrl: 'app/components/Header/Header.html'
})
export class Header {
  public dynamicArray:number[] = [];

  add() {
    this.dynamicArray.push(Math.round(Math.random() * 10));
  }
}

And in your template add mdl to the root component

<header mdl class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Home</span>
      <div class="mdl-layout-spacer"></div>

      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
              (click)="add()">
          <i class="material-icons">add</i>
      </button>
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
          <i class="material-icons">more_vert</i>
      </button>
      <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
          <li class="mdl-menu__item">Static entry</li>

          <!-- semi dynamic, known when view is created -->
          <li class="mdl-menu__item" *ngFor="#nr of [1,2,3]">Semi Dynamic entry {{nr}}</li>

          <!-- dynamic, depends on service manipulated array -->
          <li class="mdl-menu__item" *ngFor="#nr of dynamicArray">Dynamic entry {{nr}}</li>
      </ul>
  </div>
</header>