Creating an Angular admin UI with Bootstrap ( CoreUI)

Let’s incorporate CoreUI components properly. Here’s a detailed guide to set up an Angular admin UI with CoreUI and Bootstrap:

Step 1: Set Up Your Angular Project

• Install Angular CLI: If you haven’t installed Angular CLI yet, do so by running:

npm install -g @angular/cli

• Create a New Angular Project: Use the Angular CLI to create a new project:

ng new my-admin-dashboard
cd my-admin-dashboard

Step 2: Install CoreUI

• Install CoreUI Angular and Bootstrap: Install CoreUI Angular and Bootstrap via npm:

npm install @coreui/angular@latest @coreui/icons@latest @coreui/coreui@latest bootstrap@latest

• Add CoreUI and Bootstrap CSS: Open angular.json and add the CoreUI and Bootstrap CSS files to the styles array:

"styles": [
    "node_modules/@coreui/icons/css/coreui-icons.min.css",
    "node_modules/@coreui/coreui/dist/css/coreui.min.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
]

Step 3: Configure CoreUI

• Set Up CoreUI Layout: Create a layout component for CoreUI. Generate the layout component using Angular CLI:

ng generate component containers/default-layout

• Create a Default Layout: Replace the content of src/app/containers/default-layout/default-layout.component.html with CoreUI layout structure:

<c-sidebar>
  <c-sidebar-brand>
    <img src="assets/brand/logo.svg" alt="CoreUI Logo" class="sidebar-brand-full">
    <img src="assets/brand/sygnet.svg" alt="CoreUI Logo" class="sidebar-brand-narrow">
  </c-sidebar-brand>
  <c-sidebar-nav>
    <c-sidebar-nav-item name="Dashboard" url="/dashboard" icon="cil-speedometer"></c-sidebar-nav-item>
    <!-- Add more navigation items here -->
  </c-sidebar-nav>
</c-sidebar>

<div class="wrapper d-flex flex-column min-vh-100 bg-light">
  <c-header>
    <button class="header-toggler px-md-0 me-md-3" type="button">
      <span class="icon-list"></span>
    </button>
    <a class="header-brand" href="#">Admin Dashboard</a>
  </c-header>
  <div class="body flex-grow-1 px-3">
    <router-outlet></router-outlet>
  </div>
  <c-footer>
    <div>© 2023 Your Company</div>
  </c-footer>
</div>

Step 4: Configure Routing

• Set Up Routing: Define the routes in src/app/app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DefaultLayoutComponent } from './containers/default-layout/default-layout.component';

const routes: Routes = [
  {
    path: '',
    component: DefaultLayoutComponent,
    children: [
      { path: 'dashboard', loadChildren: () => import('./views/dashboard/dashboard.module').then(m => m.DashboardModule) },
      // Add more routes here
    ]
  },
  { path: '**', redirectTo: 'dashboard' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 5: Create a Dashboard Module

• Generate a Dashboard Module: Create a module and a component for the dashboard

ng generate module views/dashboard --route dashboard --module app.module
ng generate component views/dashboard

• Update the Dashboard Component: Customize the dashboard.component.html to display dashboard content using CoreUI components:

<c-card>
  <c-card-header>Dashboard</c-card-header>
  <c-card-body>
    <p>Welcome to the Admin Dashboard!</p>
  </c-card-body>
</c-card>

Step 6: Update AppModule

• Import CoreUI Modules: Open src/app/app.module.ts and import the necessary CoreUI modules:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import {
  CButtonModule,
  CCardModule,
  CFooterModule,
  CHeaderModule,
  CIconModule,
  CSidebarModule
} from '@coreui/angular';

import { IconModule, IconSetService } from '@coreui/icons-angular';
import { DefaultLayoutComponent } from './containers/default-layout/default-layout.component';

@NgModule({
  declarations: [
    AppComponent,
    DefaultLayoutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CButtonModule,
    CCardModule,
    CFooterModule,
    CHeaderModule,
    CIconModule,
    CSidebarModule,
    IconModule
  ],
  providers: [IconSetService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 7: Run Your Application

• Start the Development Server:

ng serve

• Open Your Browser: Navigate to http://localhost:4200 to see your Angular admin dashboard UI with CoreUI and Bootstrap.

Step 8: Customize Further

• Add More Features: You can add more components and modules for features like tables, forms, charts, etc.
• Style Customization: Customize the styling by overriding Bootstrap and CoreUI styles in styles.css.

This revised guide properly integrates CoreUI components to set up an Angular admin UI with Bootstrap and CoreUI.

Thanks

Chandan