Material Design Lite Integration with AngularJS [closed]

Answer 1

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!

Answer 2

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();
          })
        })
      });

Answer 3

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
  });
});

Answer 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();
  })
});

Answer 5

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