Gray Wolf Corporation

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.

pagination1

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;
 }  

pagination2

An unhandled error has occurred. Reload 🗙