title: material angular table multiple rows directive
body: <p>I want to make an expandable datatable using mat-table from <a href="https://material.angular.io/" rel="nofollow noreferrer">material angular 2</a>. A row CAN contain subrows.</p>
  
  <p>My rows data is an object that can contain other sub-objects.</p>
  
  <p>Using material angular table component or mat-table, it is possible to define multiple rows types and chose which one to apply to the current iteration.</p>
  
  <hr>
  
  <p>But is there a way to generate multiple kind of rows during the same iteration ?</p>
  
  <p>Am I forced to add the sub-items to the datasource that feeds the mat-tabke, or it possible to give it items that contain sub-items and generate 1 row with the item data and 1 row for each sub-item ?</p>
  
  <hr>
  
  <p>I tried to follow the model from <a href="https://stackoverflow.com/a/46931989/6115238">this answer</a>.</p>
  
  <p>So I have these rows defined in my component.ts</p>
  
  <pre><code>&lt;mat-row *matRowDef="let rule; columns: ['expandedDetail']; when: isExpansionDetailRow"
                   [@detailExpand]="rule.element == expandedElement ? 'expanded' : 'collapsed'"
                   style="overflow: hidden"&gt;
          &lt;/mat-row&gt;
          &lt;mat-row *matRowDef="let rule; columns: ['expandedDetail']; when: isExpansionDetailRow"
                   [@detailExpand]="rule.element == expandedElement ? 'expanded' : 'collapsed'"
                   style="overflow: hidden"&gt;
          &lt;/mat-row&gt;
  </code></pre>
  
  <p>But it seems that when the isExpansionDetail is true and the second row type is chosen, it 'overrides' the first one, which wont be generated.</p>