PrimeNG Ripple Effect Not Working in Angular

I'm having trouble getting the ripple effect to work in my Angular application using PrimeNG. Despite following the documentation and various tutorials, the ripple effect doesn't seem to activate on my p-button components. Here is what I've done so far:

Environment

• 
  Angular version: 17
  
  
• 
  PrimeNG version: 17+
  

Steps Taken

Created a PrimengModule to configure PrimeNG:

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { RippleModule } from 'primeng/ripple';
import { PrimeNGConfig } from 'primeng/api';

const initializeAppFactory = (primeConfig: PrimeNGConfig) => () => {
primeConfig.ripple = true;
};

@NgModule({
declarations: [],
providers: [
{
provide: APP_INITIALIZER,
useFactory: initializeAppFactory,
deps: [PrimeNGConfig],
multi: true,
},
],
imports: [ButtonModule, RippleModule],
exports: [ButtonModule, RippleModule],
})
export class PrimengModule {}


Imported PrimengModule in my LoginComponent.ts

import { Component } from '@angular/core';
import { PrimengModule } from '../../../../shared/modules/primeng/primeng.module';

@Component({
selector: 'app-learner-login',
standalone: true,
imports: [PrimengModule],
templateUrl: './learner-login.component.html',
styleUrl: './learner-login.component.scss'
})
export class LearnerLoginComponent {

}


this is my LoginComponent.html using the pRipple directive

<p-button
pRipple
label="Submit"
icon="pi pi-check"
iconPos="right"
size="small"
></p-button>


Added PrimeNG and PrimeIcons CSS to styles.scss:

@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";
@import "primeicons/primeicons.css";

@layer tailwind-base, primeng, tailwind-utilities;



@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
}


Despite these configurations, the ripple effect is not visible when I click the button. There are no errors in the console, and the button renders correctly with other PrimeNG styles and functionalities working as expected.

What I've Tried

• 
  Ensured that the CSS files are correctly loaded.
  
  
• 
  Checked the browser console for errors.
  
  
• 
  Verified that PrimeNGConfig is initialized and ripple is set to true.
  
  
  Question
  
  What am I missing or doing wrong? How can I get the ripple effect to work with PrimeNG in my Angular application?
  

Continue reading...