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?