dspace-angular/src/app/shared/pagination/pagination.component.html

<div class="pagination-masked clearfix top">
  <div class="row">
    <div class="col pagination-info">
      <span class="align-middle hidden-xs-down">{{ 'pagination.showing.label' | translate }}</span>
      <span class="align-middle">{{ 'pagination.showing.detail' | translate:showingDetail }}</span>
    </div>
    <div class="col">
      <div ngbDropdown #paginationControls="ngbDropdown" class="d-inline-block float-right">
        <button class="btn btn-outline-primary" id="paginationControls" (click)="$event.stopPropagation(); (paginationControls.isOpen())?paginationControls.close():paginationControls.open();"><i class="fa fa-cog" aria-hidden="true"></i></button>
        <div class="dropdown-menu dropdown-menu-right" id="paginationControlsDropdownMenu" aria-labelledby="paginationControls">
          <h6 class="dropdown-header">{{ 'pagination.results-per-page' | translate}}</h6>
          <button class="dropdown-item" style="padding-left: 20px" *ngFor="let item of pageSizeOptions " (click)="setPageSize(item)"><i class="fa fa-check {{(item != paginationOptions.pageSize) ? 'invisible' : ''}}" aria-hidden="true"></i> {{item}} </button>
        </div>
      </div>
    </div>
  </div>
</div>

<ng-content></ng-content>

<div class="pagination justify-content-center clearfix bottom">
  <ngb-pagination [boundaryLinks]="paginationOptions.boundaryLinks"
                  [collectionSize]="collectionSize"
                  [disabled]="paginationOptions.disabled"
                  [ellipses]="paginationOptions.ellipses"
                  [maxSize]="(windowBreakPoint.breakPoint == 'xs')?5:paginationOptions.maxSize"
                  [(page)]="currentPage"
                  (pageChange)="doPageChange($event)"
                  [pageSize]="pageSize"
                  [rotate]="paginationOptions.rotate"
                  [size]="(windowBreakPoint.breakPoint == 'xs')?'sm':paginationOptions.size"></ngb-pagination>
</div>