How to paginate divs with ngx-pagination

Question

I'm new at angular so I have this issue.

<div class="col-md-4" *ngFor="let student of students | paginate: {itemsPerPage:5, currentPage: p, totalItems: len}">
     {{student.name}}
</div>
<pagination-controls (pageChange)="p =$event"></pagination-controls>

I'm getting this error

Cannot read property 'totalItems' of undefined at PaginatePipe.push../node_modules/ngx-pagination/dist/ngx-pagination.js.PaginatePipe.transform

Component code:

public students= [];
public len;
ngOnInit() {
    this.serverService.getStudents().subscribe(
      data => {
        this.students= data,
        this.len = this.students.length
      }
    );
  }

and have you added `import {NgxPaginationModule} from 'ngx-pagination';` — Exterminator, Oct 11 '18 at 12:38
students =[] is array that filled from api, and yes that is imported — txenone, Oct 11 '18 at 12:44
Good thought, but still the same problem. The problem I think is in that 'totalItem' — txenone, Oct 11 '18 at 12:57
but as per the documentation you don't need to pass the same. — Exterminator, Oct 11 '18 at 12:58
check this https://stackblitz.com/edit/angular-e1f9hq?file=app%2Fapp.component.html it is working fine — Exterminator, Oct 11 '18 at 13:04
I found this but its too complicated I don't understand 100%, I have differerent json result http://michaelbromley.github.io/ngx-pagination/#/server-paging — txenone, Oct 11 '18 at 14:13

score 0 · Answer 1 · edited Jan 15 '20 at 14:44

0

<tbody *ngFor= "let item of con?.data?.countries | paginate:{itemsPerPage:10,currentPage: p}">
    <tr>
        <td>{{item['name']}}</td>
        <td>{{item['code']}}</td>                             
    </tr>
</tbody>

edited Jan 15 '20 at 14:44

Milo

3,365
9
30
44

answered Jan 15 '20 at 13:01

Ashraf Ali

1
2

4

Can you add some context to explain how this will answer the question, instead of code-only answer. – Arun Vinoth-Precog Tech - MVP Jan 15 '20 at 15:52

score 0 · Answer 2 · edited Feb 26 '21 at 01:52

I don't think you need to use totalItems as the pagination property here. ngx-pagination will automatically consider the length of the list/array as the total items.

<div class="col-md-4" *ngFor="let student of students | paginate: {itemsPerPage:5, currentPage: p}">
     {{student.name}}
</div>
<pagination-controls (pageChange)="p =$event"></pagination-controls>

This will resolve your original issue/error:

Cannot read property 'totalItems' of undefined at PaginatePipe.push../node_modules/ngx-pagination/dist/ngx-pagination.js.PaginatePipe.transform

Ashraf Ali · Answer 3 · 2020-01-16T14:51:02.500

-1

I am working at Angular 8. This code is helpful to use the 
pagination. I declare base url in API_URL in environment.ts.
example: API_URL:"http....",
endpoint: country

HTML code:
<tbody *ngFor= "let item of con?.data?.countries 
|paginate:itemsPerPage:10,currentPage: p}">
<tr>
<td>{{item['name']}}</td>
<td>{{item['code']}}</td>                             
</tr>
</tbody>

example.component.ts:

con:any;

ngOnInit() {
this.http.get(`${environment.API_URL}/country`).subscribe(res=>{
this.con=res      
})
}

edited Jan 16 '20 at 14:51

answered Jan 15 '20 at 13:08

Ashraf Ali

1
2

import { NgxPaginationModule } from 'ngx-pagination'; – Ashraf Ali Jan 15 '20 at 13:10
npm install ngx-pagination --save – Ashraf Ali Jan 15 '20 at 13:10
2

Why did you add more code in the comments? Just edit your question – THess Jan 15 '20 at 13:34
Just because what should install and what should import – Ashraf Ali Jan 15 '20 at 15:04

How to paginate divs with ngx-pagination

3 Answers3