angular-ripple-effect-lib

Usage:

Step 1

Import the AngularRippleModule from node_modules package

import { AngularRippleModule } from 'angular-ripple-effect-lib';

@NgModule({
  imports: [..., AngularRippleModule],
  declarations: [...]
})
export class AppModule {}

Step 2

Import css in your main css file

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

Step 3

Attach [ripple] directive to some element

<div ripple></div> 

You can specify the animation time, color, width and height of the animation

<div ripple timeout="1500" color="gray" width="20" height="20"></div> 

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

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

or

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

DEMO

And that's it. Enjoy!