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;
}
cssangularangular-materialpagination

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

How can I display selected cities on a different webpage after clicking a button? Currently, I can only get the results on the same page. For example, if a user selects NYC and Delhi, those cities should be displayed on another HTML page. ...

javascripthtmljquerycss

Fetching large images with "fill" layout in NextJS

I am currently using Cloudinary to serve correctly sized images, however, it appears that NextJS image is always fetching with a width of 3840, instead of the fixed value. <Image src={loaderUrl(logoImage)} alt="" role="presen ...

cssnext.jsnext-images

flash beneath the div tag

There seems to be an issue with the orange box and navigation showing up behind the flash on our main site. Any suggestions on how to resolve this? This problem is specifically occurring in Google Chrome. -- I've tried adding a certain parameter, bu ...

cssflash

Leveraging the power of jQuery and vanilla JavaScript to create a pop-up print window for a Div element within a CMS platform that does not support media query stylesheets

I have been grappling with this particular issue for weeks now, seeking guidance from previous inquiries here. Yet, despite the helpful hints, I am still struggling to find a viable solution. My website features a scrolling sidebar measuring approximately ...

javascriptjquerycss

Is there a way to accurately retrieve the width of an element within setInterval without any delay?

I'm currently experimenting with increasing a progress bar using the setInterval function. So far, it seems to be functioning properly. var progressBar = $('.progress-bar'); var count = 0; var interval = setInterval(function () { va ...

javascriptjquerycssdrop-down-menu

gyp ERROR: Npm encounters difficulty in obtaining a local issuer certificate

I recently did a fresh installation of Windows 10, keeping it clean except for adding cygwin to access Unix commands in the command prompt. During my attempt to install @angular/cli with the command npm install -g @angular/cli, I encountered an error afte ...

angularnpmnpm-installnode-gyp

Display a single submenu on mouseover using Javascript

Hello there, I have been working on creating a small menu using only Javascript, but I am facing an issue where the onmouseover event is displaying all submenus instead of just one. Below is the section of code that is supposed to change style.display to ...

javascripthtmlcss

The header is displaying with the heading and image out of alignment

Take a look at my code header img{ width:10%; vertical-align: middle; } header h1{ text-align: right; display:inline; position: absolute; } header { width : 100%; height: 1% ; background: red; } <!DOCTYPE html> <html> <head> <m ...

htmlcsstwitter-bootstrap

Attempting to trigger the timer to begin counting down upon accessing the webpage

Take a look at this example I put together in a fiddle: https://jsfiddle.net/r5yj99bs/1/ I'm aiming to kickstart as soon as the page loads, while still providing the option to pause/resume. Is there a way to show the remaining time as '5 minute ...

javascriptjqueryhtmlcss

Adjustable slider height in WordPress

Struggling with the height of the slider on my website. I've tried various CSS adjustments and even tweaked the Jquery, but it still doesn't display properly on mobile devices. For instance, setting a height of 300px looks perfect on desktop brow ...

jqueryhtmlcsswordpress

Adjust the styling of the minimized file input to work like a download button when the window is resized

I successfully minimized the fileInput function by removing the upload area and loading bar, giving it a similar appearance to a downloadButton. However, I'm facing difficulties in determining which part of the CSS code needs to be modified to make it ...

cssrshiny

Tips on updating primeng Panel Menu appearance with scss

I'm looking to customize the color of my panel menu to black. Below is the HTML code I am using. <p-panelMenu styleClass="font-bold text-xs m-0 w-11" [model]="items" [multiple]='false'></p-panelMenu> ...

htmlcssangularsassprimeng

Shifting a div from side to side

I don't have much experience with coding, so I was hoping for some assistance. My goal was to create a div that moves back and forth using toggleClass; $('div').on('click', function() { $(this).toggleClass('active') ...

javascriptcssanimation

Updating a component's value in Angular 6 when there is a change in the corresponding service

My objective sounds straightforward, but I am struggling to implement it: I want one of my components to automatically update when a variable in a service changes. To illustrate my issue, consider the following example: Imagine having a service that incr ...

angulartypescriptservicecomponents

How to add a line break within the :after pseudo-element using CSS

I've been struggling to split text inside an :after pseudo-element of a label that receives its content from a data- attribute. I've attempted using word-break, as well as playing around with width, max-width, and position:relative, but nothing s ...

htmlcss

Converting Scalable Vector Graphics to Hypertext Markup Language and

So I've got this SVG file called 7.svg. What's the best way to show this image using HTML or CSS on my index.html page? ...

htmlcsssvg

How can I delete the header and footer on a personalized homepage design?

After crafting a unique home page/landing page for my website that stands out from the rest, I've come across an issue. The header and footer are appearing on this new page, but I only want to display what I specifically coded. I attempted using Site ...

htmlcsswordpressweb

Please eliminate the notification stating "The baseHref option is deprecated, instead use the baseHref option directly in the browser builder."

After updating my project to Angular version 11, I encountered an error when trying to run it: "Option baseHref is deprecated, use baseHref option in the browser builder itself". I attempted to add baseHref: "/certs/" in angular.json, but the error persis ...

angular

How can I resolve the issue of "Errors detected in your package-lock.json" in NGRX?

I encountered some problems while trying to set up my Angular project in an NX workspace with NGRX and running it through Jenkins. After running npm install, I started getting errors. Has anyone else experienced errors like these after executing: nx updat ...

angularnpmngrxpackage.json

Parent: Using Flexbox vs Child: Choosing between inline-block or inline elements (Advantages of utilizing CSS3 flexbox?)

I've been exploring the capabilities of CSS3's new "display: flex" property and trying to determine its advantages. So far, I haven't discovered any significant benefits beyond creating a virtual horizontal line within each flex box containe ...

cssresponsive-designflexbox