Pagination in Angular

Table of contents

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

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

	@NgModule({
	declarations: [
	AppComponent,
	PreDemonstrationComponent
	],
	imports: [
	BrowserModule, HttpClientModule, FormsModule, NgxPaginationModule
	],
	providers: [ParameterListService],
	bootstrap: [AppComponent]
	})
	export class AppModule { }

view raw

gistfile1.txt

hosted with ❤ by GitHub

Add PaginatePipe in the HTML file

Show hidden characters

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

view raw

gistfile1.txt

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

Show hidden characters

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

view raw

gistfile1.txt

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 🙂

References:
https://www.npmjs.com/package/ngx-pagination