Mat-Table inside Mat-Dialog not updating

Question

I'm working on an Angular 7.3.8 app and I'm using Angular Material library. I'm able to initialize the mat-table component with data through NgOnInit cycle, but when I try to update the table with some data through some function, the UI is not being updated.

Already tried using NgZone to force update UI and still not working.

Here's the code for the template:

 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Checkbox Column -->
  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox (change)="$event ? masterToggle() : null"
                    [checked]="selection.hasValue() && isAllSelected()"
                    [indeterminate]="selection.hasValue() && !isAllSelected()"
                    >
      </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox (click)="$event.stopPropagation()"
                    (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)"
                    >
      </mat-checkbox>
    </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="day">
    <th mat-header-cell *matHeaderCellDef> Day </th>
    <td mat-cell *matCellDef="let element"> {{element.day | titlecase}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="startHour">
    <th mat-header-cell *matHeaderCellDef> Start Hour </th>
    <td mat-cell *matCellDef="let element"> {{element.startHour}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="endHour">
    <th mat-header-cell *matHeaderCellDef> End Hour </th>
    <td mat-cell *matCellDef="let element"> {{element.endHour}} </td>
  </ng-container>

  <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef> Action </th>
      <td mat-cell *matCellDef="let element"> {{element.action}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
      (click)="selection.toggle(row)">
  </tr>
</table>

And here's the update function:

ngOnInit(){
  this.dataSource = [
    { day: 'Monday' , startHour: '9: 00 am', endHour: '13:00 pm', 
     action: '' };
}

addPeriod(form: any){
   const obj = {
      day: form.value.pickedDay,
      startHour: form.value.startHour + ': 00 am',
      endHour: form.value.endHour + ': 00 pm',
      action: ''
   } as TableSchedule;

   this.zone.run(() => {
      this.dataSource.push(obj);
      console.log('new data:', this.dataSource);
   });
}

Log shows dataSource array being updated but the UI doesn't show new values.

Answer 1

I didn't test this but have you tried something like this:

public rows = [];

ngOnInit() {
    this.rows.push({ day: 'Monday', startHour: '9: 00 am', endHour: '13:00 pm', action: '' });
    this.dataSource = new MatTableDataSource(this.rows);
}

addPeriod(form: any) {
    const obj = {
        day: form.value.pickedDay,
        startHour: form.value.startHour + ': 00 am',
        endHour: form.value.endHour + ': 00 pm',
        action: '',
    };

    this.rows.push(obj);
    this.dataSource = new MatTableDataSource(this.rows); // not sure if this is even needed
}

Answer 2

I finally managed to get it working by assigning a new array using the "..." spread operator:

 const array = this.dataSource;
 if (this.checkDuplicate(array, obj)) {
      console.log('DUPLICATE');
 } else {
      array.push(obj);
      this.zone.run(() => {
        this.dataSource = [...array];
        console.log('new data:', this.dataSource);
      });
 }

Personally I don't understand why is it working this way, any clarification would be appreciated.