Still "Can't bind to 'dataSource' since it isn't a known property of 'table'."

Question

I've spent two days on all possible solutions found (see below), and upgraded both Angular and Material from 7 to 8, still the same complaint.

can't bind to 'dataSource' since it isn't a known property of 'table'

import and @NgModule in both app.module.ts and component.ts (tried partial as well, all possible combination`)
swap out <table for <mat-table
[dataSource] not [datasource]

app.module.ts

import { MatFormFieldModule, MatInputModule} from '@angular/material';
import { MatTableModule } from '@angular/material/table';  // or just @angular/material
@NgModule({
  imports:
  [
    MatTableModule // adding MatTableDataSource here will get Error at component.ts: Unexpected value 'MatTableDataSource' imported by the module 'AppModule'. Please add a @NgModule annotation
  ]})

component.ts

import {MatTableModule, MatTableDataSource} from '@angular/material/table';
@NgModule({
    imports: [MatTableModule, MatTableDataSource]
  })

component.html

<table mat-table [dataSource]="myArray">
        <tr mat-row *matRowDef="let row"></tr>
</table>

package.json, tried v8.0.1 for material as well:

"dependencies": {
    "@angular/animations": "^8.0.0",
    "@angular/cdk": "^8.0.1",
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/flex-layout": "^8.0.0-beta.16",
    "@angular/forms": "^8.0.0",
    "@angular/http": "^7.2.8",
    "@angular/material": "^8.1.2",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/router": "^8.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "rxjs-compat": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },

Tried all these: Angular7 - Can't bind to 'dataSource' since it isn't a known property of 'mat-table'

ERROR: Can't bind to 'dataSource' since it isn't a known property of 'mat-tree'

Material Design Table is not accepting dataSource object

mat-table can't bind dataSource

https://github.com/angular/components/issues/11906

https://www.devexpress.com/Support/Center/Question/Details/T730641/the-can-t-bind-to-datasource-since-it-isn-t-a-known-property-of-dx-data-grid-error-occurs

https://www.oipapio.com/question-941474

https://code-examples.net/en/q/2fe6baa

**can't bind to 'dataSource' since it isn't a known property of 'table'** complained by Angular runtime. — Jeb50, Aug 12 '19 at 04:30
You could try my table component https://github.com/adriandavidbrand/ngx-ez/ and a demo at https://stackblitz.com/edit/angular-npn1p1. Much easier to use than a mat-table — Adrian Brand, Aug 12 '19 at 04:45

score 2 · Accepted Answer · answered Aug 20 '19 at 04:04

Took a while to figure it out, the "component" is in a "module" as this structure app\module\component, so regardless everything was right in app.module.ts they are not in the right container. After adding the necessary import and @NgModule({ imports: [] }) into module.ts, works!

Still "Can't bind to 'dataSource' since it isn't a known property of 'table'."

1 Answers1