Angular Bootstrap Pagination
Angular pagination - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A newer
version is available for Bootstrap 5. We recommend migrating to the latest version of our
product -
Material Design for Bootstrap 5.
Go to docs v.5
We use a large block of connected links for our pagination, making links hard to miss and easily
scalable—all while providing large hit areas. Pagination is built with list HTML elements so
screen readers can announce the number of available links. Use a wrapping
<nav> element to identify it as a navigation section to screen readers and
other assistive technologies.
In addition, as pages likely have more than one such navigation section, it’s advisable to
provide a descriptive aria-label for the <nav> to reflect its
purpose. For example, if the pagination component is used to navigate between a set of search
results, an appropriate label could be aria-label="Search results pages".
Basic example
<nav aria-label="Page navigation example">
<ul class="pagination pg-blue">
<li class="page-item"><a class="page-link" mdbWavesEffect>Previous</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>Next</a></li>
</ul>
</nav>
Working with icons
Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide
proper screen reader support with aria attributes and the
.sr-only utility.
<nav aria-label="Page navigation example">
<ul class="pagination pg-blue">
<li class="page-item">
<a class="page-link" aria-label="Previous" mdbWavesEffect>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item">
<a class="page-link" aria-label="Next" mdbWavesEffect>
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
Disabled and active states
Pagination links are customizable for different circumstances. Use .disabled for
links that appear un-clickable and .active to indicate the current page.
While the .disabled class uses pointer-events: none to try to
disable the link functionality of <a>s, that CSS property is not yet
standardized and doesn’t account for keyboard navigation. As such, you should always add
tabindex="-1" on disabled links and use custom JavaScript to fully disable their
functionality.
<nav aria-label="Page navigation example">
<ul class="pagination pg-blue">
<li class="page-item disabled">
<a class="page-link" tabindex="-1" mdbWavesEffect>Previous</a>
</li>
<li class="page-item"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item active">
<a class="page-link" mdbWavesEffect>2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item">
<a class="page-link" mdbWavesEffect>Next</a>
</li>
</ul>
</nav>
You can optionally swap out active or disabled anchors for <span>, or omit
the anchor in the case of the prev/next arrows, to remove click functionality and prevent
keyboard focus while retaining intended styles.
<nav aria-label="Page navigation example">
<ul class="pagination pg-blue">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item active">
<span class="page-link" mdbWavesEffect>
2
<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item">
<a class="page-link" mdbWavesEffect>Next</a>
</li>
</ul>
</nav>
Sizing
Fancy larger or smaller pagination? Add .pagination-lg or
.pagination-sm for additional sizes.
<nav aria-label="Page navigation example">
<ul class="pagination pg-blue pagination-lg">
<li class="page-item disabled">
<a class="page-link" tabindex="-1" mdbWavesEffect>1</a>
</li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination pg-blue pagination-sm">
<li class="page-item disabled">
<a class="page-link" tabindex="-1" mdbWavesEffect>1</a>
</li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
</ul>
</nav>
Alignment
Change the alignment of pagination components with flexbox utilities.
<nav aria-label="Page navigation example">
<ul class="pagination pg-blue justify-content-center">
<li class="page-item disabled">
<a class="page-link" tabindex="-1" mdbWavesEffect>Previous</a>
</li>
<li class="page-item"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item">
<a class="page-link" mdbWavesEffect>Next</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination pg-blue justify-content-end">
<li class="page-item disabled">
<a class="page-link" tabindex="-1" mdbWavesEffect>Previous</a>
</li>
<li class="page-item"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item">
<a class="page-link" mdbWavesEffect>Next</a>
</li>
</ul>
</nav>
Shape
The way pagination "feels" can be easily altered by changing its style from rectangular to
circular. Simply add .pagination-circle class to the list element.
<nav aria-label="Page navigation example">
<ul class="pagination pagination-circle pg-blue">
<li class="page-item disabled"><a class="page-link" mdbWavesEffect>First</a></li>
<li class="page-item disabled">
<a class="page-link" aria-label="Previous" mdbWavesEffect>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<li class="page-item">
<a class="page-link" aria-label="Next" mdbWavesEffect>
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
<li class="page-item"><a class="page-link" mdbWavesEffect>Last</a></li>
</ul>
</nav>
Colors
<nav>
<ul class="pagination pg-blue">
<li class="page-item">
<a class="page-link" aria-label="Previous" mdbWavesEffect>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<li class="page-item">
<a class="page-link" aria-label="Next" mdbWavesEffect>
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pg-red">
<li class="page-item">
<a class="page-link" aria-label="Previous" mdbWavesEffect>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<li class="page-item">
<a class="page-link" aria-label="Next" mdbWavesEffect>
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pg-teal">
<li class="page-item">
<a class="page-link" aria-label="Previous" mdbWavesEffect>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<li class="page-item">
<a class="page-link" aria-label="Next" mdbWavesEffect>
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pg-dark">
<li class="page-item">
<a class="page-link" aria-label="Previous" mdbWavesEffect>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<li class="page-item">
<a class="page-link" aria-label="Next" mdbWavesEffect>
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pg-bluegrey">
<li class="page-item">
<a class="page-link" aria-label="Previous" mdbWavesEffect>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<li class="page-item">
<a class="page-link" aria-label="Next" mdbWavesEffect>
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pg-amber">
<li class="page-item">
<a class="page-link" aria-label="Previous" mdbWavesEffect>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<li class="page-item">
<a class="page-link" aria-label="Next" mdbWavesEffect>
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pg-purple">
<li class="page-item">
<a class="page-link" aria-label="Previous" mdbWavesEffect>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<li class="page-item">
<a class="page-link" aria-label="Next" mdbWavesEffect>
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pg-darkgrey">
<li class="page-item">
<a class="page-link" aria-label="Previous" mdbWavesEffect>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<li class="page-item">
<a class="page-link" aria-label="Next" mdbWavesEffect>
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
Angular Pagination - API
In this section you will find informations about pagination and its required modules and available inputs, outputs, methods and events.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
import { WavesModule } from 'ng-uikit-pro-standard'
import { WavesModule } from 'angular-bootstrap-md'