Therichpost

The best tech and code magazine.

Angular Angular 18 Angular Admin Templates Angular Templates Bootstrap 5 Bootstrap Templates Free Admin Dashboard Templates

Angular 18 Free Admin Dashboard Template Working Demo

Bytherichpost

Jun 18, 2024 #Admin Dashboard Free, #Angular 18, #Angular Free Admin Templates, #Bootstrap 5
Angular 18 Free Admin Dashboard Template Working DemoAngular 18 Free Admin Dashboard Template Working Demo

Hello guys how are you? Welcome back to my blog. Today in this post I will show you Angular 18 Free Admin Dashboard Template Working Demo.

Live Demo

Angular 18 came. If you are new then you must check below two links:

Now guys here is the complete code snippet and please follow carefully:

STEP 1: SET UP YOUR ANGULAR PROJECT

  1. Install Angular CLI (if not already installed):
npm install -g @angular/cli

2. Create a new Angular project:

ng new admin-dashboard

3. Navigate to the project directory:

cd admin-dashboard

STEP 2: INSTALL Bootstrap 5 AND ICONS

npm install bootstrap
npm install bootstrap-icons
npm install chart.js

STEP 3: CONFIGURE Bootstrap

in angular.json:

"styles": [
              "node_modules/bootstrap-icons/font/bootstrap-icons.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ],

STEP 4: CREATE THE ADMIN DASHBOARD LAYOUT Components:

ng generate component components/navbar
ng generate component components/sidebar
ng generate component components/dashboard

Create the basic structure for the admin dashboard in dashboard.component.html:

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2">Dashboard</h1>
  <button class="btn btn-primary" (click)="emitSettingsEvent()">
    <i class="bi bi-gear"></i> Settings
  </button>
</div>

<div class="row mb-4">
  <div class="col-md-3">
    <div class="card shadow-sm text-center card-sales">
      <div class="card-body">
        <h5 class="card-title">Total Sales</h5>
        <p class="card-text display-4">$12,345</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card shadow-sm text-center card-orders">
      <div class="card-body">
        <h5 class="card-title">New Orders</h5>
        <p class="card-text display-4">123</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card shadow-sm text-center card-customers">
      <div class="card-body">
        <h5 class="card-title">Customers</h5>
        <p class="card-text display-4">456</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card shadow-sm text-center card-requests">
      <div class="card-body">
        <h5 class="card-title">Pending Requests</h5>
        <p class="card-text display-4">10</p>
      </div>
    </div>
  </div>
</div>

<div class="row mb-4">
  <div class="col-md-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h5 class="card-title">Sales Chart</h5>
        <canvas id="salesChart"></canvas>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h5 class="card-title">Progress</h5>
        <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row mb-4">
  <div class="col-md-4">
    <div class="card shadow-sm">
      <div class="card-body">
        <h5 class="card-title">Recent Activity</h5>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Order #1234 placed</li>
          <li class="list-group-item">Customer #567 registered</li>
          <li class="list-group-item">Product #890 added</li>
          <li class="list-group-item">Order #345 shipped</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-8">
    <div class="card shadow-sm">
      <div class="card-body">
        <h5 class="card-title">Recent Orders</h5>
        <div class="table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>Order ID</th>
                <th>Customer</th>
                <th>Date</th>
                <th>Status</th>
                <th>Total</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>#1234</td>
                <td>John Doe</td>
                <td>2024-06-01</td>
                <td>Shipped</td>
                <td>$100.00</td>
              </tr>
              <tr>
                <td>#5678</td>
                <td>Jane Smith</td>
                <td>2024-06-02</td>
                <td>Pending</td>
                <td>$200.00</td>
              </tr>
              <!-- Add more rows as needed -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row mb-4">
  <div class="col-md-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h5 class="card-title">Performance</h5>
        <canvas id="performanceChart"></canvas>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h5 class="card-title">Notifications</h5>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">New order received</li>
          <li class="list-group-item">Product added</li>
          <li class="list-group-item">Customer registered</li>
          <li class="list-group-item">Shipment delivered</li>
        </ul>
      </div>
    </div>
  </div>
</div>

update dashboard.component.ts file:

import { Component, AfterViewInit, Output, EventEmitter } from '@angular/core';
import { Chart } from 'chart.js/auto';
@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.css'
})
export class DashboardComponent {
  @Output() settingsEvent = new EventEmitter<void>();

  ngAfterViewInit(): void {
    this.initializeCharts();
  }

  initializeCharts() {
    this.createSalesChart();
    this.createPerformanceChart();
  }

