Angular Ripple

Angular Ripple directive adds ripple effect to the host element.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {RippleModule} from 'primeng/ripple';

Getting Started

Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled globally at your main component e.g. app.component.ts by injecting PrimeNGConfig.

import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

    constructor(private primengConfig: PrimeNGConfig) {}

    ngOnInit() {
        this.primengConfig.ripple = true;
    }

}

Directive

Ripple is applied by adding the pRipple directive to the host.

<div pRipple></div>

export class ModelComponent {

    val: number;

}

Styling

Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of .p-ink element.

<div pRipple class="purple" ></div>

.p-ripple.purple .p-ink {
    background: rgba(256,39,176,.3);
}

Theming

Ripple supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Ripple showcase for demos and documentation.