<div role="navigation" attr.aria-labelledby="componentId" aria-label="pagination" class="paginator {{roundedgeclass}}">
  <span class="paginator-pages">
    <a role="radiogroup" id="{{componentId}}" aria-label="previous page" tabindex="1" class="paginator-page" (click)="onPrevious()">&lt;</a>
    <a role="radiogroup" id="{{componentId}}" aria-label="previous set page" tabindex="1" class="paginator-page" (click)="onFirstClick()">&lt;&lt;</a>
  </span>
  <span id="{{componentId}}" tabindex="1" attr.aria-label="Page{{i+1}}" role="link" (keyup.enter)="onPageClick(page,i)" class="paginator-pages" *ngFor="let page of activePages;let i = index">
    <a class="paginator-page" [ngClass]="{'active' : activePageIndex == i  }"  (click)="onPageClick(page,i)">{{page}}</a>
  </span>
  <span role="presentation" class="paginator-pages">
    <a role="radiogroup" id="{{componentId}}" aria-label="next set page" tabindex="1" class="paginator-page" (click)="onLastClick()">&gt;&gt;</a>
    <a role="radiogroup" id="{{componentId}}" aria-label="next page" tabindex="1" class="paginator-page" (click)="onNext()">&gt;</a>
  </span>
  <ng-container *ngIf="!serverSidePaging">
    <ng-container *ngIf="pages > rows">
    <span class="paginator-pages">
      <a class="paginator-page" (click)="showColumnOptions()" style=" cursor: pointer;">{{currentRow}} &nbsp; &#9660;</a>
      <span *ngIf="show" class="dropdown" style="width: 50px;">
        <ul class="dropdown-list">
          <li class="list-items" *ngFor="let row of pageIndex;let i = index" (click)="changeRows(row,i, $event)">
            <div>{{row}}</div>
          </li>
        </ul>
      </span>
    </span>
    </ng-container>
  </ng-container>
</div>