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](https://coreui.io/docs/migration/). ## Project structure Template project structure remains mostly unchanged.

  ```text
  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**

  ```text
  ─ 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](https://coreui.io/angular/docs/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/](https://coreui.io/docs/helpers/ratio/) ### Media See: [https://coreui.io/docs/utilities/flex/#media-object](https://coreui.io/docs/utilities/flex/#media-object)