Angular materials Mat-table, not working with in the html with .push

[Megan Meluskey]

I am working on an infinite scroll in angular 8. I am using an angular materials table to display my data.

Html:

<mat-table [dataSource]="displayOfMassSendObjects" 
   infinite-scroll
   [infiniteScrollDistance]="scrollDistance"
   [infiniteScrollUpDistance]="scrollUpDistance"
   (scroll)="onScrollDown()"
   (scrollup) = "onScrollUp()"
>

 <ng-container id = "companyNameColumn" matColumnDef="companyName">
    <mat-header-cell id = "companyNameTitle" 
           *matHeaderCellDef>CompanyName</mat-header-cell>
    <mat-cell class = "companyNameData" *matCellDef="let row"> 
           {{row.companyName}}</mat-cell>
 </ng-container>

 <ng-container id = "emailColumn" matColumnDef="email">
    <mat-header-cell id = "emailTitle" 
          *matHeaderCellDef>Email</mat-header-cell>
    <mat-cell class = "emailData" class="email" *matCellDef="let row"> 
           {{row.email}}</a></mat-cell>
  </ng-container>

    <mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: tableColumns"> </mat-row>

</mat-table>

On load I have 10 records showing up in the table. When I scroll down, I am expecting that more records will populate in the HTML but they are not. The records are however being added to the array in the console.log(). I think the problem is that the HTML Angular Materials is not recognizing the .push because when I substitute .push for .slice, the records show up in the HTML, however don't want the app to work like that.

Here is my component for the table where I want the scroll bar:

 export class MassSendComponent implements OnInit {
  sum = 10; 
  globalList = []; 
  displayOfMassSendObjects: MassSend[]; 
  tableColumns : string[] = ['ispNumber','companyName', 'email', 'taxId']
  constructor(
      private mockMassSendService: MockMassSendService,
       ) {}

  ngOnInit(): void {
      this.getMassSendData();  
  }

 getMassSendData() {
      this.mockMassSendService.getMassSendData()
         .subscribe(massSendObjects => {
             this.globalList = massSendObjects; 
             this.displayOfMassSendObjects = massSendObjects.slice(0, 
             this.sum);
     }); 
  }

  getMoreData() {
    this.displayOfMassSendObjects.push(this.globalList[this.sum]); 
  }


 onScrollDown(): void {
   console.log(this.displayOfMassSendObjects);  
   this.getMoreData(); 
   this.sum += 1;
  }
}

I also have a service method being called:

     export class MockMassSendService {

      constructor() { }

         getMassSendData(): Observable<MassSend[]> {
             return of(mockMassSend); 
         }
      }