CODEWITHSUNDEEP
htmlangularangular-materialangular-material-6
Etienne Berube
Etienne Berube

Reputation: 657

How to edit Mat Ripples properties in Mat Chip Angular

I'm working on an angular app that uses mat chips in a data table. However, the data from the table is stored in a database and is retrieved via HTTP calls. So when I click on the delete button, the ripple extends until the table refreshes and it can grow really big.

Is there a way of modifying the ripple radius for mat chips or other Angular Material elements? I know I can disable it but modifying the radius would be the best.

Upvotes: 2

Views: 5230

Answers (1)

p4r1
p4r1

Reputation: 2650

I'm not sure when it was introduced, but as of Material version 6.4.7 the Ripples module was added for more granular control of how ripples behave, allowing for defining the ripple radius, color, and more. Using this new module, you should be able to disable the native ripple effect on each component and override with your own:

<mat-chip disableRipple matRipple matRippleRadius="10">One fish</mat-chip>

If you don't disable the component's native ripple, each click will produce two ripples.

Upvotes: 6

Related Questions