# 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
```

<br />

## 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)