title: Angular material 2 data table Error Uncaught Error: Template parse errors:
body: <p>The md-table provides a Material Design styled data-table that can be used to display rows of data.</p>
  
  <p>This table builds on the foundation of the CDK data-table and uses a similar interface for its data source input and template, except that its element selectors will be prefixed with md- instead of cdk-</p>
  
  <h2>I have this error Uncaught Error: Template parse errors:</h2>
  
  <h3>This is my products.component.html</h3>
  
  <pre><code>          &lt;md-card class="chart-container"&gt;
              &lt;div class="example-container mat-elevation-z8"&gt;
                &lt;md-table #table [dataSource]="dataSource"&gt;
  
                  &lt;!--- Note that these columns can be defined in any order.
                  The actual rendered columns are set as a property on the row definition" --&gt;
  
                  &lt;!-- ID Column --&gt;
                  &lt;ng-container cdkColumnDef="userId"&gt;
                    &lt;md-header-cell *cdkHeaderCellDef&gt; ID &lt;/md-header-cell&gt;
                    &lt;md-cell *cdkCellDef="let row"&gt; {{row.id}} &lt;/md-cell&gt;
                  &lt;/ng-container&gt;
  
                  &lt;!-- Progress Column --&gt;
                  &lt;ng-container cdkColumnDef="progress"&gt;
                    &lt;md-header-cell *cdkHeaderCellDef&gt; Progress &lt;/md-header-cell&gt;
                    &lt;md-cell *cdkCellDef="let row"&gt; {{row.progress}}% &lt;/md-cell&gt;
                  &lt;/ng-container&gt;
  
                  &lt;!-- Name Column --&gt;
                  &lt;ng-container cdkColumnDef="userName"&gt;
                    &lt;md-header-cell *cdkHeaderCellDef&gt; Name &lt;/md-header-cell&gt;
                    &lt;md-cell *cdkCellDef="let row"&gt; {{row.name}} &lt;/md-cell&gt;
                  &lt;/ng-container&gt;
  
                  &lt;!-- Color Column --&gt;
                  &lt;ng-container cdkColumnDef="color"&gt;
                    &lt;md-header-cell *cdkHeaderCellDef&gt;Color&lt;/md-header-cell&gt;  
                    &lt;md-cell *cdkCellDef="let row" [style.color]="row.color"&gt; {{row.color}} &lt;/md-cell&gt;
                  &lt;/ng-container&gt;
  
                  &lt;md-header-row *cdkHeaderRowDef="displayedColumns"&gt;&lt;/md-header-row&gt; &lt;----- Heare is the problem
                  &lt;md-row *cdkRowDef="let row; columns: displayedColumns;"&gt;&lt;/md-row&gt;  &lt;----- Heare is the problem
                &lt;/md-table&gt;
              &lt;/div&gt;
            &lt;/md-card&gt;
  
  
  
  Uncaught Error: Template parse errors:
  Can't bind to 'cdkHeaderRowDef' since it isn't a known property of 'md-header-row'.
  1. If 'md-header-row' is an Angular component and it has 'cdkHeaderRowDef' 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. ("
                  &lt;/ng-container&gt;
  
                  &lt;md-header-row [ERROR -&gt;]*cdkHeaderRowDef="displayedColumns"&gt;&lt;/md-header-row&gt;
                  &lt;md-row *cdkRowDef="let row; col"): ng:///AppModule/AdminProductsComponent.html@60:31
  Property binding cdkHeaderRowDef not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
                  &lt;/ng-container&gt;
  
                  [ERROR -&gt;]&lt;md-header-row *cdkHeaderRowDef="displayedColumns"&gt;&lt;/md-header-row&gt;
                  &lt;md-row *cdkRowDe"): ng:///AppModule/AdminProductsComponent.html@60:16
  Can't bind to 'cdkRowDefColumns' since it isn't a known property of 'md-row'.
  1. If 'md-row' is an Angular component and it has 'cdkRowDefColumns' input, then verify that it is part of this module.
  2. If 'md-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. ("        &lt;md-header-row *cdkHeaderRowDef="displayedColumns"&gt;&lt;/md-header-row&gt;
                  &lt;md-row [ERROR -&gt;]*cdkRowDef="let row; columns: displayedColumns;"&gt;&lt;/md-row&gt;
                &lt;/md-table&gt;
              &lt;/di"): ng:///AppModule/AdminProductsComponent.html@61:24
  Property binding cdkRowDefColumns not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("                &lt;md-header-row *cdkHeaderRowDef="displayedColumns"&gt;&lt;/md-header-row&gt;
                  [ERROR -&gt;]&lt;md-row *cdkRowDef="let row; columns: displayedColumns;"&gt;&lt;/md-row&gt;
                &lt;/md-table&gt;
          "): ng:///AppModule/AdminProductsComponent.html@61:16
      at syntaxError (http://localhost:4200/vendor.bundle.js:86242:34)
      at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:97363:19)
      at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:111515:39)
      at http://localhost:4200/vendor.bundle.js:111435:62
      at Set.forEach (native)
      at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:111435:19)
      at http://localhost:4200/vendor.bundle.js:111322:19
      at Object.then (http://localhost:4200/vendor.bundle.js:86231:148)
      at JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:111321:26)
      at JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:111250:37)
  </code></pre>
  
  <h2>This is the products.componetn.ts</h2>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {DataSource} from '@angular/cdk';
  import {BehaviorSubject} from 'rxjs/BehaviorSubject';
  import {Observable} from 'rxjs/Observable';
  import 'rxjs/add/operator/startWith';
  import 'rxjs/add/observable/merge';
  import 'rxjs/add/operator/map';
  
  @Component({
    selector: 'app-admin-products',
    templateUrl: './admin-products.component.html',
    styleUrls: ['./admin-products.component.css']
  })
  export class AdminProductsComponent implements OnInit {
  
    curentPage: string;
    isDarkTheme: any;
    totalProducts: any = 88;
    totalNeeds: any = 88;
    totalBrands: any = 88;
    totalAgeGroups: any = 88;
  
    constructor() {
      this.curentPage = 'Products';
      this.isDarkTheme = false;
    }
  
    ngOnInit() {
    }
  
  }
  
  
  /** Constants used to fill up our data base. */
  const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
    'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
  const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
    'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
    'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
  
  
  export interface UserData {
    id: string;
    name: string;
    progress: string;
    color: string;
  }
  
  
  /** An example database that the data source uses to retrieve data for the table. */
  export class ExampleDatabase {
    /** Stream that emits whenever the data has been modified. */
    dataChange: BehaviorSubject&lt;UserData[]&gt; = new BehaviorSubject&lt;UserData[]&gt;([]);
    get data(): UserData[] { return this.dataChange.value; }
  
    constructor() {
      // Fill up the database with 100 users.
      for (let i = 0; i &lt; 100; i++) { this.addUser(); }
    }
  
    /** Adds a new user to the database. */
    addUser() {
      const copiedData = this.data.slice();
      copiedData.push(this.createNewUser());
      this.dataChange.next(copiedData);
    }
  
    /** Builds and returns a new User. */
    private createNewUser() {
      const name =
          NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
          NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
  
      return {
        id: (this.data.length + 1).toString(),
        name: name,
        progress: Math.round(Math.random() * 100).toString(),
        color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
      };
    }
  }
  
  /**
   * Data source to provide what data should be rendered in the table. Note that the data source
   * can retrieve its data in any way. In this case, the data source is provided a reference
   * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
   * the underlying data. Instead, it only needs to take the data and send the table exactly what
   * should be rendered.
   */
  export class ExampleDataSource extends DataSource&lt;any&gt; {
    constructor(private _exampleDatabase: ExampleDatabase) {
      super();
    }
  
    /** Connect function called by the table to retrieve one stream containing the data to render. */
    connect(): Observable&lt;UserData[]&gt; {
      return this._exampleDatabase.dataChange;
    }
  
    disconnect() {}
  }
  </code></pre>