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

angular 7
angular 7 tutorial
install angular 7
create angular 7 project
angular tutorial
angular 8 tutorial
angular cli
angular material

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 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

Angular 7 - What are the new improvements and features?, Note: If you already know the history of Angular, or if you do not wish to get into past details, please skip this part and move on to the next – Angular 7 Highlights. Angular7 - Services - We might come across a situation where we need some code to be used everywhere on the page. For example, it can be for data connection that needs to be shared a

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

Angular7 - Project Setup, You can open the folder and see the packages available. src/ − This folder is where we will work on the project using Angular 7.Inside src/ you will app/ folder​  Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

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]

Angular, and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work. The latest version can be downloaded from their site as: After the installation, open visual studio and open your terminal. Enter the path where you want to install the latest version of angular as: Now, simply run the following command to install angular 7: >npm install -g @angular\cli. Angular 7 is then installed in the mentioned path.

CanActivate, Interface that a class can implement to be a guard deciding if a route can be activated. If all guards return true , navigation will continue. If any guard returns false  Services in Angular 7 allow you to define code that's accessible and reusable throughout multiple components. A common use case for services is when you need to communicate with a backend of some sort to send and receive data.

Angular 7 in the House! - Angular In Depth, For more details you can review the TypeScript CHANGELOG. Angular 7 will make some minor changes to the way your Material GUI looks. Angular 7: can't find module. can't resolve 'underscore' 1 How to successfully upgrade angular (from 6.0.9 to 7.1.4) and material from 6.3.2 to 7.2.0 (or latest version) with no dependencies errors?

What's new in Angular 7.0 and how you can upgrade, Now we will proceed to create our first Angular 7 application. Prerequisites. Install the latest version of Node.js from here; Install Visual Studio  Angular apps are modular and Angular has its own modularity system called NgModules. NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. They can contain components, service providers, and other code files whose scope is defined by the containing NgModule.

Comments
  • You need to import { MatTableModule } from '@angular/material'; in the module, not the component, and add MatTableModule into the imports array
  • It is already there. Please see the app-routing.module.ts code section.
  • It needs to be in the module where you declare your ProductionOrderComponent
  • 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 <mat-table></mat-table> tags and <th mat-header-cell></th> tags. Solution is choose a version and stick to it. <table mat-table></table> with <th mat-header-cell></th> and <td mat-cell></td> or newer version <mat-table></mat-table> <mat-header-cell></mat-header-cell> <mat-cell></mat-cell>
  • Not working for me as well. Tried in Angular 7. Can anyone please help?
  • @Uttam - You must be using this in other module, make sure you are importing MatTableModule into that module.
  • Using a SharedModule where I imported MatTableModule but forgot to export it. Whoops!
  • Worked 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....