0

I'm trying to develop a web app with Angular 2 and Material Design Lite.

But all the html pages comming from binded components and using MDL are not displayed.

After hours of searches on the internet, I found out that it is quite a common problem and many people say that it is better not to use MDL with angular 2.

Did anyone manage to make these two frameworks work together ?

Thanks

Fab
  • 668
  • 9
  • 24

3 Answers3

1

It's easy. Just use angular2-mdl. See the demo app http://mseemann.io/angular2-mdl/ or the corresponding github project: https://github.com/mseemann/angular2-mdl. If you want to play around there is a plnkr link in the github project.

enter image description here

michael
  • 16,221
  • 7
  • 55
  • 60
  • I already tried it but it returned me the following error : npm ERR! Windows_NT 10.0.10586 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "angular2-mdl" "--save" npm ERR! node v6.7.0 npm ERR! npm v3.10.3 npm ERR! code ENOSELF npm ERR! Refusing to install angular2-mdl as a dependency of itself npm ERR! Please include the following file with any support request: npm ERR! C:\Users\MIW\Desktop\test\angular2-mdl\npm-debug.log – Fab Dec 07 '16 at 09:24
  • 'Refusing to install angular2-mdl as a dependency of itself ' ?? looks like you are trying to run npm install angular2-mdl in the angular2-mdl folder. why? – michael Dec 07 '16 at 09:34
  • I thought it wasn't properly installed as I can't run ng serve – Fab Dec 07 '16 at 09:47
  • are you using angular-cli? – michael Dec 07 '16 at 09:52
  • I'd like to be able to run ng serve while working on my project, yes... I only cloned the git hub repo. I don't get what do to next... :/ – Fab Dec 07 '16 at 09:58
  • that's the problem. you don't need to clone the github repo. here is a simple repo: https://github.com/mseemann/a2-mdl-webpack that uses angular2 and angular2-mdl. you can use this as a starting point. clone it, run npm install in it and run ng serve. also you need to install angular-cli globally (https://github.com/angular/angular-cli#installation) to use the ng commands. – michael Dec 07 '16 at 10:05
  • Ok this worked thanks ! But what's the difference between this repo and the previous one ? – Fab Dec 07 '16 at 10:17
  • angular2-mdl is the package that provides angualr2 components for material design lite. the a2-mdl-webpack repos is just a demo how to use it. – michael Dec 07 '16 at 11:11
-1

You know there's a framework called material2 build from the angular-team? :)

Github: https://github.com/angular/material2

Demos: https://material2-test.firebaseapp.com/

Getting started: https://github.com/angular/material2/blob/master/GETTING_STARTED.md

slaesh
  • 16,659
  • 6
  • 50
  • 52
-1

Yes! It's not good to use MDL with angular or angular2 as theres angular-material for angular1.x and material2 for angular2 which have already introduced a lot of components already. However if you really want to use MDL, here I have developed a component library built on top of MDL.

ng2-mdl: https://github.com/sabbirrahman/ng2-mdl

It works fine with angular 2 final and angular-cli. Though I haven't added AOT support yet!

Sabbir Rahman
  • 1,191
  • 2
  • 13
  • 17
  • Angular2-mdl (https://github.com/mseemann/angular2-mdl) is perfectly fine. It's far progressed, stable and has a growing user base. – curiosity Dec 08 '16 at 11:42