Angular v4 → v5

On this page

CoreUI for Angular is the Angular version of CoreUI components library, so before read the following guide, please check also [CoreUI 4 to 5 migration guide](https://coreui.io/bootstrap/docs/5.0/migration/v5/). ## Project structure The CoreUI v5 for Angular template project has been updated to [standalone](https://angular.io/guide/standalone-migration): - 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/containers` directory has been moved to `src/app/layout`. ```text 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 class="wrapper" ├─ c-header │ ├─ c-container fluid │ ├─ c-header-divider │ └─ c-container fluid │ └─ c-breadcrumb-router ├─ div class="body" │ └─ c-container │ └─-router-outlet └─ c-footer ``` **CoreUI v5** ``` ├─ c-sidebar │ ├─ c-sidebar-header │ │ └─ c-sidebar-brand │ ├─ c-sidebar-nav │ └─ c-sidebar-footer │ └─ cSidebarToggler ├─ div class="wrapper" │ └─ app-header │ ├─ c-container fluid │ │ │─ cSidebarToggle │ │ └─ c-header-nav │ └─ c-container fluid │ └─ c-breadcrumb-router ├─ div class="body" │ └─ c-container │ └─-router-outlet ├─ app-footer └─ app-aside ``` ## Styles See: `src/scss/style.scss` ## Components

|component|input|notes| |:---|:---|:---| |`c-avatar` | `textColor` | uses `TextColorDirective` via directive composition api |`c-badge`| `textColor` | uses `TextColorDirective` via directive composition api || `textBgColor` | uses `TextBgColorDirective` via directive composition api |`c-card`| `textColor` | uses `TextColorDirective` via directive composition api || `textBgColor` | uses `TextBgColorDirective` via directive composition api |`c-carousel`| `dark` | uses `ThemeDirective` via directive composition api |`c-close-button`| `white` | deprecated property, use `dark` instead |`c-close-button`| `dark` | uses `ThemeDirective` via directive composition api |`c-nav`| `variant` | The `underline` variant has been changed to `underline-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` | uses `ThemeDirective` via directive composition api |`cDropdownMenu`| `dark` | uses `ThemeDirective` via directive composition api |`c-navbar`| `colorScheme` | uses `ThemeDirective` via directive composition api |`c-offcanvas`| `dark` | uses `ThemeDirective` via directive composition api |`c-progress`| | simplified HTML structure |`c-sidebar-toggler`| | removed, use `cSidebarToggler` 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`