Click Handlers not wired up in Custom Header Template

I'm working on a project where we've recently upgraded from Angular 10 to 14 which appears to have changed the behavior of the calendar - or at least the way the Custom Templates work within it.

Upgrading the angular-calendar from 0.28.28 to 0.30.1 (for Angular 14 support) does not resolve the issue.

We are using a custom header template which includes clickable buttons to redirect the user to a separate List View allowing them view individual items and click through to the actual data.

This is working in production which is currently running Angular 10 and 0.28.28 of the calendar but with our internal builds now running Angular 14 clicking these buttons has no effect.

Investigations indicate that the click handlers are not being wired up during instantiation of the view. However, if I refresh the page via the browser or F5 everything seems to be wired up and the click through works as expected.

I have reviewed the documentation and the examples and have not been able to locate any templates with elements, e.g. buttons, that require separate event handlers so I can't determine whether I need to change our implementation or whether the issue is with the calendar not being fully compatible with Angular 14 for this use case.

This is the markup from the calendar page:

<mwl-calendar-week-view [viewDate]="viewDate.toDate()" [events]="events" [refresh]="refresh"
    (eventClicked)="eventClicked($event.event)" [weekStartsOn]="weekStartsOn"
    [headerTemplate]="defaultTemplateOveride" [hourSegments]="2" [dayStartHour]="8" [dayEndHour]="21">
</mwl-calendar-week-view>

Note that the headerTemplate is being set to the following ng-template which is defined at the top of the same file:

<ng-template #defaultTemplateOveride let-days="days" let-locale="locale" let-dayHeaderClicked="dayHeaderClicked"
    let-eventDropped="eventDropped">
    <div class="cal-day-headers">
        <div class="cal-header" *ngFor="let day of days;" [class.cal-past]="day.isPast" [class.cal-today]="day.isToday"
            [class.cal-future]="day.isFuture" [class.cal-weekend]="day.isWeekend" [class.cal-drag-over]="day.dragOver"
            [ngClass]="day.cssClass" (mwlClick)="dayHeaderClicked.emit({day: day})" mwlDroppable
            (dragEnter)="day.dragOver = true" (dragLeave)="day.dragOver = false"
            (drop)="day.dragOver = false; eventDropped.emit({event: $event.dropData.event, newStart: day.date})">
            <span>{{ day.date | calendarDate:'weekViewColumnHeader':locale }}</span><br />
            <b>{{ day.date | calendarDate:'weekViewColumnSubHeader':locale }}</b>
            <br />
            <button class="cntct-btn-cstm" (click)="dayCountClicked(day)"
                *ngIf="dayCounts[day.date.getDay()] != null && dayCounts[day.date.getDay()]?.count > 0 && dateBeforeToday(day)"
                style="background-color: #e83f39; color: #ffffff;"><strong
                    style="color: #ffffff;">{{dayCounts[day.date.getDay()]?.count}}</strong> <span style="opacity: 1;"
                    i18n>Overdue</span></button>
            <button class="cntct-btn-cstm" (click)="dayCountClicked(day)"
                *ngIf="dayCounts[day.date.getDay()] != null && dayCounts[day.date.getDay()]?.count > 0 && !dateBeforeToday(day)"><strong>{{dayCounts[day.date.getDay()]?.count}}</strong>
                <span i18n> Contacts</span></button>
        </div>
    </div>
</ng-template>

In the above markup you can see there are two button elements each having their click handler set to dayCountClicked which is defined in the associated component.ts file.

Versions

@angular/core: 14.2.12
angular-calendar: 0.30.1
Browser name and version: Chrome 108.0.5359.126

mattlewis92 / angular-calendar

Click Handlers not wired up in Custom Header Template #1637