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?

Continue reading...