Page {{ currentPage }} of {{ totalPages }}
The ux-pagination component can be used to provide navigation between pages when
display and interacting with large datasets. The pagination component can also be used in forms
using ngModel or reactive forms.
The direction button content can be customized by adding an ng-template as a child of
the ux-pagination component.
-
To customize the content of the previous button add
#previousBtnTemplate to the
ng-template element.
-
To customize the content of the next button add
#nextBtnTemplate to the
ng-template element.
The following properties can be used to configure the component:
Defines which page should currently be active.
Defines the total number of items in the dataset. This will be used in conjunction with the
itemsPerPage
to determine the number of pages required.
Defines the number of items that will be displayed on each page.
Defines the number page buttons allowed to be visible at any given time.
Defines if the Next and Previous buttons should be shown.
Allows the component to be disabled.
Allows a custom class to be added to the paging buttons.
Allows an aria label to be defined for the previous button.
Allows an aria label to be defined for the previous button.
Emits whenever the current page changes.
Emits whenever the number of pages required changes.
The following code can be used to create the example above: