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

What's your @angular/core, @angular/material and @angular/cdk version? — Patryk Brejdak
@ Aravind -- code means in code i have div tags and other links — Narendar
I am updating the code please look into that and suggest me the changes — Narendar

oosmoos oosmoos · Accepted Answer · 2017-12-13T01:35:50

It's hard to know without seeing your component.ts file so in the future I would include that with your post as well as your version numbers.

Your MatTableDataSource import should be: import {MatTableModule} from '@angular/material/table'; As defined here: https://material.angular.io/components/table/api

Though that's dependent on what version you have. Check your @angular folder and verify that the directory is there.

Also it doesn't look like you're importing your data source to your table. Your table element in your html file should look like this: <mat-table #table [dataSource]="dataSource"> Where "dataSource" is the data stream that you're binding to the table. This is declared in your component.ts file.

MatTable extends CDK data-table and there's some brief but good information about how the datasource works in this link. https://material.angular.io/guide/cdk-table

Hope this helps!

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

2 Answers