Topic: Package Issues
We were using an older version of Angular (v12) along with the free MDB package. Now, we planned to upgrade to the latest Angular version. During the upgrade, we got stuck at Angular 16 due to package compatibility issues. The free version of MDB supports only up to Angular 15, so we purchased mdb5-angular-ui-kit-pro-essential. I attached 2 images Old version working ui image, and New version of not working UI image. New version using essential pro version of MDB Package.
In this new package, some modules have been removed and some module names have been changed. Now, we need to know: How many modules are included in this paid package? What options do we have for features or modules that were removed in this new version?
Resources (screenshots, code snippets etc.)
UNCIA SCF --> UNCIA FLOW
<!--/. Logo -->
-
-->
{{ item.menuName }}
Restart {{ timeout }} -->
<li mdbWavesEffect>
<span class="Hlbl9">Business Date</span>
<!-- <span class="Hlbl10">{{ busnsda | date: dat1 }}</span> -->
<span class="Hlbl10" id="Businessda"></span>
</li>
<li mdbWavesEffect>
<span class="Hlbl9">Last Login</span>
<span class="Hlbl10">{{ lastlogin | date: dat }}</span>
</li>
<li class="nav-item waves-light d-flex justify-content-center align-items-center" mdbWavesEffect>
<a class="nav-link d-flex justify-content-center align-items-center" (click)="EaseLogin()" mdbTooltip="Go To EASE" placement="bottom">
<i far icon="arrow-alt-circle-left"></i>
</a>
</li>
<div *ngFor="let top of topmenuarr">
<li *ngIf="top.child==0" class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link">
<i fas class="fas fa-{{ top.menuIcon }}" (click)="topmenuclick(top)"></i>
</a>
</li>
<!-- <li *ngIf="top.child==0" class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link">
<i fas icon="university" (click)="topmenuclick(top)"></i>
</a>
</li> -->
<li *ngIf="top.child.length>0" class="nav-item dropdown" dropdown>
<a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light"
mdbWavesEffect>
<i fas icon="user-cog"></i>
</a>
<div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">
<span>Hello ! {{ userna }}</span>
<span>({{ defrole }})</span>
<div *ngFor="let child of top.child">
<!-- <a class="dropdown-item waves-light" (click)="profileClicked()" mdbWavesEffect>Profile</a>
<a class="dropdown-item waves-light" (click)="logout()" mdbWavesEffect>Log out</a> -->
<a class="dropdown-item waves-light" (click)="childmenu(child)">{{child.menuName}}</a>
</div>
</div>
</li>
</div>
<!-- <li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link">
<i fas icon="bell"></i>
</a>
</li>
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link" (click)="newuser()">
<i fas icon="university"></i>
</a>
</li>
<li class="nav-item dropdown" dropdown>
<a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light"
mdbWavesEffect>
<i fas icon="user-cog"></i>
</a>
<div *dropdownMenu class="
dropdown-menu dropdown-menu-right dropdown dropdown-primary
" role="menu">
<span>Hello ! {{ userna }}</span>
<span>({{ defrole }})</span>
<a class="dropdown-item waves-light" (click)="profileClicked()" mdbWavesEffect>Profile</a>
<a class="dropdown-item waves-light" (click)="logout()" mdbWavesEffect>Log out</a>
</div>
</li> -->
</ul>
</app-links>
</mdb-navbar>
</div>
</div>
<div class="row colrightpad1 elembtmmrg0">
<div class="col-12 colleftpad3">
<div class="row PgHeadingBar cardstylewhite cardtopcurve1 cardbottomcurve1">
<div class="col-12">
<div class="row">
<div class="col-6 Hlbl4">
<div class="row">
<div class="col-3">
<span class="Hlbl9 PgNameval"></span> <br />
<span class="Hlbl10 PgNumval"></span>
</div>
<div class="col-8 StatusA">
<span class="Hlbl9">Current Status</span> <br />
<span class="Hlbl10 PgNumstval"> {{ stpstatus }}</span>
<span class="colleftpad hlnk2" (click)="statuspop()">View All</span>
</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-12 rightcontrols StatusA">
<div *ngIf="comontray">
<button mdbBtn type="button" size="sm" (click)="commontray()" class="thdarkblu2" mdbWavesEffect>
<i far icon="comments"></i>
<span class="colrightpad0"> Common Tray</span>
</button>
</div>
<div>
<button mdbBtn type="button" size="sm" (click)="comments()" class="thdarkblu2" mdbWavesEffect>
<span class="iconhbl1">
<i far icon="comments"></i>
</span>
<span class="colrightpad0"> Comments</span>
<span class="circle1 Pending Hlbl13" id="comtscount">{{
count
}}</span>
</button>
<button mdbBtn type="button" size="sm" (click)="logs()" class="thdarkblu2" mdbWavesEffect>
<span class="iconhbl1">
<i far icon="comments"></i>
</span>
<span class="colrightpad0"> Logs</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row colrightpad1">
<div class="col-12 colleftpad3">
<div class="row">
<div class="col-12 colnopad">
<router-outlet></router-outlet>
<div *ngIf="this.unciaassist == '1'">
<app-chatbot></app-chatbot>
</div>
</div>
</div>
</div>
</div>
The mdb5-angular-ui-kit-pro-essential is a completely new library, not another version of the library you used previously. We've tried to keep it as similar as possible to the older library, but the migration will require updating many things step by step, according to the documentation. For example, the button component no longer requires the use of a module and directive.
You can find all the available components in the documentation: https://mdbootstrap.com/docs/angular/
Please let me know if you encounter any further problems with the migration.
Denslyn premium commented 3 weeks ago
Thank you for your response.
As our code is live and we are under time constraints, we are unable to make extensive updates to the codebase. We are looking for a way to retrieve the same UI with minimal changes to the code. Is there a solution or approach that would allow us to achieve this without a complete overhaul?
Arkadiusz Idzikowski staff commented 3 weeks ago
I'm afraid there is no other way than to manually update the syntax of all the MDB components. This can be quite easy in views like the one in the attached screenshot (where you basically only need to update 2 or 3 components) but it can still require a lot of code changes.
Denslyn premium commented 2 weeks ago
Thank you for the clarification.
I understand that the new mdb5-angular-ui-kit-pro-essential library differs significantly from the previous version and that manual updates are required. While this isn’t ideal for our current timelines, we appreciate the guidance.
We will begin planning the migration step by step based on the documentation. If we encounter any specific issues or blockers during the process, we will reach out for further support.
Additionally, Is there any way to obtain the default CSS styles for those specific tags? Even if the result is not identical to the old UI, having similar styling could help us reduce the number of changes required.
Thank you again for your assistance.
Arkadiusz Idzikowski staff commented 2 weeks ago
Could you please explain what you mean by the default CSS? I'm not sure if I understand the question correctly.
Denslyn premium commented 2 weeks ago
Sure! When I say “default CSS”, I’m referring to the styling that old version of MDB5 applies automatically to its components—how they look out of the box.
If there’s a way to get those base styles (or a reference to them), it would help us keep the migration a bit smoother and reduce the number of manual adjustments we need to make.
Arkadiusz Idzikowski staff commented 2 weeks ago
Sadly there's no easy way to apply old styles to new components, if that's what you mean.
Although we've tried to maintain a similar look and feel for components, the internal HTML structure can vary significantly. The previous MDB Angular version was based on a different version of Bootstrap (v4), and even attempting to load styles from both versions into a single project could result in conflicts in rules or CSS variables.
However, in the new version, we're always trying to add the current list of SCSS and CSS variables for a given component to its documentation (API section). Hopefully this will make potential styling changes much easier.
Denslyn premium commented 2 weeks ago
Thanks for explaining, Arkadiusz.
That makes sense regarding the Bootstrap differences and potential style conflicts. We’ll rely on the new documentation and variables as we update our components.
One more question: Could you please confirm which components are included in the mdb5-angular-ui-kit-pro-essential package that we purchased? Additionally, if possible, could you let us know which components from the previous MDB Angular version are no longer available or have been removed/renamed in the new package? Having this information would help us plan our migration more effectively.
Appreciate your help.
Arkadiusz Idzikowski staff commented 2 weeks ago
In the new project we no longer support some utility components/directives like sticky header, animated cards, auto-format/character counter input directives or simple (easy) charts. The tree-view component is no longer part of the pro (essential) package but it is available as a separate plugin (you would need advanced license to access plugins).
Some elements like buttons, badges, cards, navbars or icons are no longer Angular components in the MDB5 version. They are still available but you just use them as normal HTML elements with some styles.
There may also be some differences in the features available for a given component. However, we don't maintain a detailed comparison list between these two projects, so listing all the differences would be difficult.
I hope I haven't missed anything crucial. If you can't find a component/feature in the documentation that's essential for your project, please let me know.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 9.0.0
- Device: PC
- Browser: Chrome, Edge
- OS: Windows 10, 11
- Provided sample code: No
- Provided link: No