How to display paging results using paging id using ngx-datatable & angular?

Requirement:

Showing dynamic data using ngx-datatable and use paging using page id

Description :

I have a dynamic data where I am displaying it using the ngx-datatable in angular and here everything works but the issue I m not sure how to apply the paging using the page_id (sent to the server using post body). Here I am getting the page_id along with the API response this is 1st API call. here page_id has to be sent as a body for the very same API for getting the rest of results.

Ex: Suppose I have 20 results in the 1ST API call I will get the 10 records and a page id by using the page id how can I get the next 10 results

What I implemented:

Getting data and displaying it in table basic paging applied

Below is my code :

Result=[];
  reorderable: boolean = true;
  selected = [];
  rows = [];
  columns = [];
  DataArray = [];
  Results = {
    "data": [
      {
        "_score": 0.36464313,
        "_type": "data",
        "_id": "abcd",
        "_source": {
          "filter": "data",
          "information": {
            "product_id": "abcd",
            "creation_utctime": "1477335693653"
          },
          "enduser": "free"
        },
        "_index": "dell_laptop"
      },
      {
        "_score": 0.36464314,
        "_type": "data",
        "_id": "abcde",
        "_source": {
          "filter": "data",
          "information": {
            "product_id": "abcde",
            "creation_utctime": "1477335693653"
          },
          "enduser": "free"
        },
        "_index": "lenovo_laptop"
      },
      {
        "_score": 0.36464314,
        "_type": "data",
        "_id": "abcdef",
        "_source": {
          "filter": "data",
          "information": {
            "product_id": "abcde",
            "creation_utctime": "1477335693653"
          },
          "enduser": "free"
        },
        "_index": "lenovo_laptop"
      }
    ],
    "total": 4,
    "page_id": "WpNdVJMMjlJVnJTYTFuUklB"
  }



  LoadInfo(){
    this.DataArray = ["filter","information.product_id","information.creation_utctime","enduser"];
    this.rows=[];
    this.Result = this.Results['data'];
// tslint:disable-next-line: forin
    for (var res in this.Result) {
      var row = {};
      for (var key in this.Result[res]['_source']) {
        if (typeof this.Result[res]['_source'][key] === 'object') {
          for (var k in this.Result[res]['_source'][key]) {
            let temp = key + "." + k;
            row[temp] = this.Result[res]['_source'][key][k];
          }
        } else {
          row[key] = this.Result[res]['_source'][key]
        }
        row['_id'] = this.Result[res]['_id'];
      }
      this.rows.push(row);
    }
    console.log(this.rows);

  }

  onActivate(event) {
    // console.log('Activate Event', event);
  }

  onSelect({ selected }) {
    // console.log('Select Event', selected, this.selected);

    this.selected.splice(0, this.selected.length);
    this.selected.push(...selected);
  }

HTML Code:

<button type="button" (click)="LoadInfo()">LoadData</button>

 <div>
     <ngx-datatable class="material ui" [rows]="rows" [columnMode]="'force'" [headerHeight]="50"
     [footerHeight]="50" [limit]="2" [rowHeight]="'auto'" [reorderable]="reorderable" [selected]="selected"
     [selectionType]="'checkbox'" [scrollbarH]="true" [sortType]="'multi'" (activate)="onActivate($event)"
    (select)='onSelect($event)'>

    <ngx-datatable-column [width]="30" [sortable]="true" [canAutoResize]="false" [draggable]="false"
    [resizeable]="false" class="uih">
    <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
      let-selectFn="selectFn">
      <input type="checkbox" [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)" />
    </ng-template>
    <ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected"
      let-onCheckboxChangeFn="onCheckboxChangeFn">
      <input type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column *ngFor="let attr of DataArray" [sortable]="true" prop= name=>
  </ngx-datatable-column>

     </ngx-datatable>
</div>

Stackblitz link: https://stackblitz.com/edit/angular-secw8u

Note: even though if there is pageid also some times after 10 records there may not be more records also

here api call is simple post request

api : https://xxxx.xxxx..com/<some method>
 body: { "key1":"data1","key2":"data2","pageid":"ss"}

here in the first api call we wont send page id as after calling the first api call we will get response in that we will get the pageid and for the second api call i mean for paging then we have to use the pageid

from How to display paging results using paging id using ngx-datatable & angular?