Pagination

import { signal } from '@angular/core';
import { FrPaginationModule } from '@frame-ui-ng/components/pagination';

readonly totalPages = 12;
readonly currentPage = signal(6);

<p>Showing page {{ currentPage() }} of {{ totalPages }}</p>

<nav
  frPagination
  #pagination="frPagination"
  aria-label="Pagination"
  [(page)]="currentPage"
  [totalPages]="totalPages"
>
  <ul frPaginationContent>
    <li frPaginationItem>
      <button frPaginationPrevious type="button"></button>
    </li>

    @for (page of pagination.pages(); track $index) {
      <li frPaginationItem>
        @if (page === 'ellipsis') {
          <span frPaginationEllipsis></span>
        } @else {
          <button frPaginationLink type="button" [page]="page">
            {{ page }}
          </button>
        }
      </li>
    }

    <li frPaginationItem>
      <button frPaginationNext type="button"></button>
    </li>
  </ul>
</nav>