With the Ignite UI for Angular Ripple directive, you can create a ripple animation effect to give users feedback when they’re trying to click or touch regions that aren’t configured to receive that input. Set this directive to a relatively positioned element to create an animation in response to a touch or a mouse click.

Ripple Demo


The Ripple Directive is exported as an NgModule, thus all you need to do in your application is to import the IgxRippleModule inside your AppModule:

// app.module.ts

import { IgxRippleModule } from 'igniteui-angular/main';

    imports: [
export class AppModule {}


Adding Ripple Effect

Use igxRipple to add a ripple effect to the specified element. It will add a ripple effect with the default color.

<button igxButton="raised" igxRipple>Click Me</button>

Custom Color

You can set the ripple color using igxRipple. In this sample, we set white color to the ripple.

<button igxButton="raised" igxRipple="white">White</button>

Centered Ripple Effect

The ripple effect starts from the position of the click event. You can change this behavior using igxRippleCentered and setting the center of the element as origin.

<button igxButton="raised" igxRipple="white" igxRippleCentered="true">Centered</button>

Ripple Target

Use igxRippleTarget to attach a ripple effect to a specific element inside a parent element.

<div class="parent-div" igxRipple="blue" igxRippleTarget=".child-div" igxRippleCentered="true">
  Parent Div
  <div class="child-div">
    Child Div

Notice that if you click on the parent or the child divs the ripple effect will only appear inside the child div. The child div position has to be set to relative.

Ripple Duration

Use igxRippleDuration to change the duration of the ripple animation. The default is 600 miliseconds. In this sample the igxRippleDuration is set to 2000 miliseconds.

<div [igxRippleDuration]=2000 igxRipple="white">
  <p>Long Ripple Animation</p>

The igxRipple uses the Web Animation API and runs natively on browsers that support it. The web-animations.min.js polyfill is available for other browsers.


Use a relatively positioned element for the ripple animation. You can also use igxRippleTarget to target a child element.


Name Type Description
igxRipple string The color of the ripple animation
igxRippleTarget string Set the ripple to activate on a child element inside the parent of the igxRipple. Accepts a CSS selector. Defaults to the parent of the igxRipple.
igxRippleCentered boolean If true, the ripple animation originates from the center of the element rather than the location of the click event.
igxRippleDuration number The duration of the ripple animation. Defaults to 600 milliseconds.

Additional Resources

Our community is active and always welcoming to new ideas.