CODEWITHSUNDEEP
angularangular-material
Atticus29
Atticus29

Reputation: 4412

Can't get angular material table component to display

I've been trying to follow the angular material table component tutorial here

I've been able to follow the tutorial almost exactly, with the exception of having to use the mat-table tag instead of the table tag with the mat-table directive, which seems to be a common issue.

A repo that reproduces the problem can be found here:

git clone https://github.com/Atticus29/stackoverflowTable.git
cd stackoverflowTable/
npm install
ng serve

Navigate to http://localhost:4200/ in your browser.

Does anyone have insight into why the table is not appearing? There are no errors in the console.

I'm using older stable versions of several dependencies, because there was some evidence that the most recent versions might be the problem.

Relevant excerpt from package.json:

  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/cdk": "^5.2.4",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },

Update 3 June, 2018: I have the working example in the solution branch of the same repo.

Upvotes: 1

Views: 852

Answers (1)

yer
yer

Reputation: 1532

In your code, you declared the datasource in TableBasicExample. I have no idea why you did that, instead you have to declare the datasource like this:

export class AppComponent {
  displayedColumns = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}

Also in the html, there is no need to use table tags like tr,td. 

  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> No.</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>>

Upvotes: 1

Related Questions