Pagination
ArchivedThese are the docs for ng-qubee 3.8. Read the 4.0 docs for @qubeejs/angular.
ng-qubee covers both sides of pagination: building the request URI (with setPage / setLimit and the navigation helpers below) and parsing the paginated response into a typed PaginatedCollection<T>.
Navigation helpers
Section titled “Navigation helpers”Fluent methods that mutate state.page. All return this for chaining.
qb.nextPage(); // state.page + 1, capped at lastPage if knownqb.previousPage(); // state.page - 1, floored at 1qb.firstPage(); // page = 1qb.lastPage(); // page = state.lastPage; throws if not synced yetqb.goToPage(n); // validates and sets, rejects n > lastPage when knownThe lastPage value is populated automatically by PaginationService.paginate() — see auto-sync below.
State accessors
Section titled “State accessors”qb.currentPage(); // state.page (always safe)qb.totalPages(); // state.lastPage; throws if paginate() hasn't run yetPredicates (template-safe)
Section titled “Predicates (template-safe)”Conservative defaults when bounds are unknown — usable directly in [disabled] bindings without a guard:
qb.isFirstPage(); // page === 1qb.isLastPage(); // false until lastPage is known, then page === lastPageqb.hasNextPage(); // true until lastPage is known, then page < lastPageqb.hasPreviousPage(); // page > 1Template wiring:
<button [disabled]="qb.isFirstPage()" (click)="qb.previousPage()">Prev</button><span>Page {{ qb.currentPage() }} of {{ qb.totalPages() }}</span><button [disabled]="qb.isLastPage()" (click)="qb.nextPage()">Next</button>Parsing a response
Section titled “Parsing a response”Every driver hands you an Observable<HttpResponse> from your HTTP client. Pass the body (and headers, when relevant) to PaginationService.paginate():
this._http.get(uri).subscribe(body => { const collection = this._pagination.paginate(body); // collection.data, collection.page, collection.lastPage, …});For the PostgREST and WordPress drivers, also pass headers — the total count lives in Content-Range (PostgREST, opt-in via Prefer: count=exact) or X-WP-Total / X-WP-TotalPages (WordPress, always sent):
this._http.get(uri, { observe: 'response', headers: { 'Prefer': 'count=exact' } }) .subscribe(response => { const collection = this._pagination.paginate(response.body, response.headers); });The second argument accepts Angular’s HttpHeaders, the native Headers class, or a plain Record<string, string>.
PaginatedCollection<T>
Section titled “PaginatedCollection<T>”The parsed shape is uniform across all drivers:
class PaginatedCollection<T> { readonly data: T[]; readonly page: number; readonly from?: number; readonly to?: number; readonly total?: number; readonly perPage?: number; readonly prevPageUrl?: string; readonly nextPageUrl?: string; readonly lastPage?: number; readonly firstPageUrl?: string; readonly lastPageUrl?: string;}Optional fields are undefined when the driver/server didn’t provide them.
Auto-sync
Section titled “Auto-sync”When paginate() returns a PaginatedCollection with a positive integer lastPage, the library writes it back into NestService automatically:
state.page←collection.pagestate.lastPage←collection.lastPagestate.isLastPageKnown←true
This means the navigation helpers above (nextPage, lastPage, predicates) start working immediately after the first paginate() call — no consumer bookkeeping required.
Server-emitted 0 (empty collection) and absent lastPage fields leave isLastPageKnown as false so predicates fall back to their conservative defaults.
Errors
Section titled “Errors”| Error | Thrown by | When |
|---|---|---|
PaginationNotSyncedError |
lastPage(), totalPages() |
Called before any paginate() call has synced lastPage |
InvalidPageNumberError |
setPage(n), goToPage(n) |
n is not a positive integer, or exceeds state.lastPage when known |
InvalidLimitError |
setLimit(n) |
n is not accepted by the active driver — see per-driver pages |
RANGE-header pagination (PostgREST only)
Section titled “RANGE-header pagination (PostgREST only)”See PostgREST → RANGE-header pagination for opt-in details.
paginationHeaders() returns the headers to apply ({ 'Range-Unit': 'items', 'Range': '0-9' }) or null for all other drivers — safe to spread into a headers map unconditionally.