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

Question

I am new in angular 5 development. I am trying to develop a data table with angular material using the example provided here: \"https://material.angular.io/components/table/

Answer 1

For Angular 7

Check where is your table component located. In my case it was located like app/shared/tablecomponent where shared folder contains all sub components But I was importing material module in Ngmodules of app.module.ts which was incorrect. In this case Material module should be imported in Ngmodules of shared.module.ts And it works.

There is NO NEED to change 'table' to 'mat-table' in angular 7.

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

Answer 2

if your "import { MatTableModule } from '@angular/material';" is on a shared module, make sure you export it.

sharedmodule.ts:

import { MatTableModule } from '@angular/material' 

@NgModule({
  imports: [
    // ...
    MatTableModule
    // ...
  ],
  exports:[ MatTableModule ]
})

then on your custom module where you define the component that use material table:

custommodule.ts:

@NgModule({
imports: [ sharedmodule ]     
})

Answer 3

Please see your dataSource varibale doesn't get the data from the server or dataSource is not assigned to the expected format of data.

Answer 4

• 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();
}));