<div class="row"> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Default pagination</h4> <h6 class="card-subtitle">This is basic Default pagination</h6> <ngb-pagination [collectionSize]="70" [(page)]="page" aria-label="Default pagination"></ngb-pagination> <div>directionLinks = false</div> <ngb-pagination [collectionSize]="70" [(page)]="page" [directionLinks]="false"></ngb-pagination> <div>boundaryLinks = true</div> <ngb-pagination [collectionSize]="70" [(page)]="page" [boundaryLinks]="true"></ngb-pagination> <hr> <pre>Current page: {{page}}</pre> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Advanced pagination</h4> <h6 class="card-subtitle">This is Advanced pagination</h6> <div>maxSize = 5, rotate = false</div> <ngb-pagination [collectionSize]="120" [(page)]="page2" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination> <div>maxSize = 5, rotate = true</div> <ngb-pagination [collectionSize]="120" [(page)]="page2" [maxSize]="5" [rotate]="true" [boundaryLinks]="true"></ngb-pagination> <div>maxSize = 5, rotate = true, ellipses = false</div> <ngb-pagination [collectionSize]="120" [(page)]="page2" [maxSize]="5" [rotate]="true" [ellipses]="false" [boundaryLinks]="true"></ngb-pagination> <hr> <pre>Current page: {{page2}}</pre> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Pagination size</h4> <h6 class="card-subtitle">This is Pagination size</h6> <ngb-pagination [collectionSize]="50" [(page)]="currentPage" size="lg"></ngb-pagination> <ngb-pagination [collectionSize]="50" [(page)]="currentPage"></ngb-pagination> <ngb-pagination [collectionSize]="50" [(page)]="currentPage" size="sm"></ngb-pagination> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Pagination Alignment</h4> <h6 class="card-subtitle">Change the alignment of pagination components with flexbox utilities.</h6> <ngb-pagination class="d-flex justify-content-start" [collectionSize]="70" [(page)]="page"></ngb-pagination> <ngb-pagination class="d-flex justify-content-center" [collectionSize]="70" [(page)]="page"></ngb-pagination> <ngb-pagination class="d-flex justify-content-end" [collectionSize]="70" [(page)]="page"></ngb-pagination> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Disabled pagination</h4> <h6 class="card-subtitle">This is Disabled pagination</h6> <p>Pagination control can be disabled:</p> <ngb-pagination [collectionSize]="70" [(page)]="disablepage" [disabled]='isDisabled'></ngb-pagination> <hr> <button class="btn btn-sm btn-outline-primary" (click)="toggleDisabled()"> Toggle disabled </button> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Custom links <span class="badge badge-success text-white">New</span></h4> <h6 class="card-subtitle">A pagination with customized links:</h6> <ngb-pagination [collectionSize]="70" [(page)]="pagecustom" aria-label="Custom pagination"> <ng-template ngbPaginationPrevious>Prev</ng-template> <ng-template ngbPaginationNext>Next</ng-template> <ng-template ngbPaginationNumber let-p>{{ getPageSymbol(p) }}</ng-template> </ngb-pagination> <hr> <pre>Current page: {{pagecustom}}</pre> </div> </div> </div> </div>