From e08a22d2006d268d27ca0ef56db3a8caebf97a3d Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 9 Dec 2025 15:04:43 +0100 Subject: [PATCH 1/9] refactor(breadcrumbs): signal for breadcrumb items --- .../base/breadcrumbs/breadcrumbs.component.html | 1 + .../views/base/breadcrumbs/breadcrumbs.component.ts | 12 ++++++------ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/app/views/base/breadcrumbs/breadcrumbs.component.html b/src/app/views/base/breadcrumbs/breadcrumbs.component.html index cc9be7cce..0e807cea9 100644 --- a/src/app/views/base/breadcrumbs/breadcrumbs.component.html +++ b/src/app/views/base/breadcrumbs/breadcrumbs.component.html @@ -20,6 +20,7 @@ .

+ @let items = breadcrumbItems(); @for (item of items; track item; let i = $index, isLast = $last) { diff --git a/src/app/views/base/breadcrumbs/breadcrumbs.component.ts b/src/app/views/base/breadcrumbs/breadcrumbs.component.ts index e06c68aec..e25346e0f 100644 --- a/src/app/views/base/breadcrumbs/breadcrumbs.component.ts +++ b/src/app/views/base/breadcrumbs/breadcrumbs.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, signal } from '@angular/core'; import { NgClass } from '@angular/common'; import { BreadcrumbComponent, @@ -17,25 +17,25 @@ import { DocsComponentsComponent, DocsExampleComponent } from '@docs-components/ imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, BreadcrumbComponent, BreadcrumbItemComponent, NgClass, BreadcrumbRouterComponent, DocsComponentsComponent] }) export class BreadcrumbsComponent implements OnInit { - public items = []; + public breadcrumbItems = signal([]); constructor() {} ngOnInit(): void { - this.items = [ + this.breadcrumbItems.set([ { label: 'Home', url: '/', attributes: { title: 'Home' } }, { label: 'Library', url: '/' }, { label: 'Data', url: '/dashboard/' }, { label: 'CoreUI', url: '/' } - ]; + ]); setTimeout(() => { - this.items = [ + this.breadcrumbItems.set([ { label: 'CoreUI', url: '/' }, { label: 'Data', url: '/dashboard/' }, { label: 'Library', url: '/' }, { label: 'Home', url: '/', attributes: { title: 'Home' } } - ]; + ]); }, 5000); } } From e2dff5b03c4ecde396daa6c17ae66a52bd9b98c8 Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 9 Dec 2025 15:21:08 +0100 Subject: [PATCH 2/9] chore(dependencies): update to `Angular 21` --- package.json | 42 +++++++++++++++++++++--------------------- src/main.ts | 1 - src/test.ts | 1 - tsconfig.json | 6 +----- 4 files changed, 22 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 7fcfaa440..c7a78dc87 100644 --- a/package.json +++ b/package.json @@ -19,39 +19,39 @@ }, "private": true, "dependencies": { - "@angular/animations": "^20.3.14", - "@angular/cdk": "^20.2.14", - "@angular/common": "^20.3.14", - "@angular/compiler": "^20.3.14", - "@angular/core": "^20.3.14", - "@angular/forms": "^20.3.14", - "@angular/language-service": "^20.3.14", - "@angular/localize": "^20.3.14", - "@angular/platform-browser": "^20.3.14", - "@angular/platform-browser-dynamic": "^20.3.14", - "@angular/router": "^20.3.14", - "@coreui/angular": "^5.5.24", - "@coreui/angular-chartjs": "~5.5.24", + "@angular/animations": "^21.0.3", + "@angular/cdk": "^21.0.2", + "@angular/common": "^21.0.3", + "@angular/compiler": "^21.0.3", + "@angular/core": "^21.0.3", + "@angular/forms": "^21.0.3", + "@angular/language-service": "^21.0.3", + "@angular/localize": "^21.0.3", + "@angular/platform-browser": "^21.0.3", + "@angular/platform-browser-dynamic": "^21.0.3", + "@angular/router": "^21.0.3", + "@coreui/angular": "^5.6.0-next.1", + "@coreui/angular-chartjs": "~5.6.0", "@coreui/chartjs": "~4.1.0", "@coreui/coreui": "~5.4.3", "@coreui/icons": "^3.0.1", - "@coreui/icons-angular": "~5.5.24", + "@coreui/icons-angular": "~5.6.0", "@coreui/utils": "^2.0.2", "chart.js": "^4.5.1", "lodash-es": "^4.17.21", "ngx-scrollbar": "^13.0.3", "rxjs": "~7.8.2", "tslib": "^2.8.1", - "zone.js": "~0.15.1" + "zone.js": "~0.16.0" }, "devDependencies": { - "@angular/build": "^20.3.12", - "@angular/cli": "^20.3.12", - "@angular/compiler-cli": "^20.3.14", + "@angular/build": "^21.0.2", + "@angular/cli": "^21.0.2", + "@angular/compiler-cli": "^21.0.3", "@types/jasmine": "^5.1.13", "@types/lodash-es": "^4.17.12", - "@types/node": "^22.19.1", - "jasmine-core": "^5.12.1", + "@types/node": "^24.10.2", + "jasmine-core": "^5.13.0", "karma": "^6.4.4", "karma-chrome-launcher": "^3.2.0", "karma-coverage": "^2.2.1", @@ -61,7 +61,7 @@ }, "engines": { "node": "^20.19.0 || ^22.12.0 || ^24.0.0", - "npm": ">= 9" + "npm": ">= 10" }, "bugs": { "url": "https://github.com/coreui/coreui-free-angular-admin-template/issues" diff --git a/src/main.ts b/src/main.ts index 59c8f3775..7f76ac22c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,4 @@ /// - import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app/app.component'; diff --git a/src/test.ts b/src/test.ts index 6996fe319..15eabef5b 100644 --- a/src/test.ts +++ b/src/test.ts @@ -1,6 +1,5 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files -import 'zone.js/testing'; import { getTestBed } from '@angular/core/testing'; import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing'; diff --git a/tsconfig.json b/tsconfig.json index 4ded4bd55..c47455c0c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,11 +21,7 @@ "importHelpers": true, "target": "ES2022", "module": "preserve", - "useDefineForClassFields": false, - "lib": [ - "ES2022", - "dom" - ] + "useDefineForClassFields": false }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, From b0490ff2d7bc86c8bcc4ead6471f1f19612382d4 Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 9 Dec 2025 15:22:58 +0100 Subject: [PATCH 3/9] refactor: remove to zone.js polyfill from prod build --- angular.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/angular.json b/angular.json index c98e7d73a..3667153ac 100644 --- a/angular.json +++ b/angular.json @@ -27,8 +27,7 @@ "index": "src/index.html", "browser": "src/main.ts", "polyfills": [ - "@angular/localize/init", - "zone.js" + "@angular/localize/init" ], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", From 7bfee15734961c6bbf494f0f1277549256c80a4c Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 9 Dec 2025 15:24:43 +0100 Subject: [PATCH 4/9] refactor(app.config): remove `importProvidersFrom(SidebarModule, DropdownModule)` --- src/app/app.config.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 7176ed121..8196731ab 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,4 +1,4 @@ -import { ApplicationConfig, importProvidersFrom } from '@angular/core'; +import { ApplicationConfig } from '@angular/core'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { provideRouter, @@ -8,8 +8,6 @@ import { withRouterConfig, withViewTransitions } from '@angular/router'; - -import { DropdownModule, SidebarModule } from '@coreui/angular'; import { IconSetService } from '@coreui/icons-angular'; import { routes } from './app.routes'; @@ -27,8 +25,8 @@ export const appConfig: ApplicationConfig = { withViewTransitions(), withHashLocation() ), - importProvidersFrom(SidebarModule, DropdownModule), IconSetService, provideAnimationsAsync() ] }; + From a6d650218fa12ac60231f41b83880bc6947fe84b Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 9 Dec 2025 15:30:09 +0100 Subject: [PATCH 5/9] refactor: migration from NgClass to class bindings --- src/app/views/base/breadcrumbs/breadcrumbs.component.html | 2 +- src/app/views/base/breadcrumbs/breadcrumbs.component.ts | 4 ++-- src/app/views/notifications/toasters/toasters.component.html | 2 +- src/app/views/notifications/toasters/toasters.component.ts | 4 ++-- src/app/views/theme/colors.component.ts | 5 ++--- 5 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/app/views/base/breadcrumbs/breadcrumbs.component.html b/src/app/views/base/breadcrumbs/breadcrumbs.component.html index 0e807cea9..eeb12b547 100644 --- a/src/app/views/base/breadcrumbs/breadcrumbs.component.html +++ b/src/app/views/base/breadcrumbs/breadcrumbs.component.html @@ -53,7 +53,7 @@ @for (item of items.slice(0, 4); track item; let i = $index, isLast = $last) { - {{ item.label }} + {{ item.label }} } diff --git a/src/app/views/base/breadcrumbs/breadcrumbs.component.ts b/src/app/views/base/breadcrumbs/breadcrumbs.component.ts index e25346e0f..60009d902 100644 --- a/src/app/views/base/breadcrumbs/breadcrumbs.component.ts +++ b/src/app/views/base/breadcrumbs/breadcrumbs.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, signal } from '@angular/core'; -import { NgClass } from '@angular/common'; + import { BreadcrumbComponent, BreadcrumbItemComponent, @@ -14,7 +14,7 @@ import { DocsComponentsComponent, DocsExampleComponent } from '@docs-components/ @Component({ templateUrl: './breadcrumbs.component.html', - imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, BreadcrumbComponent, BreadcrumbItemComponent, NgClass, BreadcrumbRouterComponent, DocsComponentsComponent] + imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbRouterComponent, DocsComponentsComponent] }) export class BreadcrumbsComponent implements OnInit { public breadcrumbItems = signal([]); diff --git a/src/app/views/notifications/toasters/toasters.component.html b/src/app/views/notifications/toasters/toasters.component.html index 5adc9a712..c9b3658bf 100644 --- a/src/app/views/notifications/toasters/toasters.component.html +++ b/src/app/views/notifications/toasters/toasters.component.html @@ -2,7 +2,7 @@ @for (pos of positions | slice : 1; track pos) { - + } diff --git a/src/app/views/notifications/toasters/toasters.component.ts b/src/app/views/notifications/toasters/toasters.component.ts index c8e8bb52a..7c38e223a 100644 --- a/src/app/views/notifications/toasters/toasters.component.ts +++ b/src/app/views/notifications/toasters/toasters.component.ts @@ -1,4 +1,4 @@ -import { JsonPipe, NgClass, NgStyle, SlicePipe } from '@angular/common'; +import { JsonPipe, NgStyle, SlicePipe } from '@angular/common'; import { Component, OnInit, viewChildren } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; @@ -46,7 +46,7 @@ export enum Colors { @Component({ selector: 'app-toasters', templateUrl: './toasters.component.html', - imports: [RowComponent, ColComponent, ToasterComponent, NgClass, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, ContainerComponent, ReactiveFormsModule, FormDirective, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, InputGroupComponent, InputGroupTextDirective, FormControlDirective, FormSelectDirective, ButtonDirective, NgStyle, ToastComponent, ToastHeaderComponent, ToastBodyComponent, AppToastComponent, JsonPipe, SlicePipe, TextColorDirective, DocsComponentsComponent] + imports: [RowComponent, ColComponent, ToasterComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, ContainerComponent, ReactiveFormsModule, FormDirective, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, InputGroupComponent, InputGroupTextDirective, FormControlDirective, FormSelectDirective, ButtonDirective, NgStyle, ToastComponent, ToastHeaderComponent, ToastBodyComponent, AppToastComponent, JsonPipe, SlicePipe, TextColorDirective, DocsComponentsComponent] }) export class ToastersComponent implements OnInit { diff --git a/src/app/views/theme/colors.component.ts b/src/app/views/theme/colors.component.ts index a1373afb8..ad8af68ab 100644 --- a/src/app/views/theme/colors.component.ts +++ b/src/app/views/theme/colors.component.ts @@ -1,5 +1,4 @@ import { AfterViewInit, Component, computed, DOCUMENT, forwardRef, inject, input, OnInit, Renderer2 } from '@angular/core'; -import { NgClass } from '@angular/common'; import { getStyle, rgbToHex } from '@coreui/utils'; import { CardBodyComponent, CardComponent, CardHeaderComponent, ColComponent, RowComponent } from '@coreui/angular'; @@ -48,11 +47,11 @@ export class ColorsComponent implements OnInit, AfterViewInit { selector: 'app-theme-color', template: ` -
+
`, - imports: [ColComponent, NgClass], + imports: [ColComponent], host: { style: 'display: contents;' } From 4f260f532765f0ae69a1f9f4814e71f892cd44ff Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 9 Dec 2025 15:42:11 +0100 Subject: [PATCH 6/9] refactor: migration from NgStyle to style bindings --- src/app/views/dashboard/dashboard.component.html | 2 +- src/app/views/dashboard/dashboard.component.ts | 3 +-- .../floating-labels/floating-labels.component.html | 10 +++++----- .../forms/floating-labels/floating-labels.component.ts | 3 +-- .../forms/form-controls/form-controls.component.html | 4 ++-- .../forms/form-controls/form-controls.component.ts | 7 +++---- .../notifications/toasters/toasters.component.html | 4 ++-- .../views/notifications/toasters/toasters.component.ts | 4 ++-- src/app/views/pages/login/login.component.html | 2 +- src/app/views/pages/login/login.component.ts | 3 +-- 10 files changed, 19 insertions(+), 23 deletions(-) diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html index cb743ada7..a45b655e2 100644 --- a/src/app/views/dashboard/dashboard.component.html +++ b/src/app/views/dashboard/dashboard.component.html @@ -70,7 +70,7 @@

Traffic

- By default, <CFormTextarea>s will be the same height as + By default, <textarea>s will be the same height as <input>s.

- + >

- To set a custom height on your <CFormTextarea;>, do not use the + To set a custom height on your <textarea>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).

-