pagination.component.html

<div class="container-fluid mt-4 mb-4">
  <div class="row">
    <div class="col p-0 d-flex justify-content-end">
      <div class="mr-3">
        <b class="mr-2">Per Page</b>
        <nb-select
          size="small"
          [(selected)]="itemsPerPage"
          (selectedChange)="onItemsPerPageChange($event)"
        >
          <nb-option *ngFor="let size of pageSizes" [value]="size">
            {{ size }}
          </nb-option>
        </nb-select>
      </div>

      <div>
        <button
          nbButton
          size="small"
          (click)="firstPage()"
          [disabled]="currentPage === 1"
          class="mr-2"
        >
          First
        </button>

        <button
          nbButton
          size="small"
          (click)="prevPage()"
          [disabled]="currentPage === 1"
          class="mr-2"
        >
          <nb-icon icon="chevron-left-outline"></nb-icon>
        </button>

        <button
          nbButton
          size="small"
          *ngFor="let page of pages"
          (click)="goToPage(page)"
          [status]="currentPage === page ? 'primary' : 'basic'"
        >
          {{ page }}
        </button>

        <button
          nbButton
          size="small"
          (click)="nextPage()"
          [disabled]="currentPage === totalPages"
          class="ml-2"
        >
          <nb-icon icon="chevron-right-outline"></nb-icon>
        </button>

        <button
          nbButton
          size="small"
          (click)="lastPage()"
          [disabled]="currentPage === totalPages"
          class="ml-2"
        >
          Last
        </button>
      </div>
    </div>
  </div>
</div>