Hire UsGet CoreUI PRO all-access →

CoreUI 4 Angular Migration

Migration v3 to v4

MarkdownChatGPTClaude

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

On this page

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

v3v4
c-accordionc-accordion
c-accordion-group-
-c-accordion-item
-cAccordionButton

Alert

v3v4
c-alertc-alert
-cAlertHeading
-cAlertLink

c-alert

v3v4
Input
closeButtondismissible
showvisible
iconHtml-
timeout-
Output
dismissedvisibleChange
timer-

Avatar

v3v4
-c-avatar

Badge

v3v4
c-badgec-badge

c-badge

v3v4
Input
shapeshape
`colorcolor
-position
-size
-textColor
v3v4
c-breadcrumbc-breadcrumb
-c-breadcrumb-item
cBreadcrumbRouterc-breadcrumb-router

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

Button

v3v4module
cButtoncButton
c-button-groupc-button-groupButtonGroup
cButtonRadio-
cButtonRadioGroup-
c-button-toolbarc-button-toolbarButtonGroup
-cButtonClose

cButton

v3v4
Input
block-
shapeshape
variantvariant
sizesize
colorcolor
-type
tabindex-
disableddisabled
pressedactive

c-button-group

v3v4
Input
-role
sizesize
verticalvertical

c-button-toolbar

v3v4
Input
-role
justify-

Callout

v3v4
c-calloutc-callout

Card

v3v4
c-cardc-card
c-card-bodyc-card-body
c-card-footerc-card-footer
c-card-groupc-card-group
c-card-headerc-card-header
c-card-header-actions-
-cCardImg
-cCardLink
-cCardText
-cCardTitle
-cCardSubtitle

c-card

v3v4
Input
colorcolor
textColortextColor
accentColor-
align-
borderColor-

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

v3v4
Input
align-
borderColor-
color-
textColor-

c-card-group

v3v4
Input
deck-
column-
v3v4
c-carouselc-carousel
c-carousel-captionc-carousel-caption
c-carousel-controlc-carousel-control
c-carousel-indicatorsc-carousel-indicators
c-carousel-innerc-carousel-inner
c-carousel-itemc-carousel-item

Collapse

v3v4
cCollapsecCollapse

cCollapse

v3v4
Input
duration-
transition-
animate-
showvisible
navbarnavbar
horizontal
v3v4
cDropdownc-dropdown
cDropdownTogglecDropdownToggle
-cDropdownClose
cDropdownHeadercDropdownHeader
cDropdownItemcDropdownItem
-cDropdownItemPlain
cDropdownMenucDropdownMenu
cDropdownDividercDropdownDivider

c-dropdown

v3v4
Input
cDropdowndirection
cDropdownAlignalignment

cDropdownToggle

v3v4
Input
cDropdownCaretcaret, split

Form

See: Forms

v3v4
cFormcForm
c-form-checkc-form-check
-cFormCheckInput
-cFormCheckLabel
c-form-feedbackc-form-feedback
-cFormFloating
c-form-group-
c-form-textcFormText
cInputcFormControl
c-input-groupc-input-group
c-input-group-append-
c-input-group-prepend-
c-input-group-textcInputGroupText
cLabelcLabel
cSelectcSelect
cTextareacFormControl

cForm

v3v4
Input
inline-
wasValidatedvalidated

c-form-check

v3v4
Input
custom-
disabled-
variant-

cInput

v3v4
Input
custom-

cSelect

v3v4
Input
custom-

cLabel

v3v4
Input
hidden-
variant-
custom-

c-input-group

v3v4
Input
sizesizing

Grid

v3v4
c-containerc-container
cRowcRow
c-rowc-row
cColcCol
c-colc-col
-[gutter]

c-row

v3v4
Input
noGutters-
alignV-
alignH-

Image

v3v4
cImgcImg

List Group

v3v4
cListGroupcListGroup
cListGroupItemcListGroupItem

cListGroup

v3v4
Input
horizontalhorizontal
accent-
flushflush

cListGroupItem

v3v4
Input
accent-
action-
activeactive
colorcolor
divider-
v3v4
c-modalc-modal
#modalBodyc-modal-body
#modalFooterc-modal-footer
#modalHeaderc-modal-header
-cModalTitle
-cModalToggle

c-modal

v3v4
Input
color-
closeOnBackdropbackdrop
v3v4
c-navc-nav
c-nav-itemc-nav-item
cNavLinkcNavLink

c-nav

v3v4
Input
filllayout
justifiedlayout
vertical-
inCard-
variantvariant

cNavLink

v3v4
Input
tabindex-
v3v4
c-navbarc-navbar
c-navbar-brandcNavbarBrand
c-navbar-navc-navbar-nav
c-navbar-textc-navbar-text
-cNavbarToggler

c-navbar

v3v4
Input
lightcolorScheme
colorcolor
fixedplacement
stickyplacement
expandableexpand

Offcanvas

v3v4
-c-offcanvas
-c-offcanvas-body
-c-offcanvas-header
-cOffcanvasTitle
-cOffcanvasToggle

Pagination

v3v4
-c-pagination
-cPageLink
-cPageItem
-c-page-item

Placeholder

v3v4
-cPlaceholder
-cPlaceholderAnimation

Popover

v3v4
-cPopover

Progress

v3v4
c-progressc-progress
c-progress-barc-progress-bar

c-progress

v3v4
Input
size-

c-progress-bar

v3v4
Input
stripedvariant
precision-
min-
max-
v3v4
c-sidebarc-sidebar
c-sidebar-navc-sidebar-nav

c-sidebar

v3v4
Input
fixed-
unfoldableunfoldable
overlaidoverlaid
minimize-
breakpoint-
mobile-
showvisible
aside-
hideOnMobileClick-

Shared Module

v3v4
cHtmlAttrcHtmlAttr
-cTemplateId

Spinkit → Spinner

v3v4
c-spinkitc-spinner
v3v4
Input
center-
name-
growvariant

Switch → Form Check

v3v4Module
c-switchc-form-check switchForm

Table

v3v4
-cTable
-cTableActive
-cTableColor

Tabset → Tabs

v3v4
c-tabset-
c-tab-pane-
c-tablist-
c-tab-content-
c-tab-
-c-tab-content
-cTabContent
-c-tab-pane

Toast

v3v4
c-toastc-toast
c-toast-bodyc-toast-body
c-toast-headerc-toast-header
c-toasterc-toaster
cToasterHostcToasterHost
cToastClosecToastClose

c-toast

v3v4
Input
showvisible
index-
Output
shownvisibleChange
hiddenvisibleChange

Tooltip

v3v4
-cTooltip

Utilities

v3v4
-cAlign
-cBgColor
-cBorder
-cRounded
-cTextColor

Layout

v3v4module
c-bodydiv class="body"
c-footerc-footerFooter
c-headerc-headerHeader
c-subheader-
c-header-brandc-header-brandHeader
-c-header-dividerHeader
-c-header-navHeader
-c-header-textHeader
-cHeaderTogglerHeader
c-wrapperdiv class="wrapper"

c-header

v3v4
Input
colorScheme-
fixedposition

c-header-brand

v3v4
Input
minimized-

c-footer

v3v4
Input
fixedposition

Embed

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

Media

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