Angular Mat Table Error: Missing definitions for header and row

Question

I am using MatTable from Angular Material 5.2.5. I trying to populate the table with data which is got through a server request.

The UI

  <mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="number">
      <mat-header-cell *matHeaderCellDef>#</mat-header-cell>
      <mat-cell *matCellDef="let i = index">{{i + 1}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
      <mat-cell *matCellDef="let user">{{user.userName}}</mat-cell>
    </ng-container>
    ...
  </mat-table>

The component code

  public dataSource = new MatTableDataSource<User>()
  public displayedColumns = ['number', 'name', 'email', 'phone', 'joiningDate']

Adding data to dataSource on receiving data from the server

 onGettingPartnerUsers(userList: User[]) {
  console.log('userList', userList)
  if (!Util.isFilledArray(userList)) {
    // TODO show message no user found
  } else {
    this.dataSource.data = userList
  }
 }

I am getting the list of users. But this error is getting thrown.

Error: Missing definitions for header and row, cannot determine which columns should be rendered.

What is the mistake?

PS: I am following this blog on using MatTable

Answer 1

You must add mat-row and mat-header-row(optional) tags inside your table:

<mat-table>
  .... columns definitions

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

See more examples here https://material.angular.io/components/table/overview