1

I'm having some issues starting an Angular2 project using the angular2-mdl package.

My project setup is using angular-cli (webpack) - https://github.com/angular/angular-cli

I am trying to integrate Google Material Design Lite (https://getmdl.io/started/index.html) using the angular2-mdl package (https://www.npmjs.com/package/angular2-mdl).

The angular2-mdl setup steps are fairly simple:

npm install angular2-mdl --save

Apparently that is it... and it should work. But it doesn't. I've got to a point where the components using MDL are styled correctly, but the JavaScript for animations doesn't fire at all. I understand this is because MDL is scanning the page for DOM elements before Angular loads them in, so have tried the 'refresh DOM' fix as advertised on SO but it's not working for me:

ngAfterViewInit(){
    console.log("HeaderComponent.ngAfterViewInit");
    componentHandler.upgradeAllRegistered();
}

There are no errors in the console, the styling works and the javascript does not. I'm wondering if anyone has experience with this setup / similar issues?

P.s. I'm new to Angular2 and really not enjoying the differences every environment setup seems to have... with some using webpack, some using systemjs, loads of different generator tools etc... am I alone here?!

Thanks

wkdshot
  • 256
  • 1
  • 6
  • 18
  • did you do following step `Add the MdlModule to your NgModule imports` – Tiep Phan Feb 01 '17 at 18:22
  • btw, for Angular i prefer this https://github.com/angular/material2/blob/master/guides/getting-started.md – Tiep Phan Feb 01 '17 at 18:23
  • if you are using angular2-mdl you don't need componentHandler. pleas checkout the plknr http://plnkr.co/edit/I3dLfLUDIH2xlEJqj0da?p=preview – michael Feb 01 '17 at 21:34
  • Hi @michael, as far as I know, the componentHandler is a workaround which allows you to split various parts of the MDL UI into individual components. At that point, I believe you need to workaround to refresh the event listeners on the DOM. – wkdshot Feb 02 '17 at 17:49
  • @TiepPhan thanks for your reply, I'm not sure how I add to MdlModule to your NgModule imports... do you have any tips on that? I also tried your second package with no joy. It is worth noting that I am trying to get a template to use the package: https://getmdl.io/templates/dashboard/index.html – wkdshot Feb 02 '17 at 17:51
  • @wkdshot i have written angular2-mdl to avoid any usage of componenthandler. if you are really using angular2-mdl the only thing you need from getmdl.io is a prebuilt css file. this is all documented at https://github.com/mseemann/angular2-mdl – michael Feb 02 '17 at 18:33
  • let try my new answer – Tiep Phan Feb 03 '17 at 02:29
  • @TiepPhan thanks for adding more detail. I have tried this and is still does not work. I have moved away from angular-cli and got it working using systemjs. – wkdshot Feb 03 '17 at 11:14
  • @michael thank you for the extra detail and sorry I overlooked you actually wrote the package! (Good job). I'm using a different setup now, as per https://github.com/juristr/learning-angular-components-course and it works. Shame as I liked the angular-cli generators. Too much of a battle for my first Angular2 app. – wkdshot Feb 03 '17 at 11:15

2 Answers2

5

after you already installed angular-cli and created a project
install material-desgin-lite with:

npm install material-design-lite --save

Once intalled open the .angular-cli.json on the root directory of your project and add the following lines:

"styles":
["../node_modules/material-design-lite/material.min.css"],
"scripts":
["../node_modules/material-design-lite/material.min.js"],

Save the file and the start the server with:
ng serve

Use the desired css classes and other components in your code.

pokoli
  • 1,045
  • 7
  • 15
2

open your root Module, ex: AppModule, then add MdlModule to imports array.

import { MdlModule } from 'angular2-mdl';
// other imports 
@NgModule({
  imports: [MdlModule],
  ...
})
export class AppModule { }
Tiep Phan
  • 12,386
  • 3
  • 38
  • 41