I'm currently developing an NPM package that enhances the functionalities of Material Datatable. One standout feature is the ability to specify a method that will be triggered when a user clicks on a specific cell.
Here is how the property is defined:
Within an external library
click?: (element: any, property: string, event: MouseEvent) => unknown = null;
Assigning a simple method to it, such as an alert or console.log, works smoothly:
From the project utilizing the library
{
click: this.alert
}
...
alert(element: any, property: string, mouseEvent: MouseEvent) {
alert(element[property]);
}
However, when attempting to pass a method that includes a service call, the library is unaware of the service and the method crashes:
{
click: this.openDialog
}
...
openDialog(element: any, property: string, mouseEvent: MouseEvent) {
this.matDialog.open(DialogComponent);
}
ERROR TypeError: Cannot read property 'open' of undefined
How can I dynamically provide any type of service to an external library? And how can the library recognize which service to utilize?
Alternatively, am I approaching this problem incorrectly? I did explore using an event emitter and passing the value to the parent component, but encountered limitations (triggered for every cell, requiring additional logic in the parent).