0

I'm using the angular material pagination and want to add one word next to each "next" and "previous" button. I was able to override the "page 1 - 100" text by doing the following:

Component:

const list = document.getElementsByClassName('mat-paginator-range-label');
list[0].innerHTML = this.firstItemOfPage.toString() + '-' + currentPageRange + ' of ' + this.totalItems;

HTML:

  <mat-paginator
              [length]="totalItems"
               [pageSize]="pageSize"
               (page)="updatePayments($event)"
               hidePageSize>
  </mat-paginator>

I'm trying to do the same to add "Next" and "Last" next to each button, just as you can see in the attached design. I also attached how my work looks now, without the Next and Last text. Any help would be greatly appreciated!

What I have now: Design I'm trying to mimick:

nathanielb91
  • 73
  • 6
  • Please see [ask] and show your Angular code. Manipulating the DOM like that isn't ideal, and we need more context. – isherwood Jun 17 '21 at 16:46
  • Does this answer your question? [How To Change itemsPerPageLabel in mat-paginator in Angular 6+](https://stackoverflow.com/questions/54057030/how-to-change-itemsperpagelabel-in-mat-paginator-in-angular-6) – Kinglish Jun 17 '21 at 16:50
  • When you find yourself using innerHTML in angular, seek help! – Kinglish Jun 17 '21 at 16:50

0 Answers0