Error while loading md-table (Angular Material Design Table)

Question

I am trying to integrate Angular Material table (https://material.angular.io/components/table) into my Angular Application.

I have created the Angular App using CLI and my table declaration is as follows.

<md-table #table [dataSource]="dataSource">

    <!--- Note that these columns can be defined in any order.
      The actual rendered columns are set as a property on the row definition" -->

    <!-- ID Column -->
    <ng-container cdkColumnDef="userId">
        <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container cdkColumnDef="progress">
        <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container cdkColumnDef="userName">
        <md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
    </ng-container>

    <!-- Color Column -->
    <ng-container cdkColumnDef="color">
        <md-header-cell *cdkHeaderCellDef> Color </md-header-cell>
        <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
    </ng-container>

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
</md-table>

And has initiated it as follows..

public onInit(): void {
        this.dataSource = new ExampleDataSource(this.exampleDatabase);

But I get the following error..

compiler.es5.js:1690 Uncaught Error: Template parse errors: Can't bind to 'dataSource' since it isn't a known property of 'md-table'. 1. If 'md-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module. 2. If 'md-table' 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. ("lipsis_sm no-margin">{{localizationService.language.MF_CHART_FOOTER_DES}}
][dataSource]="dataSource">
'md-header-cell' is not a known element: 1. If 'md-header-cell' is an Angular component, then verify that it is part of this module. 2. If 'md-header-cell' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

I have used this plunker to help me with the integration.

What could be the reason?

I have used following dependencies..

"@angular/animations": "^4.3.0",
"@angular/cdk": "^2.0.0-beta.8",
"@angular/common": "^4.3.0",
"@angular/compiler": "^4.3.0",
"@angular/core": "^4.3.0",
"@angular/forms": "^4.2.6",
"@angular/http": "^4.2.6",
"@angular/material": "^2.0.0-beta.8",

Your help is appreciated..

Thanks !

Edit 1:

I created a new project and still the material components are not taken.

https://github.com/newair/Angular-Material-Test

What could be the reason?

Uncaught Error: Template parse errors: 'md-button' is not a known element: 1. If 'md-button' is an Angular component, then verify that it is part of this module. 2. If 'md-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

Help is much appreciated..!!

Thanks ..!!

Did you import datasource? Like import {DataSource} from '@angular/cdk'; — Ana
Would you mind sharing the rest of the ts code of your component? You might be missing something — Ana
I have made the Edit 1 in Original post. Seems I get the same error in a new project as well. — user1438823
So the problem right now is that md-button should be used like this: <button md-button>foo</button>, not <md-button></md-button>. Hope this helps! — Ana
Thanks Ana its my bad. Problem was that I had used them inside the components which were used by sub modules ( other modules that were imported to app.module) . And I have only imported them to root app.module. — user1438823

Andrew Seguin Andrew Seguin · Accepted Answer · 2017-07-18T18:14:56

Make sure you include MdTableModule and CdkTableModule in your app's imports.

Note that <md-button></md-button> is not valid because MdButton uses an attribute selector. Instead, try <button md-button> My Button </button>

Error while loading md-table (Angular Material Design Table)

1 Answers