Pagination with Angular 2

Question

I am working with Angular 5, In one of my webpage i am hitting DB to fetch records. but from this service call i am getting more than 1,00,000 of records. while showing it on the webpage taking a lot of time and leads to the bad user experience.

I want to show 10 records in the web page after the remaining records will merge with existing records.

Please help me how to do it. is any RxJs operator available.

This is more of an API related question than `Angular`. Your `API` endpoint should be modified to return 10 records along with relevant page details for `next` & `previous` — Farooq Ahmed Khan, Dec 03 '18 at 06:13
we are implementing it , with HTML tables with *ngFor Directive — Santhosh, Dec 03 '18 at 06:23

score 0 · Answer 1 · answered Dec 03 '18 at 06:21

0

You can use primeng p table with paginator or if you are using bootstrap then you can use bootstrap pagination

https://www.primefaces.org/primeng/#/table/page

If you want it custom and your own paginator then write below logic for your table

<tr *ngFor="let game of games | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">

Refer How to add pagination in Angular 4 for a table?

answered Dec 03 '18 at 06:21

Jayant Patil

1,537
2
11
18

OP's concern is to decrease loading time. how this will help him acheive it? – Farooq Ahmed Khan Dec 03 '18 at 06:44

Pagination with Angular 2

1 Answers1