I am getting following error:

piler.js:486 Uncaught Error: Template parse errors: Can't bind to 'dataSource' since it isn't a known property of 'table'.

I am inserting a table into a custom material modal ponent which should show a list of history entries.

HistoryComponent:

import { Component, OnInit, ViewChild } from "@angular/core";
import { MatTableDataSource, MatSort } from "@angular/material";

@Component({
  selector: "app-history",
  templateUrl: "./historyponent.html",
  styleUrls: ["./historyponent.scss"],
})
export class HistoryComponent implements OnInit {
  displayedColumns = ["position", "name", "weight", "symbol"];
  dataSource = ELEMENT_DATA;

  constructor() { }

  ngOnInit() {
  }

}

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}
const ELEMENT_DATA: 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"},
  {position: 7, name: "Nitrogen", weight: 14.0067, symbol: "N"},
  {position: 8, name: "Oxygen", weight: 15.9994, symbol: "O"},
  {position: 9, name: "Fluorine", weight: 18.9984, symbol: "F"},
  {position: 10, name: "Neon", weight: 20.1797, symbol: "Ne"},
  {position: 11, name: "Sodium", weight: 22.9897, symbol: "Na"},
  {position: 12, name: "Magnesium", weight: 24.305, symbol: "Mg"},
  {position: 13, name: "Aluminum", weight: 26.9815, symbol: "Al"},
  {position: 14, name: "Silicon", weight: 28.0855, symbol: "Si"},
  {position: 15, name: "Phosphorus", weight: 30.9738, symbol: "P"},
  {position: 16, name: "Sulfur", weight: 32.065, symbol: "S"},
  {position: 17, name: "Chlorine", weight: 35.453, symbol: "Cl"},
  {position: 18, name: "Argon", weight: 39.948, symbol: "Ar"},
  {position: 19, name: "Potassium", weight: 39.0983, symbol: "K"},
  {position: 20, name: "Calcium", weight: 40.078, symbol: "Ca"},
];

<h2 mat-dialog-title>History</h2>
<mat-dialog-content>
  <div class="example-container mat-elevation-z8">
    <table mat-table #table [dataSource]="dataSource" matSort>

      <!-- Position Column -->
      <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>

      <!-- Weight Column -->
      <ng-container matColumnDef="weight">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
      </ng-container>

      <!-- Symbol Column -->
      <ng-container matColumnDef="symbol">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button [mat-dialog-close]="true">OK</button>
</mat-dialog-actions>

I am getting following error:

piler.js:486 Uncaught Error: Template parse errors: Can't bind to 'dataSource' since it isn't a known property of 'table'.

I am inserting a table into a custom material modal ponent which should show a list of history entries.

HistoryComponent:

import { Component, OnInit, ViewChild } from "@angular/core";
import { MatTableDataSource, MatSort } from "@angular/material";

@Component({
  selector: "app-history",
  templateUrl: "./history.ponent.html",
  styleUrls: ["./history.ponent.scss"],
})
export class HistoryComponent implements OnInit {
  displayedColumns = ["position", "name", "weight", "symbol"];
  dataSource = ELEMENT_DATA;

  constructor() { }

  ngOnInit() {
  }

}

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}
const ELEMENT_DATA: 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"},
  {position: 7, name: "Nitrogen", weight: 14.0067, symbol: "N"},
  {position: 8, name: "Oxygen", weight: 15.9994, symbol: "O"},
  {position: 9, name: "Fluorine", weight: 18.9984, symbol: "F"},
  {position: 10, name: "Neon", weight: 20.1797, symbol: "Ne"},
  {position: 11, name: "Sodium", weight: 22.9897, symbol: "Na"},
  {position: 12, name: "Magnesium", weight: 24.305, symbol: "Mg"},
  {position: 13, name: "Aluminum", weight: 26.9815, symbol: "Al"},
  {position: 14, name: "Silicon", weight: 28.0855, symbol: "Si"},
  {position: 15, name: "Phosphorus", weight: 30.9738, symbol: "P"},
  {position: 16, name: "Sulfur", weight: 32.065, symbol: "S"},
  {position: 17, name: "Chlorine", weight: 35.453, symbol: "Cl"},
  {position: 18, name: "Argon", weight: 39.948, symbol: "Ar"},
  {position: 19, name: "Potassium", weight: 39.0983, symbol: "K"},
  {position: 20, name: "Calcium", weight: 40.078, symbol: "Ca"},
];

<h2 mat-dialog-title>History</h2>
<mat-dialog-content>
  <div class="example-container mat-elevation-z8">
    <table mat-table #table [dataSource]="dataSource" matSort>

      <!-- Position Column -->
      <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>

      <!-- Weight Column -->
      <ng-container matColumnDef="weight">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
      </ng-container>

      <!-- Symbol Column -->
      <ng-container matColumnDef="symbol">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button [mat-dialog-close]="true">OK</button>
</mat-dialog-actions>

I imported the MatTableModule in a different material module, just for the material design ponents. This is working fine.

What am I missing here?

Update: With the answer from Kim Kern below I can pile again and get no errors, but my dataSource object is not being used and the table is empty.

• javascript
• angular
• typescript
• angular-material
• material-design

Share Improve this question Follow edited Mar 11, 2019 at 14:47 Kim Kern 60.7k2020 gold badges218218 silver badges214214 bronze badges asked May 4, 2018 at 14:16 Florian LeitgebFlorian Leitgeb 16.7k77 gold badges3333 silver badges4242 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

The selector table[mat-table] was only just added by this mit. This is only available in version 6 of @angular/material. If you're still on version 5, you have to use the tag mat-table instead of table with the directive mat-table:

<table mat-table #table [dataSource]="dataSource" matSort>

bees

<mat-table #table [dataSource]="dataSource" matSort>

I faced this problem a lot of times but finally i got the solution and the solution is either you did not import the MatTableModule or it is not imported correctly. If you still did not find the solution, remove the MatTableModule and then you will see that your error will be the same.