Material Design Lite Integration with AngularJS
Solution 1
Emjay's second answer worked for me. You can additionally reduce boilerplate by tossing the upgradeAllRegistered
method into Angular's run
block:
angular.module('app', [])
.run(function ($rootScope,$timeout) {
$rootScope.$on('$viewContentLoaded', ()=> {
$timeout(() => {
componentHandler.upgradeAllRegistered();
})
})
});
Solution 2
Disclaimer: I am the author of this project
You can use Material Design Lite
in your angular apps.
I believe you're looking for an angular wrapper on top of Material Design Lite.
There's this package under heavy development and it already has some directives implemented with configurable options (floating text fields) http://jadjoubran.github.io/angular-material-design-lite/
If you want a full UI written in angular, you can use Angular Material
Solution 3
I was having this problem rendering, more design elements dynamically using javascript CDM (eg menu) it was not rendered correctly. I created a solution to run componentHandler.upgradeDom () only when a new element is added:
var app = angular.module('app');
app.run(function () {
var mdlUpgradeDom = false;
setInterval(function() {
if (mdlUpgradeDom) {
componentHandler.upgradeDom();
mdlUpgradeDom = false;
}
}, 200);
var observer = new MutationObserver(function () {
mdlUpgradeDom = true;
});
observer.observe(document.body, {
childList: true,
subtree: true
});
/* support <= IE 10
angular.element(document).bind('DOMNodeInserted', function(e) {
mdlUpgradeDom = true;
});
*/
});
Problem solved!
Solution 4
You can include the .css and .js files like instructed on the Material Design Lite website, then just do the following when bootstrapping your app or when a controller loads.
angular.element(document).ready(
function() {
componentHandler.upgradeAllRegistered();
});
or
$scope.$on('$viewContentLoaded', () => {
$timeout(() => {
componentHandler.upgradeAllRegistered();
})
});
Solution 5
There is a less brute force way to upgrade the elements: no need for checking intervals or upgrading the whole DOM when something changes. MutationObserver already tells you exactly what's changed.
window.addEventListener('load', function() {
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function( mutation ) {
if (mutation.addedNodes)
window.componentHandler.upgradeElements(mutation.addedNodes);
})
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
Related videos on Youtube
Comments
-
dantheta almost 2 years
I am aware of Angular Material which helps implement Material Design specification for use in Angular single-page applications.
I'm however taking a look at Material Design Lite alternative to integrate with my Angular project. I will like to know the best way to go about integrating Material Design Lite with and AngularJS app.
-
kelsmj almost 9 yearsYep, I have changed my project to reflect this. Thanks.
-
realappie over 8 yearsI am quite new to angular and would really appreciate it if you could make a jsfiddle as an example to me. I'm running into the same problems with angular & MDL as OP
-
dgrubelic about 8 yearsI find this to be working but there is a problem.. In latest version of MDL textfield autofocus is fixed and this isn't working when there is a $timeout call for componentHandler.upgradeAllRegistered(). It works without $timeout call, but there is still problem once you switch states in UI router.
-
MannIncognito about 8 yearsI used the first solution and it resolved my issue. Thanks!
-
Yann over 6 yearsAdditionally, upgrading all MDL components when ng-include loaded its content by registering on '$includeContentLoaded' event fixed random issues with navbar in my case.