I have a set of modals with similar styling but completely different functionalities that I need to use in various scenarios within my app. To make it easier for me, I want to pass the logic as input in these different scenarios. When using simple functions (assuming my custom-button requires () => Observable<any> on click), it works smoothly:
export class SimpleComponent {
@Input() fetchFun: () => Observable<any>;
}
export class ParentComponent {
funToPass = () => this.httpService.getClients().pipe(...);
}
// in parent component
<simple-component
[fetchFun]="funToPass">
</simple-component>
// in simple component
<form>
<custom-button
type="submit"
(onClick)="fetchFun"
></custom-button>
</form>
However, when I try to curry those functions with parameters from child components, I encounter the error
core.js:4610 ERROR TypeError: ctx.curriedFun is not a functionexport class CurryComponent {
@Input() curriedFun: (dto: Dto) => () => Observable<any>;
}
export class ParentComponent {
funToPass = (dto:Dto) => () => this.httpService.getClients(dto).pipe(...);
}
// in parent component
<curry-component
[curriedFun]="funToPass">
</curry-component>
// in simple component
<form>
<custom-button
type="submit"
(onClick)="curriedFun(this.getDto())"
></custom-button>
</form>
Is there a way to successfully pass functions like this to Angular components, or find a workaround for this issue?