Component @Input inheritance

Question

I have issues with inheritance in components, I am trying to implement a hierarchy of classes for in-house components and services. I have several classes that provide common functionality for the actual components, the aim would be to have easier to manage code.

For example, I have an (in essence abstract) base class:

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

  @Input()
  charCase: TextCaseType;
  ....
}

Which i try to use in a descendant:

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

with a template

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

And i'm getting an error:

Can't bind to 'charCase' since it isn't a known property of 'input'. ... [ERROR ->][charCase]="caseConvert"

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

or

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

Answer 1

You should not use the input tag, but the selector you defined in your @Component:

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