how to display records per page in angular 4 ngx pagination

Question

I have installed ngx pagination in angular 4. Everything works fine. I want to display records per page. ie. (Showing: 1 - 10 / 25 ). I have tried but i did not get any solution. Could you please help me on this. Thanks in advance.

@bashirudeen, have you got answer for your question? i am also struck with same kind of issue — Bhrungarajni, Dec 30 '19 at 09:58
@C.Ikongo, i have made as custom code and that worked for me, i will post my answer, you can have a look — Bhrungarajni, Jan 01 '20 at 06:35

score 1 · Answer 1 · answered Jan 01 '20 at 06:40

i have worked in this way and it helped,

 public setPageNumbers(pageNo,pageSize) {
    this.startValue = (pageNo * pageSize) - (pageSize -1)
    this.lastValue = this.agentParms.pageNo * this.agentParms.pageSize;
    this.lastValue = this.lastValue > this.agentTotal ? this.agentTotal: this.lastValue;
  }

so here i am multiplying, with current page number and page size, and subtracting with the current page size, so i get the first value, and to obtain last value, checking with page no. and page size, and displaying that as last value.. If the last value is greater than the total count, then the total count is taken as the last value.

Hope this helps.

score 0 · Answer 2 · answered Feb 12 '18 at 11:24

0

You can use PaginatePipe at the end of an NgFor expression.And you can pass number of records you want to display as config option.

<element *ngFor="let item of collection | paginate: { itemsPerPage: pageSize,
                                                  currentPage: p,}">...</element>

answered Feb 12 '18 at 11:24

Ankita Gupta

573
3
13

Thank you for your quick reply. I have already done this pagination. I want to display (Showing: 11 - 20 / 25) like this at the bottom. – bashirudeen ahmad Feb 13 '18 at 05:32

how to display records per page in angular 4 ngx pagination

2 Answers2