Components inheriting properties from a base class (directive)

I'm trying to dynamically update inputs of my Angular components using ViewContainerRef.createComponent.

Currently, my components inherit input signal properties from this directive:

@Directive() export abstract class BaseWidget<TData> { data = input<TData>(); widgetSize = input<Size>(Size.S); selectedLocation = input<string>(''); timeslot = input<TimeSlot | null>(null); @ViewChild('footer') footer!: TemplateRef<any> | null; }

every components inherits properties like this:

export class MyComponent extends BaseWidget<MyComponentData> {}

In my container, I load the component dynamically:

const componentRef = viewContainerRef.createComponent(componentType); componentRef.setInput('data', widgetConfig.data); componentRef.setInput('widgetSize', this.widgetSize); componentRef.setInput('timeslot', this.getWidgetInfoByType(this.widgetType).timeSlot); componentRef.setInput('selectedLocation', widgetConfig.selectedLocation);

This works, but in the component, the inputs are normal properties, so they are accessed like:

this.widgetSize // not this.widgetSize()

Goal

I want the inputs to become InputSignals using Angular’s input(), so that I can read them as functions:

this.widgetSize() // instead of this.widgetSize

Problem

input() creates a readonly InputSignal

Question

Is there a way in Angular to:

Declare component inputs as InputSignals (this.widgetSize())

Update them dynamically from a container using createComponent

Or do you always have to choose between readonly InputSignals and normal properties when using dynamic components?