attaching angular dynamic component to tippy js content

Question

i am using fullcalendar(v3) event render in angular with tippy js, so how can i attach angular dynamic component to tippy js content in fullcalendar(v3) event render.

    const eventRender = function (event: IEvent, view) {
        if (event.info) {
            const factory = this._resolver.resolveComponentFactory(EventViewComponent);
            let ref;
            if (event.rendering === 'background') {
                ref = factory.create(this._injector, [], view.get(0));
            } else {
                ref = factory.create(this._injector, [], view.children('.fc-content').get(0));
            }
            ref.instance.eventInfo = event.info;
            this.dynamicComponent.push(ref);
            this._app.attachView(ref.hostView);
        }

and also i just create dynamic component and attach to event render to fullcalendar

Answer 1

html:

<div #tippyTemplate>
    <h4>Caption</h4>
    <p>Some content</p>
</div>

ts:

@ViewChild("tippyTemplate", { read: ElementRef, static: false }) tippyTemplate: ElementRef;
...
const template = this.tippyTemplate.nativeElement;

tippy(info.el, {
   content: template,
   allowHTML: true,
   hideOnClick: "toggle",
   placement: "top",
   trigger: "click",
});