Angular6 - TypeError: Cannot read property 'template' of undefined

Question

I am still getting error from the title. I have already checked all solutions from similar topics and nothing works. Here is my HTML file:

<div>
 <br>
 <mat-card>
 <button mat-raised-button color="primary">Add</button>
<br><br>
<mat-divider></mat-divider>
<br>
<table mat-table [dataSource]="events">

  <ng-container matColumnDef="EventName">
    <th mat-header-cell *matHeaderCellDif>Name</th>
    <td mat-cell *matCellDef="let element">{{element.EventName}}</td>
  </ng-container>

  <ng-container matColumnDef="EventLocation">
    <th mat-header-cell *matHeaderCellDif>Location</th>
    <td mat-cell *matCellDef="let element">{{element.EventLocation}}</td>
  </ng-container>

  <ng-container matColumnDef="EventDate">
    <th mat-header-cell *matHeaderCellDif>Date</th>
    <td mat-cell *matCellDef="let element">{{element.EventDate}}</td>
  </ng-container>

  <ng-container matColumnDef="EventReq">
    <th mat-header-cell *matHeaderCellDif>Req</th>
    <td mat-cell *matCellDef="let element">{{element.EventReq}}</td>
  </ng-container>

  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDif>Actions</th>
    <td mat-cell *matCellDef="let element">
      <button mat-button color="primary">Details</button>
    </td>
  </ng-container>

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

</table>

I am a beginner in using angular and angular material library, so I probably missed a command.

events.component.ts:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Event } from '../event.module';
import { EventService } from '../_services/event/event.service';
import { MatTableDataSource } from '@angular/material';
@Component({
  selector: 'app-events',
  templateUrl: './events.component.html',
  styleUrls: ['./events.component.css']
})
export class EventsComponent implements OnInit {
  events: Event[];
  displayedColumns = ['EventName', 'EventLocation', 'EventDate', 'EventReq'];

  constructor(private eventService: EventService, private router: Router) {}

  ngOnInit() {
    this.fetchEvents();
  }

  fetchEvents() {
    this.eventService.getEvents().subscribe((data: Event[]) => {
      this.events = data;
      console.log('Waiting ...');
      console.log(this.events);
    });
  }
}

Any suggestion would be very helpful. Thank you for your time.

Error: 1 Second part: 2

This error appears in the console four times, probably to every ng-container.

xrobert35 xrobert35 · Accepted Answer · 2018-09-20T09:38:13

You have write : matHeaderCellDif and not matHeaderCellDef

So the table try to selected the template with MatHeaderCellDef selector (which return undefined)

Angular6 - TypeError: Cannot read property 'template' of undefined

2 Answers