Angular Calendar Warning: NG0956 - Track by identity caused re-creation of the entire...

I'm using nz-calendar from ng-zorro-antd in my Angular application. Every time I click on a date in the calendar, I receive the following warning in the console:

NG0956: The configured tracking expression (track by identity) caused re-creation of the entire collection of size 7. This is an expensive operation requiring destruction and subsequent creation of DOM nodes, directives, components etc. Please review the "track expression" and make sure that it uniquely identifies items in a collection. Find more at https://angular.dev/errors/NG0956.

My HTML:

<nz-calendar [nzFullscreen]="false" [(ngModel)]="currentDate" [nzCustomHeader]="customHeader"
(nzSelectChange)="onDateChange($event)" nzTooltipVisible="false">
<div class="dot" *nzDateCell="let date;" style="list-style: none;">
<nz-badge *ngIf="isSelected(date)" nzStatus="warning"></nz-badge>
</div>
</nz-calendar>


Component:

currentDate: Date = this.calendarService.getCurrentDate();
selectedDates: Set<string> = new Set<string>();

isSelected(date: Date): boolean {
const formattedDate = date.toISOString();
const isMatched = this.selectedDates.has(formattedDate);

return isMatched;
}

onDateChange(newDate: Date): void {
console.log('newDate :>> ', newDate);
this.calendarService.setCurrentDate(newDate);
}

updateSelectedDates(data: any): void {
this.selectedDates.clear();
data.forEach((appointment: any) => {
const appointmentDate = new Date(appointment.appointment_date);
appointmentDate.setHours(0, 0, 0, 0);
this.selectedDates.add(appointmentDate.toISOString());
});
this.cdr.markForCheck();
}


Service:

private currentDate = new BehaviorSubject<Date>(new Date());

getCurrentDate(): Date {
return this.currentDate.value;
}


Dependencies:

"dependencies": {
"@angular/animations": "^18.0.0",
"@angular/cdk": "^18.0.6",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/forms": "^18.0.0",
"@angular/material": "^18.0.6",
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/router": "^18.0.0",
"ng-zorro-antd": "^18.0.1",
"ngx-perfect-scrollbar": "^10.1.1",
"ngx-scrollbar": "^15.1.2",
"rxjs": "~7.8.0",
"socket.io-client": "^4.7.5",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"

"devDependencies": {
"@angular-devkit/build-angular": "^18.0.7",
"@angular/cli": "^18.0.7",
"@angular/compiler-cli": "^18.0.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.4.2"
}
}


Problem: I suspect the warning is related to how Angular is tracking the nzDateCell elements, causing re-creation of the DOM nodes when I click on a date. I tried using trackBy, but I'm not sure how to implement it with nzDateCell.

Question: How can I properly use trackBy with nzDateCell or otherwise resolve this issue to avoid re-creating the entire collection every time a date is clicked?

Continue reading...