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 ?

Samadhi

Be sure to add MdTableModule in your imports (NgModule). – Fencesitter

@Fencesitter Yes, I added before itself – Samadhi

can you provide whole html for table definition? – Astigmatism

@DavidGabrichidze I just copy paste the whole html,ts and css from angular material table. – Samadhi

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

Prat

Awesome, Thank you! – Samadhi

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.

Bute

Needs to be import { CdkTableModule } from '@angular/cdk/table'; – Mcdougall