Use input signal in Component super class

I have updated my Angular 17 App to Angular 18 and now Angular does not want me to have signal inputs in Super Classes:

export class DisplayComponent {

name = input.required<string>();

}

@Component({
selector: 'app-display',
standalone: true,
...})
export class ADisplayComponent extends DisplayComponent {

someMethod() {
// do something with this.name();
}
}


When running this Angular complains:

TS-998110: Unsupported call to the input.required function.
This function can only be used as the initializer of a property on a @Component or @Directive class. [plugin angular-compiler]


Technically the compiler is right, i am using the input signal on a class without @Component decoration, but it feels like this should be ok since its the super class.

In Angular 17 this wasn't a problem!

I have quite a few Components inheriting from DisplayComponent and don't want to repat the same import declarations in all of them.

What can i do here?

Continue reading...