Angular warning added to the console when something is changes (a bit)

[jcompagner]

NG0956: The configured tracking expression (track by identity) caused re-creation of the entire collection of size 1. 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

this happens because of this loop i think:

https://github.com/Harvest-Dev/ng-select2/blob/master/projects/ng-select2-component/src/lib/select2.component.html#L102

we track there on "op" which is a Select2Option (so a complete javascript object)

if i look at the actual angular samples in this link: https://angular.dev/errors/NG0956

then it is pretty much exactly the same problem the for loop loops over a big js object:

@for (op of selectedOption || []; track op) {

and tracks on that but they say you should do something like

@for (op of selectedOption || []; track op.id) {

which is then a primitive object..

now Select2Option does have an id:

https://github.com/Harvest-Dev/ng-select2/blob/master/projects/ng-select2-component/src/lib/select2-interfaces.ts#L29

but that doesn't seem to be set, i think the label and the value are mandatory so should that track not be

@for (op of selectedOption || []; track op.value) {

and the value is of type Select2Value which is just a synoniem for a primitive for the most part. (doesn't have to be but i think its just like that for most cases)

there are 2 more of those loops first is:

@for (groupOrOption of filteredData(); track groupOrOption; let i = $index)

but that groupOrOption is a Select2Data which is a Select2Group | Select2Option and those only have label i think in common..

the 3rd is

@for (option of group.options; track option; let j = $index) {

which is a Select2Option again so that can be tracked by the option.value i think

[Zefling]

I see the problem. Indeed, it would be necessary to use a method that operates on the value or an id auto-generated if not present.

[Zefling]

@jcompagner Does the latest version fix the problem?

[jcompagner]

hmm now i get

NG0955: The provided track expression resulted in duplicated keys for a given collection. Adjust the tracking expression such that it uniquely identifies all the items in the collection. Duplicated keys were:
key "" at index "0" and "1". Find more at https://angular.dev/errors/NG0955

because i think now we group on an id which is not mandatory to set so its empty for me for all of them
i can change this. but i wonder if the code can't be tracked by label? (maybe if id is not set?)
but i guess label doesn't need to be unique, and the value object is another one i guess..

I guess i need to have a look to set the id also always besides label and value

[jcompagner]

yes if i set the id also besides label/value then it works fine now
So that is what people should do if needed (but making that really now mandatory will result in compiler problems i think)

[Zefling]

I'll add a note in the readme or demo for this kind of issue. It's a specific use case, and recommending adding an id seems like a good approach.