CoreUI 5 Angular Migration

Migration v4 to v5

Track and review changes to the CoreUI Angular components to help you migrate from v4 to 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.

Project structure

The CoreUI v5 for Angular template project has been updated to standalone:

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.

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`