title: Update mat-table data after making change to database
body: <p>First, just want to say I'm fairly new to Angular, Material, and http so if you could be specific or include a code snippet with any response I'd appreciate it.</p>
  
  <p>I'm pulling data from a db2 database and able to display it in a mat-table. I can edit the database using a matform and httpclientmodule; however, when I make changes I can't get the table data to refresh without reloading the page.</p>
  
  <p>I tried the paginator trick (where you set the paginator value to the current value to trigger a table update) but I don't think it works when using http.</p>
  
  <p>Does anyone have a good solution for this? Here is some of my code: </p>
  
  <pre><code>import {Component, AfterViewInit, ViewChild, Injectable, OnInit, 
  ChangeDetectorRef} from '@angular/core';
  import {HttpClient} from '@angular/common/http';
  import {MatPaginator, MatSort, MatTableDataSource, MatInputModule, 
  MatFormField, MatInput, MatFormFieldModule} from '@angular/material';
  import {Observable} from 'rxjs/Observable';
  import {merge} from 'rxjs/observable/merge';
  import {of as observableOf} from 'rxjs/observable/of';
  import {catchError, map, tap} from 'rxjs/operators';
  import {startWith} from 'rxjs/operators/startWith';
  import {switchMap} from 'rxjs/operators/switchMap';
  import {SelectionModel} from '@angular/cdk/collections';
  import { FormGroup, FormControl } from '@angular/forms';
  
  export class ContractorsDao {
    constructor(private http: HttpClient) {}
  
    // Sends request including which field to sort by and to sort asc or desc
    getContractorRecords(sort: string, order: string, page: number): 
  Observable&lt;Contractor[]&gt; {
      const href = 'http://localhost:8080/pzapp-servlet';
      const requestUrl =
        `${href}/controllercontractors?message=getMstx&amp;sort=${sort}&amp;order=${order}`;
      return this.http.post&lt;Contractor[]&gt;(requestUrl, 'getMstx');
    }
  }
  
  @Component({
    selector: 'app-search-contractors',
    templateUrl: 'contractors.component.html',
    styleUrls: ['./contractors.component.css']
  })
  export class ContractorsComponent implements AfterViewInit, OnInit {
  
  // Initialize items for contractor mat-table
  
    // Columns displayed on the table
    displayedColumns = [
      'contractor-name',
      'contractor-phone',
      'select-contractor'
    ];
  
    // Initialize mat-table data source
    dataSource = new MatTableDataSource&lt;Contractor&gt;();
  
    // Initialize local database
    contractorDatabase: ContractorsDao | null;
  
    // Initialize mat-table features
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
    selection = new SelectionModel&lt;Contractor&gt;(false);
  
    editContractorForm: FormGroup;
  
    // Specific record selected
    activeRecord: Contractor;
  
  
    contractorsUrl = 'http://localhost:8080/pzapp-servlet/controllercontractors';
  
    // Triggered when record is selected from table
    viewRecord(row) {
      // Stores selected row for display
      this.activeRecord = row;
      this.editContractorForm = new FormGroup({
        NAME: new FormControl(this.activeRecord.NAME),
        PHON: new FormControl(this.activeRecord.PHON)
      });
    }
  
    // Takes filter text and filters table
    applyFilter(filterValue: string) {
      filterValue = filterValue.trim(); // Remove whitespace
      filterValue = filterValue.toLowerCase(); 
    // MatTableDataSource defaults to lowercase matches
      this.dataSource.filter = filterValue;
    }
  
    ngOnInit() {
      this.editContractorForm = new FormGroup({
      NAME: new FormControl(null),
      PHON: new FormControl(null),
      });
    }
    constructor(private http: HttpClient) {}
  
    ngAfterViewInit() {
  
      this.contractorDatabase = new ContractorsDao(this.http);
      this.sort.sortChange.subscribe(() =&gt; this.paginator.pageIndex = 0);
  
      merge(this.sort.sortChange, this.paginator.page)
        .pipe(
        startWith({}),
        switchMap(() =&gt; {
          return this.contractorDatabase.getContractorRecords(
            this.sort.active, this.sort.direction, this.paginator.pageIndex);
        }),
  
      ).subscribe(data =&gt; this.dataSource.data = data);
      this.dataSource.paginator = this.paginator;
  
    }
    onSubmit(value: any) {
      this.http.put(this.contractorsUrl, this.editContractorForm.value).subscribe();
  
    //  this.dataSource.paginator = this.paginator;
    }
  }
  
  // Interface for PZCNTR listing
  export interface Contractor {
    PCNAME: string;
    PCPHON: number;
  }
  </code></pre>