title: How to set angular material data table with pagination (data source) to the data array retrieved from the database using web-API
body: <p>I am working on a web based application. I use Angular and Web API to develop the application, DBMS: SQL Server Management Studio 17. </p>
  
  <p>I want to populate data which are stored inside my database in a Angular Material data table.</p>
  
  <p>This is my customer-req-table-datasource.ts. </p>
  
  <pre><code>import { DataSource } from '@angular/cdk/collections';
  import { MatPaginator } from '@angular/material/paginator';
  import { MatSort } from '@angular/material/sort';
  import { map } from 'rxjs/operators';
  import { Observable, of as observableOf, merge } from 'rxjs';
  
  // TODO: Replace this with your own data model type
  export interface CustomerReqTableItem {
    name: string;
    id: number;
  }
  
  // TODO: replace this with real data from your application
  const EXAMPLE_DATA: CustomerReqTableItem[] = [
  
    {id: 1, name: 'Hydrogen'},
    {id: 2, name: 'Helium'},
    {id: 3, name: 'Lithium'},
    {id: 4, name: 'Beryllium'},
    {id: 5, name: 'Boron'},
    {id: 6, name: 'Carbon'},
    {id: 7, name: 'Nitrogen'},
    {id: 8, name: 'Oxygen'},
    {id: 9, name: 'Fluorine'},
    {id: 10, name: 'Neon'},
    {id: 11, name: 'Sodium'},
    {id: 12, name: 'Magnesium'},
    {id: 13, name: 'Aluminum'},
    {id: 14, name: 'Silicon'},
    {id: 15, name: 'Phosphorus'},
    {id: 16, name: 'Sulfur'},
    {id: 17, name: 'Chlorine'},
    {id: 18, name: 'Argon'},
    {id: 19, name: 'Potassium'},
    {id: 20, name: 'Calcium'},
  ];
  </code></pre>
  
  <p>This is my customer.service.ts file</p>
  
  <pre><code>import { HttpClient } from '@angular/common/http';
  import { Employee } from './employee.model';
  import { Customer } from './customer.model';
  import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  export class CustomerService {
  
    formData: Customer;
    list: Customer[];
    readonly rootURL = 'https://localhost:44300/api';
    constructor(private http: HttpClient) { }
  
    postCustomer(formData: Customer) {
     return this.http.post(this.rootURL + '/Customer', formData);
    }
  
    refreshList() {
      this.http.get(this.rootURL + '/Customer').toPromise().then(res =&gt; this.list = res as Customer[]);
    }
  
    putCustomer(formData: Customer) {
      return this.http.put(this.rootURL + '/Customer/' + formData.CustomerID, formData);
     }
  
     deleteCustomer(id: number) {
       return this.http.delete(this.rootURL + '/Customer/' + id);
     }
  
  }
  </code></pre>
  
  <p><strong>Problem:</strong> How can I set the list [] array (in the service.ts file) data and populate the angular data table?</p>
  
  <p>However, my final goal is to get the data inside the database and display those data using a angular data table.</p>