I have an Angular v8 Material Design app with a mat-table. It's datasource is a simple array. I add, delete, and modify items in the array and I would like the mat-table to show the change, without the user having to refresh. (Its particularly bad, as when using Angular pages, an F5 refresh gets you a page not found).
I have searched a fair bit for this, and my favorite article is this one: Angular + Material - How to refresh a data source (mat-table) It has 21, yes twenty-one suggested answers. I must be missing something, but I would have thought the designers of the mat-table would have provided one, simple easy javascript call to achieve this. While I would love a great answer from anyone, I would particularly like an engineer on the Angular team to explain how they think a table should be used to provide a dynamic, automatic binding, akin to how a simple variable can be bound from the html to the javascripot, such as: {{personName}}
thanks
===============================================================
code
import { Component, OnInit } from '@angular/core';
import { Element } from '../Element';
import { ElementsService } from '../elements.service';
import { MatTable} from '@angular/material';
export interface PeriodicElement {
_id: string;
name: string;
weight: number;
symbol: string;
}
@Component({
selector: 'app-table-to-mongo',
templateUrl: './table-to-mongo.component.html',
styleUrls: ['./table-to-mongo.component.css']
})
export class TableToMongoComponent implements OnInit {
// this is the real array that the table displays from, I load it from a call to mongo
PeriodicElement: Element[] = [];
// needed for mat-table
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = this.PeriodicElement;
=========================
able starts here -->
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<!-- shows as position but it linked to my _id property -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element._id}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<!-- this line is what gets me the "click on any row and give me a row object" functionality -->
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
</table>