Md-ripple in Angular2 Material

Question

I didn't find any information anywhere how to use md-ripple from ng2 material.

Tried

<button md-ripple-foreground class="loginButton"></button>

or

<button md-ripple-fade-in class="loginButton"></button>

or

<button md-ripple class="loginButton"></button>

But none of them actually works. How to turn it on?

If you dont know how ripple works: https://codepen.io/Craigtut/pen/dIfzv

https://github.com/angular/material2/tree/master/src/lib/core/ripple

Answer 1

You have to define a [mdRippleColor] or a [mdRippleBackgroundColor] in your element. Otherwise it defaults to the css background colour and you won't see any effect:

<button md-ripple class="loginButton" mdRippleColor="#F00"></button>

Answer 2

Was facing the same problem, this is how I went about it - I wanted to implement it inside a MdCard and it worked.

In app.module.ts, or wherever your module file is ->

import { MdRippleModule } from '@angular/material';

Don't forget to declare inside your imports inside @NgModule in the same file

imports: [ MdRippleModule ]

Now head straight to tag where you want to implement the ripple effect directive

In my example:

<md-card
  md-ripple
  mdRippleColor="#00E4AC">
Content 
</md-card>

For more properties like mdRippleColor used in the example above, please refer this link: h̶t̶t̶p̶s̶:̶/̶/̶g̶i̶t̶h̶u̶b̶.̶c̶o̶m̶/̶a̶n̶g̶u̶l̶a̶r̶/̶m̶a̶t̶e̶r̶i̶a̶l̶2̶/̶b̶l̶o̶b̶/̶m̶a̶s̶t̶e̶r̶/̶s̶r̶c̶/̶l̶i̶b̶/̶c̶o̶r̶e̶/̶r̶i̶p̶p̶l̶e̶/̶R̶E̶A̶D̶M̶E̶.̶m̶d̶#̶a̶p̶i̶-̶s̶u̶m̶m̶a̶r̶y̶ (Link is no longer available due to version upgrade)

Answer 3

const globalRippleConfig: RippleGlobalOptions = {
  disabled: false,
  baseSpeedFactor: 1.5 // Ripples will animate 50% faster than before.
};

and

<style>
    .ripple{
      position: relative;
     }
  </style>
 <div class="ripple" md-ripple>
 </div>