fix(grid_list): issue with changes happening after being checked

 - setTimeout on layout after content check happens.
 - add sanity check test for component lifecycle.

ng2-material/components/grid_list/grid_list.ts

@@ -12,6 +12,7 @@ import {
 import {ListWrapper} from 'angular2/src/facade/collection';
 import {StringWrapper, isPresent, isString, NumberWrapper} from 'angular2/src/facade/lang';
 import {Math} from 'angular2/src/facade/math';
+import {AfterContentInit} from "angular2/core";
 
 // TODO(jelbourn): Set appropriate aria attributes for grid list elements.
 // TODO(jelbourn): Animations.
@@ -82,15 +83,15 @@ export class MdGridList implements AfterContentChecked {
 
       this.rowHeightMode = RowHeightMode.RATIO;
       this.rowHeightRatio =
-          NumberWrapper.parseFloat(ratioParts[0]) / NumberWrapper.parseFloat(ratioParts[1]);
+        NumberWrapper.parseFloat(ratioParts[0]) / NumberWrapper.parseFloat(ratioParts[1]);
     } else {
       this.rowHeightMode = RowHeightMode.FIXED;
       this.fixedRowHeight = value;
     }
   }
 
   ngAfterContentChecked() {
-    this.layoutTiles();
+    setTimeout(() => this.layoutTiles(), 0);
   }
 
   /** Computes and applies the size and position for all children grid tiles. */
@@ -230,14 +231,13 @@ export class MdGridList implements AfterContentChecked {
 })
 @View({
   template: `
-    <style>@import "ng2-material/components/grid_list/grid-list.css";</style>
     <figure>
       <ng-content></ng-content>
     </figure>`,
   encapsulation: ViewEncapsulation.None
 })
 export class MdGridTile implements OnDestroy,
-    OnChanges {
+  OnChanges {
   gridList: MdGridList;
   _rowspan: number;
   _colspan: number;

test/components/grid_list/grid_list_spec.ts

@@ -0,0 +1,15 @@
+import {componentSanityCheck} from "../../util";
+
+export function main() {
+  let template = `
+    <md-grid-list cols="4" row-height="50px" gutter-size="2em" id="complex">
+      <md-grid-tile rowspan="1" colspan="2"> Tile #1 </md-grid-tile>
+      <md-grid-tile rowspan="1" colspan="1"> Tile #2 </md-grid-tile>
+      <md-grid-tile rowspan="3" colspan="1"> Tile #3 </md-grid-tile>
+      <md-grid-tile rowspan="2" colspan="2"> Tile #4 </md-grid-tile>
+      <md-grid-tile rowspan="1" colspan="3"> Tile #5 </md-grid-tile>
+    </md-grid-list>
+  `;
+  componentSanityCheck('Grid List', 'md-grid-list', template);
+}
+