CODEWITHSUNDEEP
javascripthtmlangular
akshit jain
akshit jain

Reputation: 21

ngb Pagination [(page)] attribute in angular is not working

I am using ngb pagination in my angular project. I have a table that shows 5 records per page and in that table i have a column named view. After clicking on view i got redirected to new page. The problem is that after clicking on view when i came back to the table the page no. always starts from 1. Example: if I view 25th record and came back then ngb pagination starts from 1. I also put static value in page attribute of ngb pagination ie. page = 5 instead of [(page)] = 'page' but it does not work. My html code is:

{{ defaultPagination}} // shows 5 here
<div class="pg_num">
  <ngb-pagination 
    class="d-flex justify-content-center" 
    [collectionSize]="collectionSize" 
    [pageSize]="setPage" 
    [(page)]="defaultPagination" 
    [maxSize]="5" 
    [rotate]="true" 
    [ellipses]="true" 
    [boundaryLinks]="true" 
    (pageChange)="usersList()" 
    style="margin-right: 0px;"
  >
    <ng-template ngbPaginationPrevious>Prev</ng-template>
    <ng-template ngbPaginationNext>Next</ng-template>
  </ngb-pagination>

My ngb version is = @ng-bootstrap/ng-bootstrap": "^5.3.1",

Upvotes: 2

Views: 1211

Answers (2)

Mrunal Tupe
Mrunal Tupe

Reputation: 340

This is happing because your pagination component is loading before getting the total items. That's why whenever you come back you are starting from 1. So you can add a *ngIf to load component only if you get total items.

 <div class="pg_num" *ngIf="collectionSize">
     <ngb-pagination 
     class="d-flex justify-content-center" 
     [collectionSize]="collectionSize" 
     [pageSize]="setPage" 
     [(page)]="defaultPagination" 
     [maxSize]="5" 
     [rotate]="true" 
     [ellipses]="true" 
     [boundaryLinks]="true" 
     (pageChange)="usersList()" 
     style="margin-right: 0px;"
    >
    <ng-template ngbPaginationPrevious>Prev</ng-template>
    <ng-template ngbPaginationNext>Next</ng-template>
   </ngb-pagination>
 </div>

Upvotes: 0

Nabanita Sur
Nabanita Sur

Reputation: 21

Faced same issue. What I did was I passed the page number as part of the state to the page I redirected to, then I added a back button to this page and passed the page number using the same button. In the ngOnInit I loaded the page from the backend (this.getPage(3)), but the issue I am facing now is that even if the currentPage is set to 3 in the backend, the same is not reflecting in the pagination tab, even though the values loaded are of page 3.

Upvotes: 2

Related Questions