igniteui-angular-sovn/src/lib/paginator/pager.component.html

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

<button
    [title]="paginator.resourceStrings.igx_paginator_first_page_button_text"
    [disabled]="paginator.isFirstPageDisabled"
    [attr.aria-disabled]="paginator.isFirstPageDisabled"
    (click)="paginator.paginate(0)"
    igxButton="icon"
    igxRipple
    [igxRippleCentered]="true"
    type="button"
>
    <igx-icon>first_page</igx-icon>
</button>
<button
    [title]="paginator.resourceStrings.igx_paginator_previous_page_button_text"
    [disabled]="paginator.isFirstPageDisabled"
    [attr.aria-disabled]="paginator.isFirstPageDisabled"
    (click)="paginator.previousPage()"
    igxButton="icon"
    igxRipple
    [igxRippleCentered]="true"
    type="button"
>
    <igx-icon>chevron_left</igx-icon>
</button>
<div class="igx-page-nav__text" aria-current="page">
    <span>{{ paginator.page + 1 }}</span>
    <span
        >&nbsp;{{
            paginator.resourceStrings.igx_paginator_pager_text
        }}&nbsp;</span
    >
    <span>{{ paginator.totalPages || 1 }}</span>
</div>
<button
    [title]="paginator.resourceStrings.igx_paginator_next_page_button_text"
    [disabled]="paginator.isLastPageDisabled"
    [attr.aria-disabled]="paginator.isLastPageDisabled"
    (click)="paginator.nextPage()"
    igxRipple
    [igxRippleCentered]="true"
    igxButton="icon"
    type="button"
>
    <igx-icon>chevron_right</igx-icon>
</button>
<button
    [title]="paginator.resourceStrings.igx_paginator_last_page_button_text"
    [disabled]="paginator.isLastPageDisabled"
    [attr.aria-disabled]="paginator.isLastPageDisabled"
    (click)="paginator.paginate(paginator.totalPages - 1)"
    igxButton="icon"
    igxRipple
    [igxRippleCentered]="true"
    type="button"
>
    <igx-icon>last_page</igx-icon>
</button>