Material Design Table is not accepting dataSource object

Question

I am getting following error:

compiler.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 component 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.component.html",
  styleUrls: ["./history.component.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 components. This is working fine.

What am I missing here?

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

Kim Kern · Accepted Answer · 2018-05-04T14:58:22.220

11

The selector table[mat-table] was only just added by this commit. 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>

becomes

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

edited May 04 '18 at 14:58

answered May 04 '18 at 14:19

Kim Kern

54,283
17
197
195

But this is copy pasted directly from the angular material api documentation. Are they wrong about this? Why is nobody else experiencing this? – Florian Leitgeb May 04 '18 at 14:22
You're right, according to the selector definition it should be fine: `selector: 'mat-table, table[mat-table]'` Did it solve your problem though? https://github.com/angular/material2/blob/848fe58980d4e1d0e9d26508c9158cdd4da53437/src/lib/table/table.ts – Kim Kern May 04 '18 at 14:25
This feature was just recently added. Are you using version 6? – Kim Kern May 04 '18 at 14:30
Thanks it helped, but unfortunately, my table is not shown inside of the modal :( – Florian Leitgeb May 04 '18 at 14:35
1

@Florian Leitgeb Where did you declare `HistoryComponent` component? Can you show us that module? – yurzui May 04 '18 at 14:36
Unfortunately, this approach is not working for me, yes it renders now, but it is not using the data of the dataSource object. The table is empty. @yurzui It is a really simple module, nothing special – Florian Leitgeb May 04 '18 at 19:43
1

Well, I would say it is working, you just seem to have another additional problem. Have you followed the setup guide? https://v5.material.angular.io/guide/getting-started – Kim Kern May 04 '18 at 22:39
I'm using angular 8 and it is still the same. – speksy Jul 23 '19 at 13:04
@speksy And you're using the current version of Angular Material? As you can see in the current version of the code, both selectors are still supported: https://github.com/angular/components/blob/7774da2e285a874d9fbadd2102ae55e53ecb65bb/src/lib/table/table.ts – Kim Kern Jul 23 '19 at 13:10
Thanks for reply Kim. I resolve my issue by just move all imports of mat classes which I needed for tables components to custom.module.ts instead of app.module.ts. Custom.modules.ts is sub component imported in main- app.module.ts. – speksy Jul 24 '19 at 18:34

score 1 · Answer 2 · answered Aug 16 '18 at 03:26

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.

Material Design Table is not accepting dataSource object

2 Answers2

Linked