Angular @Inputs are not recognized by template
Gnyblast opened this issue · 1 comments
Class A is the main component:
export class BlackListComponent implements OnInit {
@decorate(Input()) componentMethods: BlackListComponentModel = {
name: "",
addNewTitle: "",
addNewForm: new UntypedFormGroup({}),
apiUrlName: "",
itemJsonName: "",
tableConfig: new BehaviorSubject<TableConfigObject>({} as TableConfigObject),
getBlackListItemsMethod: (): Promise<any> => {
return new Promise(resolve => {
resolve(true);
});
},
getBlackListItemsMethodData: new BehaviorSubject<any>(""),
deleteBlackListItemMethod: (): Promise<any> => {
return new Promise(resolve => {
resolve(true);
});
},
deleteBlackListItemMethodData: new BehaviorSubject<any>("")
} as BlackListComponentModel;
}
Class B, C, D is child components of this class A but they also extends class A because there are some definition that I don't want to declare again and again to each children and maintain, like the one above componenetMethods
that is changing depending on which child component is loaded and parent class A sets it at some point and passes it to the child like:
<app-black-list-display [componentMethods]="selectedConfig"></app-black-list-display>
The problem is: child component knows about this componentMethods
and it compiles ok, but the clas A itself doesn't know that child component that it load has an input field called componentMethods
and give me the error as below.
Can't bind to 'componentMethods' since it isn't a known property of 'app-black-list-display'.
You dont need to wrap Input() in @decorate annotation
@Component({
selector: 'table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
inputs: [
'columns',
'dataSource',
'rowHeight',
'isLoading',
'hasPagination',
],
outputs: [
'selectedRowsUpdated',
'rowClicked',
'dataStateChanged',
'sortCriteriaChanged',
'filterCriteriaChanged',
'pageableChanged',
],
})
export class TableComponent
extends Mixin(SortComponent, FilterComponent, ColumnsComponent, SettingsComponent)
implements OnChanges, OnInit, OnDestroy {
inputs and outputs are from Mixin classes