Geek Answers Handbook

Angular2 (angular-cli) and Material Design Lite (angular2-mdl)

I am having trouble starting an Angular2 project using the angular2 -mdl package.

My project setup uses 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 steps for setting up angular2 -mdl are pretty simple:

npm install angular2-mdl --save

Apparently, this is it ... and it should work. But this is not so. I got to the point where components using MDL were correctly configured, but JavaScript for animation did not work at all. I understand this is due to the fact that MDL crawls the page for DOM elements before Angular loads them, so I tried the "refresh DOM" fix as advertised on SO, but it does not work for me:

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

There are no errors in the console, styling works, but javascript doesn't. I am wondering if anyone has any experience with this setup / similar issues?

Ps I'm new to Angular2 and really don't enjoy the differences that seem to be every setting of the environment ... with some using webpack, some using systemjs, many different generator tools, etc. Am I alone here ?!

thank

+1
2

, angular -cli
-desgin-lite :

npm install material-design-lite --save

intalled .angular-cli.json :

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

:
ng serve

css .

+4

, : AppModule, MdlModule imports.

import { MdlModule } from 'angular2-mdl';
// other imports 
@NgModule({
  imports: [MdlModule],
  ...
})
export class AppModule { }
+1

More articles:


All Articles