ng-bootstrap - css tweaks for pagination
Migrating from AngularJS to Angular has lots of challenges, especially if you are using any of the popular libraries. One of the most popular is UI Bootstrap which has a nice pagination control. The similar library for Angular is ng-bootstrap. ng-bootstrap also moves to Bootstrap 4 from Bootstrap 3, so there is that too.
The ng-bootstrap pagination control did away with the properties to allow you to change the characters that appeared for Previous, Next, First and Last and just gives you the standard arrow controls.
AngularJS
<ul uib-pagination
total-items="vm.gridOptions.totalItems"
items-per-page="vm.gridOptions.paginationPageSize"
ng-model="vm.gridOptions.paginationCurrentPage"
boundary-links="true"
previous-text="Prev"
next-text="Next"
first-text="First"
last-text="Last"
ng-show="vm.reports.length > vm.gridOptions.paginationPageSize"
></ul>
Angular
<ngb-pagination #ngbPagination
(pageChange)="onPageChange($event)"
[collectionSize]="collectionSize"
[maxSize]="5"
[page]="currentPage"
[rotate]="true"
[boundaryLinks]="true"
class="d-flex justify-content-end grid-pagination"
style="background-color: #999999;"
></ngb-pagination>
You can still get at the control content through css. Seems a bit wonky when compared to a tag property, but seems to work ok.
.grid-pagination > .pagination > li.page-item > a[aria-label="Next"] ::after {
margin-left:-10px;
content: 'Next';
color:white;
background-color: #999999;
}
.grid-pagination > .pagination > li.page-item > a[aria-label="Last"] ::after {
margin-left:-14px;
content: 'Last';
color:white;
background-color: #999999;
}
.grid-pagination > .pagination > li.page-item > a[aria-label="First"] ::after {
content: 'First';
color:white;
background-color: #999999;
}
.grid-pagination > .pagination > li.page-item > a[aria-label="Previous"] ::after {
margin-left:-10px;
content: 'Prev';
color:white;
background-color: #999999;
}