@engie-group/fluid-design-system-angular/src/components/pagination/pagination.component.html

Fluid Design System Angular

<nav>
  <ul class="nj-pagination">
    <li class="nj-pagination__item">
      <nj-icon-button size="sm"
                      icon="chevron_left"
                      [label]="ariaLabelPrevious"
                      (buttonClick)="goToPrevious()"
                      [isDisabled]="currentItem === 1">
      </nj-icon-button>
    </li>
    <ng-container *ngFor="let item of getItems()">

      <li *ngIf="!shouldMinify || isItemVisible(item)" class="nj-pagination__item"
          [ngClass]="{'nj-pagination__item--active': currentItem === item}">
        <ng-container *ngIf="currentItem === item; then currentItemTemplate; else otherItemTemplate"></ng-container>
      </li>
      <li class="nj-pagination__item"
          *ngIf="shouldMinify && showMoreHorizontal(item)">
        <nj-icon name="more_horiz" class="nj-pagination__more" variant="inherit"></nj-icon>
        <span class="nj-sr-only">...</span>
      </li>

      <ng-template #currentItemTemplate>
        <span class="nj-pagination__link" aria-current="true">
          {{ item }}
        </span>
      </ng-template>

      <ng-template #otherItemTemplate>
        <button class="nj-pagination__link" (click)="goToItem(item)">
          {{ item }}
        </button>
      </ng-template>
    </ng-container>

    <li class="nj-pagination__item">
      <nj-icon-button size="sm"
                      icon="chevron_right"
                      [label]="ariaLabelNext"
                      (buttonClick)="goToNext()"
                      [isDisabled]="currentItem === count">
      </nj-icon-button>
    </li>
  </ul>
</nav>