CODEWITHSUNDEEP
javascriptangulartypescriptpaginationionic2
ernes3
ernes3

Reputation: 101

Pagination in IONIC 2

thanks for all the help!. In this oportunity, I need to create a pagination for a grid (like google pagination or something like that) and show only 10 or 20 rows in the current page. I can't find anything for ionic 2, only pagination with infinite scroll.

Thanks again!

Upvotes: 0

Views: 784

Answers (1)

Raef Kandil
Raef Kandil

Reputation: 307

What you need is to have a Subject which can act as both a publisher and a subscriber.

  • Create a service that can get you the pages with simple Http calls.

  • Use a subject that can be used as both a publisher and a subscriber.

  • Use *ngFor with the async pipe.

  • publish using the Subject using the next() method and have the *ngFor listen to the Observable.

    Sample code:-

//subject that can be used as a publisher and a subscriber

private paginationGetter: Subject <Product[]> = new Subject <Product[]> ();
private paginationGetter$: Observable <Product[]> = this.paginationGetter.asObservable();

return the paginationGetter$ in the method that returns the pages and use paginationGetter.next(data) to publish the new data and then display it using a code similar to:-

ion-col *ngFor="let item of items | async">

Note that items refer to: paginationGetter$ and async pipe is necessary for *ngFor to be able to display observables.

Please, refer to a live example here:-

Pagination Example

Hope that helps

Upvotes: 1

Related Questions