Fullcalendar 5 with Angular: Component inside Event

Question

Recently, my company switched from AngularJS to Angular 12. Now I am using Fullcalendar version 5 instead of version 3. I am using the Angular implementation of Fullcalendar:https://fullcalendar.io/docs/angular

Obviously, many things don't work anymore. See the following image to get an understanding of what I want to achieve: As you can see, there is custom HTML inside the event. It is not hard to render custom HTML there, but there is a button in the top right corner of every event that copies the event. When I was using angularJS, this worked fine as I was able to call functions in the angularJS controller. This does not work anymore.

I struggle to find a proper solution for triggering a function inside the angular context, but failed to find anything useful on the internet. The main issue is that I can write all the custom HTML that I want, but the content is not compiled by angular (or rather, outside of angular scope), therefore a simple (click)="copyEvent(event)" wont work. I know I could do some hacky approach by using onclick="hackyFunction(eventId)" to trigger the click, but I'd rather use a real angular component inside the event. Do you have any suggestions on how to approach this issue?

Answer 1

So I was not able to find any proper way of injecting a component into the event, so I came up with this hacky solution: As you can see, Im using the EventRenderHook to render my custom HTML. To make it possible to access the Angular context, i used "window.autoswitch.functionName". Autoswitch in this case is just a variable I generated on the window as a reference to the component: (window as any).autoswitch = this; "this" is the component. I wrote this statement in "ngOnInit()"

The functions were added simply like that: