Angular v4 → v5 CoreUI

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`