Material Design ripple effect on other element than button

Issue

I wonder, would it be possible to reuse the Material Design CSS ripple effect on other HTML element than button, for example a div? Or would it be easier to create own ripple effect in CSS?

Solution

Material Design provides a ripple component out of the box, it can be used like this:

In .ts file:

import {MatRippleModule} from '@angular/material/core';

In view:

<div matRipple [matRippleColor]="myColor"> 
 <ng-content></ng-content> 
</div> 

Examples and more information about the component can be found here: https://material.angular.io/components/ripple/overview

Answered By – LordSilvermort

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.