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

campa commented 7 years ago

Bug

compiler.es5.js:1689 Uncaught Error: Template parse errors: Can't bind to 'dataSource' since it isn't a known property of 'md-table'.

If 'md-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.

What is the expected behavior?

no errors

What is the current behavior?

compiler.es5.js:1689 Uncaught Error: Template parse errors: Can't bind to 'dataSource' since it isn't a known property of 'md-table'.

If 'md-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.

What are the steps to reproduce?

I'm using your examples as code https://material.angular.io/components/table/overview

What is the use-case or motivation for changing an existing behavior?

migrating from ngx-... another nto official component for the table.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?


"dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/platform-server": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@asymmetrik/angular2-leaflet": "^2.1.5",
    "@swimlane/ngx-datatable": "^9.3.0",
    "@types/node": "^7.0.31",
    "angular2-moment": "^1.4.0",
    "jquery": "^3.1.1",
    "leaflet": "^1.1.0",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.4.1",
    "sockjs-client": "^1.1.4",
    "webstomp-client": "^1.0.6",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/compiler": "^4.2.4",
    "@types/es6-shim": "0.31.32",
    "@types/jasmine": "^2.5.53",
    "@types/leaflet": "^1.0.63",
    "@types/lodash": "^4.14.66",
    "@types/selenium-webdriver": "^2.44.26",
    "angular2-router-loader": "^0.3.5",
    "angular2-template-loader": "^0.6.0",
    "compression-webpack-plugin": "^0.4.0",
    "copy": "^0.3.0",
    "copy-webpack-plugin": "^3.0.1",
    "cpy-cli": "^1.0.1",
    "css-loader": "^0.28.4",
    "css-to-string-loader": "^0.1.3",
    "dedupe-plugin": "^1.0.0",
    "file-loader": "^0.10.1",
    "html-loader": "^0.4.5",
    "image-webpack-loader": "^3.3.1",
    "jasmine-core": "^2.5.2",
    "karma": "^1.7.0",
    "karma-chrome-launcher": "^2.1.1",
    "karma-edge-launcher": "^0.4.1",
    "karma-firefox-launcher": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-typescript": "^3.0.4",
    "karma-webpack": "^2.0.0",
    "node-sass": "^4.5.3",
    "node-static": "^0.7.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.13.1",
    "to-string-loader": "^1.1.3",
    "ts-loader": "^0.8.2",
    "tslint": "^5.4.3",
    "typescript": "2.3.4",
    "url-loader": "^0.5.9",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.1.0",
    "webpack-material-design-icons": "^0.1.0"
  }

Is there anything else we should know?

node 6.11 LTS, npm 5.1

Thanks

willshowell commented 7 years ago

Did you import CdkTableModule?

https://plnkr.co/edit/C3YN0x2qrMaqcD6izvK7?p=preview

campa commented 7 years ago

I missed it !!it is solved thanks

andrewseguin commented 6 years ago

Did you import MatTableModule?

minhquan2904 commented 6 years ago

using <mat-table> instead <table mat-table>

atertel-synexxus commented 6 years ago

According to the material docs, using <mat-table> instead of <table mat-table> introduces this note

Note that this approach means you cannot include certain native-table features such colspan/rowspan or have columns that resize themselves based on their content

So yeah, using display: flex and <mat-table> does work for me, but I would still like my columns to resize

Marek00Malik commented 6 years ago

Same for me. I have both the CdkTableModule, MatTableModule and MatSortModule in my module imports. It seems to work when I have but then the sort feature does not work out of the box (only styling works, but actual sorting not).

olsonso commented 6 years ago

Fixed using <mat-table> instead of <table mat-table> like @minhquan2904 said.

kiwikern commented 6 years ago

@atertel-synexxus You are probably using version 5?! Have a look at this Stackoverflow thread.

alundiak commented 6 years ago

Angular Core v6.0.2, Angular Material, v6.0.2, Angular CLI v6.0.0 (globally v6.1.2)

I had this issue when running ng test, so to fix it, I added to my xyz.component.spec.ts file:

import { MatTableModule } from '@angular/material';

And added it to imports section in TestBed.configureTestingModule({}):

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ReactiveFormsModule, HttpClientModule, RouterTestingModule, MatTableModule ],
      declarations: [ BookComponent ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
}));

angular-automatic-lock-bot[bot] commented 5 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular / components