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 `@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:

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 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:

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

You can additionally decide how to render all page numbers using `NgbPaginationPagesContext`

Also see the Customization example for a live version.