Angular PrimeNG Ripple Directive

Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will be seeing Angular PrimeNG Ripple Directive.

The Ripple Directive is used to apply a ripple effect animation to the host element. It needs to be enabled globally by setting this.primengConfig.ripple to true in the app.component.ts file. After this, the pRipple directive can be used on elements to apply the ripple effect to the elements of that component.

Syntax:

<div pRipple>....</div>

Creating Angular Application and Installing the Module:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Run the below command:

ng serve --open

Example 1: In this example, we set the ripple effect on a simple <div> element.

app.component.html

<div class="text-center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Ripple Directive</h4>

    <div pRipple class="mt-5 gfg">
        <span>GeeksforGeeks</span>
    </div>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `
        .gfg{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 150px;
            width: 150px;
            user-select: none;
            background-color: green;
            color: white;
            margin: auto;
        }

        `
    ]
})

export class AppComponent implements OnInit{
    constructor(private primengConfig: PrimeNGConfig) { }

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { RippleModule } from 'primeng/ripple';


@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        RippleModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Example 2: In this example, we changed the color of the ripple using CSS classes.

app.component.html

<div class="text-center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Ripple Directive</h4>

    <div class="flex" style="width: 500px; margin: auto;">
        <div pRipple class="mt-5 gfg green">
            <span>GeeksforGeeks</span>
            <span>Green</span>
        </div>
        <div pRipple class="mt-5 gfg orange">
            <span>GeeksforGeeks</span>
            <span>Orange</span>
        </div>
    </div>

    <div class="flex" style="width: 500px; margin: auto;">
        <div pRipple class="mt-5 gfg pink">
            <span>GeeksforGeeks</span>
            <span>Pink</span>
        </div>
        <div pRipple class="mt-5 gfg blue">
            <span>GeeksforGeeks</span>
            <span>Blue</span>
        </div>
    </div>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `
        .gfg{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 150px;
            width: 150px;
            user-select: none;
            margin: auto;
        }

        `
    ]
})

export class AppComponent implements OnInit{
    constructor(private primengConfig: PrimeNGConfig) { }

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { RippleModule } from 'primeng/ripple';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        RippleModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

styles.css

.p-ripple.green .p-ink {
    background: rgba(0, 255, 0, .3);
}

.p-ripple.orange .p-ink {
    background: rgba(255, 102, 0, .5);
}

.p-ripple.pink .p-ink {
    background: rgba(255, 0, 221, .5);
}

.p-ripple.blue .p-ink {
    background: rgba(0, 0, 255, .3);
}

Output:

Reference: http://primefaces.org/primeng/ripple