Pagination

<wr-pagination
  [total]="total()"
  [page]="page()"
  (pageChange)="page.set($event)"
/>

private readonly http = inject(HttpClient);

readonly page = signal(1);
readonly size = signal(10);

// The params function builds a fresh object literal every run, so it
// is never reference-equal to the last one: the resource drops its
// value the moment the page changes and regains it only when the
// response lands. That gap is what total reads as 0.
private readonly result = rxResource({
  params: () => ({ page: this.page(), size: this.size() }),
  stream: ({ params }) => this.http.get<{ data: User[]; total: number }>('/api/users', { params }),
});

readonly rows = computed(() => this.result.value()?.data ?? []);
readonly total = computed(() => this.result.value()?.total ?? 0);

That is the wiring the Angular docs lead you to, and the gap is not avoidable in it: a params function returning an object literal is never reference-equal to its predecessor, so the resource discards the previous payload the instant the page changes. The demo above stands in for the round trip — clicking a page drops total to 0 for 900 ms. The page you picked is kept and reported once; before this contract the pager clamped back to 1 and emitted a second pageChange the host could not tell from a click.

What that state costs is the strip: with total at 0 there is one page to render, so a host holding any page past the first has no cell carrying aria-current until the total settles. On a first load, where the held page is 1, the single cell is current as usual. The showTotal label reports an empty range rather than a nonsensical one — it special-cases an empty total and reads “0-0 of 0”, which is wrong about a list of 51 but not backwards, as it was before this contract. The arrows stay usable throughout, because they compare against the range rather than for equality with its ends: past the end next renders disabled, and previous stays enabled and steps back into range rather than to page() - 1.

The lower bound is not conditional. No value of total makes page 0 correct, so a page below 1 is floored to 1 whatever the total reads — and unlike the upper bound, that correction is written back and reported.

<wr-pagination
  showSizeChanger
  [total]="total()"
  [page]="page()"
  (pageChange)="page.set($event)"
  [pageSize]="size()"
  (pageSizeChange)="onSizeChange($event)"
/>

// Reset — one request, and it is for a page that exists.
onSizeChange(next: number): void {
  this.size.set(next);
  this.page.set(1);
}

// Keep the page — nothing corrects it while total reads 0, so this
// can request a page the new size no longer has. The response is
// what corrects it.
onSizeChange(next: number): void {
  this.size.set(next);
}

Both policies are supported and they cost different things. Resetting issues one request, and it is for a page that exists. Keeping the page is the smaller edit and the worse request: the size change invalidates the payload too, so total reads 0, the guard above declines to correct anything, and the request that goes out may be for a page the new size no longer has — from page 6 at size 10, choosing 25 asks for page 6 of 3, and the correction lands only when that answer does. That is an accepted cost of never writing back from transient state, not something the component hides.

// The total from the last response that carried one, held
// across the next request.
readonly total = linkedSignal<number | undefined, number>({
  source: () => this.result.value()?.total,
  computation: (next, previous) => next ?? previous?.value ?? 0,
});

With that in place the strip never collapses, aria-current stays on the page you are on, and the clamp keeps working throughout — so a page the new size no longer has is corrected on the spot instead of after the round trip. It is the better trade rather than the absence of one: what is on screen while the request is in flight is now the PREVIOUS response's count, so showTotal reports a number that no longer describes the list, and a size change landing together with a shrinking total clamps against the old count.

<!-- What `<wr-pagination [total]="120" [(page)]="page" />` renders, in the
     shape a Playwright or Testing Library locator sees. Tab reaches every
     cell; Enter and Space activate the focused one; arrow keys do nothing. -->
<wr-pagination role="navigation" aria-label="Pagination" class="wr-pagination wr-pagination--md …">
  <div class="wr-pagination__inner">
    <div class="wr-pagination__nav">
      <wr-btn role="button" tabindex="0" aria-label="Previous page" class="wr-pagination__nav-btn">…</wr-btn>
      <wr-btn role="button" tabindex="0" aria-label="Go to page 1" aria-current="page" class="wr-pagination__page">1</wr-btn>
      <wr-btn role="button" tabindex="0" aria-label="Go to page 2" class="wr-pagination__page">2</wr-btn>
      <span class="wr-pagination__ellipsis">…</span>
      <wr-btn role="button" tabindex="0" aria-label="Next page" class="wr-pagination__nav-btn">…</wr-btn>
    </div>
  </div>
</wr-pagination>

<!-- `<wr-btn>` is a custom element, so the role and tabindex are attributes it
     writes rather than native button semantics: query by role and name.

       page.getByRole('button', { name: 'Go to page 2' }).click();
       expect(page.getByRole('button', { name: 'Go to page 2' }))
         .toHaveAttribute('aria-current', 'page');

     The current cell is the one carrying `aria-current="page"`. A disabled
     arrow at the end of the range carries `aria-disabled="true"` and loses its
     `tabindex`; the `disabled` attribute is written too, but it is inert on a
     custom element — there is no `disabled` DOM property to read. -->

The names come from the i18n catalog, so they follow the app's locale — match on the resolved text, or override the key, rather than hard-coding English in a test that a translated build will fail. The three overridable inputs are label, prevLabel and nextLabel; the numbered cells read pagination.goToPage and the size changer pagination.itemsPerPage.

The class names are public API and stable — .wr-pagination__page for a numbered cell, .wr-pagination__nav-btn for the two arrows, .wr-pagination__ellipsis for a gap, .wr-pagination__size for the size changer. A unit test has a harness instead: WrPaginationHarness from ngwr/pagination/testing.