Hello everyone, if you’re in search of a responsive and user-friendly admin dashboard template in Angular 20+, then you’ve come to the right place! Today this blog post I will tell you How to Build a Minimal Angular 21 Dashboard — Header, Toggle Sidebar & Content Area?

Prerequisites

• Node.js (v20+ recommended)
• Angular CLI (latest)
• Basic TypeScript & Angular knowledge
• A fresh Angular 21 project (ng new my-dashboard --routing --style=scss)

Guys now here is complete code structure and please follow and do carefully:

1. Create Layout Components and run below commands:

ng g c layout
ng g c layout/header
ng g c layout/sidebar
ng g c dashboard

2. app.html

Replace everything with this:

<app-layout></app-layout>

3. layout.html

This handles sidebar toggle + structure.

<div class="layout">
  <!-- Sidebar -->
  <app-sidebar [collapsed]="isCollapsed"></app-sidebar>

  <!-- Main Section -->
  <div class="main" [class.collapsed]="isCollapsed">
    <app-header (toggleSidebar)="toggleSidebar()"></app-header>

    <div class="content">
      <app-dashboard></app-dashboard>
    </div>
  </div>
</div>

4. Update layout.ts

import { Component } from '@angular/core';
import { Dashboard } from '../dashboard/dashboard';
import { Header } from './header/header';
import { Sidebar } from './sidebar/sidebar'
@Component({
  selector: 'app-layout',
  imports: [Dashboard, Header, Sidebar],
  templateUrl: './layout.html',
  styleUrl: './layout.css',
})
export class Layout {
   isCollapsed = false;

   toggleSidebar() {
    this.isCollapsed = !this.isCollapsed;
   }
}

5. Update layout.css

.layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.main {
  flex-grow: 1;
  transition: margin-left 0.3s ease;
  background: #f5f6fa;
}

.main.collapsed {
  margin-left: 60px;
}

.content {
  padding: 20px;
}

6. Update sidebar.html

<div class="sidebar" [class.collapsed]="collapsed">
  <h3 *ngIf="!collapsed">My App</h3>

  <ul>
    <li>Dashboard</li>
    <li>Settings</li>
    <li>Profile</li>
  </ul>
</div>

7. Update sidebar.ts

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common'
@Component({
  selector: 'app-sidebar',
  imports: [CommonModule],
  templateUrl: './sidebar.html',
  styleUrl: './sidebar.css',
})
export class Sidebar {
  @Input() collapsed = false;
}

8. Update sidebar.css

.sidebar {
  width: 220px;
  background: #1e1e2f;
  color: #fff;
  padding: 20px;
  height: 100vh;
  transition: width 0.3s ease;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  padding: 12px 0;
  cursor: pointer;
}

9. Update header.html

<div class="header">
  <button class="toggle-btn" (click)="toggleSidebar.emit()">
    ☰
  </button>
  <h2>Dashboard</h2>
</div>

10. Update header.ts

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

@Component({
  selector: 'app-header',
  imports: [],
  templateUrl: './header.html',
  styleUrl: './header.css',
})
export class Header {
  @Output() toggleSidebar = new EventEmitter<void>();

}

11. Update header.css

.header {
  height: 60px;
  background: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

.toggle-btn {
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 20px;
}

12. Update dashboard.html

<h2>Welcome to your Dashboard</h2>

<p>This is your clean Angular 21 dashboard starter template.</p>

DONE!

You now have:

✔ Angular 21
✔ Clean layout
✔ Header
✔ Sidebar with toggle
✔ Dashboard page
✔ Pure Angular + CSS
✔ No heavy UI framework

If you want next:
🔥 Add routing
🔥 Add User Management page
🔥 Add reusable components
🔥 Add animations for sidebar
🔥 Add dark mode

Just tell me “let’s continue”.

Ajay

Thanks