Using Material Design Lite ProgressBar with Angular2
Material design lite (I will name it “mdl”) is a light weight material design library that does not rely or force you to use any framework. It is offered to us by Google and give us another alternative (I would say easier and faster to handle alternative) than polymer.
Angular2 (who needs me to present Angular2?) is still in beta (today). Considering how fast angular2 milestone runs, I hope I will have opportunity to finish my article before it is released (even if I’m excited to read one day : “angular2 is released today”).
Let’s talk about the subject (I won few minutes I can’t make you wait more otherwise you will quit my article…).
Adding Mdl to your angular2 project
When your read the “getting started page” in mdl website (I guess like me everyone read it all along the first time?!) there is a particular section not to miss (ok I missed it the first time… but now I know it well) if you want to use mdl in angular2. Otherwise, mdl dynamic behavior won’t work (as an example : menu component won’t open on click = that is a no use menu no?).
What is says :
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function. Here is how you can dynamically create the same raised button with ripples shown in the section above:
What it means :
You have an angular2 application so it is dynamic (I did not learn you something surprising).
As mdl needs to update all its elements (it searches them by class name) you will have to give it an hand since you don’t help it by adding/removing components/elements dynamically.
How to apply it :
You can call componentHandler.updateElement(THE_ELEMENT) but it could be a little complicated to do that on all mdl elements in a large application.
I prefer an easy way which is to call once and for all mdl components componentHandler.upgradeDom() on the top root component of the application :
That’s it! The receipt to use mdl in angular2 (or react…) is simply telling componentHandler to update its components.
Now let’s go on with the progress bar.
Mdl progress bar : how to update its value
A vast majority of mdl components are really straightforward to use. Just follow mdl website examples.
But sometimes, like the “trick” above — to make mdl dynamic behavior working — you may have to spend a bit more time to understand how such component could work.
For my concern progress bar component resisted me when I told it to dynamically update. First value (0%) was ok but then it wasn’t the same history.
At first sight from mdl website it seems super simple :
But when it comes to dynamically change the progress, it is not as easy…
I won’t make you wait more than that and give you my receipt to make it work (the way it should no more than that in fact).
As it is not said, “mdl-componentupgraded” event must have occurred before being able to dynamically update the progress by calling mldProgressElement.MaterialProgress.setProgress(Value).
As an example is often more talkative, I will show you my entire mdl progress bar component in angular2 :
Note :
As angular2 offers sugar code you won’t need to use querySelector to select mdl element :
- @ViewChild (in component class)
- #ProgBar (in component html template)
do the job. Isn’t it more readable and faster to code?!
Use and abuse angular2 sugar code. It is a framework so it is designed to make it even easier for you to code “good code”. When you need to use jQuery in an angular2 (even angular js) application : think twice because it may indicate that you are in a wrong direction.
Thank you for reading, I hope you nice coding
