🏗️ Architecture: How should router integration work with the ux-tabs componen...

Date: 2026-02-17
Time: 19:07:03 UTC
Session: gspace1-111.2
Agent: angular
Confidence: 100%
Status: ✅ Documented

📋 Decision Context

Question:

How should router integration work with the ux-tabs component?

Task: Session 111.2 - Fix router integration to prevent all tabs showing same content

🎯 Decision Made

Chosen:

For router-based tabs, set routeIntegration=true and place router-outlet OUTSIDE the ux-tabs component. Tab content comes from child routes, not from within tabs.

Options Considered:

1. Place router-outlet inside each tab
2. Place router-outlet outside tabs with routeIntegration flag
3. Use separate components for router vs non-router tabs

💭 Reasoning

CRITICAL FIX: Initially placed router-outlet inside each tab, which caused all tabs to render the same content. The correct pattern is: ux-tabs handles tab navigation and styling, router-outlet placed OUTSIDE renders the activated route's component. The routeIntegration flag tells ux-tabs to sync with Angular Router and hide its internal content area (which would create empty space). This separation of concerns keeps the component clean and prevents duplicate router-outlet instances.

📁 Files Involved

• libs/libs-ui-core/ui-core/src/lib/components/ux-tabs/ux-tabs.component.html
• libs/libs-ai/vitto-hub/src/lib/components/vitto-command-hub/vitto-command-hub.component.html
• libs/libs-ai/vitto-hub/src/lib/components/observatory-panel/observatory-panel.component.html

🔗 Related

• Decision ID: dev_1771355223126_4z0y2pm
• Session: 111
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation