Component @ Inheritance

Question

I have problems with inheritance in components, I'm trying to implement a class hierarchy for internal components and services. I have several classes that provide common functionality for real components, the goal would be to simplify code management.

For example, I have a (essentially abstract) base class:

@Component({ selector: 'ic-base-alpha-locale-sensitive-input', template: '<div></div>' }) export class BaseAlphaLocaleSensitiveInput extends BaseAlphaInput implements OnInit { @Input() charCase: TextCaseType; .... } 

What I'm trying to use in a descendant:

 export class AlphabeticInputComponent extends BaseAlphaLocaleSensitiveInput implements OnInit { ... } 

with template

 <input ... [charCase]="caseConvert" #input="ngModel" ...> 

And I get the error message:

Cannot associate with 'charCase', because this is not a known property of 'input' .... [ERROR →] [charCase] ​​= "caseConvert"

What is the correct way to inherit the @Input bindings in the descendant classes?

or

In general, what is best for implementing abstract classes from which several component implementations can inherit common methods, properties, and bindings?

Answer 1

You cannot use the input tag, but the selector that you defined in @Component :

 <ic-alphabetic-input [charCase]="caseConvert" #input="ngModel"></ic-alphabetic-input>