title: Angular7 - Can't bind to 'dataSource' since it isn't a known property of 'mat-table'
body: <p>I am using Angular 7.0.2, and I am facing this error while trying to create a table using <a href="https://material.angular.io/components/table/overview" rel="noreferrer">Angular Material</a></p>
  
  <blockquote>
    <p>Can't bind to 'dataSource' since it isn't a known property of 'mat-table'</p>
  </blockquote>
  
  <p>app-routing.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;mat-table [dataSource]="productionOrder" class="mat-elevation-z8"&gt;
    &lt;ng-container matColumnDef="t_pdno"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;Production Order&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let productionOrder"&gt;{{ productionOrder.t_pdno }}&lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="t_mitm"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;Item&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let productionOrder"&gt;{{ productionOrder.t_mitm }}&lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;mat-header-row *matHeaderRowDef="['t_pdno', 't_mitm']"&gt;&lt;/mat-header-row&gt;
    &lt;mat-row *matRowDef="let row; columns: ['t_pdno', 't_mitm'];"&gt;&lt;/mat-row&gt;
  &lt;/mat-table&gt;
  </code></pre>
  
  <p>component</p>
  
  <pre><code>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 =&gt; {
        console.log(res['data'])
        this.productionOrder = res['data']
      })
    }
  
  }
  </code></pre>
  
  <p>What I tried:</p>
  
  <ul>
  <li><p>Use <code>&lt;table mat-table&gt;</code> instead of <code>&lt;mat-table&gt;</code></p></li>
  <li><p><code>import { MatTableModule } from '@angular/material';</code> in the component</p></li>
  </ul>
  
  <p>and these links:</p>
  
  <p><a href="https://stackoverflow.com/questions/50228138/cant-bind-to-datasource-since-it-isnt-a-known-property-of-table">Can&#39;t bind to &#39;dataSource&#39; since it isn&#39;t a known property of &#39;table&#39;</a></p>
  
  <p><a href="https://stackoverflow.com/questions/50298241/mat-table-cant-bind-datasource">mat-table can&#39;t bind dataSource</a></p>
  
  <p>Anyone got an idea how to solve this?</p>