CODEWITHSUNDEEP
javascriptangulartypescriptangular-materialmaterial-design
Florian Leitgeb
Florian Leitgeb

Reputation: 16624

Material Design Table is not accepting dataSource object

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.

Upvotes: 2

Views: 8946

Answers (2)

Nouman Mukhtar
Nouman Mukhtar

Reputation: 389

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.

Upvotes: 1

Kim Kern
Kim Kern

Reputation: 60357

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>

Upvotes: 11

Related Questions