Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular @Inputs are not recognized by template #65

Open
Gnyblast opened this issue Oct 14, 2023 · 1 comment
Open

Angular @Inputs are not recognized by template #65

Gnyblast opened this issue Oct 14, 2023 · 1 comment

Comments

@Gnyblast
Copy link

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'.

@TRUSTMEIMJEDI
Copy link

TRUSTMEIMJEDI commented Jan 3, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants