Fullcalendar Angular. How is the eventContent Angular template actually rendered in...

Fullcalendar supports an eventContent and numerous other callbacks letting us to define custom templates for event UI and etc... There is a wrapper library called @fullcalendar/angular, it provides a way to define custom event template in angular style and it renders into the correct spot the calendar.

<full-calendar [options]="calendarOptions()">
<ng-template #eventContent let-arg>
I am an event with {{ binding }} and {{ arg.event.title }}
</ng-template>
</full-calendar>


My question: How actually this library makes it work? Fullcalendar in a nutshell is just a javascript library and I expect there is somewhere eventContent callback is called and this library does a trick by taking the template and creating a DOM element out of it. Can you tell me what technique is used for that? I can rephrase a question: how to dynamically generate a DOM Element, a template of which is managed by Angular. I even fine if change detection will not work automatically (it probably won't). I pulled a source repo and it's content is very strange to me. I see how the eventContent is read from @contentChildren but nothing happens with it after.



Continue reading...