Pagination is a component that only displays page numbers. It will not manipulate your data collection. You will have to split your data collection into pages yourself.

In order to properly operate a pagination behaviour, there are 3 important notions you have to be familiar with, which are actually available as @Input() on the widget:

  1. collectionSize - Number of elements/items in the collection. i.e. the total number of items the pagination should handle.
  2. pageSize - Number of elements/items per page.
  3. page - The current page.

To split the data collection yourself, use *ngFor associated with the slice pipe to extract (or slice) a sub-part of it.

Corresponding code could be something like:

and the associated <ngb-pagination> would be like:


Be aware that both page and pageSize have default values, which are respectively 1 and 10.

Filtering and sorting

To add filtering or sorting on top of your pagination, you will have to update the way you split your data collection. As mentionned in Angular documentation, you don't need to reimplement dedicated pipes for that purpose. Recommendation is to move filtering and sorting logic into the component itself where some property getters could be exposed.

It is possible to customize what exactly is displayed in each pagination link and there are several ways of doing it.

You could use the Angular i18n API as all labels are translated. For instance you could replace the default '«' (previous arrow) with the 'Prev' text by providing a different translation for the ngb.pagination.previous key in your i18n file and ngb.pagination.previous-aria for the corresponding aria-label attribute.

You could also override the CSS to hide the default span and provide an alternative content. For example for the previous arrow:

Using templates

Sometimes you would want to display an icon, an image or any arbitrary markup instead of the page number. In this case since you could use the template-based API to override any pagination link:

In this case we customize all pagination links, but you can pick only the ones you need of course. The template NgbPaginationLinkContext is available for all templates and for page numbers there is a NgbPaginationNumberContext that adds displayed number on top.

Also see the Customization example for a live version.