md-table in Angular Material 2

Question

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 ?

Answer 1

The cdkHeaderCellDef and cdkCellDef are part of the @angular/cdk library and exported in the CdkTableModule.

Include this module in your app's imports

Answer 2

 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.