title: Angular Material Table Error: Can't bind to 'mdHeaderRowDef' since it isn't a known property of 'md-header-row'
body: <p>I'm trying to convert a CDK data-table to a Material Design styled data-table (see: <a href="https://material.angular.io/components/table/overview" rel="noreferrer">https://material.angular.io/components/table/overview</a>), but when I change the cdk prefixes to md, I get the following error...</p>
  
  <hr>
  
  <blockquote>
    <p>Uncaught Error: Template parse errors: Can't bind to 'mdHeaderRowDef'
    since it isn't a known property of 'md-header-row'.
    1. If 'md-header-row' is an Angular component and it has 'mdHeaderRowDef' input, then verify that it is part of this module.
    2. If 'md-header-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.</p>
  </blockquote>
  
  <hr>
  
  <p>Every answer I've found online tells me that I need to import CdkTableModule, but I have done so &amp; cdk tables work perfectly.</p>
  
  <pre><code>import {Component, OnInit, ViewChild} from '@angular/core';
  import {DataSource} from '@angular/cdk';
  import { CdkTableModule } from '@angular/cdk';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/observable/of';
  import 'rxjs/add/operator/first';
  import 'rxjs/add/operator/startWith';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/operator/switchMap';
  import 'rxjs/add/observable/merge';
  import 'rxjs/add/observable/of';
  import 'rxjs/add/observable/interval';
  import 'rxjs/add/operator/map';
  </code></pre>
  
  <p>I am importing CdkTableModule, and when I use the cdk prefix, the table displays as expected...</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;md-table [dataSource]="dataSource"&gt;
  
    &lt;ng-container cdkColumnDef="number"&gt;
      &lt;md-header-cell *cdkHeaderCellDef&gt; number &lt;/md-header-cell&gt;
      &lt;md-cell *cdkCellDef="let element"&gt;&lt;a routerLink="{{element.number}}"&gt; {{element.number}} &lt;/a&gt;&lt;/md-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container cdkColumnDef="book"&gt;
      &lt;md-header-cell *cdkHeaderCellDef&gt; book &lt;/md-header-cell&gt;
      &lt;md-cell *cdkCellDef="let element"&gt; {{element.book}} &lt;/md-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;md-header-row *cdkHeaderRowDef="['number', 'book']"&gt;&lt;/md-header-row&gt;
    &lt;md-row *cdkRowDef="let row; columns: ['number', 'book']"&gt;&lt;/md-row&gt;
  &lt;/md-table&gt;
  </code></pre>
  
  <p><strong>RESULT: So far so good</strong>... 
  <a href="https://i.stack.imgur.com/2cyJy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2cyJy.png" alt="enter image description here"></a>
  but if i change "cdk" to "md"</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;md-table [dataSource]="dataSource"&gt;
  
    &lt;ng-container mdColumnDef="number"&gt;
      &lt;md-header-cell *mdHeaderCellDef&gt; number &lt;/md-header-cell&gt;
      &lt;md-cell *mdCellDef="let element"&gt;&lt;a routerLink="{{element.number}}"&gt; {{element.number}} &lt;/a&gt;&lt;/md-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container mdColumnDef="book"&gt;
      &lt;md-header-cell *mdHeaderCellDef&gt; book &lt;/md-header-cell&gt;
      &lt;md-cell *mdCellDef="let element"&gt; {{element.book}} &lt;/md-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;md-header-row *mdHeaderRowDef="['number', 'book']"&gt;&lt;/md-header-row&gt;
    &lt;md-row *mdRowDef="let row; columns: ['number', 'book']"&gt;&lt;/md-row&gt;
  &lt;/md-table&gt;
  </code></pre>
  
  <p><strong>RESULT: Broken :(</strong>
  <a href="https://i.stack.imgur.com/QYafG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QYafG.png" alt="enter image description here"></a></p>
  
  <p>I've tried importing other modules... including MdTableModule &amp; MdTable, but that hasn't proven helpful either. Any ideas?</p>
  
  <p>P.S. Here's my main app.module.ts import statement in case that helps</p>
  
  <pre><code>imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  AppRoutingModule,
  ReactiveFormsModule,
  BrowserAnimationsModule,
  MdAutocompleteModule,
  MdButtonModule,
  MdButtonToggleModule,
  MdCardModule,
  MdCheckboxModule,
  MdChipsModule,
  MdTableModule,
  MdDatepickerModule,
  MdDialogModule,
  MdExpansionModule,
  MdGridListModule,
  MdIconModule,
  MdInputModule,
  MdListModule,
  MdMenuModule,
  MdCoreModule,
  MdPaginatorModule,
  MdProgressBarModule,
  MdProgressSpinnerModule,
  MdRadioModule,
  MdRippleModule,
  MdSelectModule,
  MdSidenavModule,
  MdSlideToggleModule,
  MdSliderModule,
  MdSnackBarModule,
  MdSortModule,
  MdTabsModule,
  MdToolbarModule,
  MdTooltipModule,
  MdNativeDateModule,
  CdkTableModule,
  StyleModule
   ]
  </code></pre>