tannerntannern/ts-mixer

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