title: Cannot read property 'template' of undefined
body: <p><a href="https://i.stack.imgur.com/G5QPW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G5QPW.png" alt="enter image description here"></a></p>
  
  <p>Unable to display data in table</p>
  
  <p>** Typescript code **</p>
  
  <pre><code>  displayedColumns = ['bloodpressure', 'username', 'weight', 'height'];
     @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
    dataSource = new VisitDataSource(this.dataService);
  
  export interface Visit {
    ID: number;
    username: string;
    height: number;
    weight: number;
  }
  export class VisitDataSource extends DataSource&lt;any&gt; {
      constructor(private dataService: DataService) {
        super();
      }
      connect(): Observable&lt;Visit[]&gt; {
        return this.dataService.getvisits();
      }
      disconnect() {}
  }
  </code></pre>
  
  <p>** HTML file **
  For displaying the data in the table i am using material table with pagination</p>
  
  <pre><code>&lt;div class="example-container mat-elevation-z8"&gt;
  &lt;mat-table #table [dataSource]="dataSource"&gt;
  
        &lt;ng-container matColumnDef="bloodpressure"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; BloodPressure &lt;/mat-header-cell&gt;
          &lt;mat-cell *ngFor="let visit of Visit"&gt; {{ visit.ID }} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="username"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; UserName &lt;/mat-header-cell&gt;
          &lt;mat-cell *ngFor="let visit of Visit"&gt; {{ visit.username }} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="height"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; Height &lt;/mat-header-cell&gt;
          &lt;mat-cell *ngFor="let visit of Visit"&gt; {{ visit.height }} &lt;/mat-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;"&gt;&lt;/mat-row&gt;
      &lt;/mat-table&gt;
      &lt;mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"&gt;&lt;/mat-paginator&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>** DATA Service **
  Retrieving data from the server </p>
  
  <pre><code>@Injectable()
  export class DataService {
  constructor(private http: Http, private authenticationService: AuthenticationService) {}
  getvisits(): Observable&lt;Visit[]&gt; {
      const headers = new Headers({'Content-Type': 'application/json',});
      const options = new RequestOptions({ headers: headers });
     return this.http.get('/getallvisits/', options)
       .pipe(map( res =&gt; res.json() as Visit[])
         );
  
  }
  </code></pre>
  
  <p>}
   I approach this from material.angular.io</p>