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://w

Answer 1

I was facing the same problem (as I'm using the same template as you).

Just try componentHandler.upgradeAllRegistered() it will work fine in your case.

A different issue occurs when you try to break the header into small components.

Answer 2

The ng2-webpack Demo project includes a simple ng2 CRUD application that uses vanilla MDL

Steps:

• npm install --save material-design-lite
• import the entire library in src/vendor.js
• or just the desired components
• in src/style/app.scss, import the desired components:

Issues:

Issue - MDL augmented DOM effects are not applied:

• consistently during state changes
• during route changes

Solution:

ngAfterViewInit() {
    // Ensure material-design-lite effects are applied
    componentHandler.upgradeDom();
}

see Working with Material Design Lite for more details.

Answer 3

I am able to get the solution from angualrjs channel, and it is super cool solution, ofource we have to use componentHandler.upgradeElement(this.elementRef.nativeElement);

//This is the way to make the

@Directive({
  selector: '[mdlUpgrade]'
})
class MdlUpgradeDirective {
  @Input() mglUpgrade;

  constructor(el: ElementRef) {
    componentHandler.upgradeElement(el.nativeElement);
  }
}

@Component ({
  selector: 'login',
   ...
  directives: [MdlUpgradeDirective]
})

and use the Directive on the HTML tags to use it.

It works,

NOTE: https://github.com/justindujardin/ng2-material , this guys has made super cool material stuff, can refer this too

Answer 4

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>

Answer 5

Just thought it's worth mentioning here that the official Material Design for Angular 2 library is now in alpha.2, so you might consider starting new projects with it.

Answer 6

The problem is Material Design Lite isn't designed to be used with dynamic pages like those generated by Angular2. That said it should be possible by using the MDL componentHandler.upgradeElement function.

More information on this can be found here: http://www.getmdl.io/started/#dynamic

I'd suggest getting an ElementRef in your Angular components then calling this function on the element ref in one of your components lifecycle hooks, probably ngAfterViewInit()