I have a component that receives parameters and needs to call dynamic functions provided in the params. The challenge is that these functions are dynamic, so they need to be defined before being passed.
Here is an example of the parameters that can be passed to the component:
export class ExampleConfig {
baseScope: any;
functions?: { eventName: string, eventType: string, eventFunction: Function}[]
}
This is how I populate the parameters and pass them to the component. By specifying the desired functions in the eventFunction property:
ngOnInit(): void {
this.componentConfig = {
baseScope : this,
functions: [
{ eventName: 'click-event', eventType: 'click', eventFunction: this.handleClick},
{ eventName: 'hover-event', eventType: 'hover', eventFunction: this.handleHover},
]
};
});
}
handleClick(){
}
handleHover(){
}
Now that I have both the main scope and the function, I need to locate the method within the main scope.
this.exampleConfig.functions.forEach(func => {
// Here we have func.eventFunction which was previously defined and exists in the main scope
// We need to find func.eventFunction within the main scope and dynamically call it, for example calling handleClick
})
Currently, I am using the following syntax to pass the scope to the function:
func.eventFunction(this.exampleConfig.baseScope);
Within my function, I include a parameter to access the main scope:
handleClick(scope: any) {
// Instead of accessing properties directly as this.someProperties, I use scope.someProperties. I aim to call it directly without passing the scope parameter.
console.log("called");
}
The objective is to call it directly without requiring the scope parameter to be passed.