How to get Angular mat-table to auto-refresh after the data in the datasource array changes

Question

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>