How to make cdk-virtual-scroll more dynamic in angular with api

here’s the code:


<div nz-row class="landing-content" *ngIf="infinite | async as location">
    <cdk-virtual-scroll-viewport itemSize="50" class="landing-body" (scrolledIndexChange)="nextBatch($event, (location[location.length - 1].sensor))">
      <div *cdkVirtualFor="let data of tempThermometer.value;let i = index">
        <div class="app-section" nz-col nzXs="24" nzSm="12" nzMd="12" nzXl="8" nzXXl="6">
          <div class="app-section-item">
            <div class="app-section-title">
              <label [textContent]="removeSpecialCharacter(data.sensor)"></label>
              <i nz-icon nzType="info-circle" nzTheme="outline" nz-popover
                nzTitle="{{ removeSpecialCharacter(data.sensor) + ' Details' }}" nzTrigger="click"
                [nzContent]="locationInfo" nzPlacement="leftTop" *ngIf="data.locationCode"></i>
              <ng-template #locationInfo>
                <div style="width: 300px;min-width: 230px;">
                  <div nz-row>
                    <div nz-col nzSpan="10">Location Code</div>
                    <div nz-col nzSpan="14">
                      <label [textContent]="': ' + data.locationCode"></label>
                  <div nz-row>
                    <div nz-col nzSpan="10">Location Name</div>
                    <div nz-col nzSpan="14">
                      <label [textContent]="': ' + data.sensor"></label>
                  <div nz-row>
                    <div nz-col nzSpan="10">Device Code</div>
                    <div nz-col nzSpan="14">
                      <label [textContent]="': ' + data.deviceCode"></label>
                  <div nz-row>
                    <div nz-col nzSpan="10">Device</div>
                    <div nz-col nzSpan="14">
                      <label [textContent]="': ' + removeSpecialCharacter(data.deviceDescription)"></label>


      tempThermometer = new BehaviorSubject<any>([]);

pageIndex = 1;
      offset = new BehaviorSubject(null);
      batch = 4;
      infinite: Observable<any[]>;

      theEnd = false;

    getRoomList() {
        this.tempLoading = true;
        this.subscription =
          .subscribe((res: any) => {
            this.pageTotal = res['recordsFiltered'];
  ['data'].map((obj: any) => {
              return {
                spinning: true
            this.tempLoading = false;

            this.infinite = this.tempThermometer.pipe(map(v => Object.values(v)));
            this.setData(this.tempThermometer.value, this.toggleUnit);
            // const data = orderBy(this.tempThermometer.value, ['date'], ['asc']);
            // this.lineChart(this.tempThermometer.value);

      nextBatch(e: any, offset: any) {
        if (this.theEnd) {

        const end = this.viewport.getRenderedRange().end;
        const total = this.viewport.getDataLength();
        console.log(`${end}, '>=', ${total}`);
        if (end === total) {

      trackByIdx(i: number) {
        return i;

What I’m trying to do here is when I scroll it will display the next batch.
on my api I added param start and length.

What I’m doing it run the app, it will display first the 4 data and when it scroll down it will display the next batch or next pageIndex.

When I scroll down on my devtool and check in console, the output is 4 >= 4 it doesn’t change.

How to make it more dynamic?

Source: New feed
Source Url How to make cdk-virtual-scroll more dynamic in angular with api