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

Answer 2

You can use the attribute md-on-layout specified as part of md-grid-list directive to pass an expression or a function to it. This gets executed once your layout changes.

Directive use

<md-grid-list md-cols-xs="1" 
  md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" 
  md-row-height-gt-md="1:1" md-row-height="2:2" 
  md-gutter="12px" md-gutter-gt-sm="8px" 
  md-on-layout="afterLayout()">
    <md-grid-tile class="gray" md-rowspan="3" md-colspan="2" md-colspan-sm="1" md-colspan-xs="1">
    <md-grid-tile-footer>
      <h3>#1: (3r x 2c)</h3>
    </md-grid-tile-footer>
  </md-grid-tile>

</md-grid-list>

Controller

$scope.afterLayout = function () {
  console.log("Layout complete");
}

I have created a codepen with the implementation which does a console.log on layout change: http://codepen.io/anon/pen/ZWwmNw