Angular Dynamic Route Tabs (Angular Material)

A proof-of-concept Angular 19 application demonstrating a robust, user-friendly tabbed navigation pattern built with Angular Material and CDK Drag & Drop. It showcases a persistent, reorderable tab bar with overflow handling, dynamic tab labels from route data, and a switchable detail view that can open inline or in a new tab. Tailwind CSS v4 is integrated for utility styling alongside Angular Material theming.

---

🎥 Live Demo

🔗 Try it here:
👉 Angular Dynamic Route Tabs — Live Demo

---

✨ Highlights

• Tabbed routing UX with reorderable tabs (drag to reorder)
• Overflow handling via menu when tabs exceed the visible area
• Dynamic tabs from route data (e.g., details/:id becomes “Home Details 1”)
• Inline vs new-tab detail view toggled and persisted via localStorage
• Responsive sidenav layout with Angular Material
• Standalone APIs (no NgModules) and lazy routes
• Tailwind CSS v4 + Angular Material theming

---

🧰 Tech Stack

• Angular 19, Standalone components
• Angular Material + CDK (Tabs, Sidenav, Menu, DragDrop)
• Tailwind CSS v4
• RxJS, TypeScript

---

⚡ Quick Start

• Prerequisites: Node.js 18+ recommended
• Install: npm install
• Run dev server: npm start then open http://localhost:4200
• Build for production: npm run build (outputs to dist/tab-poc)
• Unit tests: npm test

Scripts in package.json:

• start → ng serve
• build → ng build
• watch → ng build --watch --configuration development
• test → ng test

---

🗂 Project Structure (Key Files)

• App bootstrap: src/main.ts, src/app/app.config.ts
• Routing (root): src/app/app.routes.ts
• Layout (tabs + sidenav): src/layout/admin-layout.ts, .html, .scss
• Menu config: src/shared/constants/route-menu.constant.ts, src/shared/models/menu-item.model.ts
• Detail view logic: src/shared/services/detail-view.service.ts
• Home lazy module routes: src/routes/home/home.routes.ts
• Global styles/theme: src/styles.scss
• Angular builder/options: angular.json

---

⚙️ How It Works

Routing and Layout

• Root routes define a shell layout (AdminLayout) that hosts the sidenav + tabs and a router-outlet for content.
• Home routes are lazy-loaded (src/routes/home/home.routes.ts).

Tab System

• Tab metadata is sourced from MenuListData with isTabable: true.
• Tabs persist during navigation, handle overflow, and support drag & drop reordering.
• Uses Angular Material MatTabGroup + CDK DragDrop.

Dynamic Tabs from Routes

• Routes define data.tab for dynamic labels, e.g.
  data: { tab: { label: 'Home Details', dynamicParam: 'id' }} → /home/details/2 → “Home Details 2”.

Detail View Mode

• DetailViewService manages inline vs tab detail mode, persisted via localStorage.
• Example implementation: src/routes/home/list/list.component.ts & .html

---

🎨 Styling & Theming

• Tailwind CSS v4 integrated via @use "tailwindcss" in src/styles.scss
• Angular Material theming configured in angular.json

---

🔧 Configuration

• Build targets and assets handled in angular.json
• Output: dist/tab-poc

---

🧩 Extending the POC

Add a new top-level tab

1. Create the route + component.
2. Add a subMenu entry with isTabable: true in route-menu.constant.ts.

Add a dynamic tab

• Set data: { tab: { label: 'My Details', dynamicParam: 'id' }} in your route.
• Example: /my/route/123 → “My Details 123”.

---

🧪 Testing

• Karma + Jasmine via Angular CLI
• Run: npm test

---

📦 Build

• Production: npm run build
• Output: dist/tab-poc

---

🗂 Demo Asset

• Video demo stored at public/screen-capture.webm

---

📝 Notes

• POC only — some components are placeholders (e.g., Users, Inbox).
• Sidenav open state + detail view mode persisted in localStorage.

---

⚖️ License

• No license specified.