Angular PrimeNG Ripple Styling
Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will see Angular PrimeNG Ripple Styling.
The Ripple Component is used to apply a ripple effect animation to the host element. The color of the ripple effect can be customized by changing the background property of the “p-ink” class.
Syntax:
<div pRipple class="green">....</div> // In CSS .p-ripple.green .p-ink { background: rgba(0, 255, 0, .3); }
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:
Run the below command:
ng serve --open
Example 1: In this example, we showed to default and red color of the ripple.
app.component.html
< div style = "text-align: center" > < h2 style = "color: green" >w3wiki</ h2 > < h4 >Angular PrimeNG Ripple Styling</ h4 > < div class = "cards flex justify-content-center mt-5" > < p-card pRipple class = "default" header = "Default Ripple" [style]="{'width': '300px', 'margin-right': '20px'}"> < p >Ripple Component Demo</ p > </ p-card > < p-card pRipple class = "red" header = "Red Ripple" [style]="{'width': '300px'}"> < p >Ripple Component Demo</ p > </ p-card > </ 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: [ ` .cards{ user-select: none; } ` ] }) 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 { CardModule } from 'primeng/card' ; import { RippleModule } from 'primeng/ripple' ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, CardModule, RippleModule ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } |
styles.css
. default .p-card-body{ background-color : green ; padding : 0 ; color : white ; } .p-ripple. red .p-ink { background : rgba( 255 , 0 , 0 , . 3 ); } |
Output:
Example 2: In this example, we changed the color of the ripple to green and blue.
app.component.html
< div style = "text-align: center" > < h2 style = "color: green" >w3wiki</ h2 > < h4 >Angular PrimeNG Ripple Styling</ h4 > < div class = "cards flex justify-content-center mt-5" > < p-card pRipple class = "green" header = "Green Ripple" [style]="{'width': '300px', 'margin-right': '20px'}"> < p >Ripple Component Demo</ p > </ p-card > < p-card pRipple class = "blue" header = "Blue Ripple" [style]="{'width': '300px'}"> < p >Ripple Component Demo</ p > </ p-card > </ 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: [ ` .cards{ user-select: none; } ` ] }) 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 { CardModule } from 'primeng/card' ; import { RippleModule } from 'primeng/ripple' ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, CardModule, RippleModule ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } |
- styles.css:
CSS
.p-ripple. green .p-ink { background : rgba( 0 , 255 , 0 , . 3 ); } .p-ripple. blue .p-ink { background : rgba( 0 , 0 , 255 , . 3 ); } |
Output:
Reference: http://primefaces.org/primeng/ripple
Contact Us