title: Displaying data for Dynamic Angular Material Table
body: <p>I am trying to create a dynamic angular material table with a custom header which i intend to use later for validation for styling the table. I can successfully display the tableHeaders but i have no success in displaying the tableData. There is no error. I am kinda beginner in Angular so any help would be appreciated, Thanks!</p>
  
  <p>TS:</p>
  
  <pre><code>    export class DataTableComponent implements OnInit {
      @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
      @ViewChild(MatSort, { static: true }) sort: MatSort;
      dataSource
  
      tableHeader = [
          {
              name: 'id',
              displayName: 'ID',
              type: 'number'
          },
          {
              name: 'name',
              displayName: 'Name',
              type: 'number'
          },
          {
              name: 'age',
              displayName: 'Age',
              type: 'number'
          },
      ];
  
      tableData = [
          {
              id: 1,
              name: 'Bogart',
              age: 10,
          },
          {
              id: 2,
              name: 'John',
              age: 20,
          },
          {
              id: 3,
              name: 'Mark',
              age: 30,
          }
      ];
  
      constructor() { }
  
      ngOnInit() {
          this.dataSource = new MatTableDataSource(this.tableData);
          this.dataSource.sort = this.sort;
      }
  
      objectKeys(obj) {
          return Object.keys(obj);
      }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;table mat-table class="lmat-elevation-z8" [dataSource]="dataSource" matSort matSortActive="id"
          matSortDirection="asc" matSortDisableClear&gt;
  
          &lt;ng-container [matColumnDef]="tableData" *ngFor="let tableData of objectKeys(tableHeader)"&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;
                  &lt;!--arrowPosition="before" --&gt;
                  {{tableHeader[tableData].displayName}}
              &lt;/th&gt;
  
              &lt;td mat-cell *matCellDef="let element" class="mat-column-vinCode"&gt;
                  {{element[tableData]}}&lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;tr mat-header-row *matHeaderRowDef="objectKeys(tableHeader); sticky: true"&gt;&lt;/tr&gt;
          &lt;tr mat-row *matRowDef="let row; columns: objectKeys(tableHeader)"&gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div class="mat-table__bottom mat-table__bottom--padding"&gt;
      &lt;mat-spinner [diameter]="20" *ngIf="dataSource.loading$ | async"&gt;&lt;/mat-spinner&gt;
      &lt;mat-paginator [pageSize]="6" [pageSizeOptions]="[3, 6, 15]" [length]="dataSource.paginatorTotal$ | async"
          [showFirstLastButtons]="true"&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>TABLE:</p>
  
  <p><a href="https://i.stack.imgur.com/OLX2y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OLX2y.png" alt="enter image description here"></a></p>