Angular pagination

Sometimes we need to display a huge list of data let's say a 500 article or more in one table. For the user experience it is not practical to put all of them in one page a specially when user have small device to display the list. So we need a better solution for that.

PAGINATION: that means divide the list to a smaller lists that we can display in client screen.
So how is it done in angular

1- install ngx-pagination

npm i ngx-pagination

2- import NgxPaginationModule in our module

import { NgxPaginationModule } from 'ngx-pagination';
imports: [..., NgxPaginationModule]

This module allow as to use pagination pipe and directive.

3- add pagination pipe to the list element on the template

*ngFor="let item of items | paginate: { itemsPerPage: 10, currentPage: p }

ItemPerPage : define the number of line we want to display.
CurrentPage : define the number of the page displayed it is defined we define it in the class component.

4- Add pagination-controls directive

(pageChange)="p = $event">

This directive allow navigation between the list pages without leaving the current component