The <bs-pagination> component renders Bootstrap's .pagination markup in its own template, so server-rendered output is the real control. The visible budget is capped by [numberOfBoxes] (which includes the prev/next arrows). Pass [hrefFor] to render every page as a link that works with JavaScript off, and [labels] to localize the accessible names. Below are targeted examples that exercise the growth algorithm.
<bs-pagination
[pageNumbers]="pages()"
[(selectedPageNumber)]="selectedPage">
</bs-pagination>
import { Component, model, signal } from '@angular/core';
import { BsPaginationComponent } from '@mintplayer/ng-bootstrap/pagination';
@Component({
selector: 'my-pagination-demo',
templateUrl: './my-pagination-demo.component.html',
imports: [BsPaginationComponent],
})
export class MyPaginationDemoComponent {
protected readonly pages = signal<number[]>(
[...Array(20).keys()].map((p) => p + 1),
);
protected readonly selectedPage = model(1);
}
Just 5 pages. With no numberOfBoxes cap the algorithm trivially shows every page — no ellipsis, no clamping.
7 pages, current = 5, [numberOfBoxes]="7". The right side would otherwise hide a single page (6) behind an ellipsis — instead the algorithm extends the end range so page 6 is rendered directly. Move the selection: when current is in the middle, both gaps are wide enough to render as …; otherwise a single hidden page is always shown directly.
<!-- Cap the visible box budget; the component slides the window as the
selection moves and shows … on the gapped side(s). -->
<bs-pagination
[pageNumbers]="pages()"
[(selectedPageNumber)]="selectedPage"
[numberOfBoxes]="9">
</bs-pagination>
30 pages with [numberOfBoxes]="9" and current in the middle. Both ellipses appear; the visible window slides as you click around.
Same 30 pages, current = 2. The left edge fills with real pages (1, 2, 3, …); only the right ellipsis renders.
Same 30 pages, current = 29. Mirror of the previous case — only the left ellipsis renders.
Omit [numberOfBoxes] and the component renders every page in [pageNumbers]. Useful when the set is small enough to fit comfortably on the smallest viewport you support.
The component doesn’t assume 1..N — pass any sorted number[]. This is exactly how the datatable's "rows per page" selector is built: [10, 20, 50, 100, 200] with arrows hidden.
<!-- Non-contiguous values + arrows hidden — "rows per page" selector. -->
<bs-pagination
[pageNumbers]="[10, 20, 50, 100, 200]"
[(selectedPageNumber)]="rowsPerPage"
[showArrows]="false">
</bs-pagination>
[size] accepts 'small', 'medium' (default), and 'large'.
<bs-pagination [pageNumbers]="pages()" [(selectedPageNumber)]="selectedPage" [size]="'small'" [numberOfBoxes]="9"></bs-pagination>
<bs-pagination [pageNumbers]="pages()" [(selectedPageNumber)]="selectedPage" [size]="'medium'" [numberOfBoxes]="9"></bs-pagination>
<bs-pagination [pageNumbers]="pages()" [(selectedPageNumber)]="selectedPage" [size]="'large'" [numberOfBoxes]="9"></bs-pagination>