Angular7 - Can't bind to 'dataSource' since it isn't a known property of 'mat-table'
Solution 1
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
Solution 2
I would like to complete Sunil's answer: you should import MatTableModule
and CdkTableModule
in AppModule
or in the Module where you component is declared.
@NgModule({
imports: [
CdkTableModule,
MatTableModule
...
]
})
public class AppModule
Solution 3
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]
Comments
-
holydragon over 4 years
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?
-
Techiemanu about 5 yearsNot working for me as well. Tried in Angular 7. Can anyone please help?
-
BoDeX about 5 yearsWorked for me. Add import {CdkTableModule} from '@angular/cdk/table'; as mentioned here: material.angular.io/cdk/table/api#CdkTable I however don't know why this is required....
-
Sunil Singh about 5 years@Uttam - You must be using this in other module, make sure you are importing
MatTableModule
into that module. -
Courtney Pattison almost 5 yearsUsing a SharedModule where I imported MatTableModule but forgot to export it. Whoops!