[SOLVED] Angular 18: Use input signal in Component super class

Angular 18: 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?

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>();

}