angular / components

Component infrastructure and Material Design components for Angular

Home Page:https://material.angular.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Getting NG0956 when presenting mat-calendar in a cdkConnectedOverlay

jpike88 opened this issue · comments

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

I have a button presenting an overlay with a mat-calendar in it, and I get the above warning each time I present it. I can't reach into mat-calendar to fix this issue, but the warning is super annoying and I want to get rid of it.

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.io/errors/NG0956

I don't know what is 'collection 7' either, that tells me little about the location of the problematic template code. But the mat-calendar is definitely the problem here as it goes away if I remove it.

Template code looks like below.

<button
				(click)="
					$event.stopImmediatePropagation();
					isOpen ? closePopover() : openPopover()
				"
				cdkOverlayOrigin
				#trigger="cdkOverlayOrigin"
			>
				<mat-icon>today</mat-icon>
			</button>
			<ng-template
				cdkConnectedOverlay
				[cdkConnectedOverlayOrigin]="trigger"
				[cdkConnectedOverlayOpen]="isOpen"
				(overlayOutsideClick)="closePopover()"
			>
<mat-calendar
						>
						</mat-calendar>
			</ng-template>

Please provide a link to a minimal reproduction of the bug

cannot reproduce on stackblitz, just see the code I have

Please provide the exception or error you saw

`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.io/errors/NG0956`

Please provide the environment you discovered this bug in (run ng version)

Angular @next as of the time of posting this issue

Anything else?

No response

Note, this is an warning introduced in v18. The link printed in the console will be fixed when angular/angular#55554 lands.