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
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
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 {}
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 {}
Now that you have the Ignite UI for Angular Ripple module or directive imported, you can start using the igxRipple
directive.
Warning
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>
Examples
Custom Color
You can easily change the default ripple color using the igxRipple
:
<button igxButton="contained" igxRipple="white">White</button>
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>
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>
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>
Notice that no matter whether you click on the parent or the child element, the ripple effect will only appear on the button.
Note
The child element, which you want to target with the igxRippleTarget
property, has to be relatively positioned.
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';
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: #217346
);
Using CSS variables
The next step is to pass the custom ripple theme:
@include css-vars($custom-ripple-theme);
Using Component Theme Overrides
In order to style components for older browsers, like Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables.
If the component is using the Emulated
ViewEncapsulation, it is necessary to penetrate
this encapsulation using ::ng-deep
. To prevent the custom theme to leak into other components, be sure to include the :host
selector before ::ng-deep
:
:host {
::ng-deep {
// Pass the custom ripple theme to the `igx-ripple` mixin
@include ripple($custom-ripple-theme);
}
}
Note
A color that is set using the igxRiple
directive, would take precedence from the one, set within a custom theme.
Demo
API References
Additional Resources
Our community is active and always welcoming to new ideas.