title: Angular Material 2 how to update table data after edit without refreshing page?
body: <p>I used angular material 2 to display a table of data as an order each row. I instantiated <code>currentTradesData = new MatTableDataSource();</code> then initialize it in <code>ngOnInit</code>. The next action is when I cancel an order, the api returned a successful result, but that order row still shows <code>cancel button</code> in <code>status</code> cell instead of showing <code>closed</code> there, even thought I called method <code>updateTableData</code> to reinitialize the data source. </p>
  
  <p>Below is my code:</p>
  
  <p>order-history.component.ts:</p>
  
  <pre><code>export class OrderHistoryComponent implements OnInit {
    openColumns = ['amount', 'status'];
    resultsLength = 0;
    pageSize = 5;
  
    private paginator: MatPaginator;
    private sort: MatSort;
  
    @ViewChild(MatSort) set matSort(ms: MatSort) {
      this.sort = ms;
      this.setDataSourceAttributes();
    }
  
    @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
      this.paginator = mp;
      this.setDataSourceAttributes();
    }
  
    currentTradesData = new MatTableDataSource();    
    currentTrades: Trades[] = [];
  
    constructor(private apiService: ApiService,
      private userService: UserService) { }
  
    ngOnInit() {
      this.getTrades();
    }
  
    getTrades() {
      this.apiService.getTrades().subscribe((data: any) =&gt; {
        this.currentTrades = data;
        this.currentTradesData.data = this.currentTrades;
        this.resultsLength = this.currentTradesData.data.length;
      }, error =&gt; {console.log(error); });
    }
  
    cancelTrade(id) {
      this.apiService.cancelTrade(id).subscribe((data) =&gt; {
        this.updateTableData(data, id);
        this.setDataSourceAttributes();
      }, error =&gt; {console.log(error); });
    }
  
    private updateTableData(data: any[], id) {
      const index = this.currentTrades.findIndex(x =&gt; x.id = id);
      this.currentTrades[index].isClosed = true;
  
      this.currentTradesData = data &amp;&amp; data.length ? new MatTableDataSource(data)
        : new MatTableDataSource(this.currentTrades);
  
      this.resultsLength = this.currentTradesData.data.length;
      this.setDataSourceAttributes();
    }
  
    setDataSourceAttributes() {
      this.currentTradesData.paginator = this.paginator;
      this.currentTradesData.sort = this.sort;
    }
  }
  </code></pre>
  
  <p>view:</p>
  
  <pre><code>&lt;mat-table [dataSource]="currentTradesData" matSort&gt;
            &lt;mat-header-row *matHeaderRowDef="openColumns"&gt;&lt;/mat-header-row&gt;
            &lt;mat-row *matRowDef="let row; columns: openColumns;"&gt;&lt;/mat-row&gt;
  
            &lt;ng-container matColumnDef="amount"&gt;
              &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Amount &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let row"&gt;{{row.amount}}&lt;/mat-cell&gt;
            &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="status"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt;&lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let row" class="text-center"&gt;
                &lt;button mat-raised-button class="cancel-btn" *ngIf="!row.isClosed" (click)="cancelTrade(row.id)" color="warn"&gt;
                  Cancel
                &lt;/button&gt;
                &lt;span *ngIf="row.isClosed == true"&gt;
                  &lt;mat-chip color="primary" selected="true"&gt;Closed&lt;/mat-chip&gt;
                &lt;/span&gt;
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt; 
          &lt;/mat-table&gt;
          &lt;mat-paginator [pageSize]="pageSize" [length]="resultsLength"&gt;&lt;/mat-paginator&gt;
  </code></pre>