Navigate large collections of items.
A pager is used for navigating through a large, ordered collection. The pager component handles the details of figuring out which page numbers to show and which pages to disable. You only need to tell the pager how many items are in the collection and what the current page is. You may also control the number of items per page (default: 10) and the maximum number of pages to display (default: 5).
Example:
You may adjust the pager settings using the code example below.
<ma-pager [currentPage]='currentPage' [totalItems]='77' [itemsPerPage]='' [maxPages]='' (selectPage)='selectPage($event)'> </ma-pager>
The [currentPage]
property should generally be set to some
variable in your own component that keeps track of the current page number.
In your (selectPage)
handler, you may update your current page
number, which will cause the pager to re-render itself.
The selectPage()
handler might look like this:
void selectPage(Page page) { this.currentPage = page.pageNumber; /* Your logic to fetch and render items here. */ }
Pagers are inline elements.
Pagers are easy to position because they are inline elements. You may use text alignment to position a pager. Note: these pagers aren't functional — just used to demonstrate layout.
<div class='text-xs-center'> <ma-pager [currentPage]='3' [totalItems]='50'></ma-pager> </div>
<div class='text-xs-right'> <ma-pager [currentPage]='3' [totalItems]='50'></ma-pager> </div>