Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: MDB5 Controls

raguramv premium asked 1 year ago

Hello I have pro-essential - upgraded from my pro standard 11 version to MDB 5 on Angular 16.

  1. Did NPM Uninstall of "ng-uikit-pro-standard"
  2. Updated all my angular 16 related updates and performed NPM Update
  3. Successfully Installed MDB5 NPM - after getting support from your license team as npm install git+https://oauth2:AUTH-KEYC@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential

But after the update in app.Module.ts import { CardsModule } from 'mdb-angular-ui-kit'; ----> NO longer see the CardsModule in the kit //import { ChartsModule } from 'ng-uikit-pro-standard'; ----> this is how CardsModule was on the 11.1.0 version

I am getting build errors such as -

Error: src/app/userprofile/userprofile.component.html:95:7 - error NG8001: 'mdb-card-body' is not a known element: 1. If 'mdb-card-body' is an Angular component, then verify that it is part of this module. 2. If 'mdb-card-body' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message

Does Cards, MDB Card, Icon etc no longer exist? or can you point me to the correct way to reference these controls in MDB5?

Thanks, Ragu...

Arkadiusz Idzikowski staff answered 1 year ago

MDB5 is a new library, not a new version of MDB4. We tried to keep as many similarities as possible to make migration easier, but the names and syntax of many components may be slightly different.

For example, in MDB5 cards and icons are created only with HTML and CSS code (they are not wrapped in Angular components). You only need to copy the code from the documentation page:

Cards: https://mdbootstrap.com/docs/angular/components/cards/

Icons: https://mdbootstrap.com/docs/angular/content-styles/icons/

And here you can find all the information about modules names and imports: https://mdbootstrap.com/docs/angular/getting-started/modules-and-imports/

Please let me know if you encounter any further problems with the migration.

raguramv premium commented 1 year ago

Thank you, will change as part of the upgrade... What may be the best documentation available to understand this in full for a person upgrading the whole thing from version 11 to MDB5, with moving us moving from Angular 11 to 16.

Arkadiusz Idzikowski staff commented 1 year ago

I think the easiest way to do that is to compare the documentation pages for a specific component you need to update.

For example if you need to update the cards component:

MDB5 documentation page: https://mdbootstrap.com/docs/angular/components/cards/

MDB4 documentation page: https://mdbootstrap.com/docs/b4/angular/components/cards/

You can find all the information about syntax, imports and available options in the Overview and API tabs (you can switch tabs at the top of the page). In this case MDB5 cards does not have API tab, because it is not an Angular component and it will work out of the box when you copy the code.
Write
Create snippet
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: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 5.0.0
  • Device: Windows
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes
Tags
mdbpro
About author
raguramv
Premium support 5Support score
3Questions 0Answers 0Snippets