Topic: mdbBtn directive doesn't work

Arsenii pro asked 4 years ago


We have two MDB Angular projects that have been recently updated to Angular 9/MDB 9.2 For one of the projects, the update has gone in an expected way:

  1. after the update itself old button styling like class="btn<br>btn-primary stopped to work
  2. after changing styling to new stylemdbBtn color="primary" styles has become applied properly

However, for the other project, things went wrong. Firstly, we already had an issue with button styles in it. The problem was in login button shape being incorrect, all other buttons shape despite styles being applied in the same way worked and if we operated the app and then returned to login screen the login button shape "auto fixed" to a correct one. After the update surprisingly old styles continued to work (with the same issue with login button). But when we tried to applied new styles, they didn't work at all (showing default grey button). For the update the next things were performed:

  1. angular updated from 8 to 9, including cdk
  2. new ng-uikit-pro-standard loaded using npm install git+https://oauth2:@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git
  3. or running yarn (both variants tried), resulting packages show 9.2 version in package.json
  4. this command failed for both projects : ng update ng-uikit-pro-standard --migrate-only --from=8.0.0 --to=9.0.0 but haven't affected successful migration for the first one

Styles applied in the following way:

  1. app.module.ts: import { MDBBootstrapModulePro, ToastModule } from "ng-uikit-pro-standard"; ... imports: [ MDBBootstrapModulePro.forRoot(), ...
  2. angular.json: "styles": [ "node_modules/angular-calendar/css/angular-calendar.css", "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", "node_modules/@fortawesome/fontawesome-free/scss/regular.scss", "node_modules/@fortawesome/fontawesome-free/scss/brands.scss", "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", "node_modules/flag-icon-css/css/flag-icon.min.css", "node_modules/animate.css/animate.css", "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss", "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss", "src/styles.scss" ],
  3. index.html: body class="light-blue-skin"

The project has evidence of MDB styles applied - navigation layout, inputs etc work (not sure for directives though). However, the new button style doesn't work.

What can be wrong?


Arsenii pro commented 4 years ago

We found the issue. ButtonModule was the only module not exported from our shared module.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.2.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10 x64
  • Provided sample code: Yes
  • Provided link: Yes