On this page

CoreUI 4 Angular Migration

Track and review changes to the CoreUI Angular components to help you migrate from v3 to v4.

CoreUI for Angular is the Angular version of CoreUI components library, so before read the following guide, please check also CoreUI 3 to 4 migration guide.

Project structure

Template project structure remains mostly unchanged.

coreui-angular-admin-template
├── src/
│   ├── app/
|   │   ├── containers/
|   │   ├── icons/
|   │   ├── views/
|   │   └── app.module.ts
│   ├── assets/
│   ├── scss/
│   ├── ...
│   ├── main.ts
│   └── index.html
│
├── ...
├── tsconfig.json
├── angular.json
└── package.json

Template layout

src/app/containers/default-layout/

CoreUI v3

─ c-sidebar
  ├─ c-sidebar-brand
  └─ c-sidebar-nav
─ c-sidebar aside
─ c-wrapper
  ├─ c-header fixed
  ├─ c-toggler
  ├─ ...
  ├─ c-subheader
  │  └─ c-breadcrumb
  ├─ c-body
  │  └─ main class="c-main"
  │     └─ c-container fluid
  │        └─ router-outlet
  └─ c-footer

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

Styles

See: src/scss/style.scss

Components

Accordion

v3	v4
c-accordion	c-accordion
c-accordion-group	-
-	c-accordion-item
-	cAccordionButton

Alert

v3	v4
c-alert	c-alert
-	cAlertHeading
-	cAlertLink

c-alert

v3	v4
Input
`closeButton`	`dismissible`
`show`	`visible`
`iconHtml`	-
`timeout`	-
Output
`dismissed`	`visibleChange`
`timer`	-

Avatar

v3	v4
-	c-avatar

Badge

v3	v4
c-badge	c-badge

c-badge

