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?