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

Question

I am using Angular 7.0.2, and I am facing this error while trying to create a table using Angular Material

Can\'t bind to \'dataSource\' since it isn\

Answer 1

If you think you did everything right by importing MatTableModule at app.module.ts like below

import { MatTableModule } from '@angular/material';
@NgModule({
  declarations: [
    AppComponent,
    TopBarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatTableModule,
    CdkTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

and changing < table > to < meta-table > at html and it is still not working than have a look how you write your dataSource property tag.

it has to be [dataSource] not [datasource]

Answer 2

I would like to complete Sunil's answer: you should import MatTableModule and CdkTableModulein AppModule or in the Module where you component is declared.

@NgModule({
  imports: [
    CdkTableModule,
    MatTableModule
    ...
  ]
})
public class AppModule

Answer 3

You should import MatTableModule in AppModule or in the Module where you component is declared.

@NgModule({
  imports: [
    MatTableModule
    ...
  ]
})
public class AppModule

or

@NgModule({
  imports: [
    MatTableModule
    ...
  ],
  declarations : [ProductionOrderComponent]
})
public class MyModule