Angular Ripple Directive Overview

    The Ignite UI for Angular Ripple component creates an animation in response to a touch or a mouse click.

    Angular Ripple Example

    EXAMPLE

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free.

    Getting Started with Ignite UI for Angular Ripple Directive

    To get started with the Ignite UI for Angular Ripple directive, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

    ng add igniteui-angular
    cmd

    For a complete introduction to the Ignite UI for Angular, read the getting started topic.

    The next step is to import the IgxRippleModule in the app.module.ts file.

    // app.module.ts
    
    import { IgxRippleModule } from 'igniteui-angular';
    // import { IgxRippleModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        imports: [
            ...
            IgxRippleModule,
            ...
        ]
    })
    export class AppModule {}
    typescript

    Alternatively, as of 16.0.0 you can import the IgxRippleDirective as standalone dependencies.

    // home.component.ts
    
    import { IgxRippleDirective, IgxButtonDirective } from 'igniteui-angular';
    // import { IgxRippleDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
    
    @Component({
      selector: 'app-home',
      template: '<button igxButton="contained" igxRipple>Click Me</button>',
      styleUrls: ['home.component.scss'],
      standalone: true,
      imports: [IgxRippleDirective, IgxButtonDirective],
    })
    export class HomeComponent {}
    typescript

    Now that you have the Ignite UI for Angular Ripple module or directive imported, you can start using the igxRipple directive.

    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.

    Using the Angular Ripple Directive

    Adding Ripple Effect

    Use the igxRipple directive to add a ripple effect to the specified element:

    <button igxButton="contained" igxRipple>Click Me</button>
    html

    Examples

    Custom Color

    You can easily change the default ripple color using the igxRipple:

    <button igxButton="contained" igxRipple="white">White</button>
    html

    EXAMPLE

    Centered Ripple Effect

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

    <button igxButton="contained" igxRipple="white" [igxRippleCentered]="true">
      Centered
    </button>
    html

    EXAMPLE

    Ripple Duration

    We can use the igxRippleDuration property to change the duration of the ripple animation, which, by default, is set to 600 milliseconds.

    <button igxButton="contained" igxRipple [igxRippleDuration]="2000">
      Click Me
    </button>
    html

    EXAMPLE

    Ripple Target

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

    <div class="parent" igxRipple="white" igxRippleTarget=".child" [igxRippleCentered]="true">
      ...
      <button class="sample-button child" igxButton="contained">Read More</button>
    </div>
    html

    Notice that no matter whether you click on the parent or the child element, the ripple effect will only appear on the button.

    EXAMPLE

    The child element, which you want to target with the igxRippleTarget property, has to be relatively positioned.

    App Builder | CTA Banner

    Styling

    First, in order to use the functions exposed by the theme engine, we need to import the index file, where all styling functions and mixins are located, into our style file:

    @use "igniteui-angular/theming" as *;
    
    // IMPORTANT: Prior to Ignite UI for Angular version 13 use:
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    scss

    You can easily create a new theme, that extends the ripple-theme and accepts the parameters, required to customize the ripple as desired.

    $custom-ripple-theme: ripple-theme(
      $color: #383779,
    );
    scss

    The next step is to pass the custom ripple theme:

    @include css-vars($custom-ripple-theme);
    scss

    A color set using the igxRiple directive would take precedence over one set by a custom theme.

    Demo

    EXAMPLE

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.