I am working with Angular Material Table. In Html code, there is
<ng-container cdkColumnDef="userId">
<md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
</ng-container>
I found out that cdkHeaderCellDef and cdkCellDef are from CDK Table
I am getting error saying "Can't bind to 'cdkHeaderRowDef' since it isn't a known property of 'md-header-row'."
How can I solve this ?
The cdkHeaderCellDef
and cdkCellDef
are part of the @angular/cdk
library and exported in the CdkTableModule
.
Include this module in your app's imports
import { CdkTableModule } from '@angular/cdk';
add this to the top of your component and to the top of app.module.ts
and then on app.module.ts add CdkTableModule to imports as given below.
@NgModule({
declarations: [
],
imports: [
CdkTableModule
],
providers: [
],
bootstrap: [AppComponent],
})
there may be declarations and providers but in the above snippet they are ignored for convenience.