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:

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./angular/material2/tree/master/src/lib/core/ripple

• javascript
• angular
• material-design
• angular-material2

• Try can just use the md-button directive in your button. It will add the ripples for you – benny_boe Commented Dec 30, 2016 at 18:44
• <button md-raised-button md-ripple-fade-in type="button" ></button> Still doesnt work :( @benny_boe – user7209780 Commented Dec 30, 2016 at 18:52
• @H.Doe but the last link you give actually explains how you have to use it. – Poul Kruijt Commented Dec 30, 2016 at 18:55
• @PierreDuc Im following the instructions but somehow it doesnt work... – user7209780 Commented Dec 30, 2016 at 18:57

3 Answers 3

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)

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>

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>