Pagination in Angular

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


This is the simplest way to implement pagination in Angular.

Here are the steps to include this in your application.

  •  Install using npm


  • 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


  • 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.


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.


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.



Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s