Angular Bootstrap Pagination
Angular pagination - Bootstrap 4 & Material Design
Angular Bootstrap pagination is a component used to indicate existance of a series of related content across multiple pages and enables navigation across them.
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 , 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.
// MDB Angular Pro
import { WavesModule } from 'ng-uikit-pro-standard'
// MDB Angular Pro
import { WavesModule } from 'angular-bootstrap-md'