Pagination in Angular

Reading Time: < 1 minute

What if, you have to scroll down infinitely through a large chunk of data. Well, I don’t think you have plenty of time to explore that ocean of information. So here comes Pagination which divides the content into separate pages. In angular, we have a library called ngx-pagination which is supported in Angular 2.3.0+. This can be added to your application by installing the library.

npm install ngx-pagination – -save

Let’s implement the pagination by example.

Import NgxPaginationModule in app.module.ts

declarations: [
imports: [
BrowserModule, HttpClientModule, FormsModule, NgxPaginationModule
providers: [ParameterListService],
bootstrap: [AppComponent]
export class AppModule { }

view raw


hosted with ❤ by GitHub

Add PaginatePipe in the HTML file

<div *ngFor = "let questions of questionList | paginate: {itemPerPage: 5, currentPage: p}">

view raw


hosted with ❤ by GitHub

itemPerPage: Number of items that displayed on a single page.

currentPage: the current page number

Add Pagination control in the HTML file

<pagination-controls (pageChange) = "p = $event"
previousLabel = "Previous"
nextLabel = "Next"
directionLinks = "true"
autoHide = "true">

view raw


hosted with ❤ by GitHub

(page change): It is of EventEmitter type which emits custom events and it will assign the value of p as the number of new page and this value of p is assigned to currentPage. Even if you want to invoke any method while switching onto next page, this can be invoked on page change event.

previousLabel = “Previous”: The label “Previous” is displayed on previouLabel.

nextLabel = “Next” : The label “Next” is displayed on nextLabel.

directionLinks: By default, it is true and “directionLink = false” will hide the next and previous label.

autoHide: By default, it is false and “autohide = true” will hide the pagination controls if the content is fit into the single page.

There are other pagination labels and many other pagination techniques also. If you want to explore more, please visit here .

Hope this is helpful and give you the basic idea of implementing Pagination in Angular. Please feel free to provide your suggestions 🙂