CODEWITHSUNDEEP
htmlcssangularpaginationng-bootstrap
Ganesh Babu
Ganesh Babu

Reputation: 3670

Handle multiple NgbPagination in single page

I need to have multiple NgbPagination component in single page.

Reference:

https://ng-bootstrap.github.io/#/components/pagination/examples

I tried using id. But it didn't work. Changing one value in first pagination affects both the table.

Pagination1:

<ngb-pagination id="page1" [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize" [boundaryLinks]="true">
      <ng-template ngbPaginationFirst>First</ng-template>
      <ng-template ngbPaginationLast>Last</ng-template>
      <ng-template ngbPaginationPrevious>Prev</ng-template>
      <ng-template ngbPaginationNext>Next</ng-template>
      <ng-template ngbPaginationEllipsis>...</ng-template>
      <ng-template ngbPaginationNumber let-page>{{ page }}</ng-template>
  </ngb-pagination>

Pagination2:

<ngb-pagination id="page2"  [collectionSize]="collectionSizeb" [(page)]="pageb" [pageSize]="pageSizeb">
  </ngb-pagination>

Please let me know how to implement multiple NgbPagination in a single page?

Upvotes: 0

Views: 1709

Answers (1)

yougeen
yougeen

Reputation: 168

You can use muliple paginations on a single page. Its important to set the page variable for each pagination. Please see my stackblitz demo here

In your component:

page1 = 1;
page2 = 1;

In your components html:

<ngb-pagination id="page1" [collectionSize]="50" [(page)]="page1" [pageSize]="10" [boundaryLinks]="true">
    <ng-template ngbPaginationFirst>First</ng-template>
    <ng-template ngbPaginationLast>Last</ng-template>
    <ng-template ngbPaginationPrevious>Prev</ng-template>
    <ng-template ngbPaginationNext>Next</ng-template>
    <ng-template ngbPaginationEllipsis>...</ng-template>
</ngb-pagination>

<ngb-pagination id="page2" [collectionSize]="50" [(page)]="page2" [pageSize]="10">
</ngb-pagination>

Upvotes: 1

Related Questions