CoreUI Angular Logo
Framework:
  • JavaScript / Vanilla JS
  • React.js
  • Vue.js
Getting startedIntroductionSupport CoreUICustomizeSassOptionsCSS VariablesLayoutBreakpointsContainersGridColumnsGuttersFormsOverviewAutocompletePRODate 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 5 Angular Migration

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

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

    Project structure

    The CoreUI v5 for Angular template project has been updated to standalone:

    • all the components, directives, and pipes have been converted to standalone,
    • unnecessary NgModules have been removed,
    • the project bootstrapping has been switched to standalone API.

    In addition, there have been some changes to the project structure.

    • the routing modules have been replaced with routes,
    • the src/app/containers directory has been moved to src/app/layout.
    coreui-angular-admin-template ├── src/ │ ├── app/ | │ ├── icons/ | │ ├── layout/ | │ ├── views/ | │ ├── app.component.ts | │ ├── app.config.ts | │ └── app.routes.ts │ ├── assets/ │ ├── scss/ │ ├── ... │ ├── main.ts │ └── index.html │ ├── ... ├── tsconfig.json ├── angular.json └── package.json

    Template layout

    src/app/layuut/default-layout/

    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

    CoreUI v5

    ├─ c-sidebar │ ├─ c-sidebar-header │ │ └─ c-sidebar-brand │ ├─ c-sidebar-nav │ └─ c-sidebar-footer │ └─ cSidebarToggler ├─ div class="wrapper" │ └─ app-header │ ├─ c-container fluid │ │ │─ cSidebarToggle │ │ └─ c-header-nav │ └─ c-container fluid │ └─ c-breadcrumb-router ├─ div class="body" │ └─ c-container │ └─-router-outlet ├─ app-footer └─ app-aside

    Styles

    See: src/scss/style.scss

    Components

    component input notes
    c-avatar textColor uses TextColorDirective via directive composition api
    c-badge textColor uses TextColorDirective via directive composition api
    textBgColor uses TextBgColorDirective via directive composition api
    c-card textColor uses TextColorDirective via directive composition api
    textBgColor uses TextBgColorDirective via directive composition api
    c-carousel dark uses ThemeDirective via directive composition api
    c-close-button white deprecated property, use dark instead
    c-close-button dark uses ThemeDirective via directive composition api
    c-nav variant The underline variant has been changed to underline-border
    c-date-picker inputDateFormat custom date format function
    inputDateParse custom date parse function
    showWeekNumber display ISO week number
    c-date-range-picker inputDateFormat custom date format function
    inputDateParse custom date parse function
    showWeekNumber display ISO week number
    c-dropdown dark uses ThemeDirective via directive composition api
    cDropdownMenu dark uses ThemeDirective via directive composition api
    c-navbar colorScheme uses ThemeDirective via directive composition api
    c-offcanvas dark uses ThemeDirective via directive composition api
    c-progress simplified HTML structure
    c-sidebar-toggler removed, use cSidebarToggler directive instead
    c-smart-table removed _id internal property for items

    Directives

    directive input change values
    TextColorDirective cTextColor removed muted, high-emphasis, medium-emphasis, disabled, high-emphasis-inverse, medium-emphasis-inverse, disabled-inverse
    new primary-emphasis, secondary-emphasis, success-emphasis, danger-emphasis, warning-emphasis, info-emphasis, light-emphasis, body, body-emphasis, body-secondary, body-tertiary, black, black-50, white, white-50
    • 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.17 Code licensed MIT , docs CC BY 3.0 .
    CoreUI PRO requires a commercial license.