Customizing Angular Material Pagination: Replacing First and Last Icons with Text

Question

Customizing Angular Material Pagination: Replacing First and Last Icons with Text

Looking to customize the pagination layout, I have managed to style most elements except for replacing the first and last icons with text. Here is the current setup:

https://i.stack.imgur.com/ZneZs.png

I want it to look something like this:

https://i.stack.imgur.com/0tUEl.png

HTML

<mat-paginator style-paginator showFirstLastButtons [showTotalPages]="3" [refreshButtons]="dataSource.data.length" [length]="dataSource.data.length" [pageSizeOptions]="[15, 30, 45, 60]">
</mat-paginator>

style-page-directive.ts (Imported in module)

(Angular code provided)

CSS

Tried modifying CSS but didn't work as intended:

::ng-deep .mat-paginator-navigation-first .mat-paginator-icon {
    display: none;
}

::ng-deep .mat-paginator-navigation-first {
    content: "TEST" !important;
}

css angular angular-material pagination

Answer 1

Answer №1

To automate the setting of text, you can use the following code:

    const lastButton = this.el.nativeElement.querySelector(
      '.mat-paginator-navigation-last'
    );
    if (lastButton) {
      lastButton.innerHTML = 'Last';
    }
    const firstButton = this.el.nativeElement.querySelector(
      '.mat-paginator-navigation-first'
    );
    if (firstButton) {
      firstButton.innerHTML = 'First';
    }

A stackblitz example showcasing this code is available here: https://stackblitz.com/edit/angular-dy9j4m?file=src/app/table-pagination-example.ts

Answer 2

To automate the setting of text, you can use the following code:

    const lastButton = this.el.nativeElement.querySelector(
      '.mat-paginator-navigation-last'
    );
    if (lastButton) {
      lastButton.innerHTML = 'Last';
    }
    const firstButton = this.el.nativeElement.querySelector(
      '.mat-paginator-navigation-first'
    );
    if (firstButton) {
      firstButton.innerHTML = 'First';
    }

A stackblitz example showcasing this code is available here: https://stackblitz.com/edit/angular-dy9j4m?file=src/app/table-pagination-example.ts

Customizing Angular Material Pagination: Replacing First and Last Icons with Text

Answer №1

Similar questions

Issue: The creation of ComponentClass is restricted due to its absence from the testing module import

How can we avoid printing out undefined data from an Observable in Angular 2?

I'm having trouble with getting my Bootstrap CSS and JS links to function properly

Utilizing reusable styled components with pseudo elements and advanced logic

Testing the subscribe function in Angular within a returned Promise: A guide

The variance between executing code with and without breakpoints in JUnit using Selenium's Chrome Driver

Unable to adjust the padding of the material UI Select component

What is the best way to keep a header row in place while scrolling?

What sets apart ".. let i = index" from "..let i as index"?

Hide elements in hidden divs until the page is fully loaded to reduce initial page

problems with basic text styling in containers

The styling for material UI's default endAdornment is lacking accuracy

Creating a dynamic form that efficiently captures user information and automatically redirects to the appropriate web page

Using Bootstrap columns within a PHP while loop

Has CSS3 been recognized as an official standard?

Is there a way to update components in Angular without affecting the current URL?

Is a Responsive Split Layout the Solution for Your Web Design Needs?

Material UI Grid List rows are displaying with an unusually large gap between them, creating a

Tips for wrapping a div around its floated children

Footer void of color