Pagination in Angular

In this blog, I will show how to implement pagination in Angular applications.

USING NGX-PAGINATION

This is the simplest way to implement pagination in Angular.

Here are the steps to include this in your application.

  •  Install using npm

npm_install_ngxpagination

  • Import and include in imports in app.module.ts(or the specific module if you have multiple modules in your application), so that it is available for all components in the module.  Here I will include in app.module.ts as below

appmodulet2

  • Include in the specific component(test.component in this example) where you need to incorporate pagination logic

 In test.component.ts, include the declaration of  variable to handle current page ‘p’ and initialize to 1.

pvar

In test.component.html, include the display logic as below(items is the list to be displayed page wise here with 1 item on each page set using itemsPerPage)

The PaginatePipe should be placed at the end of an NgFor expression as shown below.

The PaginationControlsComponent included using the pagination-controls directive(as below) is the default component for displaying pagination controls.

testhtml

This gives a convenient pagination display with the required parameters, where we can easily set the number of items per page as per our need.

pagination

References:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s