How to execute code after Angular Material animations

Question

I'm using Angular Material on a website. Being a responsive-framework, it handles rendering at different window-sizes. When changing the window size, it adds some animations of the layout changing and controls moving around

Example: https://material.angularjs.org/latest/demo/gridList (open the link and resize the window)

I have some WebGL canvas on the tiles shown on the example that need to be redrawn after the animation completes (and the container has it's final dimensions).

How can I get some callback or promise for the UI animations to be complete?

Answer 1

The solution for this problem, is to add the attribute md-on-layout to md-grid-list (docs).

Example:

HTML:

<md-grid-list md-on-layout="update($event)" ...>
  <md-grid-tile>...</md-grid-tile>
</md-grid-list>

Controller:

$scope.update = function($event){
    console.log("Updating layout."); 
}