🎨 Pattern: What is the correct pattern for Angular Elements (@angular/e...

Date: 2026-03-26
Time: 15:19:34 UTC
Session: gspace1-271.4
Agent: angular
Confidence: 98%
Status: ✅ Documented

📋 Decision Context

Question:

What is the correct pattern for Angular Elements (@angular/elements) to receive HTML attribute values?

Task: Not specified

🎯 Decision Made

Chosen:

Use @Input() decorator setters backed by private signals — NOT signal inputs (input()). createCustomElement() only introspects @Input() decorators to register observedAttributes on the Custom Element. Signal inputs are invisible to the CE attribute mapping. Pattern: @Input() set data(v: string) { this._data.set(v); }

Options Considered:

• No alternatives documented

💭 Reasoning

Angular 20's createCustomElement() uses ComponentFactoryResolver to discover inputs. It only sees @Input() decorator metadata, not the newer input() signal API. When using signal inputs, observedAttributes returns [] and no HTML attributes reach the component. Discovered via browser testing: SVG charts rendered empty containers because data() signal was never set. Fix confirmed: switching to @Input() setter + backing signal made all attributes work. This is an Angular framework limitation — createCustomElement hasn't been updated for signal inputs.

📁 Files Involved

• libs/libs-structural/platform-elements-angular/src/lib/components/chart-widget/chart-widget.component.ts
• libs/libs-structural/platform-elements-angular/src/lib/components/rich-text-widget/rich-text-widget.component.ts
• libs/libs-structural/platform-elements-angular/src/lib/components/kanban-widget/kanban-widget.component.ts
• libs/libs-structural/platform-elements-angular/src/lib/components/calendar-widget/calendar-widget.component.ts

🔗 Related

• Decision ID: dev_1774538374874_nbyv93a
• Session: 271
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation