CoreUI v5.6.3 for Angular 21

CoreUI v5.6.3 for Angular 21

CoreUI Pro v5.6.3 for Angular 21 is Here!

We are excited to announce the release of CoreUI v5.6.3 for Angular 21. Published on December 15, 2025, this update is more than a version bump—it is a leap forward in modern Angular development. We’ve streamlined the migration process to make transitioning your apps to Angular 21 effortless.


Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.


How to Update

Follow these steps to upgrade your project to CoreUI v5.6.3 for Angular 21:

  1. Check node.js version: Ensure you are using a supported version. Angular 21 CLI requires node.js versions: ^20.19, ^22.12 or ^24.0.
  2. Run the Update Command: In your project directory, execute:
ng update @angular/core@21 @angular/cli@21 @angular/cdk@21 @coreui/coreui@5 @coreui/angular~5.6 @coreui/icons-angular@~5.6 @coreui/angular-chartjs@~5.6

Make sure that there are no error messages in the results.

  1. Verify TypeScript: Update to TypeScript ~5.9 (The ng update command usually handle this.).

This process should seamlessly update your project to CoreUI v5.6.3 for Angular 21, incorporating the latest fixes and optimizations.


What’s New

🚀 Angular 21 & Zoneless Support

  • Compatibility: Tested and refactored for Angular 21
  • Zoneless Ready: CoreUI now works with zoneless Angular applications, providing better performance and smaller bundle sizes.

📦 Dependency Updates

  • chore(dependencies): update to Angular 21.0.5
    • @angular-devkit/schematics @ “21.0.3” (was “21.0.2”)
    • @angular/build @ “21.0.3” (was “21.0.2”)
    • @angular/cli @ “21.0.3” (was “21.0.2”)
    • @angular/compiler-cli @ “21.0.5” (was “21.0.3”)
    • @angular/language-service @ “21.0.5” (was “21.0.3”)
    • @angular/animations @ “21.0.5” (was “21.0.3”)
    • @angular/cdk @ “21.0.3” (was “21.0.2”)
    • @angular/common @ “21.0.5” (was “21.0.3”)
    • @angular/compiler @ “21.0.5” (was “21.0.3”)
    • @angular/core @ “21.0.5” (was “21.0.3”)
    • @angular/forms @ “21.0.5” (was “21.0.3”)
    • @angular/localize @ “21.0.5” (was “21.0.3”)
    • @angular/platform-browser @ “21.0.5” (was “21.0.3”)
    • @angular/router @ “21.0.5” (was “21.0.3”)
    • @types/node @ “24.10.4” (was “22.19.1”)
    • ng-packagr @ “21.0.1” (was “20.3.2”)
    • zone.js @ “0.16.0” (was “0.15.1”)
    • @types/node @ “24.10.4” (was “22.19.1”)
    • angular-eslint @ “21.1.0” (was “20.7.0”)
    • eslint @ “9.39.2” (was “9.39.1”)
    • jasmine-core @ “5.13.0” (was “5.12.1”)
    • prettier @ “3.7.4” (was “3.6.2”)
    • typescript-eslint @ “8.50.0” (was “8.48.0”)
  • remove @angular/platform-browser-dynamic

Angular 21 Compatibility

  • refactor(sidebar.service): cleanup
  • refactor(dropdown.service): cleanup
  • refactor(sidebar-nav): signal inputs, test
  • refactor(sidebar-nav.service): SidebarNavHelper providedIn: 'root'
  • refactor: migration from NgClass to class bindings
  • refactor: migration from NgStyle to style bindings
  • test: RouterTestingModule migration, updates, cleanups and fixes

Fixes

  • fix(multi-select): use signal selectedOptions to avoid NG0100 for zoneless
  • fix(time-picker): use signal queries to avoid NG0100 - expression changed after checked for zoneless
  • fix(autocomplete): delay prop not working - thanks to @bernik1980 for reporting and helping resolve issue #239.
  • fix(dropdown): potential infinite loop setting listeners
  • fix(form-password): c-form-feedback not displayed - thanks to @bernik1980 for reporting and helping resolve issue #237.
  • fix(one-time-password): c-form-feedback not displayed

Refactors

  • refactor(multi-select-optgroup): signal inputs, queries, host bindings, cleanup
  • refactor(autocomplete): dropdownMenu show cleanup

Migration Notes

To keep your application lean and compliant with Angular 21, we recommend the following actions:

  • Cleanup Providers: Remove importProvidersFrom(SidebarModule, DropdownModule) from your bootstrapApplication calls. These services now use providedIn: 'root'.
  • Zone Management:
    • Zoneless: Test your app functionality to ensure everything remains reactive.
    • Zone-based: Add provideZoneChangeDetection() to your root providers if not already handled by automated migration.
  • Interpolation: Remove the interpolation property from @Component decorators; Angular now only uses the default {{ and }} interpolation markers.

For a complete list of commits and internal refactors, view the full CoreUI GitHub changelog.

Subscribe to our newsletter
Get early information about new products, product updates and blog posts.
How to loop through a 2D array in JavaScript
How to loop through a 2D array in JavaScript

How to Hide Scrollbar with CSS
How to Hide Scrollbar with CSS

How to concatenate a strings in JavaScript?
How to concatenate a strings in JavaScript?

How to Use JavaScript setTimeout()
How to Use JavaScript setTimeout()

Answers by CoreUI Core Team