@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}">
        <button class="nj-pagination__link"
                (click)="goToItem(item)"
                [attr.aria-current]="currentItem === item ? 'true' : null">
          {{item}}
        </button>
      </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-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>