CoreUI Angular Logo
Framework:
  • JavaScript / Vanilla JS
  • React.js
  • Vue.js
Getting startedIntroductionSupport CoreUICustomizeSassOptionsCSS VariablesLayoutBreakpointsContainersGridColumnsGuttersFormsOverviewDate PickerPRODate Range PickerPROForm ControlSelectMulti SelectPROChecks & RadiosPassword InputPRORangeRange SliderPRORatingPROStepperPROInput GroupFloating LabelsLayoutTime PickerPROValidationComponentsAccordionAlertAvatarBadgeBreadcrumbButtonButton GroupCalendarPROCalloutCardCarouselClose buttonCollapseDropdownFooterHeaderImageList GroupLoading ButtonPROModalNavNavbarOffcanvasPaginationPlaceholderPopoverProgressSmart PaginationPROSmart TablePROSidebarSpinnerTableTabsNewToastTooltipWidgetsIconsChartsTemplatesNewAdmin & DashboardDownloadInstallationCustomizeContentMigrationv4 → v5v3 → v4Angular version
DownloadHire UsGet CoreUI PRO
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

Breadcrumb

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

Dropdown

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 -

Modal

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 -

Navbar

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

Popover

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 -

Sidebar

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

Tooltip

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

  • GitHub
  • Twitter
  • Support
  • CoreUI (Vanilla)
  • CoreUI for React.js
  • CoreUI for Vue.js

CoreUI for Angular is Open Source UI Components Library for Angular.

Currently v5.5.5 Code licensed MIT , docs CC BY 3.0 .
CoreUI PRO requires a commercial license.