How to integrate CoreUI with Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Integrating CoreUI with Angular provides enterprise-grade UI components, admin dashboard layouts, and professional design system for business applications. As the creator of CoreUI, a widely used open-source UI library, I’ve designed CoreUI for Angular to deliver production-ready components throughout my 11 years of frontend development. The most efficient approach is installing @coreui/angular and @coreui/icons-angular packages and importing required modules. This method provides fully integrated Angular components with TypeScript support, reactive forms compatibility, and comprehensive documentation.
Install @coreui/angular and @coreui/icons-angular packages, import CoreUI modules in your Angular module.
npm install @coreui/angular @coreui/icons-angular
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import {
ContainerComponent,
RowComponent,
ColComponent,
CardComponent,
CardHeaderComponent,
CardBodyComponent,
ButtonDirective,
ModalModule,
ToastModule
} from '@coreui/angular'
import { IconModule, IconSetService } from '@coreui/icons-angular'
import { AppComponent } from './app.component'
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
ContainerComponent,
RowComponent,
ColComponent,
CardComponent,
CardHeaderComponent,
CardBodyComponent,
ButtonDirective,
ModalModule,
ToastModule,
IconModule
],
providers: [IconSetService],
bootstrap: [AppComponent]
})
export class AppModule { }
<!-- Example usage in component template -->
<c-container>
<c-row>
<c-col md='6'>
<c-card>
<c-card-header>CoreUI Card Component</c-card-header>
<c-card-body>
<p>Professional card component from CoreUI for Angular</p>
<button cButton color='primary'>Action Button</button>
</c-card-body>
</c-card>
</c-col>
</c-row>
</c-container>
Here npm installs CoreUI’s Angular package with native Angular components and the icons package for the comprehensive CoreUI icon set. The module imports individual CoreUI components using standalone component imports for optimal bundle size. BrowserAnimationsModule enables smooth animations for modals, toasts, and transitions. The IconSetService provides icon management across your application. The template demonstrates CoreUI’s grid system, card components, and button directive with CoreUI’s professional styling and responsive behavior.
Best Practice Note:
This is the CoreUI integration we’ve designed specifically for Angular enterprise applications requiring professional admin interfaces and comprehensive component libraries. Use CoreUI Pro for Angular to access advanced components like data tables, charts, and premium layouts, explore CoreUI templates for Angular to jumpstart admin dashboard development, and leverage CoreUI’s built-in responsive utilities and dark mode support for modern application requirements.
