title: Refresh Angular 4 Table
body: <p>Im having trouble with my angular 4 application. I am taking a user input and appending it to an array, which holds the data for the table. I can see that the input is being pushed into the array, but the Table itself isn't updating. I have tried using changeDetection and true,false conditions, but was unfortunately unsucessful. Is there another way to update the table with the pushed data? My code is below, including the table html,ts docs, and input ts doc. Many thanks!</p>
  
  <p>Input-form.component.ts</p>
  
  <pre><code>export class InputFormComponent implements OnInit {
    subjectItems: Array&lt;string&gt; = [];
    subjectNumber = 0;
  
    constructor(public snackBar: MatSnackBar) {
    }
  
    ngOnInit() {
    }
  
    addSubjectToTable (position2, subjectNameItem2, totalTimeStudy2) {
      SubjectTableDATA.push({
        position: position2, subjectNameItem: subjectNameItem2,
        totalTimeStudy: totalTimeStudy2
      });
      console.log('subejcttable called');
      console.log(SubjectTableDATA);
      reloadTable();
      console.log('reloadTable func called');
    }
    addSubject(subjectName, timeStudy) {
      console.log('Called function');
      if (subjectName &amp;&amp; timeStudy) {
        console.log('All fields inputted, adding...');
        this.subjectItems.push(subjectName, timeStudy);
        this.subjectNumber += 1;
        console.log(this.subjectItems);
        this.addSubjectToTable(this.subjectNumber, subjectName, timeStudy);
      }
    }
  
  }
  </code></pre>
  
  <p>table.component.ts</p>
  
  <pre><code>export class TableComponent implements OnInit {
    displayedColumns = ['position', 'subjectNameItem', 'totalTimeStudy'];
    dataSource = new MatTableDataSource&lt;SubjectTable&gt;(SubjectTableDATA);
  
    constructor() {
    }
  
    ngOnInit () {}
  }
  export interface SubjectTable {
    position: number;
    subjectNameItem: string;
    totalTimeStudy: string;
  
  }
  export var SubjectTableDATA: SubjectTable[] = [
    {position: 1, subjectNameItem: 'math', totalTimeStudy: '9 hours'}
  ];
  
  export function reloadTable () {
    console.log('reloading table');
  }
  </code></pre>
  
  <p>table.component.html</p>
  
  <pre><code>&lt;div class="TableForInputtedSubjects"&gt;
    &lt;mat-table #table [dataSource]="dataSource"&gt;
  
      &lt;ng-container matColumnDef="position"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; ID: &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let SubjectTable"&gt; {{SubjectTable.position}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;!-- Name Column --&gt;
      &lt;ng-container matColumnDef="subjectNameItem"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Subject Name: &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let SubjectTable"&gt; {{SubjectTable.subjectNameItem}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="totalTimeStudy"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Total Study Time: &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let SubjectTable"&gt; {{SubjectTable.totalTimeStudy}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
    &lt;/mat-table&gt;
  &lt;/div&gt;
  </code></pre>