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't a known property of 'mat-table'

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material';

import { HomeComponent } from './home/home.component';
import { ProductionOrderComponent } from './production-order/production-order.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'production-order', component: ProductionOrderComponent },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    HttpClientModule,
    BrowserAnimationsModule,
    MatTableModule,
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

html

<mat-table [dataSource]="productionOrder" class="mat-elevation-z8">
  <ng-container matColumnDef="t_pdno">
    <th mat-header-cell *matHeaderCellDef>Production Order</th>
    <td mat-cell *matCellDef="let productionOrder">{{ productionOrder.t_pdno }}</td>
  </ng-container>
  <ng-container matColumnDef="t_mitm">
    <th mat-header-cell *matHeaderCellDef>Item</th>
    <td mat-cell *matCellDef="let productionOrder">{{ productionOrder.t_mitm }}</td>
  </ng-container>
  <mat-header-row *matHeaderRowDef="['t_pdno', 't_mitm']"></mat-header-row>
  <mat-row *matRowDef="let row; columns: ['t_pdno', 't_mitm'];"></mat-row>
</mat-table>

component

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-production-order',
  templateUrl: './production-order.component.html',
  styleUrls: ['./production-order.component.scss']
})
export class ProductionOrderComponent implements OnInit {

  public productionOrder

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getData()
  }

  getData() {
    this.http.get('http://localhost:3000/api/production-order').subscribe(res => {
      console.log(res['data'])
      this.productionOrder = res['data']
    })
  }

}

What I tried:

Use <table mat-table> instead of <mat-table>
import { MatTableModule } from '@angular/material'; in the component

and these links:

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

mat-table can't bind dataSource

Anyone got an idea how to solve this?

You need to `import { MatTableModule } from '@angular/material';` in the module, not the component, and add `MatTableModule` into the `imports` array — user184994, Nov 07 '18 at 08:00
It is already there. Please see the app-routing.module.ts code section. — holydragon, Nov 07 '18 at 08:02
It needs to be in the module where you declare your `ProductionOrderComponent` — user184994, Nov 07 '18 at 08:03
Actually the accepted answer is not right. The problem is that you are using different piece of codes coming from different version of Angular Material. Your HTML code contains tags and tags. Solution is choose a version and stick to it.
with and or newer version — Selam Getachew, Jul 15 '19 at 17:54

Sunil Singh · Accepted Answer · 2019-02-08T08:19:15.340

23

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

edited Feb 08 '19 at 08:19

answered Nov 07 '18 at 08:09

Sunil Singh

11,001
2
27
48

2

Not working for me as well. Tried in Angular 7. Can anyone please help? – Techiemanu Apr 23 '19 at 10:56
@Uttam - You must be using this in other module, make sure you are importing `MatTableModule` into that module. – Sunil Singh Apr 24 '19 at 09:56
Using a SharedModule where I imported MatTableModule but forgot to export it. Whoops! – Courtney Pattison Aug 03 '19 at 15:56

score 4 · Answer 2 · answered Mar 28 '19 at 10:42

4

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

answered Mar 28 '19 at 10:42

JMaFv

41
2

Worked for me. Add import {CdkTableModule} from '@angular/cdk/table'; as mentioned here: https://material.angular.io/cdk/table/api#CdkTable I however don't know why this is required.... – BoDeX Apr 24 '19 at 09:54

score 2 · Answer 3 · answered Feb 25 '20 at 08:37

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]

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

3 Answers3

Linked