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

Question

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

did you do following step Add the MdlModule to your NgModule imports — Tiep Phan
– Tiep Phan, Commented Feb 1, 2017 at 18:22
btw, for Angular i prefer this github.com/angular/material2/blob/master/guides/… — Tiep Phan
– Tiep Phan, Commented Feb 1, 2017 at 18:23
if you are using angular2-mdl you don't need componentHandler. pleas checkout the plknr plnkr.co/edit/I3dLfLUDIH2xlEJqj0da?p=preview — michael
– michael, Commented Feb 1, 2017 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
– wkdshot, Commented Feb 2, 2017 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: getmdl.io/templates/dashboard/index.html — wkdshot
– wkdshot, Commented Feb 2, 2017 at 17:51

pokoli · Accepted Answer · 2017-05-03 15:32:28Z

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.

edited May 3, 2017 at 15:32

pokoli

1,0657 silver badges15 bronze badges

answered May 3, 2017 at 15:00

user5578056

Sign up to request clarification or add additional context in comments.

Comments

Tiep Phan · Accepted Answer · 2017-02-03 02:29:24Z

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 { }

answered Feb 3, 2017 at 2:29

Tiep Phan

12.6k3 gold badges40 silver badges44 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related