v3	v4
Input
`shape`	`shape`
`color	`color`
-	`position`
-	`size`
-	`textColor`

v3	v4
c-breadcrumb	c-breadcrumb
-	c-breadcrumb-item
cBreadcrumbRouter	c-breadcrumb-router

You can compose breadcrumbs with items, or use default active route based c-breadcrumb-router component.

Button

v3	v4	module
cButton	cButton
c-button-group	c-button-group	ButtonGroup
cButtonRadio	-
cButtonRadioGroup	-
c-button-toolbar	c-button-toolbar	ButtonGroup
-	cButtonClose

cButton

v3	v4
Input
`block`	-
`shape`	`shape`
`variant`	`variant`
`size`	`size`
`color`	`color`
-	`type`
`tabindex`	-
`disabled`	`disabled`
`pressed`	`active`

c-button-group

v3	v4
Input
-	`role`
`size`	`size`
`vertical`	`vertical`

c-button-toolbar

v3	v4
Input
-	`role`
`justify`	-

Callout

v3	v4
c-callout	c-callout

Card

v3	v4
c-card	c-card
c-card-body	c-card-body
c-card-footer	c-card-footer
c-card-group	c-card-group
c-card-header	c-card-header
c-card-header-actions	-
-	cCardImg
-	cCardLink
-	cCardText
-	cCardTitle
-	cCardSubtitle

c-card

v3	v4
Input
`color`	`color`
`textColor`	`textColor`
`accentColor`	-
`align`	-
`borderColor`	-

c-card-body, c-card-header, c-card-footer

v3	v4
Input
`align`	-
`borderColor`	-
`color`	-
`textColor`	-

c-card-group

v3	v4
Input
`deck`	-
`column`	-

Carousel

v3	v4
c-carousel	c-carousel
c-carousel-caption	c-carousel-caption
c-carousel-control	c-carousel-control
c-carousel-indicators	c-carousel-indicators
c-carousel-inner	c-carousel-inner
c-carousel-item	c-carousel-item

Collapse

v3	v4
cCollapse	cCollapse

cCollapse

v3	v4
Input
`duration`	-
`transition`	-
`animate`	-
`show`	`visible`
`navbar`	`navbar`
	`horizontal`

v3	v4
cDropdown	c-dropdown
cDropdownToggle	cDropdownToggle
-	cDropdownClose
cDropdownHeader	cDropdownHeader
cDropdownItem	cDropdownItem
-	cDropdownItemPlain
cDropdownMenu	cDropdownMenu
cDropdownDivider	cDropdownDivider

c-dropdown

v3	v4
Input
`cDropdown`	`direction`
`cDropdownAlign`	`alignment`

cDropdownToggle

v3	v4
Input
`cDropdownCaret`	`caret`, `split`

Form

See: Forms

v3	v4
cForm	cForm
c-form-check	c-form-check
-	cFormCheckInput
-	cFormCheckLabel
c-form-feedback	c-form-feedback
-	cFormFloating
c-form-group	-
c-form-text	cFormText
cInput	cFormControl
c-input-group	c-input-group
c-input-group-append	-
c-input-group-prepend	-
c-input-group-text	cInputGroupText
cLabel	cLabel
cSelect	cSelect
cTextarea	cFormControl

cForm

v3	v4
Input
`inline`	-
`wasValidated`	`validated`

c-form-check

v3	v4
Input
`custom`	-
`disabled`	-
`variant`	-

cInput

v3	v4
Input
`custom`	-

cSelect

v3	v4
Input
`custom`	-

cLabel

v3	v4
Input
`hidden`	-
`variant`	-
`custom`	-

c-input-group

v3	v4
Input
`size`	`sizing`

Grid

v3	v4
c-container	c-container
cRow	cRow
c-row	c-row
cCol	cCol
c-col	c-col
-	`[gutter]`

c-row

v3	v4
Input
`noGutters`	-
`alignV`	-
`alignH`	-

Image

v3	v4
cImg	cImg

List Group

v3	v4
cListGroup	cListGroup
cListGroupItem	cListGroupItem

cListGroup

v3	v4
Input
`horizontal`	`horizontal`
`accent`	-
`flush`	`flush`

cListGroupItem

v3	v4
Input
`accent`	-
`action`	-
`active`	`active`
`color`	`color`
`divider`	-

v3	v4
c-modal	c-modal
#modalBody	c-modal-body
#modalFooter	c-modal-footer
#modalHeader	c-modal-header
-	cModalTitle
-	cModalToggle

c-modal

v3	v4
Input
`color`	-
`closeOnBackdrop`	`backdrop`

Nav

v3	v4
c-nav	c-nav
c-nav-item	c-nav-item
cNavLink	cNavLink

c-nav

v3	v4
Input
`fill`	`layout`
`justified`	`layout`
`vertical`	-
`inCard`	-
`variant`	`variant`

cNavLink

v3	v4
Input
`tabindex`	-

v3	v4
c-navbar	c-navbar
c-navbar-brand	cNavbarBrand
c-navbar-nav	c-navbar-nav
c-navbar-text	c-navbar-text
-	cNavbarToggler

c-navbar

v3	v4
Input
`light`	`colorScheme`
`color`	`color`
`fixed`	`placement`
`sticky`	`placement`
`expandable`	`expand`

Offcanvas

v3	v4
-	c-offcanvas
-	c-offcanvas-body
-	c-offcanvas-header
-	cOffcanvasTitle
-	cOffcanvasToggle

Pagination

v3	v4
-	c-pagination
-	cPageLink
-	cPageItem
-	c-page-item

Placeholder

v3	v4
-	cPlaceholder
-	cPlaceholderAnimation

v3	v4
-	cPopover

Progress

v3	v4
c-progress	c-progress
c-progress-bar	c-progress-bar

c-progress

v3	v4
Input
`size`	-

c-progress-bar

v3	v4
Input
`striped`	`variant`
`precision`	-
`min`	-
`max`	-

v3	v4
c-sidebar	c-sidebar
c-sidebar-nav	c-sidebar-nav

c-sidebar

v3	v4
Input
`fixed`	-
`unfoldable`	`unfoldable`
`overlaid`	`overlaid`
`minimize`	-
`breakpoint`	-
`mobile`	-
`show`	`visible`
`aside`	-
`hideOnMobileClick`	-

Shared Module

v3	v4
cHtmlAttr	cHtmlAttr
-	cTemplateId

Spinkit → Spinner

v3	v4
c-spinkit	c-spinner

v3	v4
Input
`center`	-
`name`	-
`grow`	`variant`

Switch → Form Check

v3	v4	Module
c-switch	c-form-check `switch`	Form

Table

v3	v4
-	cTable
-	cTableActive
-	cTableColor

Tabset → Tabs

v3	v4
c-tabset	-
c-tab-pane	-
c-tablist	-
c-tab-content	-
c-tab	-
-	c-tab-content
-	cTabContent
-	c-tab-pane

Toast

v3	v4
c-toast	c-toast
c-toast-body	c-toast-body
c-toast-header	c-toast-header
c-toaster	c-toaster
cToasterHost	cToasterHost
cToastClose	cToastClose

c-toast

v3	v4
Input
`show`	`visible`
`index`	-
Output
`shown`	`visibleChange`
`hidden`	`visibleChange`

v3	v4
-	cTooltip

Utilities

v3	v4
-	cAlign
-	cBgColor
-	cBorder
-	cRounded
-	cTextColor

Layout

v3	v4	module
c-body	`div class="body"`
c-footer	c-footer	Footer
c-header	c-header	Header
c-subheader	-
c-header-brand	c-header-brand	Header
-	c-header-divider	Header
-	c-header-nav	Header
-	c-header-text	Header
-	cHeaderToggler	Header
c-wrapper	`div class="wrapper"`

c-header

v3	v4
Input
`colorScheme`	-
`fixed`	`position`

c-header-brand

v3	v4
Input
`minimized`	-

c-footer

v3	v4
Input
`fixed`	`position`

Embed

See: https://coreui.io/docs/helpers/ratio/

Media

See: https://coreui.io/docs/utilities/flex/#media-object