#6.4 Side Nav Bar - Demo

 Here's your content formatted as a blog post:

---

Angular 19 Side Navigation Bar Using Angular Material

🔹 Introduction

A Side Navigation Bar (Sidenav) is a crucial UI component for modern web applications, improving accessibility and navigation. In this guide, we’ll use Angular 19 and Angular Material to create a responsive Sidenav with routing and dynamic menu items.

👉 Reference: Angular Material Sidenav

---

📌 Step 1: Create a New Angular Project

First, create a new Angular project:

ng new side-nav-bar
cd side-nav-bar
code .

Run the project:

ng serve

---

📌 Step 2: Install Angular Material

To use Material components, install Angular Material:

ng add @angular/material

Choose a theme, and once installed, restart your development server:

ng serve

---

📌 Step 3: Create the Angular Material Side Navigation Bar

We’ll modify app.component.html to include a sidenav.

📝 Modify app.component.html

Replace the existing code with:

<mat-toolbar color="accent">
  <mat-toolbar-row>
    <button mat-icon-button (click)="sidenav.toggle();">
      <mat-icon>menu</mat-icon>
    </button>
    <h1>Angular Material Sidenav</h1>
  </mat-toolbar-row>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #sidenav opened mode="side" [style.width]="'200px'">
    <mat-nav-list>
      @for(item of menuItems; track $index){
        <a mat-list-item [routerLink]="item.route">
          <mat-icon matListItemIcon>{{ item.icon }}</mat-icon>
          <span>{{ item.label }}</span>
        </a>
      }
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

---

📌 Step 4: Configure the Component Logic

Modify app.component.ts to include menu items dynamically.

📝 Update app.component.ts

import { Component } from '@angular/core';
import { RouterModule, RouterOutlet } from '@angular/router';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    MatToolbarModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatButtonModule,
    RouterModule
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'angular-sidenav';

  menuItems: any[] = [
    { icon: 'home', label: 'Home', route: 'home' },
    { icon: 'handshake', label: 'Partners', route: 'partners' },
    { icon: 'book', label: 'Training', route: 'training' },
    { icon: 'event', label: 'Events', route: 'event' },
    { icon: 'help', label: 'Support', route: 'support' }
  ];
}

---

📌 Step 5: Style the Side Navigation Bar

📝 Modify app.component.css

.mat-sidenav-container {
    height: 89vh;
}

.mat-sidenav-content {
    padding: 20px;
}

---

📌 Step 6: Generate Components for Routing

Now, generate separate components for different sections of your app:

ng g c home
ng g c partners
ng g c training
ng g c events
ng g c support

---

📌 Step 7: Configure Routing

Modify app.routes.ts to define application routes.

📝 Update app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { PartnersComponent } from './pages/partners/partners.component';
import { TrainingComponent } from './pages/training/training.component';
import { EventsComponent } from './pages/events/events.component';
import { SupportComponent } from './pages/support/support.component';

export const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home' },
    { path: 'home', component: HomeComponent },
    { path: 'partners', component: PartnersComponent },
    { path: 'training', component: TrainingComponent },
    { path: 'event', component: EventsComponent },
    { path: 'support', component: SupportComponent }
];

---

🎯 Final Steps

Run your Angular project again:

ng serve

Open your browser and navigate to http://localhost:4200/. 🎉

---

✅ Summary

✔ We created an Angular 19 project with Angular Material.
✔ We added a dynamic side navigation bar.
✔ We generated components and configured routing.
✔ We applied styling and added menu icons.

🚀 Your Angular 19 Side Navigation Bar is ready! Let me know if you need further enhancements. 😊