Using HTTP GET request to fetch data in an Angular Material Table

Question

I have an Angular Material table in which I want to fetch data from a service. This is my service.

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Message } from '../messages/message-table/message.model';

@Injectable()

export class MessageService {
  constructor(private http: HttpClient) {}

  getMessageTableData() {
    return this.http.get<Message[]>('<removed>');
  }
}

This is the interface Message for the data

export interface Message {
    RequestID: string;
    RequestStatus: string;
    RequestorName: string;
    SubmissionDate: string;
    ApproverName: string;
    ApprovalDate: string;
    Subject: string;
    MessageStatus: string;
    ReadStatus: string;
  }

In my component.ts file, I'm able to display the data in console using this,

ngOnInit() {

    this.messageService.getMessageTableData().subscribe(
      (response) => console.log(response)
    )
}

I've seen the example code on Angular material's website but since I have a lot of client side filtering on my table, I want to use MatTableDataSource for my dataSource. That example uses a custom dataSource and I'm not able to include my filters in that. How can I display this data, which is coming in JSON form from my service, in my table?

Attaching the HTML code for my table as well

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container matColumnDef="RequestID">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Request ID </th>
        <td mat-cell *matCellDef="let element"> {{element.RequestID}} </td>
    </ng-container>

    <ng-container matColumnDef="RequestStatus">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Request Status </th>
        <td mat-cell *matCellDef="let element"> {{element.RequestStatus}} </td>
    </ng-container>

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

    <ng-container matColumnDef="SubmissionDate">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Submission Date </th>
        <td mat-cell *matCellDef="let element"> {{element.SubmissionDate}} </td>
    </ng-container>

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

    <ng-container matColumnDef="ApprovalDate">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Approval Date </th>
        <td mat-cell *matCellDef="let element"> {{element.ApprovalDate}} </td>
    </ng-container>

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

    <ng-container matColumnDef="MessageStatus">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Message Status </th>
        <td mat-cell *matCellDef="let element"> {{element.MessageStatus}} </td>
    </ng-container>

    <ng-container matColumnDef="ReadStatus">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Read Status </th>
        <td mat-cell *matCellDef="let element"> {{element.ReadStatus}} </td>
    </ng-container>
</table>

SiddAjmera · Accepted Answer · 2018-12-12 09:59:20Z

7

You'll need to create an instance of the MatTableDataSource and pass it the data that you're getting from your service. Something like this:

import { MatSort, MatTableDataSource } from '@angular/material';
...

@Component({...})
export class TableComponent implements OnInit {
  ...
  dataSource;

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.messageService.getMessageTableData()
      .subscribe(response => {
        this.dataSource = new MatTableDataSource(response);
        this.dataSource.sort = this.sort;
      });
  }

  ...

}

Here's a Working Sample StackBlitz for your ref.

answered Dec 12, 2018 at 9:59

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shubham Arya Over a year ago

It is still not showing any data, I can see that the table is getting rendered as there are a lot of rows generated but my page is totally empty as in the rows dont have any data

Nikolai Kiefer · Accepted Answer · 2018-12-12 09:52:24Z

1

You can filter this datasource or am i missing something

dataSource: any;
ngOnInit() {
   this.messageService.getMessageTableData().subscribe(
     (response) => this.dataSource = response
     )
}

answered Dec 12, 2018 at 9:52

Nikolai Kiefer

6136 silver badges21 bronze badges

Comments

RANJIT PATRA · Accepted Answer · 2018-12-12 10:08:11Z

0

You can use MatTableDataSource it will help to filter and sort.

dataSource: new MatTableDataSource([]);
ngOnInit() {
   this.messageService.getMessageTableData().subscribe( (data) => {
       this.dataSource.data = data || []
   })
}

applyFilter(filterValue: string) {
   this.dataSource.filter = filterValue.trim().toLowerCase();
}

For Reference added stackblitz sample code.

edited Dec 12, 2018 at 10:08

answered Dec 12, 2018 at 10:00

RANJIT PATRA

8645 silver badges11 bronze badges

Collectives™ on Stack Overflow

Using HTTP GET request to fetch data in an Angular Material Table

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related