@neurobe thank you so much.
I wrote simple tutorial that is to add MDL to Meteor. But it wrote in Korean and also English, you can read the code of it. it is not difficult.
I think this would still require the components be activated since they are not in the dom when mdl gets loaded. MDL does have a helper for that, though:
I’ve done everything as described but dropdowns and other JS related components still won’t work properly… I even tried to put the JS in the layout.rendered function, with no result.
I feel a little powerless right now 
Hi,
by pulling it into /public by bower and including js in default project html in header part and still not working?
Than copy paste here how you are including that JS etc. Or Meteorpad/github link
After creating a new project and doing the same, it finally worked. But after adding a master template, it’s broken again and that’s the problem… How do I make a Layout without putting the head and body code into a template?
Update:
Install my package linked in the comment below and forget about calling upgradeAllRegistered() ever. I added patches around material.js to automate this for you.
Old Post Content:
I managed to make it work by calling
componentHandler.upgradeAllRegistered();
after the template is rendered.
Basically, do something like this:
Template.myTemplate.onRendered(function () {
componentHandler.upgradeAllRegistered();
});
If you are using iron router and have a layout, add this to the layout because templates inside the layout are rendered first and the layout is the last one.
Damn this community is fast! https://github.com/krazyeom/Material-Design-Lite-package-for-Meteor/
There ya go @janjnd, no more headaches.
For those following this thread
Action is in progress at Google to iron out some registration bugs…
https://github.com/google/material-design-lite/pull/890 quote…
"I don’t think it’s ripple’s fault, it’s just that componentHandler.upgradeElement() doesn’t work like you might expect. It only applies a single component to an element, ignoring the element’s class names altogether. So if you want to dynamically create a button with ripple, you have to componentHandler.upgradeElement(el, ‘MaterialButton’) then componentHandler.upgradeElement(el, ‘MaterialRipple’). The individual components do sometimes look at class names though, so you can get a weird state where the ripple is set up by a component (as seen in MaterialButton) but the ripple component is never applied.
So, since components do look at class names to determine their behaviour, I think componentHandler.upgradeElement() should simply take an element and determine the appropriate components to apply based on class names alone. I’ve pushed a (backwards compatible) fix here: google/material-design-lite#890 "
I’m actively developing my own MDL wrapper here:
I’m adding fixes to the package for stuff the MDL team not willing to put into their core JS.
(See this pull request https://github.com/google/material-design-lite/pull/896)
Currently I managed to make auto-upgrading work on modern browsers with somewhat good efficiency. So you don’t need to worry about calling “componentHandler.upgradeElement” I hope. And I intend to improve the efficiency as far as I can until MDL team do their job on this part.
See the issues section of my repo for things I’m trying to fix to make MDL usable with Meteor (and other common Meteor packages such as Iron:Router). To my knowledge none of the other wrappers have any solution.
2 Likes
Why do you choose MDL over http://materializecss.com?
MDL seems to be in an very early stage (features, bugs).
Interested to hear why people would favour MDL over Materailize.
In your opinion, which framework has the best future?
Material Design is a design standard proposed by Google. It’s not CSS but a set of rules on how things should look and feel.
So you got the Materialize team building out a CSS framework based on those rules.
Then you have Google building out a CSS framework based on those rules.
Since Google wrote the rules, it makes sense to use Google’s implementation of material design. It’s going to be long supported and straight from the horses mouth.
That is a basic point of view. The more I think about the question, the more i realise that it will all depend on the level of support over time. IMO, MDL is too early to adopt. Materialize has an established community with non core devs committing a steady stream of PRs. I’m going to wait a month and monitor the git pulse. If MDL can establish the same support over the next month or so then i think Materialize will soon be obsolete.
I agree with @dcworldwide. That would mean a lot of devs would also have to re-develop some packages that will use mdl instead of materialize, that would include such things as useraccounts:materialize and autoform:materialize, which i use. (but it might get away their unstylized versions, but i havent tried) Besides, as i see it, mdl based its idea of non-jquery usage, so that you can use it without having a jquery package… But meteor heavily uses jquery and has it as part of its standard package… So using bootstrap (as the standard defacto css framework design in all tutorials) and its material design counterpart materialize makes sense. It took awhile for materialize to gain some ground in the community… Might took some time as well for mdl (once it has a very stable and semi-official package to offer)
@zodiase You rock! man.
Adding the following piece makes it work with iron router.
Template.myTemplate.onRendered(function () {
componentHandler.upgradeAllRegistered();
});
meteor add zodiase:mdl 
Hey thanks @nobso. By the way I don’t think you need to call upgradeAllRegistered as my package does that for ya. If it does not work that way for you then… well… we obviously have a bug somewhere.
I don’t see any issue as of now with your package. It works cool!
I just tested initially with that code and removed that after adding your package.
@nobso
Good to know. If you encounter any issue later (I believe there are a lot) and would like to help make the package better, feel free to fire them up in my git repo, better with some code example to reproduce the issues.
Of course! I will do