Angular Material Table not displaying data

mattabledatasource not displaying data
angular material table responsive
mat-table not rendering
mat-table not displaying columns
angular material table style
angular material table multiple header rows
angular material datasource not working
angular 8 table

What am I missing? I verified that my API is returning data back however I can't get the data to display in my table.

Verified data:

<pre>{{ myData| json }}</pre>

Html

<div *ngIf="dataSource">
  <mat-table [dataSource]='dataSource'>
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let df"> {{df.name}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="path">
      <mat-header-cell *matHeaderCellDef> Path </mat-header-cell>
      <mat-cell *matCellDef="let df"> {{df.path}} </mat-cell>
    </ng-container>

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

  </mat-table>
</div>

Typescript:

export class HomeComponent implements OnInit {
  columnsToDisplay = ['name', 'path'];
  myData: IMyData[];
  dataSource = new MatTableDataSource<IMyData>(this.myData);

  constructor(private myDataService: MyDataService) { 
    console.log("IN CONSTRUCTOR");
  }

  ngOnInit(): void {
    this.myDataService.getData()
    .subscribe(x => this.myData = x,
      error => console.log("Error (GetData) :: " + error)
    ); } 
}

EDIT: I wonder if it has to do with my interface:

Interface

export interface IMyData {
  id: string;
  path: string;
  date: Date;
  location: Geolocation;
  name: string;
  gizmos: string[];
}

Example Data:

[
  {
    "id": "9653a6b5-46d2-4941-8064-128c970c60b3",
    "path": "TestPath",
    "date": "2018-04-04T08:12:27.8366667",
    "location": "{\"type\":\"Point\",\"coordinates\":[102.0,0.5]}",
    "name": "TestName",
    "gizmos": [
      "AAAA",
      "BBBB",
      "CCCC"
    ]
  }
]

First mistake is the incorrect data binding with single quotes instead of double quotes:

Change <mat-table [dataSource]='dataSource'>

To this: <mat-table [dataSource]="dataSource">

Second mistake is incorrect data source initialization. You should create the MatTableDataSource after fetching the data from the service.

export class HomeComponent implements OnInit {
  columnsToDisplay = ['name', 'path'];
  dataSource: MatTableDataSource<IMyData>;

  constructor(private myDataService: MyDataService) {   }

  ngOnInit(): void {
    this.myDataService.getData()
     .subscribe(data => this.dataSource = new MatTableDataSource(data));
  }
}

Angular Material Data Table: A Complete Example, The Angular Material Data Table - not only for Material Design we have the template that defines how to display the header of a given column� Introduction to the Angular Material Data Table. The Material Data Table component is a generic component for displaying tabulated data. Although we can easily give it a Material Design look and feel, this is actually not mandatory. In fact, we can give the Angular Material Data table an alternative UI design if needed.

You need to update the datasource, not just the variable containing the data

ngOnInit(): void {
    this.myDataService.getData()
    .subscribe(x => 
      {
        this.myData = x;
        this.dataSource.data = x; //<=== update the datasource's data
      },
      error => console.log("Error (GetData) :: " + error)
    ); 
    }

and set correct binding

<mat-table [datasource]='dataSource'>

mat-table not displayed. I'm not sure what I'm doing wrong : angular, 16.7k members in the angular community. Content specific to Angular. If you're looking for AngularJS or Angular 1 related information, check out … Video: Displaying a data table with Angular Material table This movie is locked and only viewable to logged-in members. Embed the preview of this course instead.

in my case, I inherited from MatTableDataSource to create MyDataSource. Without calling after this.data = someArray

this.entitiesSubject.next(this.data as T[])

data where not displayed

class MyDataSource
export class MyDataSource<T extends WhateverYouWant> extends MatTableDataSource<T> {

    private entitiesSubject = new BehaviorSubject<T[]>([]);


    loadDataSourceData(someArray: T[]){
        this.data = someArray //whenever it comes from an API asyncronously or not
        this.entitiesSubject.next(this.data as T[])// Otherwise data not displayed
    }

    public connect(): BehaviorSubject<T[]> {
        return this.entitiesSubject
    }

}//end Class 

Angular Material Table Does not Display Data - angular - html, I'm trying to display data using a angular material table. But it's not display any data and does not log any error.i get my data by calling a service. Html :- <div>� Use the CLI command ng new displaying-data to create a workspace and app named displaying-data. Delete the app.component.html file. It is not needed for this example. Then modify the app.component.ts file by changing the template and the body of the component. When you're done, it should look like this:

MatTableDataSource not showing data but mat-cell generated , This problem happens due to the way angular detects changes, which sometimes doesn't happen and no re-render is triggered. To solve this, import ChangeDetectorRef from '#angular/core', inject it in the component constructor (cd: ChangeDetectorRef), then use it after sorting the data: return Observable. UI component infrastructure and Material Design components for mobile and desktop Angular web applications.

Table, The mat-table provides a Material Design styled data-table that can be used to display Since the table optimizes for performance, it will not automatically check for Add a column definition for displaying the row checkboxes, including a� PrimeNG Table is an Angular component for presenting large and complex data. PrimeNG Table(p-Table) is the successor of PrimeNG DataTable with a lightning fast performance (at least 10x faster) and excellent level of control over the presentation. p-Table is called as TurboTable in order to differantiate if from the deprecated p-dataTable.

Angular 9/8 Material Data-Table Tutorial & Example, The mat-table provides a Material Design styled data-table that can be used to Note that the cell templates are not restricted to only showing simple string� I am using angular material table for displaying the data till now using static pagination and now trying to implement the server side pagination and here i am getting values like below { "Tab…

Comments
  • Are you getting any error in console.
  • No errors at all
  • I tried that out and it still didn't work for me. I am guessing that grid rows are somehow being loaded before the data can actually populate the rows, in my case.
  • In my case, I made the second mistake. Followed your answer and it worked like a charm.