Topic: Button ripple not working in MDB5 Angular Pro

Ryannnnn priority asked 1 year ago


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/



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 4.1.0
  • Device: Mac
  • Browser: Chrome
  • OS: 13.3.1
  • Provided sample code: Yes
  • Provided link: Yes