Integrating Material Design Lite with Angular2

Question

I have a small problem in integrating a meterial design (http://www.getmdl.io/) in ng2 Can you please help me I will put it in points what I have done

1. http://www.getmdl.io/started/index.html#tab1, explains the integration of the design
2. http://www.getmdl.io/components/index.html#textfields-section, this is an example of textfield with floating label and now I Have the Plunkr, which I integrated, but DID NOT WORK can you please have a look As you can see in the index.html I have the css and js files inclustion as suggested by http://www.getmdl.io/started/index.html#tab1

<!-- GetMDL scripts --> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <!-- GetMDL scripts --> And in the app.component.ts file :

import {Component, ViewEncapsulation} from 'angular2/core';  @Component({     selector: 'my-app',     template: `<form action="#">   <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">     <input class="mdl-textfield__input" type="text" id="sample3">     <label class="mdl-textfield__label" for="sample3">Text...</label>   </div> </form>`, encapsulation:ViewEncapsulation.None, }) 

Answer 1

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="/node_modules/material-design-lite/material.min.js"></script> <!-- from http://www.getmdl.io/customize/index.html --> <link rel="stylesheet" href="/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>