title: Angular material table - how to split all sub-elements into multiple rows
body: <p>I have data objects that I received from backend API that looks like this:</p>
  <pre><code>[{&quot;testNumber&quot;:1,
     &quot;students&quot;:[{&quot;name&quot;:&quot;Jane Doe&quot;,&quot;status&quot;:&quot;PASSED&quot;}, 
                 {&quot;name&quot;:&quot;John Doe&quot;,&quot;status&quot;:&quot;PASSED&quot;}]},
   {&quot;testNumber&quot;:2,
     &quot;students&quot;:[{&quot;name&quot;:&quot;Jane Doe&quot;,&quot;status&quot;:&quot;PASSED&quot;}, 
                 {&quot;name&quot;:&quot;John Doe&quot;,&quot;status&quot;:&quot;FAILED&quot;}]},
  etc...
  ]
  </code></pre>
  <p>And this is my code to retrieve the names:</p>
  <pre><code>&lt;ng-container matColumnDef=&quot;name&quot;&gt;
    &lt;th mat-header-cell *matHeaderCellDef &gt; Student Name &lt;/th&gt;
    &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;
        &lt;span *ngFor=&quot;let student of element.students&quot;&gt; {{student.name}} &lt;/span&gt;
    &lt;/td&gt;
  &lt;/ng-container&gt;
  </code></pre>
  <p>However, with the above code all the names are combined into one cell like this: Jane DoeJohn Doe...</p>
  <p>How do I split each name into one new row?
  Essentially what I want to display is in this format:</p>
  <pre><code>| Student Name  | Test 1    | Test 2    | Test 3    | Test N    |
  | Student 1     | Pass      | Fail      | Pass      | ...       |
  | Student 2     | Pass      | Pass      | Pass      |           |
  | Student 3     | Pass      | Pass      |           |           |
  | Student 4     | Pass      |           |           |           |
  </code></pre>
  <p>Also what would be the best way to use ngFor and fill cell data for 'test 1', 'test 2', etc...?</p>
  <p>This is my current data model in TypeScript (note that I control the backend services too so if data model change is required to make it easier on the front end, I could change it):</p>
  <pre><code>export class Test {
      testNumber: number;
      students: Student[];
  }
  export class Student {
      name: string;
      status: string;
  }
  </code></pre>
  <p>Thanks!</p>