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 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`