Widget Input Signal Fixes - December 6, 2025

✅ Primary Issue Fixed: UiInputComponent Template

Error

value is a function and should be invoked: value()

Root Cause

Component properties defined as signals must be invoked with () in templates to get their values.

Files Fixed

1. ui-input.component.html

Changed: All signal properties now properly invoked in template

<!-- BEFORE (incorrect) -->
[value]="value"
[placeholder]="inputConfig.placeholder"
[disabled]="inputConfig.disabled"

<!-- AFTER (correct) -->
[value]="value()"
[placeholder]="inputConfig().placeholder"
[disabled]="inputConfig().disabled"

Impact: Fixed for both <input> and <textarea> elements

✅ Cascading Fixes

2. UxIconComponent - emitEvent → emitWidgetEvent

// Changed method call to match BaseWidgetComponent
this.emitWidgetEvent('svgIconRequested', { iconName: this.svgIcon });

3. UxChipComponent

• ✅ Changed emitEvent → emitWidgetEvent
• ✅ Added lifecycle methods:

override onWidgetInit(): void {
  this.markReady();
}

override onWidgetDestroy(): void {
  // Cleanup handled by base class
}

4. UxChipListComponent

• ✅ Added override keyword to ngOnDestroy()
• ✅ Added lifecycle methods:

override onWidgetInit(): void {
  this.markReady();
}

override onWidgetDestroy(): void {
  // Cleanup handled by base class
}

5. UiButtonComponent

• ✅ Added override to loading property (fixed by user)

📊 Files Modified

1. /libs/libs-ui-core/ui-core/src/lib/components/input/ui-input.component.html
2. /libs/libs-ui-core/ui-core/src/lib/components/icon/icon.component.ts
3. /libs/libs-ui-core/ui-core/src/lib/components/chip/chip.component.ts
4. /libs/libs-ui-core/ui-core/src/lib/components/chip-list/chip-list.component.ts
5. /libs/libs-ui-core/ui-core/src/lib/components/ui-button/ui-button.component.ts

🎯 Key Learnings

Signal Usage in Templates

When using Angular signals in templates:

• ✅ DO: value() - Invoke the signal to get its value
• ❌ DON'T: value - This is the signal function itself

Nested Signal Properties

When a signal returns an object:

• ✅ DO: inputConfig().placeholder - First invoke signal, then access property
• ❌ DON'T: inputConfig.placeholder - Cannot access properties on signal function

BaseWidgetComponent Integration

All components extending BaseWidgetComponent must:

1. Implement onWidgetInit() and onWidgetDestroy()
2. Use emitWidgetEvent() instead of emitEvent()
3. Add override keyword when overriding base methods

⚠️ Remaining Error (1)

Location: libs/libs-structural/editor-web-lib/src/lib/components/landing-editor/landing-editor.component.html:196

Error: Required input 'widgetId' from component UiButtonComponent must be specified

Fix: Add [widgetId] to button in landing-editor template

📈 Progress Summary

Total Components Fixed: 5
Original Error: Signal invocation in templates
Additional Fixes: 4 components migrated to BaseWidgetComponent pattern
Status: ✅ Primary error fixed, minor cleanup remaining

Session Completed: December 6, 2025 - 11:05 AM