basic-pagination.component.html

<mat-toolbar *ngIf=" length > 0">
  <span style="margin-left: 20%" class="responsive-view"> {{ 1 + (pageOffset * (pageIndex - 1)) }}
    - {{ (pageOffset * pageIndex) <= length ? pageOffset * pageIndex : length }}
    of {{ length }}</span>
  <span style="margin-left: 20%" class="responsive-view margin-for-mobile">
    <button [disabled]="pageIndex <= 1" (click)="getFirstPage()">
      <i class="material-icons">first_page</i>
    </button>
    <button [disabled]="pageIndex <= 1" (click)="getPreviousPage()">
      <i class="material-icons">chevron_left</i>
    </button>
    <button [disabled]="this.pageOffset * this.pageIndex > length" (click)="getNextPage()">
      <i class="material-icons">chevron_right</i>
    </button>
    <button matTooltip="Info about the action" [disabled]="this.pageOffset * this.pageIndex > length" (click)="getLastPage()">
      <i class="material-icons">last_page</i>
    </button>
  </span>
</mat-toolbar>