Paginator full

pagination.component.html

<nav aria-label="Page navigation">
    <ul class="navlinks">
        <li *ngIf="showFirstLastButton">
            <a
                [queryParams]="{ size: size, page: 1 }"
                [routerLink]="routerLinkBase"
                queryParamsHandling="merge"
                class="navlink"
            >
                First
            </a>
        </li>
        <li>
            <a
                [queryParams]="{ size: size, page: currentPage - 1 }"
                [routerLink]="routerLinkBase"
                queryParamsHandling="merge"
                class="navlink"
            >
                < Prev
            </a>
        </li>
        <li *ngFor="let page of getNavigablePages()">
            <a
                [queryParams]="{ size: size, page: page }"
                [routerLink]="routerLinkBase"
                queryParamsHandling="merge"
                [class.active]="page === currentPage"
                class="navlink"
            >
                {{ page }}
            </a>
        </li>
        <li>
            <a
                [queryParams]="{ size: size, page: currentPage + 1 }"
                [routerLink]="routerLinkBase"
                queryParamsHandling="merge"
                class="navlink"
            >
                Next >
            </a>
        </li>
        <li *ngIf="showFirstLastButton">
            <a
                [queryParams]="{ size: size, page: totalPages }"
                [routerLink]="routerLinkBase"
                queryParamsHandling="merge"
                class="navlink"
            >
                Last
            </a>
        </li>
    </ul>
</nav>

pagination.component.scss

:host {
    display: block;
}

.navlinks {
    display: inline-flex;
}

.navlinks li {
    margin-right: 0;
    margin-left: -1px;

    &:first-child .navlink {
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
    }

    &:last-child .navlink {
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }
}

.navlink {
    margin-left: 0;
    border-width: 1px;
    border-color: rgb(209 213 219);
    background-color: white;
    padding: 0.5rem 0.75rem;
    line-height: 1.25;
    color: rgb(107 114 128);

    &:hover {
        background-color: rgb(243 244 246);
        color: rgb(55 65 81);
    }

    &.active {
        background-color: rgb(220, 222, 226);
        color: rgb(55 65 81);
    }
}

pagination.component.ts

import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { RouterModule } from '@angular/router'

@Component({
    selector: 'app-pagination',
    standalone: true,
    imports: [CommonModule, RouterModule],
    templateUrl: './pagination.component.html',
    styleUrls: ['./pagination.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PaginationComponent {
    @Input() currentPage = 1
    @Input() totalPages = 1
    @Input() size = 24
    @Input() windowSize = 2
    @Input() showFirstLastButton = true
    @Input() routerLinkBase: string[] = []

    getNavigablePages(): number[] {
        const pages = []
        const left = Math.max(1, this.currentPage - this.windowSize)
        const right = Math.min(this.totalPages, this.currentPage + this.windowSize)
        for (let i = left; i <= right; i++) {
            pages.push(i)
        }
        return pages
    }
}