Cannot read property 'template' of undefined in angular material table

Question

Table code with angular material.

<div class="example-container mat-elevation-z8">
  <div>
    <div class="example-header">
      <mat-form-field floatPlaceholder="never">
        <input matInput #filter placeholder="Filter users">
      </mat-form-field>
      <button mat-icon-button color="accent" (click)="create()">
          <mat-icon aria-label="Example icon-button with a add icon">add_circle</mat-icon>
        </button>
    </div>
    <div> 
    </div>
  </div>
 <mat-table >

      <ng-container matColumnDef="BloodPressure">
        <mat-header-cell> BloodPressure </mat-header-cell>
        <mat-cell *ngFor="let visit"> {{ visit?.bloodpressure }} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="UserName">
        <mat-header-cell> UserName </mat-header-cell>
        <mat-cell *ngFor="let visit"> {{ visit?.username }} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Height">
        <mat-header-cell > Height </mat-header-cell>
        <mat-cell *ngFor="let visit"> {{ visit?.height }} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Weight">
        <mat-header-cell > Weight </mat-header-cell>
        <mat-cell *ngFor="let visit"> {{ visit?.weight }} </mat-cell>
      </ng-container>

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

and also not able import the MatTableDataSource.

Showing error is

updated the code please suggest the changes

Thank you in advance

Answer 1

In my case, it was absence of headers.

<th mat-header-cell *matHeaderCellDef></th>