title: Using HTTP GET request to fetch data in an Angular Material Table
body: <p>I have an Angular Material table in which I want to fetch data from a service. This is my service.</p>
  
  <pre><code>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&lt;Message[]&gt;('&lt;removed&gt;');
    }
  }
  </code></pre>
  
  <p>This is the interface Message for the data</p>
  
  <pre><code>export interface Message {
      RequestID: string;
      RequestStatus: string;
      RequestorName: string;
      SubmissionDate: string;
      ApproverName: string;
      ApprovalDate: string;
      Subject: string;
      MessageStatus: string;
      ReadStatus: string;
    }
  </code></pre>
  
  <p>In my component.ts file, I'm able to display the data in console using this,</p>
  
  <pre><code>ngOnInit() {
  
      this.messageService.getMessageTableData().subscribe(
        (response) =&gt; console.log(response)
      )
  }
  </code></pre>
  
  <p>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?</p>
  
  <p>Attaching the HTML code for my table as well</p>
  
  <pre><code>&lt;table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8"&gt;
      &lt;ng-container matColumnDef="RequestID"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Request ID &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.RequestID}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="RequestStatus"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Request Status &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.RequestStatus}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="RequestorName"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Requestor Name &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.RequestorName}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="SubmissionDate"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Submission Date &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.SubmissionDate}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="ApproverName"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Approver Name &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.ApproverName}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="ApprovalDate"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Approval Date &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.ApprovalDate}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="Subject"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Subject &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.Subject}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="MessageStatus"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Message Status &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.MessageStatus}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="ReadStatus"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Read Status &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.ReadStatus}} &lt;/td&gt;
      &lt;/ng-container&gt;
  &lt;/table&gt;
  </code></pre>