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:
collectionSize
- Number of elements/items in the collection. i.e. the total number of items the
pagination should handle.
pageSize
- Number of elements/items per page.page
- The current page.
To split the data collection yourself, use @for
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:
page
and pageSize
have default values, which are respectively
1
and 10
.
To add filtering or sorting on top of your pagination, you will have to update the way you split your data collection. As mentioned 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:
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.
You can additionally decide how to render all page numbers using
NgbPaginationPagesContext
Also see the Customization example for a live version.