2

I have an Angular Material Paginator which I am currently customizing the css of.

It looks like this:

enter image description here

I cant record my screen on my device so I will explain.

The two arrow buttons on the right side are Angular Material Icon Buttons.

When I click them, a ripple effect (gray circle) appears. I need to delete that ripple effect.

I couldn't inspect the element where it happens because it only appears on a click.

I checked SO already about this question and the most common answer, to use [disableRipple]="true" doesn't work here, since angular paginator does not have this property. I am working in a big project with several developers, so I would not like to touch global scss files.

This is my code btw:

<mat-paginator
    #paginator
    (page)="changePage($event)"
    [length]="imagesAndFiles.length"
    [pageIndex]="pageIndex"
    [pageSize]="pageSize"
    [pageSizeOptions]="[4, 8, 16, 24, 32]"
  >
</mat-paginator>

How can I remove the ripple effect from the arrow buttons?

IonicMan
  • 743
  • 1
  • 12
  • 31

2 Answers2

1

There is a directive called matRippleDisabled that can be used in the paginator.
See the official doc about ripple

Shifenis
  • 1,056
  • 11
  • 22
  • 1
    Well, this directive could be set to the button, which is abstracted by the `mat-paginator` component. So the question basically narrows down to: How to extract the buttons from `mat-paginator` component in order to set this directive to it? – Fabian Strathaus Nov 15 '22 at 11:02
  • 1
    You should abstract the logic with a custom paginator, maybe it should help you: [custom paginator](https://stackoverflow.com/questions/53646259/how-to-customize-mat-paginator-in-angular-material) – Shifenis Nov 15 '22 at 12:11
1

You can use css to hide the ripple element

  • Add a class to the paginator element
  • Hide the mat-button-ripple class
<mat-paginator
  class="hide-ripple"
  #paginator
  (page)="changePage($event)"
  [length]="imagesAndFiles.length"
  [pageIndex]="pageIndex"
  [pageSize]="pageSize"
  [pageSizeOptions]="[4, 8, 16, 24, 32]"
>
</mat-paginator>

.hide-ripple {
  ::ng-deep {
    .mat-button-ripple {
      display: none;
    }
  }
}
Mr. Stash
  • 2,940
  • 3
  • 10
  • 24