in Angular by
what is in angular

1 Answer

0 votes

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';


    imports: [






export class AppModule {}


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.


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>

Related questions

0 votes
0 votes
asked Sep 13, 2019 in Angular by ivor2019
0 votes
asked Sep 13, 2019 in Angular by ivor2019
0 votes
asked Sep 13, 2019 in Angular by ivor2019