Prime ng 11.4.0 ripple animations not working

Question

I have successfully installed primeng in my angular app ! styles works fine but ripple animations on button click not working !

In my app component -

    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;
    }

}

Also I have imported BrowserAnimationsModule in my app module! but still its not working! let me know if I am missing something!

Answer 1

PrimeNG >= 18

Since v18, ripple effect can be configured inside the new providePrimeNG provider function :

bootstrapApplication(RootComponent, {
  providers: [
    ..., // other providers
    providePrimeNG({
        ...,
        ripple: true
    })
  ]
});

PrimeNG <= 18

A summary for ripple effect on PrimeNG buttons :

Ripple effect is enabled globally by the PrimeNGConfig object. You must set the ripple property to true. Personnally, I prefer to do it inside the APP_INITIALIZER token, not in AppComponent :

app.module.ts

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

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

     @NgModule({
        // .....
        providers: [
           {
              provide: APP_INITIALIZER,
              useFactory: initializeAppFactory,
              deps: [PrimeNGConfig],
              multi: true,
           },
        ]
     })
    export class AppModule {}

Ripple effect only works with the help of pRipple directive from the RippleModule. This directive internally check if the ripple property from PrimeNGConfig is set to true.

The p-button component's already using pRipple directive inside his template. So, if you have enabled ripple effect globally, you have nothing more to do and you don't have to import RippleModule.

The confusing parts :

BUT, if you use an html button element with the pButton directive, you won't have ripple effect by default. You must manually add the pRipple directive and import RippleModule. (<button pButton pRipple ....>TEST</button>).