  createSalesChart() {
    const ctx = (document.getElementById('salesChart') as HTMLCanvasElement).getContext('2d');
    if (ctx) {
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June'],
          datasets: [{
            label: 'Sales',
            data: [65, 59, 80, 81, 56, 55],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1,
            fill: false
          }]
        },
        options: {
          responsive: true,
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }
  }

  createPerformanceChart() {
    const ctx = (document.getElementById('performanceChart') as HTMLCanvasElement).getContext('2d');
    if (ctx) {
      new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: ['Completed', 'Pending', 'In Progress', 'On Hold'],
          datasets: [{
            label: 'Performance',
            data: [300, 50, 100, 20],
            backgroundColor: ['#28a745', '#ffc107', '#17a2b8', '#dc3545'],
            hoverOffset: 4
          }]
        },
        options: {
          responsive: true
        }
      });
    }
  }

  emitSettingsEvent() {
    this.settingsEvent.emit();
  }
}

Update nvabr.component.html file:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Admin Dashboard</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="bi bi-person"></i> Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="bi bi-box-arrow-right"></i> Logout</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Update sidebar.component.html file:

<div class="d-flex flex-column flex-shrink-0 p-3 sidebar" [class.closed]="isSidebarClosed">
  <button class="toggle-btn" (click)="toggleSidebar()">
    <i class="bi bi-list icon"></i>
    <span *ngIf="!isSidebarClosed">Toggle Sidebar</span>
  </button>
  <ul class="nav nav-pills flex-column mb-auto">
    <li class="nav-item">
      <a href="#" class="nav-link" aria-current="page">
        <i class="bi bi-house-door icon"></i>
        <span *ngIf="!isSidebarClosed">Dashboard</span>
      </a>
    </li>
    <li>
      <a href="#" class="nav-link link-dark">
        <i class="bi bi-box-seam icon"></i>
        <span *ngIf="!isSidebarClosed">Orders</span>
      </a>
    </li>
    <li>
      <a href="#" class="nav-link link-dark">
        <i class="bi bi-cart icon"></i>
        <span *ngIf="!isSidebarClosed">Products</span>
      </a>
    </li>
    <li>
      <a href="#" class="nav-link link-dark">
        <i class="bi bi-people icon"></i>
        <span *ngIf="!isSidebarClosed">Customers</span>
      </a>
    </li>
    <li>
      <a href="#" class="nav-link link-dark">
        <i class="bi bi-file-earmark-text icon"></i>
        <span *ngIf="!isSidebarClosed">Reports</span>
      </a>
    </li>
  </ul>
</div>

Update sidebar.component.ts file:

import { Component, EventEmitter, Output } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-sidebar',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './sidebar.component.html',
  styleUrl: './sidebar.component.css'
})
export class SidebarComponent {
  @Output() toggle = new EventEmitter<boolean>();
  isSidebarClosed = false;

  toggleSidebar() {
    this.isSidebarClosed = !this.isSidebarClosed;
    this.toggle.emit(this.isSidebarClosed);
  }
}

Update sidebar.component.css file:

.sidebar {
  height: 100vh;
  transition: width 0.3s;
  width: 250px;
  overflow-x: hidden;
}

.sidebar.closed {
  width: 80px;
}

.sidebar .nav-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.75rem 1rem;
}

.sidebar.closed .nav-link {
  text-align: center;
}

.toggle-btn {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.bi {
  font-size: 1.25rem;
  margin-right: 10px;
}

.sidebar.closed .bi {
  margin-right: 0;
}

Update app.component.html file:

<app-navbar></app-navbar>
<div class="container-fluid">
  <div class="row">
    <app-sidebar class="col-auto" [class.sidebar-collapsed]="isSidebarClosed" (toggle)="handleSidebarToggle($event)"></app-sidebar>
    <main class="col" [class.main-expanded]="isSidebarClosed">
      <app-dashboard (settingsEvent)="openSettingsModal()"></app-dashboard>
    </main>
  </div>
</div>

<!-- Settings Modal -->
<div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- Settings Form -->
        <form>
          <div class="mb-3">
            <label for="setting1" class="form-label">Setting 1</label>
            <input type="text" class="form-control" id="setting1">
          </div>
          <div class="mb-3">
            <label for="setting2" class="form-label">Setting 2</label>
            <input type="text" class="form-control" id="setting2">
          </div>
          <div class="mb-3">
            <label for="setting3" class="form-label">Setting 3</label>
            <input type="text" class="form-control" id="setting3">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Update app.component.ts file:

import { Component, ApplicationRef  } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { NavbarComponent } from "./components/navbar/navbar.component";
import { SidebarComponent } from "./components/sidebar/sidebar.component";
import { DashboardComponent } from "./components/dashboard/dashboard.component";
// Ensure Bootstrap JS is properly imported
declare var bootstrap: any;

@Component({
    selector: 'app-root',
    standalone: true,
    templateUrl: './app.component.html',
    styleUrl: './app.component.css',
    imports: [CommonModule, RouterOutlet, NavbarComponent, SidebarComponent, DashboardComponent]
})
export class AppComponent {
  title = 'admin-dashboard';
  isSidebarClosed = false;

  handleSidebarToggle(isClosed: boolean) {
    this.isSidebarClosed = isClosed;
  }

  openSettingsModal() {
    const settingsModal = new bootstrap.Modal(document.getElementById('settingsModal'), {
      keyboard: false
    });
    settingsModal.show();
  }
}

Update app.component.css file:

.main-expanded {
    margin-left: 80px;
    transition: margin-left 0.3s;
  }

Update styles.css file:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f8f9fa;
  margin: 0;
  padding: 0;
}

