How to display the number of records present in particular page using ngx-pagination

Question

I am working on ngx-pagination, here i have to display the number of records present in that particular page. For example: if i have set items per page as 10, then in page number 1, it must show 1-10, if page number 2: it must show 11-20, if items per page is 50, then it must be 1-49, 50-99 and so on..

HTML:

 <pagination-controls (pageChange)="pageChanged($event)" class="my-pagination"></pagination-controls>

in table i am using pipe paginate, which links to ngx-pagination:

<tr  *ngFor="let agent of agentList | paginate: config)">

in Ts:

 public config = {
    itemsPerPage: 10,
    currentPage: 1,
    totalItems: 0
  };

Demo

here, if i am on page1, i need to show 1-10 are shown and so on

Does this answer your question? [How to add pagination in angular project using ngx-pagination and show it's status](https://stackoverflow.com/questions/70470312/how-to-add-pagination-in-angular-project-using-ngx-pagination-and-show-its-stat) — Ricardo Castañeda, Apr 13 '23 at 21:46

score 1 · Answer 1 · answered Dec 30 '19 at 13:08

Updated code into demo which you have added link see below code which I have updated in that stackblitz not able to share it.

In .ts file

  config: any;
  constructor() {
      this.config = {
      currentPage: 1,
      itemsPerPage: 10,
      totalItems:0
   };
 this.config.currentPage= 1;
  for (let i = 1; i <= 100; i++) {
      this.collection.push(`item ${i}`);
    }
  }

  public setItemsPerPage(event) {
      this.config.itemsPerPage = event
  }
  pageChange(event){
    this.config.currentPage = event;
  }

In Html

<ul>
    <li *ngFor="let item of collection | paginate: config">{{ item }}</li>
 </ul>
    <div class="col-auto">
                                    <select class="custom-select" (change)="setItemsPerPage(page.value)" #page>
                                        <option selected>10</option>
                                        <option>50</option>
                                        <option >100</option>
                                        <option >500</option>
                                    </select>
                                </div>

        <pagination-controls (pageChange)="pageChange($event)"></pagination-controls>

Hope this will help you

let me know if not work..

thanks

How to display the number of records present in particular page using ngx-pagination

1 Answers1