From 7923d7d9043043c56ef7396bfabe36f49675ba2d Mon Sep 17 00:00:00 2001
From: Damyan Petev <damyanpetev@users.noreply.github.com>
Date: Thu, 27 Feb 2025 16:39:39 +0200
Subject: [PATCH 1/2] test(*): apply control flow suggestions

---
 .../grid-editing-actions.component.spec.ts             | 10 +++++-----
 .../grid-pinning-actions.component.spec.ts             |  4 ++--
 .../src/lib/buttonGroup/buttongroup.component.spec.ts  |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts
index 1abfd40b3b6..9c9841e8655 100644
--- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts
@@ -390,7 +390,7 @@ describe('igxGridEditingActions #grid ', () => {
     template: `
     <igx-grid #grid [data]="data" [width]="'800px'" [height]="'500px'"
         [rowEditable]="true" [primaryKey]="'ID'">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column [sortable]="true" [field]="c.field" [header]="c.field"
                 [width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
             </igx-column>
@@ -469,7 +469,7 @@ class IgxActionStripTestingComponent implements OnInit {
     template: `
     <igx-grid #grid [data]="data" [width]="'800px'" [height]="'500px'"
         [rowEditable]="true" [primaryKey]="'ID'">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column [sortable]="true" [field]="c.field" [header]="c.field"
                 [width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
             </igx-column>
@@ -491,7 +491,7 @@ class IgxActionStripPinEditComponent extends IgxActionStripTestingComponent {
     template: `
     <igx-grid #grid [data]="data" [width]="'800px'" [height]="'500px'"
         [rowEditable]="true" [primaryKey]="'ID'">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column [sortable]="true" [field]="c.field" [header]="c.field"
                 [width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
             </igx-column>
@@ -512,7 +512,7 @@ class IgxActionStripEditMenuComponent extends IgxActionStripTestingComponent {
     template: `
     <igx-grid #grid [data]="dataOneRow" [width]="'800px'" [height]="'500px'"
         [rowEditable]="true" [primaryKey]="'ID'">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column [sortable]="true" [field]="c.field" [header]="c.field"
                 [width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
             </igx-column>
@@ -534,7 +534,7 @@ class IgxActionStripOneRowComponent extends IgxActionStripTestingComponent {
     template: `
     <igx-grid #grid [data]="dataOneRow" [width]="'800px'" [height]="'500px'"
         [rowEditable]="true" [primaryKey]="'ID'">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column [sortable]="true" [field]="c.field" [header]="c.field"
                 [width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
             </igx-column>
diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts
index 2d9efab5b96..abc864009c7 100644
--- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts
@@ -102,7 +102,7 @@ describe('igxGridPinningActions #grid ', () => {
     template: `
     <igx-grid #grid [data]="data" [width]="'800px'" [height]="'500px'"
         [rowEditable]="true" [primaryKey]="'ID'">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column [sortable]="true" [field]="c.field" [header]="c.field"
                 [width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
             </igx-column>
@@ -176,7 +176,7 @@ class IgxActionStripTestingComponent implements OnInit {
     template: `
     <igx-grid #grid [data]="data" [width]="'800px'" [height]="'500px'"
         [rowEditable]="true" [primaryKey]="'ID'">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column [sortable]="true" [field]="c.field" [header]="c.field"
                 [width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
             </igx-column>
diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts
index e73de82221c..c76b35c653f 100644
--- a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts
@@ -584,7 +584,7 @@ class ButtonGroupWithSelectedButtonComponent {
 @Component({
     template: `
     <igx-buttongroup>
-        @for (item of items; track item) {
+        @for (item of items; track item.key) {
             <button igxButton [selected]="item.key === selectedValue">{{item.value}}</button>
         }
     </igx-buttongroup>

From 847f86528adaf7fe102e9343e12f359cf1c00eb9 Mon Sep 17 00:00:00 2001
From: Damyan Petev <damyanpetev@users.noreply.github.com>
Date: Thu, 27 Feb 2025 18:32:29 +0200
Subject: [PATCH 2/2] test(*): more control flow for track adjustments

---
 .../src/lib/chips/chip.spec.ts                |  4 ++--
 .../src/lib/chips/chips-area.spec.ts          |  4 ++--
 .../filter/filter.directive.spec.ts           |  2 +-
 .../lib/drop-down/drop-down.component.spec.ts | 14 +++++------
 .../src/lib/grids/grid/cell.spec.ts           |  2 +-
 .../grids/grid/grid-mrl-keyboard-nav.spec.ts  |  6 ++---
 .../lib/grids/grid/grid-row-pinning.spec.ts   |  4 ++--
 .../src/lib/grids/grid/grid.component.spec.ts | 20 ++++++++--------
 .../src/lib/grids/grid/grid.groupby.spec.ts   |  2 +-
 .../lib/grids/grid/grid.master-detail.spec.ts |  4 ++--
 .../grid.multi-row-layout.integration.spec.ts | 14 +++++------
 .../grids/grid/grid.multi-row-layout.spec.ts  |  4 ++--
 .../src/lib/grids/state.directive.spec.ts     |  2 +-
 .../lib/grids/state.hierarchicalgrid.spec.ts  |  4 ++--
 .../src/lib/grids/state.treegrid.spec.ts      |  2 +-
 .../src/lib/radio/radio.component.spec.ts     |  2 +-
 .../src/lib/select/select.component.spec.ts   |  4 ++--
 .../lib/test-utils/grid-mch-sample.spec.ts    |  4 ++--
 .../src/lib/test-utils/grid-samples.spec.ts   | 16 ++++++-------
 .../grid-validation-samples.spec.ts           |  8 +++----
 .../lib/test-utils/template-strings.spec.ts   | 12 +++++-----
 .../src/lib/tree/tree-samples.spec.ts         | 24 +++++++++----------
 .../src/lib/tree/tree.spec.ts                 |  6 ++---
 23 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/chips/chip.spec.ts b/projects/igniteui-angular/src/lib/chips/chip.spec.ts
index e518735693d..d60e87f74da 100644
--- a/projects/igniteui-angular/src/lib/chips/chip.spec.ts
+++ b/projects/igniteui-angular/src/lib/chips/chip.spec.ts
@@ -15,7 +15,7 @@ import { getComponentSize } from '../core/utils';
 @Component({
     template: `
         <igx-chips-area #chipsArea>
-            @for (chip of chipList; track chip) {
+            @for (chip of chipList; track chip.id) {
                 <igx-chip #chipElem class="custom"
                     [id]="chip.id" [draggable]="chip.draggable"
                     [removable]="chip.removable" [selectable]="chip.selectable"
@@ -69,7 +69,7 @@ class TestChipComponent {
 @Component({
     template: `
         <igx-chips-area>
-            @for (chip of chipList; track chip) {
+            @for (chip of chipList; track chip.id) {
                 <igx-chip>
                     <span igxLabel>label</span>
                     <span igxSuffix>suf</span>
diff --git a/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts b/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts
index 54e5916d107..66ce7cb05a1 100644
--- a/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts
+++ b/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts
@@ -11,7 +11,7 @@ import { IgxPrefixDirective } from './public_api';
 @Component({
     template: `
         <igx-chips-area #chipsArea class="customClass">
-            @for (chip of chipList; track chip) {
+            @for (chip of chipList; track chip.id) {
                 <igx-chip #chipElem
                     [id]="chip.id" [draggable]="chip.draggable" [removable]="chip.removable" [selectable]="chip.selectable">
                     <igx-icon igxPrefix>drag_indicator</igx-icon>
@@ -59,7 +59,7 @@ class TestChipSelectComponent extends TestChipComponent {
 @Component({
     template: `
         <igx-chips-area #chipsArea (reorder)="chipsOrderChanged($event)">
-            @for (chip of chipList; track chip) {
+            @for (chip of chipList; track chip.id) {
                 <igx-chip #chipElem [id]="chip.id" [draggable]="true"
                     [removable]="true" [selectable]="true" (remove)="chipRemoved($event)">
                     <igx-icon igxPrefix>drag_indicator</igx-icon>
diff --git a/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts
index 49ddf007b6f..dd91e2c86da 100644
--- a/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts
+++ b/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts
@@ -213,7 +213,7 @@ class DeclarativeListTestComponent {
 @Component({
     template: `
     <igx-list>
-        @for (item of dataSourceItems | igxFilter: fo; track item) {
+        @for (item of dataSourceItems | igxFilter: fo; track item.key) {
             <igx-list-item> {{item.text}} </igx-list-item>
         }
     </igx-list>`,
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts
index 6ce79bc3fc3..124f9f7229b 100644
--- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts
@@ -1298,7 +1298,7 @@ describe('IgxDropDown ', () => {
     <button (click)="toggleDropDown()">Toggle</button>
     <igx-drop-down id="test-id" igxDropDownItemNavigation [maxHeight]="maxHeight"
         [allowItemsFocus]="true" style="--ig-size: var(--ig-size-medium);">
-        @for (item of items; track item) {
+        @for (item of items; track item.field) {
             <igx-drop-down-item [disabled]="item.disabled" [isHeader]="item.header" [selected]="item.selected">
                 {{item.field}}
             </igx-drop-down-item>
@@ -1338,14 +1338,14 @@ class IgxDropDownTestComponent {
     template: `
     <button (click)="selectItem5()">Select 5</button>
     <igx-drop-down #dropdown1>
-        @for (item of items; track item) {
+        @for (item of items; track item.field) {
             <igx-drop-down-item>
                 {{ item.field }}
             </igx-drop-down-item>
         }
     </igx-drop-down>
     <igx-drop-down #dropdown2>
-        @for (item of items; track item) {
+        @for (item of items; track item.field) {
             <igx-drop-down-item>
                 {{ item.field }}
             </igx-drop-down-item>
@@ -1403,7 +1403,7 @@ class DoubleIgxDropDownComponent implements OnInit {
     <igx-drop-down igxDropDownItemNavigation (selectionChanging)="selectionChanging($event)"
         (opening)="onToggleOpening()" (opened)="onToggleOpened()"
         (closing)="onToggleClosing()" (closed)="onToggleClosed()" [width]="'400px'" [height]="'400px'">
-        @for (item of items; track item) {
+        @for (item of items; track item.field) {
             <igx-drop-down-item>
                 {{ item.field }}
             </igx-drop-down-item>
@@ -1441,7 +1441,7 @@ class IgxDropDownAnchorTestComponent {
 @Component({
     template: ` <input #inputElement [igxDropDownItemNavigation]="dropdownElement" class='test-input' type='text' value='Focus Me!'/>
     <igx-drop-down #dropdownElement [width]="'400px'" [height]="'400px'" [allowItemsFocus]="true">
-        @for (item of items; track item) {
+        @for (item of items; track item.field) {
             <igx-drop-down-item>
                 {{ item.field }}
             </igx-drop-down-item>
@@ -1466,9 +1466,9 @@ class InputWithDropDownDirectiveComponent {
 @Component({
     template: `
     <igx-drop-down>
-        @for (parent of data; track parent) {
+        @for (parent of data; track parent.name) {
             <igx-drop-down-item-group [label]="parent.name">
-                @for (child of parent.children; track child) {
+                @for (child of parent.children; track child.value) {
                     <igx-drop-down-item [value]="child.value">
                         {{ child.name }}
                     </igx-drop-down-item>
diff --git a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts
index 47aa02b7bd0..15965570927 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts
@@ -405,7 +405,7 @@ describe('IgxGrid - Cell component #grid', () => {
 @Component({
     template: `
     <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" [width]="'900px'" [height]="'500px'" rowSelection = "multiple" [moving]="true">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column [field]="c.field"
                 [header]="c.field"
                 [width]="c.width"
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts
index 5a6605b5334..e856e07dadf 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { TestBed, ComponentFixture, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -2622,9 +2622,9 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
 @Component({
     template: `
     <igx-grid #grid [data]="data" [height]="'500px'" (selected)="cellSelected($event)">
-        @for (group of colGroups; track group) {
+        @for (group of colGroups; track group.group) {
             <igx-column-layout [hidden]='group.hidden' [pinned]='group.pinned' [field]='group.group'>
-                @for (col of group.columns; track col) {
+                @for (col of group.columns; track col.field) {
                     <igx-column
                         [rowStart]="col.rowStart" [colStart]="col.colStart" [width]='col.width'
                         [colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field' [editable]='col.editable'></igx-column>
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
index bb08b5b7e06..cc60ea60646 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
@@ -1436,9 +1436,9 @@ export class GridRowPinningComponent {
     template: `
     <igx-grid [data]="data" height="500px" [pinning]='pinningConfig' [rowSelection]="'single'"
         [rowEditable]="true">
-        @for (group of colGroups; track group) {
+        @for (group of colGroups; track group.group) {
             <igx-column-layout>
-                @for (col of group.columns; track col) {
+                @for (col of group.columns; track col.field) {
                     <igx-column
                         [rowStart]="col.rowStart" [colStart]="col.colStart" [width]='col.width'
                         [colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field'></igx-column>
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
index 51ac5b0b53f..f30a4770c43 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
@@ -2928,7 +2928,7 @@ describe('IgxGrid Component Tests #grid', () => {
 @Component({
     template: `<div style="width: 800px; height: 600px;">
         <igx-grid #grid [data]="data" [autoGenerate]="autoGenerate" [autoGenerateExclude]="autoGenerateExclude" (columnInit)="columnCreated($event)">
-            @for (column of columns; track column) {
+            @for (column of columns; track column.field) {
                 <igx-column [field]="column.field" [hasSummary]="column.hasSummary"
                     [header]="column.field" [width]="column.width">
                 </igx-column>
@@ -3004,7 +3004,7 @@ export class IgxGridTestComponent {
 
 @Component({
     template: `<igx-grid #grid [data]="data" (columnInit)="initColumns($event)">
-        @for (col of columns; track col) {
+        @for (col of columns; track col.key) {
             <igx-column [field]="col.key" [header]="col.key" [dataType]="col.dataType">
             </igx-column>
         }
@@ -3132,7 +3132,7 @@ export class IgxGridColumnHeaderInGroupAutoSizeComponent {
 
 @Component({
     template: `<igx-grid #grid [data]="data" [width]="'500px'" (columnInit)="initColumns($event)">
-        @for (col of columns; track col) {
+        @for (col of columns; track col.key) {
             <igx-column [field]="col.key" [header]="col.key" [dataType]="col.dataType">
             </igx-column>
         }
@@ -3149,7 +3149,7 @@ export class IgxGridColumnPercentageWidthComponent extends IgxGridDefaultRenderi
 
 @Component({
     template: `<igx-grid #grid [hidden]="hidden" [data]="data" [autoGenerate]="false">
-        @for (col of columns; track col) {
+        @for (col of columns; track col.key) {
             <igx-column [width]="'10%'" [field]="col.key" [header]="col.key" [dataType]="col.dataType">
             </igx-column>
         }
@@ -3430,7 +3430,7 @@ export class IgxGridFormattingComponent extends BasicGridComponent {
             </igx-tab-header>
             <igx-tab-content>
                 <igx-grid #grid2 [data]="data" [primaryKey]="'id'" [width]="'500px'" [height]="'300px'">
-                    @for (column of columns; track column) {
+                    @for (column of columns; track column.field) {
                         <igx-column
                             [field]="column.field"
                             [header]="column.field"
@@ -3446,7 +3446,7 @@ export class IgxGridFormattingComponent extends BasicGridComponent {
             </igx-tab-header>
             <igx-tab-content>
                 <igx-grid #grid3 [data]="data" [primaryKey]="'id'">
-                    @for (column of columns; track column) {
+                    @for (column of columns; track column.field) {
                         <igx-column
                             [field]="column.field"
                             [header]="column.field"
@@ -3463,7 +3463,7 @@ export class IgxGridFormattingComponent extends BasicGridComponent {
             </igx-tab-header>
             <igx-tab-content>
                 <igx-grid #grid4 [data]="data" [primaryKey]="'id'" [width]="'500px'" [height]="'300px'">
-                    @for (column of columns; track column) {
+                    @for (column of columns; track column.field) {
                         <igx-column
                             [field]="column.field"
                             [header]="column.field"
@@ -3481,7 +3481,7 @@ export class IgxGridFormattingComponent extends BasicGridComponent {
             </igx-tab-header>
             <igx-tab-content>
                 <igx-grid #grid5 [data]="data" [primaryKey]="'id'" [width]="'500px'" [height]="'100%'">
-                    @for (column of columns; track column) {
+                    @for (column of columns; track column.field) {
                         <igx-column
                             [field]="column.field"
                             [header]="column.field"
@@ -3499,7 +3499,7 @@ export class IgxGridFormattingComponent extends BasicGridComponent {
             <igx-tab-content>
                 <div style='height:300px;'>
                     <igx-grid #grid6 [data]="data" [primaryKey]="'id'" [width]="'500px'" [height]="'100%'">
-                        @for (column of columns; track column) {
+                        @for (column of columns; track column.field) {
                             <igx-column
                                 [field]="column.field"
                                 [header]="column.field"
@@ -3576,7 +3576,7 @@ export class IgxGridWithCustomPaginationTemplateComponent {
 @Component({
     template: `<igx-grid #grid [width]="'2000px'" [height]="'2000px'" [data]="data"
         [autoGenerate]="autoGenerate" [style.--ig-size]="1" [groupingExpressions]="groupingExpressions">
-        @for (column of columns; track column) {
+        @for (column of columns; track column.field) {
             <igx-column [field]="column.field" [header]="column.field" [width]="column.width"></igx-column>
         }
     </igx-grid>`,
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
index 4eb5a737125..4d797afa3ce 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
@@ -4123,7 +4123,7 @@ export class CustomTemplateGridComponent extends DataParent {
             [width]='width'
             [height]='height'
             [data]="testData">
-            @for (c of columns; track c) {
+            @for (c of columns; track c.field) {
                 <igx-column [groupable]="true" [field]="c.field" [header]="c.header || c.field" [width]="c.width + 'px'">
                 </igx-column>
             }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts
index 971bfea8388..718ac435400 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts
@@ -1257,7 +1257,7 @@ describe('IgxGrid Master Detail #grid', () => {
 @Component({
     template: `
     <igx-grid [data]="data" [width]="width" [height]="height" [primaryKey]="'ID'" [allowFiltering]="true" [rowSelection]="rowSelectable">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column [field]="c.field" [width]="c.width">
             </igx-column>
         }
@@ -1309,7 +1309,7 @@ export class DefaultGridMasterDetailComponent {
     template: `
     <igx-grid [data]="data" [expansionStates]="expStates"
         [width]="width" [height]="height" [primaryKey]="'ID'" [rowSelection]="rowSelectable">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column [field]="c.field" [header]="c.field" [width]="c.width">
             </igx-column>
         }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts
index ee4f9232287..afc2c53e034 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts
@@ -1232,9 +1232,9 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
                 </igx-grid-toolbar-actions>
             </igx-grid-toolbar>
         }
-        @for (group of colGroups; track group) {
+        @for (group of colGroups; track group.group) {
             <igx-column-layout [field]='group.group' [hidden]='group.hidden'>
-                @for (col of group.columns; track col) {
+                @for (col of group.columns; track col.field) {
                     <igx-column
                         [rowStart]="col.rowStart" [colStart]="col.colStart" [width]='col.width'
                         [colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field'></igx-column>
@@ -1333,9 +1333,9 @@ export class ColumnLayoutPinningTestComponent {
 @Component({
     template: `
     <igx-grid #grid [data]="data" height="500px" [allowFiltering]="true">
-        @for (group of colGroups; track group) {
+        @for (group of colGroups; track group.group) {
             <igx-column-layout [field]='group.group' [pinned]='group.pinned'>
-                @for (col of group.columns; track col) {
+                @for (col of group.columns; track col.field) {
                     <igx-column
                         [rowStart]="col.rowStart" [colStart]="col.colStart" [width]='col.width'
                         [colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field'></igx-column>
@@ -1352,9 +1352,9 @@ export class ColumnLayoutFilteringTestComponent extends ColumnLayoutPinningTestC
 @Component({
     template: `
     <igx-grid #grid [data]="data" height="500px" [style.--ig-size]="1">
-        @for (group of colGroups; track group) {
+        @for (group of colGroups; track group.group) {
             <igx-column-layout [field]='group.group' [pinned]='group.pinned'>
-                @for (col of group.columns; track col) {
+                @for (col of group.columns; track col.field) {
                     <igx-column
                         [rowStart]="col.rowStart" [colStart]="col.colStart" [width]='col.width'
                         [colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field' [groupable]="col.groupable"></igx-column>
@@ -1398,7 +1398,7 @@ export class ColumnLayoutGroupingTestComponent extends ColumnLayoutPinningTestCo
     <igx-grid #grid [data]="data" height="500px">
         @for (group of colGroups; track group.group) {
             <igx-column-layout>
-                @for (col of group.columns; track col) {
+                @for (col of group.columns; track col.field) {
                     <igx-column [field]='col.field' [width]='col.width' [resizable]='col.resizable'
                         [rowStart]="col.rowStart" [colStart]="col.colStart" [colEnd]="col.colEnd" [rowEnd]="col.rowEnd">
                     </igx-column>
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts
index 2b5ffd40f0b..e9e11260b97 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts
@@ -1185,9 +1185,9 @@ export class ColumnLayoutTestComponent {
                 <igx-column field="ContactTitle"></igx-column>
             </igx-column-group>
         </igx-column-group>
-        @for (group of colGroups; track group) {
+        @for (group of colGroups; track group.group) {
             <igx-column-layout>
-                @for (col of group.columns; track col) {
+                @for (col of group.columns; track col.field) {
                     <igx-column
                         [rowStart]="col.rowStart" [colStart]="col.colStart" [width]='col.width'
                         [colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field'></igx-column>
diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts
index 2084025bb84..e40a9410bd8 100644
--- a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts
@@ -879,7 +879,7 @@ class HelperFunctions {
     template: `
         <igx-grid #grid [data]="data" [autoGenerate]="false" [moving]="true" igxGridState rowSelection="multiple"
             cellSelection="multiple" primaryKey="ProductID">
-            @for (c of columns; track c) {
+            @for (c of columns; track c.field) {
                 <igx-column
                     [width]="c.width"
                     [sortable]="c.sortable"
diff --git a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts
index a6ec23656c4..fa0dedff940 100644
--- a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts
@@ -637,7 +637,7 @@ class HelperFunctions {
     template: `
     <igx-hierarchical-grid #hGrid [moving]="true" [data]="data" igxGridState [expandChildren]="true" primaryKey="ID"
         [autoGenerate]="false" [height]="'800px'" [width]="'800px'" [moving]="true" rowSelection="multiple" cellSelection="multiple">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column
                 [width]="c.width"
                 [sortable]="c.sortable"
@@ -661,7 +661,7 @@ class HelperFunctions {
         }
         <igx-paginator [perPage]="5"></igx-paginator>
         <igx-row-island [moving]="true" [key]="'childData'" [autoGenerate]="false" #rowIsland primaryKey="ID">
-            @for (c of childColumns; track c) {
+            @for (c of childColumns; track c.field) {
                 <igx-column
                     [width]="c.width"
                     [sortable]="c.sortable"
diff --git a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts
index c3e853fb7e9..dc3e75c71df 100644
--- a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts
@@ -345,7 +345,7 @@ class HelperFunctions {
     <igx-tree-grid [moving]="true" #treeGrid [data]="data" childDataKey="Employees" [expansionDepth]="2" width="900px" height="800px" igxGridState
         primaryKey="ID" rowSelection="multiple" cellSelection="multiple">
 
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column
                 [width]="c.width"
                 [sortable]="c.sortable"
diff --git a/projects/igniteui-angular/src/lib/radio/radio.component.spec.ts b/projects/igniteui-angular/src/lib/radio/radio.component.spec.ts
index cde7fb1e1c5..a85c3e01d48 100644
--- a/projects/igniteui-angular/src/lib/radio/radio.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/radio/radio.component.spec.ts
@@ -283,7 +283,7 @@ class RadioWithModelComponent {
 
 @Component({
     template: `
-    @for (item of items; track item) {
+    @for (item of items; track item.value) {
         <igx-radio #radios
             [value]="item.value"
             [(ngModel)]="selected"
diff --git a/projects/igniteui-angular/src/lib/select/select.component.spec.ts b/projects/igniteui-angular/src/lib/select/select.component.spec.ts
index 9e3b710285f..e678a4d50b1 100644
--- a/projects/igniteui-angular/src/lib/select/select.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/select/select.component.spec.ts
@@ -2770,7 +2770,7 @@ class IgxSelectSimpleComponent {
 @Component({
     template: `
     <igx-select [style.--ig-size]="'var(--ig-size-large)'" #select [width]="'300px'" [height]="'500px'" [placeholder]="'Choose location'" [(ngModel)]="value">
-        @for (location of locations; track location) {
+        @for (location of locations; track location.continent) {
             <igx-select-item-group [label]="location.continent"> {{location.continent}}
                 @for (capital of location.capitals; track capital) {
                     <igx-select-item [value]="capital" [text]="capital">
@@ -3100,7 +3100,7 @@ class IgxSelectHeaderFooterComponent implements OnInit {
             <div>
                 <igx-select #selectCDR value="ID">
                     <label igxLabel>Column</label>
-                    @for (column of columns; track column) {
+                    @for (column of columns; track column.field) {
                         <igx-select-item [value]="column.field">
                             {{column.field}}
                         </igx-select-item>
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-mch-sample.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-mch-sample.spec.ts
index 436f9facf46..cff8bdee686 100644
--- a/projects/igniteui-angular/src/lib/test-utils/grid-mch-sample.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/grid-mch-sample.spec.ts
@@ -282,9 +282,9 @@ export class NestedColGroupsGridComponent {
 @Component({
     template: `
         <igx-grid [data]="data" [allowFiltering]="true">
-            @for (colGroup of columnGroups; track colGroup) {
+            @for (colGroup of columnGroups; track colGroup.columnHeader) {
                 <igx-column-group [header]="colGroup.columnHeader">
-                    @for (column of colGroup.columns; track column) {
+                    @for (column of colGroup.columns; track column.field) {
                         <igx-column [field]="column.field" [dataType]="column.type"
                         [filterable]="true"></igx-column>
                     }
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
index 2db27c040dc..9d1587f38aa 100644
--- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
@@ -54,7 +54,7 @@ export class ColumnHiddenFromMarkupComponent extends BasicGridComponent {
 @Component({
     template: `
         <igx-grid #grid1 [data]="data" [width]="'900px'" [height]="'600px'" [moving]="true">
-            @for (c of columns; track c) {
+            @for (c of columns; track c.field) {
                 <igx-column [field]="c.field"
                     [header]="c.field"
                     [width]="c.width"
@@ -232,9 +232,9 @@ export class PinOnInitAndSelectionComponent extends GridWithSizeComponent {
             [height]='"500px"'
             [data]="data"
             [autoGenerate]="false">
-            @for (group of colGroups; track group) {
+            @for (group of colGroups; track group.field) {
                 <igx-column-layout [pinned]='group.pinned'>
-                    @for (col of group.columns; track col) {
+                    @for (col of group.columns; track col.field) {
                         <igx-column
                             [rowStart]="col.rowStart" [colStart]="col.colStart"
                         [colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field'></igx-column>
@@ -1935,9 +1935,9 @@ export class CollapsibleGroupsTemplatesTestComponent {
 @Component({
     template: `
         <igx-grid [data]="data" height="500px" width="800px" columnWidth="100px">
-            @for (colGroup of columnGroups; track colGroup) {
+            @for (colGroup of columnGroups; track colGroup.columnHeader) {
                 <igx-column-group [header]="colGroup.columnHeader" [collapsible]="colGroup.collapsible">
-                    @for (column of colGroup.columns; track column) {
+                    @for (column of colGroup.columns; track column.field) {
                         <igx-column [field]="column.field" [dataType]="column.type"
                         [visibleWhenCollapsed]="column.visibleWhenCollapsed"></igx-column>
                     }
@@ -2208,9 +2208,9 @@ export class IgxGridFormattedValuesSortingComponent extends BasicGridComponent {
 @Component({
     template: `
     <igx-grid #grid [data]="data" [height]="'500px'" [width]="'500px'">
-        @for (group of colGroups; track group) {
+        @for (group of colGroups; track group.group) {
             <igx-column-layout [hidden]='group.hidden' [pinned]='group.pinned' [field]='group.group'>
-                @for (col of group.columns; track col) {
+                @for (col of group.columns; track col.field) {
                     <igx-column
                         [rowStart]="col.rowStart" [colStart]="col.colStart" [width]='col.width'
                     [colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field' [editable]='col.editable'></igx-column>
@@ -2258,7 +2258,7 @@ export class MRLTestComponent {
     template: `
 <igx-grid #grid [data]="data" [width]="'800px'" [height]="'500px'"
     [rowEditable]="true" [primaryKey]="'ID'" [allowFiltering]="true" [moving]="true">
-    @for (c of columns; track c) {
+    @for (c of columns; track c.field) {
         <igx-column [sortable]="true" [field]="c.field" [header]="c.field"
             [width]="c.width" [resizable]="true">
         </igx-column>
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-validation-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-validation-samples.spec.ts
index 79e237fa57e..607313de0e5 100644
--- a/projects/igniteui-angular/src/lib/test-utils/grid-validation-samples.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/grid-validation-samples.spec.ts
@@ -36,7 +36,7 @@ export class ForbiddenValidatorDirective extends Validators {
     template: `
     <igx-grid #grid primaryKey="ProductID" [data]="data" [rowEditable]="rowEditable" [batchEditing]="batchEditing"
         [width]="'1200px'" [height]="'800px'">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column igxAppForbiddenName="bob" minlength="4" maxlength="8" required
                 [editable]="true" [sortable]="true" [filterable]="true" [field]="c.field"
                 [header]="c.field" [resizable]="true" [dataType]="c.dataType" >
@@ -64,7 +64,7 @@ export class IgxGridValidationTestBaseComponent {
     template: `
     <igx-grid #grid primaryKey="ProductID" [data]="data" [rowEditable]="rowEditable"
         [width]="'1200px'" [height]="'800px'">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column igxAppForbiddenName='bob' minlength="4" maxlength='8' required
                 [editable]='true' [sortable]="true" [filterable]="true" [field]="c.field"
                 [header]="c.field" [resizable]="true" [dataType]="c.dataType">
@@ -90,7 +90,7 @@ export class IgxGridValidationTestCustomErrorComponent extends IgxGridValidation
     template: `
     <igx-grid #grid primaryKey="ProductID" [data]="data" [rowEditable]="rowEditable"
         [width]="'1200px'" [height]="'800px'">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column igxAppForbiddenName='bob' minlength="4" maxlength='8' required
                 [editable]='true' [sortable]="true" [filterable]="true" [field]="c.field"
                 [header]="c.field" [resizable]="true" [dataType]="c.dataType">
@@ -118,7 +118,7 @@ export class IgxGridCustomEditorsComponent extends IgxGridValidationTestCustomEr
     template: `
     <igx-tree-grid #treeGrid [data]="data" childDataKey="Employees" primaryKey="ID"
         width="900px" height="600px" [rowEditable]="rowEditable" [batchEditing]="batchEditing">
-        @for (c of columns; track c) {
+        @for (c of columns; track c.field) {
             <igx-column igxAppForbiddenName='bob' minlength="4" required
                 [editable]='true' [sortable]="true" [filterable]="true" [field]="c.field"
                 [header]="c.field" [resizable]="true" [dataType]="c.dataType" >
diff --git a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts b/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
index f865ff7059d..587f1f2b9bd 100644
--- a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
@@ -182,7 +182,7 @@ export class ColumnDefinitions {
     `;
 
     public static resizableColsComponent = `
-    @for (c of columns; track c) {
+    @for (c of columns; track c.field) {
         <igx-column [field]="c.field"
                     [header]="c.field"
                     [resizable]="c.resizable"
@@ -318,30 +318,30 @@ export class ColumnDefinitions {
     `;
 
     public static generatedWithSummaries = `
-    @for (c of columns; track c) {
+    @for (c of columns; track c.field) {
         <igx-column [field]="c.field" [header]="c.header" [hasSummary]="true">
         </igx-column>
     }`;
 
     public static generatedWithDataType = `
-    @for (c of columns; track c) {
+    @for (c of columns; track c.field) {
         <igx-column [field]="c.field" [header]="c.field" [dataType]="c.dataType">
         </igx-column>
     }`;
 
     public static generatedGroupableWithEnabledSummariesAndDataType = `
-    @for (c of columns; track c) {
+    @for (c of columns; track c.field) {
         <igx-column [field]="c.field" [header]="c.header" [hasSummary]="true" [dataType]="c.dataType" [groupable]='c.groupable'>
         </igx-column>
     }`;
 
     public static generatedWithColumnBasedSummariesAndDataType = `
-    @for (c of columns; track c) {
+    @for (c of columns; track c.field) {
         <igx-column [field]="c.field" [header]="c.header" [hasSummary]="c.hasSummary" [dataType]="c.dataType"></igx-column>
     }`;
 
     public static generatedEditable = `
-    @for (col of columns; track c) {
+    @for (col of columns; track col.key) {
         <igx-column [field]="col.key"
                     [header]="col.key"
                     [dataType]="col.dataType"
diff --git a/projects/igniteui-angular/src/lib/tree/tree-samples.spec.ts b/projects/igniteui-angular/src/lib/tree/tree-samples.spec.ts
index 1727447b2a7..f1a7d966848 100644
--- a/projects/igniteui-angular/src/lib/tree/tree-samples.spec.ts
+++ b/projects/igniteui-angular/src/lib/tree/tree-samples.spec.ts
@@ -7,13 +7,13 @@ import { IgxIconComponent } from '../icon/icon.component';
 @Component({
     template: `
     <igx-tree #tree1 class="medium">
-        @for (node of data; track node) {
+        @for (node of data; track node.ID) {
             <igx-tree-node [data]="node">
                 {{ node.CompanyName }}
-                @for (child of node.ChildCompanies; track child) {
+                @for (child of node.ChildCompanies; track child.ID) {
                     <igx-tree-node [data]="child">
                         {{ child.CompanyName }}
-                        @for (leafchild of child.ChildCompanies; track leafchild) {
+                        @for (leafchild of child.ChildCompanies; track leafchild.ID) {
                             <igx-tree-node [data]="leafchild">
                                 {{ leafchild.CompanyName }}
                             </igx-tree-node>
@@ -34,13 +34,13 @@ export class IgxTreeSimpleComponent {
 @Component({
     template: `
     <igx-tree #tree1 class="medium">
-        @for (node of data; track node) {
+        @for (node of data; track node.ID) {
             <igx-tree-node [data]="node" [(selected)]="node.selected">
                 {{ node.CompanyName }}
-                @for (child of node.ChildCompanies; track child) {
+                @for (child of node.ChildCompanies; track child.ID) {
                     <igx-tree-node [data]="child" [(selected)]="child.selected">
                         {{ child.CompanyName }}
-                        @for (leafchild of child.ChildCompanies; track leafchild) {
+                        @for (leafchild of child.ChildCompanies; track leafchild.ID) {
                             <igx-tree-node [data]="leafchild" [(selected)]="leafchild.selected">
                                 {{ leafchild.CompanyName }}
                             </igx-tree-node>
@@ -73,14 +73,14 @@ export class IgxTreeSelectionSampleComponent {
 @Component({
     template: `
     <igx-tree #tree1 class="medium">
-        @for (node of data; track node) {
+        @for (node of data; track node.ID) {
             <igx-tree-node [data]="node" [active]="node.ID === 'COMMI'">
                 {{ node.CompanyName }}
                 <igx-tree-node [disabled]="isDisabled">Disable Node Level 1</igx-tree-node>
-                @for (child of node.ChildCompanies; track child) {
+                @for (child of node.ChildCompanies; track child.ID) {
                     <igx-tree-node [data]="child">
                         {{ child.CompanyName }}
-                        @for (leafchild of child.ChildCompanies; track leafchild) {
+                        @for (leafchild of child.ChildCompanies; track leafchild.ID) {
                             <igx-tree-node [data]="leafchild">
                                 {{ leafchild.CompanyName }}
                             </igx-tree-node>
@@ -133,13 +133,13 @@ export class IgxTreeNavigationComponent {
 @Component({
     template: `
     <igx-tree #tree1 style="height: 300px; overflow-y: scroll; width: 400px;">
-        @for (node of data; track node) {
+        @for (node of data; track node.ID) {
             <igx-tree-node [data]="node" [active]="node.ID === 'FRANS'" [expanded]="true">
                 {{ node.CompanyName }}
-                @for (child of node.ChildCompanies; track child) {
+                @for (child of node.ChildCompanies; track child.ID) {
                     <igx-tree-node [data]="child" [expanded]="true">
                         {{ child.CompanyName }}
-                        @for (leafchild of child.ChildCompanies; track leafchild) {
+                        @for (leafchild of child.ChildCompanies; track leafchild.ID) {
                             <igx-tree-node [data]="leafchild">
                                 {{ leafchild.CompanyName }}
                             </igx-tree-node>
diff --git a/projects/igniteui-angular/src/lib/tree/tree.spec.ts b/projects/igniteui-angular/src/lib/tree/tree.spec.ts
index 03b21aec9db..2fbd662cb60 100644
--- a/projects/igniteui-angular/src/lib/tree/tree.spec.ts
+++ b/projects/igniteui-angular/src/lib/tree/tree.spec.ts
@@ -680,13 +680,13 @@ describe('IgxTree #treeView', () => {
 @Component({
     template: `
         <igx-tree>
-            @for (node of data; track node) {
+            @for (node of data; track node.id) {
                 <igx-tree-node [(expanded)]="node.expanded" [data]="node">
                     {{ node.label }}
-                    @for (child of node.children; track child) {
+                    @for (child of node.children; track child.id) {
                         <igx-tree-node [(expanded)]="child.expanded" [data]="child">
                             {{ child.label }}
-                            @for (leafChild of child.children; track leafChild) {
+                            @for (leafChild of child.children; track leafChild.id) {
                                 <igx-tree-node [(expanded)]="leafChild.expanded" [data]="leafChild">
                                     {{ leafChild.label }}
                                 </igx-tree-node>