Prime ng 11.4.0 ripple animations not working

user_10684399 0
Viewed 2510

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!

primeng
3 Answers
user_152118390

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 in APP_INITIALIZER, not in app.component.

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 the 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'll don't have ripple effect by default. You must manually add the pRipple directive and imports RippleModule. (<button pButton pRipple ....>TEST</button>).

user_42714300

You need to install also primeflex and web-animations-js dependencies via the cli.

And make sure you have added also in your html the pRipple directive:

<button pButton type="button" label="click" pRipple></button>
user_141250970
Related