Basic

To create basic pagination use [collectionSize]="itemsNumber" where itemsNumber are the number of items in your paginated collection. Use this directive along with ngb-pagination ngb element.

Pagination With icon and text

To customize pagination's previous & next button use directive ngbPaginationPrevious for previous button & ngbPaginationNext for next button along with ng-template angular element inside ngb-pagination ngb element.

Prev Next

Only icons

To customize pagination's previous & next button use directive ngbPaginationPrevious for previous button & ngbPaginationNext for next button along with ng-template angular element.

Pagination Contextual

Success

Use .pagination-success along with ngb-pagination ngb element.

Danger

Use .pagination-danger along with ngb-pagination ngb element.

Info

Use .pagination-info along with ngb-pagination ngb element.

Warning

Use .pagination-warning along with ngb-pagination ngb element.

Pagination Positions

Use .d-flex.justify-content- start | center | end along with ngb-pagination ngb element to align your pagination

Positions

Left Aligned
Center Aligned
Right Aligned

Pagination Sizes

Use size="lg | sm" for large & small size pagination. Note: Default size of pagination is medium.

Pagination Sizes

Advanced Pagination

Default Pagination

You are on page {{ pageAdvanced }}
Prev Next

Default Pagination with last & first

You are on page {{ pageAdvancedLink }}
First Prev Next Last

Pagination ellipses & rotation

You are on page {{ pageAdvancedEllipses }}
First Prev Next Last

Pagination rotation & no ellipses

Your start Page {{ pageAdvancedNoEllipses }}
First Prev Next Last