Pagination bar template - 1

pagination-1.component.html

<nav aria-label="Page navigation">
    <ul class="navlinks">
        <li><a class="navlink"> First </a></li>
        <li><a class="navlink"> < Prev </a></li>
        
        <li *ngFor="let page of [1, 2, 3, 4, 5]">
            <a class="navlink">
                {{ page }}
            </a>
        </li>
        
        <li><a class="navlink"> Next > </a></li>
        <li><a class="navlink"> Last </a></li>
    </ul>
</nav>

pagination-1.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);
    }
}