title: Angular Material Table | Add Remove rows at runtime
body: <p>I am using <a href="https://material.angular.io/components/table/overview" rel="noreferrer">Angular Material Table</a> that is backed by a plain array as the data source.</p>
  
  <pre><code>this.employees = this.route.snapshot.data.employes; // of type Employee[] resolved using a Resolve guard
  this.dataSource = new MatTableDataSource&lt;Employee&gt;(this.employees);
  </code></pre>
  
  <p>Once rendered initially, I want to add/remove rows from the data table by modifying the 'this.employess' array using method in my component :-</p>
  
  <pre><code>addEmployee(e: Employee){
   this.employess.push(e);   // I expect the table to have one row added after this.
  }
  
  removeEmployee(index : number){
    // splice the array at given index &amp; remove one row from data table
  }
  </code></pre>
  
  <p><strong>PROBLEM</strong></p>
  
  <p>The data table rows are not affected when I add remove elements in my array. 
  I found an a <a href="https://blog.angular-university.io/angular-material-data-table/#datasourcesandthedatatablereactivedesign" rel="noreferrer">blog</a> elaborating same problem but uses a custom data source.  Is there any way using plain array ?</p>