Within my project, I have a generic class with several components that inherit from it.
BaseRdnInput.ts:
@Injectable()
export abstract class BaseRdnInput implements ControlValueAccessor, Validator {
@Input() rdnModel?: any | Array<any>;
@Output() rdnModelChange: EventEmitter<any | Array<any>> = new EventEmitter<any | Array<any>>();
// additional code follows...
}
RdnInputComponent.ts:
@Component({
// tslint:disable-next-line:component-selector
selector: 'rdn-input',
templateUrl: './rdn-input.component.html'
})
export class RdnInputComponent extends BaseRdnInput implements OnInit, AfterViewInit {
// more code here...
constructor(public changeDetectorRef: ChangeDetectorRef) {
super(changeDetectorRef);
};
// additional code follows
}
Subsequently, I utilize this component in ContractComponent.html:
<rdn-input [(rdnModel)]='headerEntity.saleNo'></rdn-input>
Upon including this line of code, an error emerges :
Can't bind to 'rdnModel' since it isn't a known property of 'rdn-input'.
- If 'rdn-input' is an Angular component and it has 'rdnModel' input, then verify that it is part of this module.
- If 'rdn-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
Prior to upgrading, everything was functioning correctly. My concern aligns closely with this scenario: Angular2 RC5: Can't bind to 'Property X' since it isn't a known property of 'Child Component'. It appears that there are steps to circumvent this issue, with the pivotal one being:
verifying if we added @input to the property of the subclass or adding attr to the binding property of the parent.
As evident, I have already included @input in BaseRdnInput.ts:. Moreover, resorting to attr might impede the downward transmission of properties to nested directives. Is there an alternative approach to address this concern?