Reply To: Custom dialog when click on smar-grid cell (Angular)

[admin]

I am evaluating the HTML UI Element. Now I am trying to create a custom dialog box when selecting a grid cell. The following is a summary of the issues that I encountered:
a) I have a child angular component that has a “smart-grid” custom tag. In the typescript file, I initialize the smart-grid in the ngAfterViewInit() function. In the function, I also attach a cellClick listener (which is firing).
this.grid.addEventListener(‘cellClick’, function (event: CustomEvent) {
const gridCell = <GridCell>event.detail.cell;
this.myClicked.emit(gridCell);
});
b) In the same component, I have an Output emitter
@Output() myClicked: EventEmitter<any> = new EventEmitter();
c) I tried to emit the output variable in the addEventListener function (as per (a)). It is however, it always return with the “undefined myClicked error”. I think the issues might be something to do with web component integration with Angular. I tried to declare any variable outside the ‘cellClick’ callback function, and use it within the ‘cellClick’ function, and, the result is, the callback function can’t use any angular variables.
d) The idea of emitting the event, is that the parent component can display a custom dialog box (with custom gridCell data) when someone click on the grid cell.
e) And after checking the API documentation, in order for me to use the events of grid and other web component, it always attached event to the web compoent via addEventListener.
Thus, for me to use the htmlelements components, I need your help, that, how can I use any angular variables within the addEventListener function.
I hope to hear from you, of course, as usual, as promptly as possible.
Best regards
-vinci-