Usage:

Step 1

Import the RippleDirective from node_modules package

import { RippleDirective } from 'angular-ripple-effect/ripple.directive';

Step 2

Import css in your main css file

@import '~angular-ripple-effect/style.css';

Step 3

Attach [appRipple] directive to some element

<div appRipple></div> 

You can specify the animation time out and color Note! The time out should not be greater than 2.5s (animation time out in style.css)

<div appRipple timeout="2500" color="gray"></div> 

Note! The element where you attach "appRipple" Directive need to be visible somehow Note! Default ripple effect is white colored

<div appRipple style="width:100px;height:50px;"></div> 

or

<div appRipple>
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div> 

And that's it. Enjoy!