.navbar {
  background-color: #343a40 !important;
}

.navbar-brand {
  font-weight: bold;
  color: #ffffff !important;
}

.navbar-nav .nav-link {
  font-size: 1rem;
  color: #ffffff !important;
}

.card {
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #495057;
}

.card-text.display-4 {
  font-size: 2.5rem;
}

.table thead th {
  background-color: #343a40;
  color: white;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0,0,0,.05);
}

.sidebar {
  background-color: #ffffff;
  border-right: 1px solid #dee2e6;
}

.sidebar .nav-link {
  color: #495057;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  transition: background-color 0.2s ease;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
  background-color: #17a2b8;
  color: #ffffff;
}

.main-expanded {
  margin-left: 80px;
  transition: margin-left 0.3s;
}

.toggle-btn {
  background-color: #17a2b8;
  color: #ffffff;
  border: none;
  width: 100%;
  text-align: left;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
}

.toggle-btn:hover {
  background-color: #138496;
}

.card-sales {
  background-color: #17a2b8;
  color: #ffffff;
}

.card-orders {
  background-color: #28a745;
  color: #ffffff;
}

.card-customers {
  background-color: #ffc107;
  color: #343a40;
}

.card-requests {
  background-color: #dc3545;
  color: #ffffff;
}

.icon {
  margin-right: 10px;
}

.progress {
  height: 20px;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
  }
}

Run Your Application

ng serve

Navigate to http://localhost:4200/

Angular 18 Free Admin Dashboard Template Working Demo
Angular 18 Free Admin Dashboard Template Working Demo

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

By therichpost

Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 19, MedusaJs, Next.js, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Related Post

Free Admin Dashboard Templates React Admin Dashboards Reactjs Reactjs Templates Tailwind Css

Mosaic React Dashboard Customization — Add User Management Page

Oct 28, 2025 therichpost
Bootstrap 5 Free Admin Dashboard Templates React Admin Dashboards Reactjs Reactjs Templates Reactjs Tutorial

Add User Management Page in CoreUI React Dashboard Dashboard

Oct 25, 2025 therichpost
Free Admin Dashboard Templates Free HTML Template React Admin Dashboards Reactjs Reactjs Templates

Create a Custom User Management Page | Material Tailwind Dashboard React Tutorial

Oct 24, 2025 therichpost
2 thoughts on “Angular 18 Free Admin Dashboard Template Working Demo”

  1. Hi Jessa,

    Excellent Effort. Sincerely appreciate your talent.
    Thank you very much.

    Regards
    Biju

Leave a Reply

You missed

Free Admin Dashboard Templates React Admin Dashboards Reactjs Reactjs Templates Tailwind Css

Mosaic React Dashboard Customization — Add User Management Page

October 28, 2025 therichpost
Bootstrap 5 Free Admin Dashboard Templates React Admin Dashboards Reactjs Reactjs Templates Reactjs Tutorial

Add User Management Page in CoreUI React Dashboard Dashboard

October 25, 2025 therichpost
Free Admin Dashboard Templates Free HTML Template React Admin Dashboards Reactjs Reactjs Templates

Create a Custom User Management Page | Material Tailwind Dashboard React Tutorial

October 24, 2025 therichpost
Bootstrap 5 Free Admin Dashboard Templates React Admin Dashboards Reactjs Reactjs Templates

Setup CoreUI Dashboard in 5 Minutes

October 18, 2025 therichpost