Angular 4 Material table wont compile: Unexpected closing tag

Question

I am working on a Angluar 4 Project with Material. I am trying to implement a table from Angular Material. The Problem is that the table wont compile.

Html:

<mat-table [dataSource]="dataSource">

  <ng-container matColumnDef "name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef "key">
    <mat-header-cell *matHeaderCellDef> Key </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.Key}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef "reason">
    <mat-header-cell *matHeaderCellDef> reason </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.reason}}</mat-cell>
  </ng-container>

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

</mat-table>

DataSource:

  export class ProjectDataSource extends DataSource<any>{
constructor(private project:ProjectComponent){
  super();
}

connect(): Observable<Project[]>{
return this.project.returnDeadProjectList();
}

disconnect(){}

I dont think the problem has to do with the DataSouce. But still i am converting an array to an Observable in the returnDeadProjectList() that contains multiple objects. When I load the page the array is still empty but it should still work.

Error message: compiler.js:466 Uncaught Error: Template parse errors: Unexpected closing tag "ng-container". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("me </mat-header-cell> <mat-cell *matCellDef="let project">{{project.name}}</mat-cell> [ERROR ->]</ng-container> compiler.js:466 Uncaught Error: Template parse errors: Unexpected closing tag "ng-container". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("me </mat-header-cell> <mat-cell *matCellDef="let project">{{project.name}}</mat-cell> [ERROR ->]</ng-container> compiler.js:466 Uncaught Error: Template parse errors: Unexpected closing tag "ng-container". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("me </mat-header-cell> <mat-cell *matCellDef="let project">{{project.name}}</mat-cell> [ERROR ->]</ng-container> Thanks for the help.

Answer 1

I think you are missing ,

 <ng-container matColumnDef="name">

similarly,

 <ng-container matColumnDef="key">

etc

Updated HTML with fix:

<mat-table [dataSource]="dataSource">

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="key">
    <mat-header-cell *matHeaderCellDef> Key </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.Key}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="reason">
    <mat-header-cell *matHeaderCellDef> reason </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.reason}}</mat-cell>
  </ng-container>

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

</mat-table>

Answer 2

Answer for your new error:

mat-row element's *matRowDef should be project but you didn't change that one. That's why you getting that error.

Your code:

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

Updated code:

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