src/app/shared/components/pagination/pagination.component.html

<!-- /********************************************************************************
* Copyright (c) 2020 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
* http://www.eclipse.org/legal/epl-2.0.
*
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/ -->
<ul class="pagination justify-content-end" *ngIf="isPagingActive">
  <li class="page-item" (click)="setFirstPage()" [ngClass]="{ disabled: isFirstPage() }">
    <a class="page-link">{{ 'Pagination.First' | translate }}</a>
  </li>
  <li class="page-item" (click)="setPreviousPage()" [ngClass]="{ disabled: isFirstPage() }">
    <a class="page-link">{{ 'Pagination.Previous' | translate }}</a>
  </li>
  <li *ngFor="let pageEventItem of pageEventItems" class="page-item" [ngClass]="{ active: activeEventItem?.pageIndex === pageEventItem?.pageIndex }">
    <a class="page-link" (click)="setSelectedPage(pageEventItem)">{{ pageEventItem?.pageIndex }}</a>
  </li>
  <li class="page-item" (click)="setNextPage()" [ngClass]="{ disabled: isLastPage() }">
    <a class="page-link">{{ 'Pagination.Next' | translate }}</a>
  </li>
  <li class="page-item" (click)="setLastPage()" [ngClass]="{ disabled: isLastPageLastIcon() }">
    <a class="page-link">{{ 'Pagination.Last' | translate }}</a>
  </li>
</ul>