title: Angular - mat-grid-list not displaying children passed by <ng-content>
body: <p>I'm using angular material design components and want to create a custom grid-list component. The component would adapt the number of grid-list-columns based on its size. The components template would look like this:  </p>
  
  <pre><code>&lt;mat-grid-list [cols]="adaptiveCols"&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/mat-grid-list&gt;
  </code></pre>
  
  <p>And the component will be used like this:  </p>
  
  <pre><code>&lt;my-grid&gt;
      &lt;mat-grid-tile&gt;tile_content&lt;/mat-grid-tile&gt;
      &lt;mat-grid-tile&gt;tile_content&lt;/mat-grid-tile&gt;
      &lt;mat-grid-tile&gt;tile_content&lt;/mat-grid-tile&gt;
  &lt;/my-grid&gt;
  </code></pre>
  
  <p>So you would think this would display a <code>&lt;mat-grid-list&gt;</code> with 3 <code>&lt;mat-grid-tile&gt;</code>s in them, and the resulting DOM will contain those elements. But you don't see the tiles nor their content.</p>
  
  <p>Adding more tiles to the grid-list and using a fixed <code>rowHeight</code> doesn't affect the <code>height</code>-attribute of the grid-list (from what I could figure out the grid-list calculates its height based on the number and col-/rowspan of tiles). That makes you think the grid-list doesn't "see" the <code>&lt;mat-grid-tile&gt;</code>-children. Looking at the <a href="https://github.com/angular/material2/blob/8830486039d98d29a9dcf356bbcd7a8124a02478/src/lib/grid-list/grid-list.ts#L137" rel="nofollow noreferrer">source code of the grid-list</a> and setting a breakpoint on <code>_layoutTiles()</code> confirmed this, in this method <code>this._tiles</code> is empty.<br>
  My guess is the angular <code>ContentChildren</code>-annotation (<a href="https://github.com/angular/material2/blob/8830486039d98d29a9dcf356bbcd7a8124a02478/src/lib/grid-list/grid-list.ts#L68" rel="nofollow noreferrer">here</a>) doesn't find the tile-children in the first code snippet because it only works on the first level of DOM, and that first level we only have the <code>&lt;ng-content&gt;</code>.</p>
  
  <p>The desired result is clear, I want to be able to use a custom grid-list component, give it some children and use its features. But for some reason, angular doesn't want me to succeed, or I still have the stuff to learn.</p>
  
  <p>I'm using angular 6.1 and installed the material-components using the <a href="https://material.angular.io/" rel="nofollow noreferrer">official docs</a>.</p>