On this page
CoreUI 5 Angular Migration
Track and review changes to the CoreUI Angular components to help you migrate from v4 to v5.
CoreUI for Angular is the Angular version of CoreUI components library, so before read the following guide, please check alsoCoreUI 4 to 5 migration guide.
Project structure
The CoreUI v5 for Angular template project has been updated tostandalone:
- all the components, directives, and pipes have been converted to standalone,
- unnecessary NgModules have been removed,
- the project bootstrapping has been switched to standalone API.
In addition, there have been some changes to the project structure.
- the routing modules have been replaced with routes,
- the
src/app/containersdirectory has been moved tosrc/app/layout.
coreui-angular-admin-template├── src/│ ├── app/| │ ├── icons/| │ ├── layout/| │ ├── views/| │ ├── app.component.ts| │ ├── app.config.ts| │ └── app.routes.ts│ ├── assets/│ ├── scss/│ ├── ...│ ├── main.ts│ └── index.html│├── ...├── tsconfig.json├── angular.json└── package.json
Template layout
src/app/layuut/default-layout/
CoreUI v4
─ c-sidebar├─ c-sidebar-brand├─ c-sidebar-nav└─ c-sidebar-toggler─ c-sidebar #aside─ div├─ c-header│ ├─ c-container fluid│ ├─ c-header-divider│ └─ c-container fluid│ └─ c-breadcrumb-router├─ div│ └─ c-container│ └─-router-outlet└─ c-footer
CoreUI v5
├─ c-sidebar│ ├─ c-sidebar-header│ │ └─ c-sidebar-brand│ ├─ c-sidebar-nav│ └─ c-sidebar-footer│ └─ cSidebarToggler├─ div│ └─ app-header│ ├─ c-container fluid│ │ │─ cSidebarToggle│ │ └─ c-header-nav│ └─ c-container fluid│ └─ c-breadcrumb-router├─ div│ └─ c-container│ └─-router-outlet├─ app-footer└─ app-aside
Styles
See:src/scss/style.scss
Components
| component | input | notes |
|---|---|---|
c-avatar | textColor | usesTextColorDirective via directive composition api |
c-badge | textColor | usesTextColorDirective via directive composition api |
textBgColor | usesTextBgColorDirective via directive composition api | |
c-card | textColor | usesTextColorDirective via directive composition api |
textBgColor | usesTextBgColorDirective via directive composition api | |
c-carousel | dark | usesThemeDirective via directive composition api |
c-close-button | white | deprecated property, usedark instead |
c-close-button | dark | usesThemeDirective via directive composition api |
c-nav | variant | Theunderline variant has been changed tounderline-border |
c-date-picker | inputDateFormat | custom date format function |
inputDateParse | custom date parse function | |
showWeekNumber | display ISO week number | |
c-date-range-picker | inputDateFormat | custom date format function |
inputDateParse | custom date parse function | |
showWeekNumber | display ISO week number | |
c-dropdown | dark | usesThemeDirective via directive composition api |
cDropdownMenu | dark | usesThemeDirective via directive composition api |
c-navbar | colorScheme | usesThemeDirective via directive composition api |
c-offcanvas | dark | usesThemeDirective via directive composition api |
c-progress | simplified HTML structure | |
c-sidebar-toggler | removed, usecSidebarToggler directive instead | |
c-smart-table | removed_id internal property for items |
Directives
| directive | input | change | values |
|---|---|---|---|
TextColorDirective | cTextColor | removed | muted,high-emphasis,medium-emphasis,disabled,high-emphasis-inverse,medium-emphasis-inverse,disabled-inverse |
| new | primary-emphasis,secondary-emphasis,success-emphasis,danger-emphasis,warning-emphasis,info-emphasis,light-emphasis,body,body-emphasis,body-secondary,body-tertiary,black,black-50,white,white-50 |