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

Remember to add MatTableModule in your app.module's imports i.e.

In Angular 9+

import { MatTableModule } from '@angular/material/table'  @NgModule({  imports: [    // ...    MatTableModule    // ...  ]})

Less than Angular 9

import { MatTableModule } from '@angular/material'  @NgModule({  imports: [    // ...    MatTableModule    // ...  ]})

Thanx to @Jota.Toledo, I got the solution for my table creation.Please find the working code below:

component.html

<mat-table #table [dataSource]="dataSource" matSort>  <ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">    <mat-header-cell *matHeaderCellDef mat-sort-header> {{column.value}}</mat-header-cell>    <mat-cell *matCellDef="let element"> {{element[column.id]}}</mat-cell>  </ng-container>  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row></mat-table>

component.ts

import { Component, OnInit, ViewChild } from '@angular/core';import { MatTableDataSource, MatSort } from '@angular/material';import { DataSource } from '@angular/cdk/table';@Component({  selector: 'app-m',  templateUrl: './m.component.html',  styleUrls: ['./m.component.css'],})export class MComponent implements OnInit {  dataSource;  displayedColumns = [];  @ViewChild(MatSort) sort: MatSort;  /**   * Pre-defined columns list for user table   */  columnNames = [{    id: 'position',    value: 'No.',  }, {    id: 'name',    value: 'Name',  },    {      id: 'weight',      value: 'Weight',    },    {      id: 'symbol',      value: 'Symbol',    }];  ngOnInit() {    this.displayedColumns = this.columnNames.map(x => x.id);    this.createTable();  }  createTable() {    let tableArr: Element[] = [{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },      { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },      { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },      { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },      { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },      { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },    ];    this.dataSource = new MatTableDataSource(tableArr);    this.dataSource.sort = this.sort;  }}export interface Element {  position: number,  name: string,  weight: number,  symbol: string}

app.module.ts

imports: [  MatSortModule,  MatTableModule,],

• Angular Core v6.0.2,
• Angular Material, v6.0.2,
• Angular CLI v6.0.0 (globally v6.1.2)

I had this issue when running ng test, so to fix it, I added to my xyz.component.spec.ts file:

import { MatTableModule } from '@angular/material';

And added it to imports section in TestBed.configureTestingModule({}):

beforeEach(async(() => {    TestBed.configureTestingModule({      imports: [ ReactiveFormsModule, HttpClientModule, RouterTestingModule, MatTableModule ],      declarations: [ BookComponent ],      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]    })    .compileComponents();}));