JS error when calendar being destroyed in Angular, with custom content-injection

[arshaw]

Reduced Test Case

https://stackblitz.com/edit/github-msefaz?file=src%2Fapp%2Fmy-calendar%2Fmy-calendar.component.html

Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket?

• I understand

Which connector are you using (React/Angular/etc)?

Angular

Bug Description

Reported by @hoangdinhcong in #7058 (comment)

With Angular, when using eventContent, and when the calendar is torn down, a JS error occurs.

[arshaw]

Fixed in v6.0.2

Updated repro without errors:
https://stackblitz.com/edit/github-msefaz-k9zngw?file=src%2Fapp%2Fapp.component.ts,package.json

[hoangdinhcong]

thank you @arshaw. Works like a charm 🚀

[joelcoxokc]

@arshaw This just started happening for me.
Same exact error from #7058

However, I am not using eventContent.
I am using v6.1.4 on angular 15

[joelcoxokc]

@arshaw

Ive edited this message to say this.
"Another strange note, this happens on initialization of the component, not during destroy".

I was able to fix the issue, by adding a boolean called init and wrapping the calendar in an ngIf.
I then toggle the boolean in my ngOnInit()

    <ng-container *ngIf="init">
        <full-calendar
            #calendar
            [options]="calendarOptions"
            [events]="data$ | async"></full-calendar>
    </ng-container>

public ngOnInit(): void {
    this.init = true;
}

Here is my calendar options

protected calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    headerToolbar: false,
    locale: 'en',
    plugins: [dayGridPlugin, interactionPlugin],
    eventClick: (info) => this.handleEventClick(info),
    datesSet: (arg) => this.handleDateSet(arg),
};