Topic: Button ripple not working in MDB5 Angular Pro
Hi,
I've downloaded my MDB5 Angular Pro v4.1.0 starter app, unzipped it, opened it in VS Code, and ran npm install in the terminal. there are no errors from that:
ButtonApp$ npm install
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
added 968 packages, and audited 969 packages in 53s
102 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
When I add a button to the app.component.html file, <button type="button" class="btn btn-primary">Button</button> the button doesn't show the ripple effect.
Expected behavior
Expected that the basic button would ripple like it does in the example from this page
Actual behavior
Acts like a basic Angular button with no ripple animation.
Resources (screenshots, code snippets etc.)
Please make sure to use mdbRipple directive on the button element and to add MdbRippleModule to your module imports.
Module:
import { MdbRippleModule } from 'mdb-angular-ui-kit/ripple';
…
@NgModule ({
...
imports: [MdbRippleModule],
...
})
Component:
<button mdbRipple type="button" class="btn btn-primary btn-lg">Primary</button>
We will update all the examples in the buttons documentation. You can find more information about the mdbRipple directive here: https://mdbootstrap.com/docs/angular/methods/ripple/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 4.1.0
- Device: Mac
- Browser: Chrome
- OS: 13.3.1
- Provided sample code: No
- Provided link: Yes