title: Angular Material - Triggering Table Data Refresh
body: <p>I have a <code>angular-material</code> table with the <code>datasource</code> coming from a <code>variable array</code></p>
  
  <p>The array can have elements pushed to by the onscreen form. This works fine, and the element is pushed and to ensure it I print out the entire datasource and my the new object is reflected there. </p>
  
  <p>Here is that code:</p>
  
  <pre><code>reportFields = [{name: "name_test", filter: "filter_test" }];
   addReportField(){
          this.reportFields.push({
              name: this.fieldToAdd.name,
              filter: this.fieldToAdd.filter
          });
          this.frmField.reset();
          this.changeDetectorRefs.detectChanges();
          console.log(this.reportFields);
      }
  </code></pre>
  
  <p>reportFields is the datasource, and when the page load the table loads with that data inside. But when I add one during run time, using the addReportField method, the datasource doesn't reload.</p>
  
  <p>I tried using that ChangeDectectorRef and then detect changes but that didn't work.</p>
  
  <p>Here is the HTML for the table</p>
  
  <pre><code>&lt;mat-table [dataSource]="reportFields" style="background: inherit;"&gt;
              &lt;ng-container matColumnDef="field"&gt;
                  &lt;mat-header-cell *matHeaderCellDef&gt;Field Name&lt;/mat-header-cell&gt;
                  &lt;mat-cell *matCellDef="let element"&gt;{{element.name}}&lt;/mat-cell&gt;
              &lt;/ng-container&gt;
  
              &lt;ng-container matColumnDef="filter"&gt;
                  &lt;mat-header-cell style="margin-right: 20px;" *matHeaderCellDef&gt;Filter&lt;/mat-header-cell&gt;
                  &lt;mat-cell style="margin-right: 20px;" *matCellDef="let element"&gt;
                      {{element.filter}}
                  &lt;/mat-cell&gt;
              &lt;/ng-container&gt;
  
              &lt;ng-container matColumnDef="delete"&gt;
                  &lt;mat-header-cell style="text-align: end;" *matHeaderCellDef&gt;&lt;/mat-header-cell&gt;
                  &lt;mat-cell *matCellDef="let element" style="text-align: end;"&gt;
                      &lt;mat-icon (click)="deleteReturn(element.id, 'standard')" style="font-size: 24px; cursor: pointer;" matTooltip="Delete"&gt;clear&lt;/mat-icon&gt;
                  &lt;/mat-cell&gt;
              &lt;/ng-container&gt;
  
              &lt;mat-header-row *matHeaderRowDef="reportFieldsColumns"&gt;&lt;/mat-header-row&gt;
              &lt;mat-row *matRowDef="let row; columns: reportFieldsColumns;"&gt;&lt;/mat-row&gt;
          &lt;/mat-table&gt;
  </code></pre>