🎨 Pattern: How to implement consistent hierarchical tab titles (Page | ...

Date: 2026-02-27
Time: 23:49:21 UTC
Session: gspace1-151.3
Agent: angular
Confidence: 93%
Status: ✅ Documented

📋 Decision Context

Question:

How to implement consistent hierarchical tab titles (Page | Space | Universe) across 6 Angular apps with dynamic context?

Task: Session 151: BrandTitleStrategy + SeoContextService pattern

🎯 Decision Made

Chosen:

Custom BrandTitleStrategy extending Angular TitleStrategy + signal-based SeoContextService. Strategy reads route title + signals for space/universe names. Shell components set/clear context on init/destroy. reapplyTitle() method handles timing (TitleStrategy fires before ngOnInit).

Options Considered:

1. Custom TitleStrategy + SeoContextService signals
2. Route data-only approach
3. ngx-meta third-party library
4. Per-component setTitle calls
5. NGXS-based SEO state

💭 Reasoning

ROOT CAUSE of inconsistency: Each app managed titles independently — some prefix (Vitto by GoGrab - X), some suffix (X - GoGrab Admin), some bare (Dashboard). No global strategy existed. ALTERNATIVES REJECTED: (1) Route-data-only — can't handle dynamic space/universe names. (2) ngx-meta — adds external dependency for something Angular provides natively. (3) Per-component setTitle — the existing broken pattern that caused inconsistency. (4) NGXS state — over-engineered; signals are simpler for this reactivity. CHOSEN PATH IS SUPERIOR because: Angular's TitleStrategy is the official extension point for title management. Signals provide zero-boilerplate reactivity. The reapplyTitle() method solves the timing gap (Router fires updateTitle before ngOnInit where space data is available). THIS DECISION WOULD BE WRONG IF: Angular deprecates TitleStrategy or introduces a native hierarchical title API. EARLY WARNING: If titles appear without space context on initial navigation, check reapplyTitle() call order.

📁 Files Involved

• libs/libs-foundational/brand-seo/src/lib/strategies/brand-title.strategy.ts
• libs/libs-foundational/brand-seo/src/lib/services/seo-context.service.ts
• apps/gograb-space/src/app/core/layout/main-shell/main-shell.component.ts

🔗 Related

• Decision ID: dev_1772236161908_0pomd22
• Session: 151
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation