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 ?

Be sure to add `MdTableModule` in your `imports` (`NgModule`). — developer033, Jul 09 '17 at 15:11
@DavidGabrichidze I just copy paste the whole html,ts and css from angular material table. — Chatra, Jul 09 '17 at 15:42

score 25 · Accepted Answer · answered Jul 09 '17 at 15:42

25

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

Include this module in your app's imports

answered Jul 09 '17 at 15:42

Andrew Seguin

3,042
1
12
9

1

Awesome, Thank you! – Chatra Jul 09 '17 at 15:46

score 2 · Answer 2 · answered Aug 09 '17 at 08:22

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.

answered Aug 09 '17 at 08:22

Sithija Piyuman Thewa Hettige

1,768
20
26

1

Needs to be import { CdkTableModule } from '@angular/cdk/table'; – Ben Taliadoros Oct 02 '17 at 14:59

md-table in Angular Material 2

2 Answers2

Linked