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?
>Solution :
When using angular features like signal or ViewChild on a class(used for inheritance) we need to have a decorator, we can use @Directive() to get rid of this error.
@Directive()
export class DisplayComponent {
name = input.required<string>();
}