[AngularJS] 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); 
         }
      }

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/angular/ba6bd456-3654-4573-82c9-b65b62684019%40googlegroups.com.