Angular Material integration

[matheusgrieger]

Is there a way to integrate angular-loading-bar with angular-material?

With the way the loading bar is currently created I couldn't make it work...

If not, is there a way to allow it?

[davidenke]

The problem is that the loadingBarTemplate template is not compiled. A little workaround is to manually trigger the compiler at runtime. You can use the cfpLoadingBar:started event for that.

angular
  .module('myApp', ['angular-loading-bar'])
  .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
    // set the material linear progress bar as template
    cfpLoadingBarProvider.loadingBarTemplate = '<md-progress-linear id="cfp-loading-bar" md-mode="indeterminate"></md-progress-linear>';
  }])
  .run(['$compile', '$window', '$rootScope', '$mdUtil', function($compile, $window, $rootScope, $mdUtil) {
    // wait for the element to be applied to the dom
    $mdUtil.nextTick(function () {
        // compile the element
        $compile(angular.element($window.document.getElementById('cfp-loading-bar')))($rootScope);
      });
  }]);

[matheusgrieger]

I've tried your code, but it didn't work for me.

Can you provide a working plunker?

Thank you for your answer and time!

[davidenke]

Here is an example with an indeterminate linear progress bar.

[CrunchyArtie]

I don't understand why but this don't work in my project. The bar appear but still "empty" and no loading animation

[wosevision]

For anyone who might've struggled with this, I think the hint lies in @davidenke 's sentence:

You can use the cfpLoadingBar:started event for that.

It was left out of the code example (not sure why), so anyone copy/pasting that directly might have run into this. Also not sure why it seems to work without the event in some instances, but either way...

$rootScope.$on('cfpLoadingBar:started', event => {
  $mdUtil.nextTick( () => $compile(
    element(document.getElementById('loading-spinner'))
  )($rootScope) );
});

..is what got it working for me.