title: Angular 7 mat-table with array in array
body: <p>I'm using Angular 7 and using mat-table.
  <a href="https://material.angular.io/components/table/overview" rel="nofollow noreferrer">https://material.angular.io/components/table/overview</a></p>
  
  <p>However, all examples I can find use a simple array to create the mat-table from. My array (see below) has an array in an array. I need to iterate over the Results array and then the "line_items" array. But can't find a single example of how this is done?</p>
  
  <p>Component.ts</p>
  
  <pre><code>&lt;mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChanged($event)"&gt;
  
      &lt;ng-container matColumnDef="line_items"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;line_items&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.line_items}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="name"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Name&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.name}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="number"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Number&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.number}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="category"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Category&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.category}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="original_budget"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Original Budget&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.original_budget}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="approved_cos"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Approved Cos&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.approved_cos}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="revised_budget"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Revised Budget&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.revised_budget}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="pending_budget_changes"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Pending Budget Changes&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.pending_budget_changes}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="projected_budget"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Projected Budget&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.projected_budget}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="loading"&gt;
        &lt;mat-footer-cell *matFooterCellDef colspan="6"&gt;
          Loading data...
        &lt;/mat-footer-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="noData"&gt;
        &lt;mat-footer-cell *matFooterCellDef colspan="6"&gt;
          No data.
        &lt;/mat-footer-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row, $event)" (dblclick)="onEdit(row, $event)"&gt;&lt;/mat-row&gt;
  
      &lt;mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':dataSource!=null}"&gt;&lt;/mat-footer-row&gt;
      &lt;mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(dataSource!=null &amp;&amp; dataSource.data.length==0)}"&gt;&lt;/mat-footer-row&gt;
  &lt;/mat-table&gt;
  </code></pre>
  
  <p>Array</p>
  
  <pre><code>{
    "results": [
      {
        "name": "General Requirements",
        "id": "1",
        "line_items": [
          {
            "name": "Project Manager",
            "number": "442",
            "category": "L",
            "original_budget": 30000,
            "approved_cos": 0,
            "revised_budget": 30000,
            "pending_budget_changes": 0,
            "projected_budget": 30000,
            "committed_costs": 0,
            "direct_costs": 0,
            "pending_costs_changes": 0,
            "projected_costs": 0,
            "forecast_to_complete": 30000,
            "estimated_cost_at_completion": 30000,
            "projected_over_under": 0
          },
          {
            "name": "Project Engineer",
            "number": "564",
            "category": "L",
            "original_budget": 17000,
            "approved_cos": 0,
            "revised_budget": 17000,
            "pending_budget_changes": 0,
            "projected_budget": 17000,
            "committed_costs": 0,
            "direct_costs": 0,
            "pending_costs_changes": 0,
            "projected_costs": 0,
            "forecast_to_complete": 17000,
            "estimated_cost_at_completion": 17000,
            "projected_over_under": 0
          },
          {
            "name": "Superintendent",
            "number": "766",
            "category": "L",
            "original_budget": 55000,
            "approved_cos": 0,
            "revised_budget": 55000,
            "pending_budget_changes": 0,
            "projected_budget": 55000,
            "committed_costs": 0,
            "direct_costs": 0,
            "pending_costs_changes": 0,
            "projected_costs": 0,
            "forecast_to_complete": 55000,
            "estimated_cost_at_completion": 55000,
            "projected_over_under": 0
          },
          {
            "name": "Project Coordinator",
            "number": "876",
            "category": "L",
            "original_budget": 5000,
            "approved_cos": 0,
            "revised_budget": 5000,
            "pending_budget_changes": 0,
            "projected_budget": 5000,
            "committed_costs": 0,
            "direct_costs": 0,
            "pending_costs_changes": 0,
            "projected_costs": 0,
            "forecast_to_complete": 5000,
            "estimated_cost_at_completion": 5000,
            "projected_over_under": 0
          }
        ]
      },
      {
        "name": "Doors And Windows",
        "id": "2",
        "line_items": [
          {
            "name": "Doors",
            "number": "600",
            "category": "O",
            "original_budget": 2000,
            "approved_cos": 0,
            "revised_budget": 2000,
            "pending_budget_changes": 0,
            "projected_budget": 2000,
            "committed_costs": 0,
            "direct_costs": 0,
            "pending_costs_changes": 0,
            "projected_costs": 0,
            "forecast_to_complete": 2000,
            "estimated_cost_at_completion": 2000,
            "projected_over_under": 0
          },
          {
            "name": "Doors",
            "number": "600",
            "category": "S",
            "original_budget": 67000,
            "approved_cos": 0,
            "revised_budget": 67000,
            "pending_budget_changes": 0,
            "projected_budget": 67000,
            "committed_costs": 0,
            "direct_costs": 0,
            "pending_costs_changes": 0,
            "projected_costs": 0,
            "forecast_to_complete": 67000,
            "estimated_cost_at_completion": 67000,
            "projected_over_under": 0
          }
        ]
      },
      {
        "name": "Finishes",
        "id": "3",
        "line_items": [
          {
            "name": "Kitchen Sink",
            "number": "800",
            "category": "O",
            "original_budget": 5000,
            "approved_cos": 0,
            "revised_budget": 5000,
            "pending_budget_changes": 0,
            "projected_budget": 5000,
            "committed_costs": 0,
            "direct_costs": 0,
            "pending_costs_changes": 0,
            "projected_costs": 0,
            "forecast_to_complete": 5000,
            "estimated_cost_at_completion": 5000,
            "projected_over_under": 0
          }
        ]
      }
  
  
    ]
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I tried the below, hoping it would work, but nope... </p>
  
  <pre><code>&lt;ng-container *ngFor="let budget of budgets"&gt;
  
      &lt;ng-container *ngFor="let item of budget.line_items"&gt;
  
        {{item | json}}
  
    &lt;mat-table [dataSource]="item" matSort (matSortChange)="sortChanged($event)"&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/59vAm.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/59vAm.gif" alt="enter image description here"></a></p>