ngx-datatable server side scrolling - table is constantly calling api when it get to the last item and the data is never updated

Question

the parent component makes a call to the api and pushes data to the sharedData service and subscribes to it. So everytime a change has been made to the date set its automatically updated in the parent component.

ngOnInit() {
    this.initialise();
  }

  initialise() {
    this.dataShareService.setDataFilter(null);
    this.loading = true;
    this.assetService.table_data().subscribe(res => {

      this.dataShareService.setEnviromentData(res);
      this.dataShareService.enviromeData.subscribe(r => {
         this.loading = false;

         this.data = r;
         let i = 0;
         console.log('just a ocunt', i++)
        this.searchValue = r['results'].map((val: any) => {
          return val.name;
        });

       this.totalItems = this.data['results'].length;

      this.loading = false;

    }, err => {
      console.log(err);
    });
  }

this data is then passed down to the child component - which is the data table

      <data-table
         *ngIf="!loading"
          class="flex_display_centre"
          [showTable]="showTable"
           [columns]="columns"
           [limit]="limit"
           [data]="data">
   </data-table>

I am the onScroll function to to get the why coordinates.

<ngx-datatable     
     [scrollbarV]="true"
     [loadingIndicator]="isLoading"
      [limit]="limit"
     (scroll)='onScroll($event.offsetY)'>
    </ngx-datatable>


 onScroll(offsetY: number) {
    this.isLoading = true;


   let numberViewRows = 12;
   const viewHeight = this.el.nativeElement.getBoundingClientRect().height - this.headerHeight;


   if (!this.isLoading && offsetY >= this.rowHeight * numberViewRows ) {

      this.loadPageData.emit(this.data['next']);
      this.isLoading = false;
    }
}

Once the condition is true an emitter is sent to the parent component to get the next page/data

nextPage(pageNum: any) {

    this.isLoading = true;
    this.assetService.reloadDataTable(pageNum).subscribe(results => {

    this.dataShareService.setEnviromentData(results);


    this.isLoading = false;
  }, err => {
     console.log('err', err)
  });
}

data share service: this first time the service get data it assigns the to previousEnviromentData variable. everytime the api is called the next/prev and count is updated and the results array is appended to the previous data

  private enviromeInfoData = new BehaviorSubject([{}]);
  enviromeData = this.enviromeInfoData.asObservable();
  private previousEnviromentData;

  setEnviromentData(data: any) {


     if (data['results'] !== this.previousEnviromentData && this.previousEnviromentData !== undefined) {

      this.previousEnviromentData["count"] = data.count,
      this.previousEnviromentData["next"] = data.next,
      this.previousEnviromentData["page_count"] = data.page_count,
      this.previousEnviromentData["previous"] = data.previous,
      this.previousEnviromentData['results'].push(...data['results']);


      this.enviromeInfoData.next(this.previousEnviromentData);

   } else {

     this.previousEnviromentData = data;
     this.enviromeInfoData.next(data);
  }

}

However when I scroll to the bottom of the table the data is updated in the parent components and data share servuce but never updates in the table. What am I doing wrong/missing?