Angular Material table: can't bind to 'matRowDefColumn' - html

Question

I am trying to use an Angular Material table. I imported the module but I get a template parse error.
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>
Imports in the component:
import { Component, OnInit } from '#angular/core';
import {Observable} from "rxjs"
import { HttpClient, HttpErrorResponse } from '#angular/common/http';
import { ProjectService } from '../services/project.service';
import { UserService } from '../services/user.service';
import { Subject } from 'rxjs/Subject';
import { DataSource } from '#angular/cdk/collections';
DataSource: I return an Array as an Observable with the returnDeadProjectList()
export class ProjectDataSource extends DataSource<any>{
constructor(private project:ProjectComponent){
super();
}
connect(): Observable<Project[]>{
return this.project.returnDeadProjectList();
}
disconnect(){}
Imports from app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { CommonModule } from "#angular/common";
import 'hammerjs';
import { ProjectService } from './services/project.service';
import { UserService } from './services/user.service';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { FormsModule } from '#angular/forms';
import { MatInputModule, MatButtonModule, MatExpansionModule, MatDatepickerModule, MatNativeDateModule, MatToolbarModule, MatListModule, MatIconModule, MatProgressSpinnerModule, MatSlideToggleModule, MatTableModule, MatPaginatorModule } from '#angular/material';
import { AppComponent } from './app.component';
import { MyFormComponent } from './my-form/my-form.component';
import { BitbucketComponent } from './bitbucket/bitbucket.component';
import { UserComponent } from './user/user.component';
import { ProjectComponent } from './project/project.component';
import { CdkTableModule } from '#angular/cdk/table';
The error I get is:
compiler.js:466 Uncaught Error: Template parse errors:
Can't bind to 'matRowDefColumn' since it isn't a known property of 'mat-row'.
1. If 'mat-row' is an Angular component and it has 'matRowDefColumn' input, then verify that it is part of this module.
2. If 'mat-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component.
If I write the CUSTOM_ELEMENTS_SCHEMA in schemas: [ ], I get an different error:
compiler.js:466 Uncaught Error: Template parse errors:
Property binding matRowDefColumn not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "#NgModule.declarations". ("` `<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
[ERROR ->]<mat-row *matRowDef="let row; column: displayedColumns;"></mat-row>
Has someone an idea what I am missing? I should have all the imports I need but somehow it can't find the elements. Furthermore, I don't even use matHeaderRowDef

Answer 1

The code snippet
<mat-row *matRowDef="let row; column: displayedColumns;"></mat-row>
has a issue with the property name. MatRowDef has property columns not column.
Change it to
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> and it should work after that.

Answer 2

Add this code in your .component.ts and in app.module.shared.ts.
It works for me
import {
MatPaginator, MatSort, MatTable, MatTableModule, MatTabHeader,
MatHeaderRow, MatHeaderCell, MatHeaderCellDef, MatHeaderRowDef,
MatSortHeader, MatRow, MatRowDef, MatCell, MatCellDef,
_MatCell, _MatCellDef, _MatHeaderCellDef, _MatHeaderRowDef
} from '#angular/material';
#NgModule({
imports: [MatPaginator, MatSort, TableDataSource,
CdkTableModule, MatTable, MatTableModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
declarations: [
MatTabHeader,
MatHeaderRow,
MatHeaderCell,
MatHeaderCellDef,
MatHeaderRowDef,
MatSortHeader,
MatRow,
MatRowDef,
MatCell,
MatCellDef,
_MatCell,
_MatCellDef,
_MatHeaderCellDef,
_MatHeaderRowDef
]
})