Replaced redundant trackBy functions with direct @for tracking

ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.html

@@ -112,7 +112,7 @@
                      cdkDropList cdkDropListOrientation="vertical"
                      [cdkDropListDisabled]="!dragEnabled"
                      (cdkDropListDropped)="keyDrop($event)">
-                  @for (keyControl of levelsFormArray().controls; track trackByKey; ) {
+                  @for (keyControl of levelsFormArray().controls; track keyControl; ) {
                     <div cdkDrag [cdkDragDisabled]="!dragEnabled" class="tb-draggable-form-table-row">
                       <div class="tb-form-table-row-cell-buttons">
                         <button mat-icon-button

ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.ts

@@ -303,10 +303,6 @@ export class CalculatedFieldGeofencingZoneGroupsPanelComponent implements OnInit
     return this.refDynamicSourceFormGroup.get('levels') as UntypedFormArray;
   }
 
-  trackByKey(_index: number, keyControl: AbstractControl): any {
-    return keyControl;
-  }
-
   removeKey(index: number) {
     this.levelsFormArray().removeAt(index);
     this.levelsFormArray().markAsDirty();

ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@@ -293,7 +293,7 @@
                 </mat-cell>
               </ng-container>
             }
-            @for (column of actionColumns; track trackByColumnKey($index, column)) {
+            @for (column of actionColumns; track column) {
               <ng-container [matColumnDef]="column.key">
                 <mat-header-cell *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
                 <mat-cell *matCellDef="let entity; let row = index"

ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts

@@ -700,10 +700,6 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
     return res;
   }
 
-  trackByColumnKey(index, column: EntityTableColumn<BaseData<HasId>> | EntityActionTableColumn<BaseData<HasId>>) {
-    return column.key;
-  }
-
   trackByEntityId(index: number, entity: BaseData<HasId>) {
     return entity.id.id;
   }

ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html

@@ -17,7 +17,7 @@
 -->
 <div class="flex flex-col">
   <div class="tb-device-profile-alarms">
-    @for (alarmControl of alarmsFormArray.controls; track trackByAlarm($index, alarmControl); let isLast = $last) {
+    @for (alarmControl of alarmsFormArray.controls; track alarmControl; let isLast = $last) {
       <div
         class="flex flex-col" [class.pb-2]="!isLast">
         <tb-device-profile-alarm [formControl]="alarmControl"

ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.ts

@@ -133,14 +133,6 @@ export class DeviceProfileAlarmsComponent implements ControlValueAccessor, OnIni
     }
   }
 
-  public trackByAlarm(index: number, alarmControl: AbstractControl): string {
-    if (alarmControl) {
-      return alarmControl.value.id;
-    } else {
-      return null;
-    }
-  }
-
   public removeAlarm(index: number) {
     (this.deviceProfileAlarmsFormGroup.get('alarms') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html

@@ -17,7 +17,7 @@
 -->
 <div class="flex flex-col">
   <mat-accordion multi="true">
-    @for (serverConfig of serverConfigsFromArray.controls; track trackByParams($index)) {
+    @for (serverConfig of serverConfigsFromArray.controls; track serverConfig) {
       <div>
         <tb-profile-lwm2m-device-config-server
           [formControl]="serverConfig"

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.ts

@@ -137,10 +137,6 @@ export class Lwm2mBootstrapConfigServersComponent implements OnInit, ControlValu
     }
   }
 
-  trackByParams(index: number): number {
-    return index;
-  }
-
   removeServerConfig($event: Event, index: number) {
     if ($event) {
       $event.stopPropagation();

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html

@@ -17,7 +17,7 @@
 -->
 <section [formGroup]="instancesFormGroup">
   <mat-accordion multi="true" formArrayName="instances">
-    @for (instances of instancesFormArray.controls; track trackByParams($index, instances.value)) {
+    @for (instances of instancesFormArray.controls; track instances) {
       <mat-expansion-panel
         class="instance-row"
         [formGroupName]="$index"

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.ts

@@ -176,10 +176,6 @@ export class Lwm2mObserveAttrTelemetryInstancesComponent implements ControlValue
     this.instancesFormArray.updateValueAndValidity();
   }
 
-  trackByParams = (index: number, instance: Instance): number => {
-    return instance.id;
-  }
-
   getIndeterminate = (instance: AbstractControl, type: ResourceSettingTelemetry): boolean => {
     const resources = instance.get('resources').value as ResourceLwM2M[];
     if (isDefinedAndNotNull(resources)) {

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html

@@ -35,7 +35,7 @@
   </div>
   <mat-divider></mat-divider>
   <div formArrayName="resources">
-    @for (resourceLwM2M of resourcesFormArray.controls; track trackByParams($index, resourceLwM2M.value)) {
+    @for (resourceLwM2M of resourcesFormArray.controls; track resourceLwM2M) {
       <div [formGroupName]="$index" class="resource-list flex flex-row items-center justify-start">
         <div class="resource-name max-w-30% flex-full">
           #{{ resourceLwM2M.get('id').value }} <span class="name">{{ resourceLwM2M.get('name').value }}</span>

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.ts

@@ -182,10 +182,6 @@ export class Lwm2mObserveAttrTelemetryResourcesComponent implements ControlValue
     }
   }
 
-  trackByParams(index: number, resource: ResourceLwM2M): number {
-    return resource.id;
-  }
-
   isDisabledObserve(index: number): boolean{
     return this.resourcesFormArray.at(index).get('observe').disabled;
   }

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html

@@ -17,7 +17,7 @@
 -->
 <section [formGroup]="modelsFormGroup">
   <mat-accordion multi="true" formArrayName="models">
-    @for (objectLwM2M of modelsFormArray.controls; track trackByParams($index, objectLwM2M.value)) {
+    @for (objectLwM2M of modelsFormArray.controls; track objectLwM2M) {
       <mat-expansion-panel [formGroupName]="$index">
         <mat-expansion-panel-header>
           <mat-panel-title class="flex items-center justify-start">

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.ts

@@ -169,10 +169,6 @@ export class Lwm2mObserveAttrTelemetryComponent implements ControlValueAccessor,
     this.modelsFormArray.updateValueAndValidity();
   }
 
-  trackByParams = (index: number, objectLwM2M: ObjectLwM2M): number => {
-    return objectLwM2M.id;
-  }
-
   /**
    * Instances: indicates whether this Object supports multiple Object Instances or not.
    * 1) Field in object: <MultipleInstances> == Multiple/Single

ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div class="flex flex-col">
-  @for (queuesControl of queuesFormArray.controls; track trackByQueue($index, queuesControl); let isLast = $last) {
+  @for (queuesControl of queuesFormArray.controls; track queuesControl; let isLast = $last) {
     <div class="tb-tenant-profile-queues"
          [class.pb-2]="!isLast">
       <mat-expansion-panel class="flex-1" [expanded]="true">

ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.ts

@@ -141,12 +141,6 @@ export class TenantProfileQueuesComponent implements ControlValueAccessor, Valid
     }
   }
 
-  public trackByQueue(index: number, queueControl: AbstractControl) {
-    if (queueControl) {
-      return queueControl.value.id;
-    }
-    return null;
-  }
 
   public removeQueue(index: number) {
     (this.tenantProfileQueuesFormGroup.get('queues') as UntypedFormArray).removeAt(index);

ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html

@@ -36,7 +36,7 @@
         <fieldset class="fields-group" [disabled]="(isLoading$ | async) || (isReadOnly | async)">
           <legend class="group-title" translate>admin.auto-commit-entities</legend>
           <div class="flex flex-col">
-            @for (entityTypeFormGroup of entityTypesFormGroupArray(); track trackByEntityType($index, entityTypeFormGroup); let isLast = $last) {
+            @for (entityTypeFormGroup of entityTypesFormGroupArray(); track entityTypeFormGroup; let isLast = $last) {
               <div
                 class="flex flex-row items-center justify-start" [class.pb-2]="!isLast">
                 <mat-expansion-panel class="entity-type-config flex-1" [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">

ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.ts

@@ -91,10 +91,6 @@ export class AutoCommitSettingsComponent extends PageComponent implements OnInit
     return !!(entityTypeControl as any).expanded;
   }
 
-  public trackByEntityType(index: number, entityTypeControl: AbstractControl): any {
-    return entityTypeControl;
-  }
-
   public removeEntityType(index: number) {
     (this.autoCommitSettingsForm.get('entityTypes') as UntypedFormArray).removeAt(index);
     this.autoCommitSettingsForm.markAsDirty();

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html

@@ -30,7 +30,7 @@
     </div>
     @if (keysFormArray().controls.length) {
       <div class="tb-form-table-body">
-        @for (keyControl of keysFormArray().controls; track trackByKey($index, keyControl)) {
+        @for (keyControl of keysFormArray().controls; track keyControl) {
           <div>
             <tb-aggregated-data-key-row class="flex-1"
                                         [formControl]="keyControl"

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.ts

@@ -134,10 +134,6 @@ export class AggregatedDataKeysPanelComponent implements ControlValueAccessor, O
     return this.keysListFormGroup.get('keys') as UntypedFormArray;
   }
 
-  trackByKey(index: number, keyControl: AbstractControl): any {
-    return keyControl;
-  }
-
   removeKey(index: number) {
     (this.keysListFormGroup.get('keys') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html

@@ -24,7 +24,7 @@
   </div>
   @if (keysFormArray().controls.length) {
     <div class="tb-form-table-body">
-      @for (keyControl of keysFormArray().controls; track trackByKey($index, keyControl)) {
+      @for (keyControl of keysFormArray().controls; track keyControl) {
         <div>
           <tb-comparison-key-row
             class="flex-1"

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.ts

@@ -98,10 +98,6 @@ export class ComparisonKeysTableComponent implements ControlValueAccessor, OnIni
     return this.keysListFormGroup.get('keys') as UntypedFormArray;
   }
 
-  trackByKey(_index: number, keyControl: AbstractControl): any {
-    return keyControl;
-  }
-
   private prepareKeysFormArray(keys: DataKey[] | undefined): UntypedFormArray {
     const keysControls: Array<AbstractControl> = [];
     if (keys) {

ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html

@@ -50,7 +50,7 @@
            cdkDropList cdkDropListOrientation="vertical"
            [cdkDropListDisabled]="!dragEnabled"
            (cdkDropListDropped)="keyDrop($event)">
-        @for (keyControl of keysFormArray().controls; track trackByKey($index, keyControl)) {
+        @for (keyControl of keysFormArray().controls; track keyControl) {
           <div cdkDrag [cdkDragDisabled]="!dragEnabled"
                class="tb-draggable-form-table-row"
                >

ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.ts

@@ -274,10 +274,6 @@ export class DataKeysPanelComponent implements ControlValueAccessor, OnInit, OnC
     return this.keysListFormGroup.get('keys') as UntypedFormArray;
   }
 
-  trackByKey(index: number, keyControl: AbstractControl): any {
-    return keyControl;
-  }
-
   removeKey(index: number) {
     (this.keysListFormGroup.get('keys') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html

@@ -50,7 +50,7 @@
                 (cdkDropListDropped)="onDatasourceDrop($event)"
                 [cdkDropListDisabled]="dragDisabled"
                 formArrayName="datasources">
-        @for (datasourceControl of datasourcesControls; track trackByDatasource($index, datasourceControl)) {
+        @for (datasourceControl of datasourcesControls; track datasourceControl) {
           <mat-list-item
             class="tb-datasource-list-item tb-draggable" cdkDrag
             [cdkDragDisabled]="dragDisabled">

ui-ngx/src/app/modules/home/components/widget/config/datasources.component.ts

@@ -16,7 +16,6 @@
 
 import { Component, DestroyRef, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import {
-  AbstractControl,
   ControlValueAccessor,
   FormControl,
   NG_VALIDATORS,
@@ -323,10 +322,6 @@ export class DatasourcesComponent implements ControlValueAccessor, OnInit, Valid
     return this.datasourcesFormArray.controls as FormControl[];
   }
 
-  public trackByDatasource(index: number, datasourceControl: AbstractControl): any {
-    return datasourceControl;
-  }
-
   private datasourcesUpdated(datasources: Datasource[]) {
     if (this.datasourcesOptional) {
       datasources = datasources ? datasources.filter(d => datasourceValid(d)) : [];

ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html

@@ -81,7 +81,7 @@
             </mat-checkbox>
           </mat-cell>
         </ng-container>
-        @for (column of columns; track trackByColumnDef($index, column)) {
+        @for (column of columns; track column) {
           <ng-container [matColumnDef]="column.def">
             <mat-header-cell [style]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="!column.sortable">
               {{ column.title }}
@@ -142,7 +142,7 @@
             @if (alarmsDatasource.countCellButtonAction) {
               <div [class.lt-lg:!hidden]="showCellActionsMenu && alarmsDatasource.countCellButtonAction !== 1" class="flex flex-row items-stretch justify-end"
                    [style.min-width]="(alarmsDatasource.countCellButtonAction * 48) + 'px'">
-                @for (actionDescriptor of alarm.actionCellButtons; track trackByActionCellDescriptionId($index, actionDescriptor)) {
+                @for (actionDescriptor of alarm.actionCellButtons; track actionDescriptor) {
                   @if (!actionDescriptor.icon) {
                     <span style="width: 48px;"></span>
                   }
@@ -164,7 +164,7 @@
                     <mat-icon class="material-icons">more_vert</mat-icon>
                   </button>
                   <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                    @for (actionDescriptor of alarm.actionCellButtons; track trackByActionCellDescriptionId($index, actionDescriptor)) {
+                    @for (actionDescriptor of alarm.actionCellButtons; track actionDescriptor) {
                       @if (actionDescriptor.icon) {
                         <button mat-menu-item
                                 [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"

ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts

@@ -727,18 +727,10 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     this.ctx.detectChanges();
   }
 
-  public trackByColumnDef(index, column: EntityColumn) {
-    return column.def;
-  }
-
   public trackByAlarmId(index: number, alarm: AlarmData) {
     return alarm.id.id;
   }
 
-  public trackByActionCellDescriptionId(index: number, action: WidgetActionDescriptor) {
-    return action.id;
-  }
-
   public headerStyle(key: EntityColumn): any {
     const columnWidth = this.columnWidth[key.def];
     return widthStyle(columnWidth);

ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html

@@ -40,7 +40,7 @@
     <div class="table-container flex-1">
       <table mat-table [dataSource]="entityDatasource" [trackBy]="trackByEntityId"
              matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
-        @for (column of columns; track trackByColumnDef($index, column)) {
+        @for (column of columns; track column) {
           <ng-container [matColumnDef]="column.def">
             <mat-header-cell [style]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="!column.sortable"> {{ column.title }} </mat-header-cell>
             <mat-cell *matCellDef="let entity; let row = index"
@@ -65,7 +65,7 @@
             @if (entityDatasource.countCellButtonAction) {
               <div [class.lt-lg:!hidden]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" class="flex flex-row items-stretch justify-end"
                    [style.min-width]="(entityDatasource.countCellButtonAction * 48) + 'px'">
-                @for (actionDescriptor of entity.actionCellButtons; track trackByActionCellDescriptionId($index, actionDescriptor)) {
+                @for (actionDescriptor of entity.actionCellButtons; track actionDescriptor) {
                   @if (!actionDescriptor.icon) {
                     <span style="width: 48px;"></span>
                   }
@@ -87,7 +87,7 @@
                     <mat-icon class="material-icons">more_vert</mat-icon>
                   </button>
                   <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                    @for (actionDescriptor of entity.actionCellButtons; track trackByActionCellDescriptionId($index, actionDescriptor)) {
+                    @for (actionDescriptor of entity.actionCellButtons; track actionDescriptor) {
                       @if (actionDescriptor.icon) {
                         <button mat-menu-item
                                 (click)="onActionButtonClick($event, entity, actionDescriptor)">

ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts

@@ -622,18 +622,10 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     this.ctx.detectChanges();
   }
 
-  public trackByColumnDef(index, column: EntityColumn) {
-    return column.def;
-  }
-
   public trackByEntityId(index: number, entity: EntityData) {
     return entity.id.id;
   }
 
-  public trackByActionCellDescriptionId(index: number, action: WidgetActionDescriptor) {
-    return action.id;
-  }
-
   public headerStyle(key: EntityColumn): any {
     const columnWidth = this.columnWidth[key.def];
     return widthStyle(columnWidth);

ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html

@@ -28,7 +28,7 @@
   <div mat-dialog-content>
     <div class="tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
          (cdkDropListDropped)="linkDrop($event)" [cdkDropListDisabled]="editMode || addMode">
-      @for (linkControl of linksFormArray().controls; track trackByLink($index, linkControl); let isLast = $last) {
+      @for (linkControl of linksFormArray().controls; track linkControl; let isLast = $last) {
         <div cdkDrag class="tb-draggable flex flex-row items-center justify-start"
              [class.pb-2]="!isLast">
           @switch (mode) {

ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.ts

@@ -73,10 +73,6 @@ export class EditLinksDialogComponent extends
     return this.editLinksFormGroup.get('links') as UntypedFormArray;
   }
 
-  trackByLink(index: number, linkControl: AbstractControl): any {
-    return linkControl;
-  }
-
   linkDrop(event: CdkDragDrop<string[]>) {
     const linksArray = this.editLinksFormGroup.get('links') as UntypedFormArray;
     const link = linksArray.at(event.previousIndex);

ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html

@@ -30,7 +30,7 @@
                  [style.background-size]="vertical ? '100% ' + (batteryFillValue + 1) + '%' : (batteryFillValue + 1) + '% 100%'">
             </div>
           } @else {
-            @for (section of batterySections; track trackBySection($index)) {
+            @for (section of batterySections; track $index) {
               <div class="tb-battery-level-indicator-box divided"
                    [style.background]="batteryLevelColor.color"
                    [style.border-radius]="dividedBorderRadius"

ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts

@@ -271,10 +271,6 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
     }
   }
 
-  public trackBySection(index: number): number {
-    return index;
-  }
-
   public cardClick($event: Event) {
     this.ctx.actionsApi.cardClick($event);
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/api-usage-widget-settings.component.html

@@ -42,7 +42,7 @@
           <div cdkDropList cdkDropListOrientation="vertical"
                [cdkDropListDisabled]="!dragEnabled"
                (cdkDropListDropped)="layerDrop($event)" class="tb-form-table-body">
-            @for (dataKeyControl of dataKeysFormArray().controls; track trackByDataKey($index)) {
+            @for (dataKeyControl of dataKeysFormArray().controls; track dataKeyControl) {
               <div cdkDrag [cdkDragDisabled]="!dragEnabled"
                    >
                 <div class="tb-draggable-form-table-row">

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/api-usage-widget-settings.component.ts

@@ -90,10 +90,6 @@ export class ApiUsageWidgetSettingsComponent extends WidgetSettingsComponent {
     return this.apiUsageWidgetSettingsForm.get('apiUsageDataKeys') as UntypedFormArray;
   }
 
-  trackByDataKey(index: number): any {
-    return index;
-  }
-
   get dragEnabled(): boolean {
     return this.dataKeysFormArray().controls.length > 1;
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html

@@ -25,7 +25,7 @@
     <div class="flex flex-col">
       <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
            (cdkDropListDropped)="labelDrop($event)">
-        @for (labelControl of typedSelectOptions; track trackByLabelControl($index, labelControl); let isLast = $last) {
+        @for (labelControl of typedSelectOptions; track labelControl; let isLast = $last) {
           <div cdkDrag class="tb-draggable flex flex-col"
                [class.pb-2]="!isLast">
             <tb-label-widget-label [formControl]="labelControl"

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.ts

@@ -76,10 +76,6 @@ export class LabelWidgetSettingsComponent extends WidgetSettingsComponent {
     return this.labelsFormArray().controls as (AbstractControl & { new?: boolean })[];
   }
 
-  public trackByLabelControl(index: number, labelControl: AbstractControl): any {
-    return labelControl;
-  }
-
   public removeLabel(index: number) {
     (this.labelWidgetSettingsForm.get('labels') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html

@@ -205,7 +205,7 @@
     @if (thresholdsFormArray().length) {
       <div class="tb-control-list tb-drop-list flex flex-col gap-3" cdkDropList cdkDropListOrientation="vertical"
            (cdkDropListDropped)="thresholdDrop($event)">
-        @for (thresholdControl of thresholdsFormArray().controls; track trackByThreshold($index, thresholdControl)) {
+        @for (thresholdControl of thresholdsFormArray().controls; track thresholdControl) {
           <div cdkDrag class="tb-draggable">
             <tb-flot-threshold [formControl]="thresholdControl"
                                [aliasController]="aliasController"

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.ts

@@ -327,10 +327,6 @@ export class FlotKeySettingsComponent extends PageComponent implements OnInit, C
     return this.flotKeySettingsFormGroup.get('thresholds') as UntypedFormArray;
   }
 
-  public trackByThreshold(index: number, thresholdControl: AbstractControl): any {
-    return thresholdControl;
-  }
-
   public removeThreshold(index: number) {
     (this.flotKeySettingsFormGroup.get('thresholds') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html

@@ -376,7 +376,7 @@
             <div class="flex flex-col">
               <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
                    (cdkDropListDropped)="labelDataKeyDrop($event)">
-                @for (labelDataKeyControl of typedSelectOptions; track trackByLabelDataKey($index, labelDataKeyControl); let isLast = $last) {
+                @for (labelDataKeyControl of typedSelectOptions; track labelDataKeyControl; let isLast = $last) {
                   <div cdkDrag class="tb-draggable flex flex-col"
                        [class.pb-2]="!isLast">
                     <tb-label-data-key [formControl]="labelDataKeyControl"

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts

@@ -428,10 +428,6 @@ export class FlotWidgetSettingsComponent extends PageComponent implements OnInit
     return this.dataKeysListForLabelsFormArray().controls as (AbstractControl & { new?: boolean })[];
   }
 
-  public trackByLabelDataKey(index: number, labelDataKeyControl: AbstractControl): any {
-    return labelDataKeyControl;
-  }
-
   public removeLabelDataKey(index: number) {
     (this.flotSettingsFormGroup.get('dataKeysListForLabels') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html

@@ -27,7 +27,7 @@
     </div>
     @if (statesFormArray().controls.length) {
       <div class="tb-form-table-body">
-        @for (stateControl of statesFormArray().controls; track trackByState($index, stateControl)) {
+        @for (stateControl of statesFormArray().controls; track stateControl) {
           <div>
             <tb-time-series-chart-state-row class="flex-1"
                                             [formControl]="stateControl"

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.ts

@@ -117,10 +117,6 @@ export class TimeSeriesChartStatesPanelComponent implements ControlValueAccessor
     return this.statesFormGroup.get('states') as UntypedFormArray;
   }
 
-  trackByState(index: number, stateControl: AbstractControl): any {
-    return stateControl;
-  }
-
   removeState(index: number) {
     (this.statesFormGroup.get('states') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html

@@ -31,7 +31,7 @@
     </div>
     @if (thresholdsFormArray().controls.length) {
       <div class="tb-form-table-body">
-        @for (thresholdControl of thresholdsFormArray().controls; track trackByThreshold($index, thresholdControl)) {
+        @for (thresholdControl of thresholdsFormArray().controls; track thresholdControl) {
           <div>
             <tb-time-series-chart-threshold-row class="flex-1"
                                                 [formControl]="thresholdControl"

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.ts

@@ -149,10 +149,6 @@ export class TimeSeriesChartThresholdsPanelComponent implements ControlValueAcce
     return this.thresholdsFormGroup.get('thresholds') as UntypedFormArray;
   }
 
-  trackByThreshold(index: number, thresholdControl: AbstractControl): any {
-    return thresholdControl;
-  }
-
   removeThreshold(index: number) {
     (this.thresholdsFormGroup.get('thresholds') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html

@@ -33,7 +33,7 @@
          cdkDropList cdkDropListOrientation="vertical"
          [cdkDropListDisabled]="!dragEnabled"
          (cdkDropListDropped)="axisDrop($event)">
-      @for (axisControl of axesFormArray().controls; track trackByAxis($index, axisControl)) {
+      @for (axisControl of axesFormArray().controls; track axisControl) {
         <div cdkDrag [cdkDragDisabled]="!dragEnabled"
              class="tb-draggable-form-table-row"
              >

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.ts

@@ -182,10 +182,6 @@ export class TimeSeriesChartYAxesPanelComponent implements ControlValueAccessor,
     return this.yAxesFormGroup.get('axes') as UntypedFormArray;
   }
 
-  trackByAxis(index: number, axisControl: AbstractControl): any {
-    return axisControl;
-  }
-
   removeAxis(index: number) {
     const axis =
       (this.yAxesFormGroup.get('axes') as UntypedFormArray).at(index).value as TimeSeriesChartYAxisSettings;

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html

@@ -42,7 +42,7 @@
       @case (false) {
         <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
              (cdkDropListDropped)="rangeDrop($event, 'range')">
-          @for (rangeFormGroup of rangeListFormGroups; track trackByRange($index, rangeFormGroup); let isLast = $last) {
+          @for (rangeFormGroup of rangeListFormGroups; track rangeFormGroup; let isLast = $last) {
             <div cdkDrag class="tb-draggable tb-advanced-range-drag"
                  [formGroup]="rangeFormGroup"
                  [class.pb-2]="!isLast">
@@ -84,7 +84,7 @@
       @case (true) {
         <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
              (cdkDropListDropped)="rangeDrop($event, 'rangeAdvanced')">
-          @for (advancedRangeControl of advancedRangeControls; track trackByAdvancedRange($index, advancedRangeControl); let isLast = $last) {
+          @for (advancedRangeControl of advancedRangeControls; track advancedRangeControl; let isLast = $last) {
             <div cdkDrag class="tb-draggable tb-advanced-range-drag"
                  [class.pb-2]="!isLast">
               <tb-advanced-range [formControl]="advancedRangeControl"

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts

@@ -167,14 +167,6 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
     return this.rangeListFormArray.controls as FormGroup[];
   }
 
-  trackByRange(index: number, rangeControl: AbstractControl): any {
-    return rangeControl;
-  }
-
-  public trackByAdvancedRange(index: number, advancedRangeControl: AbstractControl): any {
-    return advancedRangeControl;
-  }
-
   public removeAdvancedRange(index: number) {
     (this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-array.component.html

@@ -28,7 +28,7 @@
              cdkDropList cdkDropListOrientation="vertical"
              [cdkDropListDisabled]="!dragEnabled"
              (cdkDropListDropped)="propertyDrop($event)">
-          @for (propertyControl of propertiesFormArray().controls; track trackByProperty($index, propertyControl)) {
+          @for (propertyControl of propertiesFormArray().controls; track propertyControl) {
             <div cdkDrag [cdkDragDisabled]="!dragEnabled"
                  class="tb-draggable tb-dynamic-form-array-row"
                  >

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-array.component.ts

@@ -127,10 +127,6 @@ export class DynamicFormArrayComponent implements ControlValueAccessor, OnInit,
     return this.propertiesFormGroup.get('properties') as UntypedFormArray;
   }
 
-  trackByProperty(_index: number, propertyControl: AbstractControl): any {
-    return propertyControl;
-  }
-
   removeProperty(index: number, emitEvent = true) {
     (this.propertiesFormGroup.get('properties') as UntypedFormArray).removeAt(index, {emitEvent});
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-properties.component.html

@@ -60,7 +60,7 @@
            cdkDropList cdkDropListOrientation="vertical"
            [cdkDropListDisabled]="!dragEnabled"
            (cdkDropListDropped)="propertyDrop($event)">
-        @for (propertyControl of propertiesFormArray().controls; track trackByProperty($index, propertyControl)) {
+        @for (propertyControl of propertiesFormArray().controls; track propertyControl) {
           <div cdkDrag [cdkDragDisabled]="!dragEnabled"
                [class.tb-draggable]="!disabled"
                [class.tb-draggable-form-table-row]="!disabled"

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-properties.component.ts

@@ -211,10 +211,6 @@ export class DynamicFormPropertiesComponent implements ControlValueAccessor, OnI
     return this.propertiesFormGroup.get('properties') as UntypedFormArray;
   }
 
-  trackByProperty(_index: number, propertyControl: AbstractControl): any {
-    return propertyControl;
-  }
-
   removeProperty(index: number, emitEvent = true) {
     (this.propertiesFormGroup.get('properties') as UntypedFormArray).removeAt(index, {emitEvent});
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-select-items.component.html

@@ -27,7 +27,7 @@
            cdkDropList cdkDropListOrientation="vertical"
            [cdkDropListDisabled]="!dragEnabled"
            (cdkDropListDropped)="selectItemDrop($event)">
-        @for (selectItemControl of selectItemsFormArray().controls; track trackBySelectItem($index, selectItemControl)) {
+        @for (selectItemControl of selectItemsFormArray().controls; track selectItemControl) {
           <div cdkDrag [cdkDragDisabled]="!dragEnabled"
                [class.tb-draggable]="!disabled"
                [class.tb-draggable-form-table-row]="!disabled"

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-select-items.component.ts

@@ -174,10 +174,6 @@ export class DynamicFormSelectItemsComponent implements ControlValueAccessor, On
     return this.selectItemsFormGroup.get('selectItems') as UntypedFormArray;
   }
 
-  trackBySelectItem(_index: number, selectItemControl: AbstractControl): any {
-    return selectItemControl;
-  }
-
   removeSelectItem(index: number, emitEvent = true) {
     (this.selectItemsFormGroup.get('selectItems') as UntypedFormArray).removeAt(index, {emitEvent});
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html

@@ -61,7 +61,7 @@
           <div class="tb-colors-gradient">
             <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
                  (cdkDropListDropped)="gradientDrop($event)">
-              @for (gradientFormGroup of gradientListFormGroups; track trackByGradient($index, gradientFormGroup); let isLast = $last) {
+              @for (gradientFormGroup of gradientListFormGroups; track gradientFormGroup; let isLast = $last) {
                 <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
                      [formGroup]="gradientFormGroup"
                      [class.pb-2]="!isLast">
@@ -142,7 +142,7 @@
           <div class="tb-colors-gradient">
             <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
                  (cdkDropListDropped)="gradientDrop($event, true)">
-              @for (gradientFormGroup of advancedGradientListFormGroups; track trackByGradient($index, gradientFormGroup); let isLast = $last) {
+              @for (gradientFormGroup of advancedGradientListFormGroups; track gradientFormGroup; let isLast = $last) {
                 <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
                      [formGroup]="gradientFormGroup"
                      [class.pb-2]="!isLast">

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts

@@ -223,10 +223,6 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
     return this.advancedGradientListFormArray.controls as FormGroup[];
   }
 
-  trackByGradient(index: number, gradientControl: AbstractControl): any {
-    return gradientControl;
-  }
-
   removeGradient(index: number, advanced = false) {
     if (advanced) {
       this.advancedGradientListFormArray.removeAt(index);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/additional-map-data-sources.component.html

@@ -24,7 +24,7 @@
     </div>
     @if (dataSourcesFormArray().controls.length) {
       <div class="tb-form-table-body">
-        @for (dataSourceControl of dataSourcesFormArray().controls; track trackByDataSource($index, dataSourceControl)) {
+        @for (dataSourceControl of dataSourcesFormArray().controls; track dataSourceControl) {
           <div>
             <tb-additional-map-data-source-row class="flex-1"
                                                [context]="context"

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/additional-map-data-sources.component.ts

@@ -122,10 +122,6 @@ export class AdditionalMapDataSourcesComponent implements ControlValueAccessor,
     return this.dataSourcesFormGroup.get('dataSources') as UntypedFormArray;
   }
 
-  trackByDataSource(index: number, dataSourceControl: AbstractControl): any {
-    return dataSourceControl;
-  }
-
   removeDataSource(index: number) {
     (this.dataSourcesFormGroup.get('dataSources') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layers.component.html

@@ -45,7 +45,7 @@
            cdkDropList cdkDropListOrientation="vertical"
            [cdkDropListDisabled]="!dragEnabled"
            (cdkDropListDropped)="layerDrop($event)">
-        @for (dataLayerControl of dataLayersFormArray().controls; track trackByDataLayer($index, dataLayerControl)) {
+        @for (dataLayerControl of dataLayersFormArray().controls; track dataLayerControl) {
           <div cdkDrag [cdkDragDisabled]="!dragEnabled"
                class="tb-draggable-form-table-row"
                >

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layers.component.ts

@@ -165,10 +165,6 @@ export class MapDataLayersComponent implements ControlValueAccessor, OnInit, Val
     return this.dataLayersFormGroup.get('dataLayers') as UntypedFormArray;
   }
 
-  trackByDataLayer(index: number, dataLayerControl: AbstractControl): any {
-    return dataLayerControl;
-  }
-
   removeDataLayer(index: number) {
     (this.dataLayersFormGroup.get('dataLayers') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-sources.component.html

@@ -24,7 +24,7 @@
     </div>
     @if (dataSourcesFormArray().controls.length) {
       <div class="tb-form-table-body">
-        @for (dataSourceControl of dataSourcesFormArray().controls; track trackByDataSource($index, dataSourceControl)) {
+        @for (dataSourceControl of dataSourcesFormArray().controls; track dataSourceControl) {
           <div>
             <tb-map-data-source-row class="flex-1"
                                     [context]="context"

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-sources.component.ts

@@ -122,10 +122,6 @@ export class MapDataSourcesComponent implements ControlValueAccessor, OnInit, Va
     return this.dataSourcesFormGroup.get('dataSources') as UntypedFormArray;
   }
 
-  trackByDataSource(index: number, dataSourceControl: AbstractControl): any {
-    return dataSourceControl;
-  }
-
   removeDataSource(index: number) {
     (this.dataSourcesFormGroup.get('dataSources') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layers.component.html

@@ -28,7 +28,7 @@
            cdkDropList cdkDropListOrientation="vertical"
            [cdkDropListDisabled]="!dragEnabled"
            (cdkDropListDropped)="layerDrop($event)">
-        @for (layerControl of layersFormArray().controls; track trackByLayer($index, layerControl)) {
+        @for (layerControl of layersFormArray().controls; track layerControl) {
           <div cdkDrag [cdkDragDisabled]="!dragEnabled"
                class="tb-draggable-form-table-row"
                >

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layers.component.ts

@@ -131,10 +131,6 @@ export class MapLayersComponent implements ControlValueAccessor, OnInit, Validat
     return this.layersFormGroup.get('layers') as UntypedFormArray;
   }
 
-  trackByLayer(index: number, layerControl: AbstractControl): any {
-    return layerControl;
-  }
-
   removeLayer(index: number) {
     (this.layersFormGroup.get('layers') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html

@@ -232,7 +232,7 @@
           <div class="tb-form-panel-title" translate>widgets.gauge.tick-values</div>
           <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
                (cdkDropListDropped)="tickValueDrop($event)">
-            @for (tickValueControl of tickValuesFormArray().controls; track trackByTickValue($index, tickValueControl); let isLast = $last) {
+            @for (tickValueControl of tickValuesFormArray().controls; track tickValueControl; let isLast = $last) {
               <div cdkDrag class="tb-draggable flex flex-row" [class.pb-2]="!isLast">
                 <tb-tick-value class="flex-1"
                                [formControl]="tickValueControl"

ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts

@@ -392,10 +392,6 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent
     return this.digitalGaugeWidgetSettingsForm.get('ticksValue') as UntypedFormArray;
   }
 
-  public trackByTickValue(index: number, tickValueControl: AbstractControl): any {
-    return tickValueControl;
-  }
-
   public removeTickValue(index: number) {
     (this.digitalGaugeWidgetSettingsForm.get('ticksValue') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html

@@ -29,7 +29,7 @@
       <legend class="group-title" translate>widgets.gpio.gpio-switches</legend>
       <div class="flex flex-col">
         <div class="tb-control-list">
-          @for (gpioItemControl of typedSelectOptions; track trackByGpioItem($index, gpioItemControl); let isLast = $last) {
+          @for (gpioItemControl of typedSelectOptions; track gpioItemControl; let isLast = $last) {
             <div
               class="flex flex-col" [class.pb-2]="!isLast">
               <tb-gpio-item [formControl]="gpioItemControl"

ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.ts

@@ -123,10 +123,6 @@ export class GpioControlWidgetSettingsComponent extends WidgetSettingsComponent
     return this.gpioListFormArray().controls as (AbstractControl & { new?: boolean })[];
   }
 
-  public trackByGpioItem(index: number, gpioItemControl: AbstractControl): any {
-    return gpioItemControl;
-  }
-
   public removeGpioItem(index: number) {
     (this.gpioControlWidgetSettingsForm.get('gpioList') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html

@@ -28,7 +28,7 @@
       <legend class="group-title" translate>widgets.gpio.gpio-leds</legend>
       <div class="flex flex-col">
         <div class="tb-control-list">
-          @for (gpioItemControl of typedSelectOptions; track trackByGpioItem($index, gpioItemControl); let isLast = $last) {
+          @for (gpioItemControl of typedSelectOptions; track gpioItemControl; let isLast = $last) {
             <div
               class="flex flex-col" [class.pb-2]="!isLast">
               <tb-gpio-item [formControl]="gpioItemControl"

ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.ts

@@ -91,10 +91,6 @@ export class GpioPanelWidgetSettingsComponent extends WidgetSettingsComponent {
     return this.gpioListFormArray().controls as (AbstractControl & { new?: boolean })[];
   }
 
-  public trackByGpioItem(index: number, gpioItemControl: AbstractControl): any {
-    return gpioItemControl;
-  }
-
   public removeGpioItem(index: number) {
     (this.gpioPanelWidgetSettingsForm.get('gpioList') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html

@@ -154,7 +154,7 @@
     <div class="flex flex-col">
       <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
            (cdkDropListDropped)="selectOptionDrop($event)">
-        @for (selectOptionControl of typedSelectOptions; track trackBySelectOption($index, selectOptionControl); let isLast = $last) {
+        @for (selectOptionControl of typedSelectOptions; track selectOptionControl; let isLast = $last) {
           <div cdkDrag class="tb-draggable flex flex-col" [class.pb-2]="!isLast">
             <tb-datakey-select-option [formControl]="selectOptionControl"
                                       [expanded]="selectOptionControl.new"

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts

@@ -260,10 +260,6 @@ export class UpdateMultipleAttributesKeySettingsComponent extends WidgetSettings
     return this.selectOptionsFormArray().controls as (AbstractControl & { new?: boolean })[];
   }
 
-  public trackBySelectOption(index: number, selectOptionControl: AbstractControl): any {
-    return selectOptionControl;
-  }
-
   public removeSelectOption(index: number) {
     (this.updateMultipleAttributesKeySettingsForm.get('selectOptions') as UntypedFormArray).removeAt(index);
   }

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html

@@ -41,7 +41,7 @@
                    class="flex-1"
                    mat-stretch-tabs="false"
                    [(selectedIndex)]="sourceIndex" (selectedIndexChange)="onSourceIndexChanged()">
-      @for (source of sources; track trackBySourcesIndex(index, source); let index = $index) {
+      @for (source of sources; track source; let index = $index) {
         <mat-tab [label]="source.displayName">
           @if (isActiveTab(index)) {
             <div class="table-container flex-1">
@@ -56,7 +56,7 @@
                     </mat-cell>
                   </ng-container>
                 }
-                @for (h of source.header; track trackByColumnIndex($index, h)) {
+                @for (h of source.header; track h) {
                   <ng-container [matColumnDef]="h.index + ''">
                     <mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!h.sortable"> {{ h.dataKey.label }} </mat-header-cell>
                     <mat-cell *matCellDef="let row; let rowIndex = index"
@@ -79,7 +79,7 @@
                     @if (source.timeseriesDatasource.countCellButtonAction) {
                       <div [class.lt-lg:!hidden]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" class="flex flex-row items-stretch justify-end"
                            [style.min-width]="(source.timeseriesDatasource.countCellButtonAction * 40) + 'px'">
-                        @for (actionDescriptor of row.actionCellButtons; track trackByActionCellDescriptionId($index, actionDescriptor)) {
+                        @for (actionDescriptor of row.actionCellButtons; track actionDescriptor) {
                           @if (!actionDescriptor.icon) {
                             <span style="width: 40px;"></span>
                           }
@@ -104,7 +104,7 @@
                             <mat-icon class="material-icons">more_vert</mat-icon>
                           </button>
                           <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                            @for (actionDescriptor of row.actionCellButtons; track trackByActionCellDescriptionId($index, actionDescriptor)) {
+                            @for (actionDescriptor of row.actionCellButtons; track actionDescriptor) {
                               @if (actionDescriptor.icon) {
                                 <button mat-menu-item
                                         (click)="onActionButtonClick($event, row, actionDescriptor)">

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts

@@ -701,22 +701,10 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
     this.ctx.detectChanges();
   }
 
-  public trackByColumnIndex(index, header: TimeseriesHeader) {
-    return header.index;
-  }
-
   public trackByRowTimestamp(index: number) {
     return index;
   }
 
-  public trackByActionCellDescriptionId(index: number, action: WidgetActionDescriptor) {
-    return action.id;
-  }
-
-  public trackBySourcesIndex(index: number, source: TimeseriesTableSource) {
-    return source.datasource.entityId;
-  }
-
   public rowStyle(source: TimeseriesTableSource, row: TimeseriesRow, index: number): Observable<any> {
     let style$: Observable<any>;
     const res = this.rowStyleCache[index];

ui-ngx/src/app/modules/home/menu/menu-toggle.component.html

@@ -24,7 +24,7 @@
   [class.tb-toggled]="section.opened"></span>
 </a>
 <ul id="docs-menu-{{section.name | nospace}}" class="tb-menu-toggle-list" [style.height]="sectionHeight()">
-  @for (page of section.pages; track trackBySectionPages($index, page)) {
+  @for (page of section.pages; track page) {
     <li>
       <tb-menu-link [section]="page"></tb-menu-link>
     </li>

ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts

@@ -52,8 +52,4 @@ export class MenuToggleComponent implements OnInit {
     this.section.opened = !this.section.opened;
     this.store.dispatch(new ActionPreferencesUpdateOpenedMenuSection({path: this.section.path, opened: this.section.opened}));
   }
-
-  trackBySectionPages(index: number, section: MenuSection){
-    return section.id;
-  }
 }

ui-ngx/src/app/modules/home/menu/side-menu.component.html

@@ -16,7 +16,7 @@
 
 -->
 <ul class="tb-side-menu flex flex-col items-stretch justify-start">
-  @for (section of menuSections$ | async; track trackByMenuSection($index, section)) {
+  @for (section of menuSections$ | async; track section) {
     <li>
       @switch (section.type === 'link') {
         @case (true) {

ui-ngx/src/app/modules/home/menu/side-menu.component.ts

@@ -16,7 +16,6 @@
 
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { MenuService } from '@core/services/menu.service';
-import { MenuSection } from '@core/services/menu.models';
 
 @Component({
     selector: 'tb-side-menu',
@@ -32,10 +31,6 @@ export class SideMenuComponent implements OnInit {
   constructor(private menuService: MenuService) {
   }
 
-  trackByMenuSection(index: number, section: MenuSection){
-    return section.id;
-  }
-
   ngOnInit() {
   }
 

ui-ngx/src/app/modules/home/models/entity/entity-table-component.models.ts

@@ -93,7 +93,6 @@ export interface IEntitiesTableComponent {
   cellContent(entity: BaseData<HasId>, column: EntityColumn<BaseData<HasId>>, row: number): any;
   cellTooltip(entity: BaseData<HasId>, column: EntityColumn<BaseData<HasId>>, row: number): string;
   cellStyle(entity: BaseData<HasId>, column: EntityColumn<BaseData<HasId>>, row: number): any;
-  trackByColumnKey(index, column: EntityTableColumn<BaseData<HasId>>): string;
   trackByEntityId(index: number, entity: BaseData<HasId>): string;
   detectChanges(): void;
 }

ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html

@@ -100,7 +100,7 @@
               @if (!atListOneProvider) {
                 <tb-error noMargin error="{{ 'admin.2fa.available-providers-required' | translate }}" class="flex h-4 items-center pl-3"/>
               }
-              @for (provider of providersForm.controls; track trackByElement(i, provider); let i = $index) {
+              @for (provider of providersForm.controls; track provider; let i = $index) {
                 <div class="tb-form-panel stroked tb-slide-toggle">
                   <mat-expansion-panel class="tb-settings" [formGroupName]="i">
                     <mat-expansion-panel-header>

ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts

@@ -120,10 +120,6 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
     }
   }
 
-  trackByElement(i: number, item: any) {
-    return item;
-  }
-
   get providersForm(): UntypedFormArray {
     return this.twoFaFormGroup.get('providers') as UntypedFormArray;
   }

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-layout.component.html

@@ -61,7 +61,7 @@
        cdkDropListOrientation="vertical"
        (cdkDropListDropped)="mobileItemDrop($event)"
        [cdkDropListDisabled]="!dragEnabled">
-    @for (menuItemControl of visibleMobilePagesControls(); track trackByMenuItem($index, menuItemControl);) {
+    @for (menuItemControl of visibleMobilePagesControls(); track menuItemControl;) {
       <div class="tb-mobile-item-row-container">
         <div cdkDrag [cdkDragDisabled]="!dragEnabled"
              class="tb-draggable tb-mobile-item-row">

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-layout.component.ts

@@ -162,10 +162,6 @@ export class MobileLayoutComponent implements ControlValueAccessor, Validator {
     this.pagesForm.markAsDirty();
   }
 
-  trackByMenuItem(_index: number, menuItemControl: AbstractControl): any {
-    return menuItemControl;
-  }
-
   addCustomMobilePage(index?: number) {
     this.dialog.open<AddMobilePageDialogComponent, null,
       CustomMobilePage>(AddMobilePageDialogComponent, {

ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html

@@ -28,7 +28,7 @@
            cdkDropList cdkDropListOrientation="vertical"
            [cdkDropListDisabled]="!dragEnabled"
            (cdkDropListDropped)="behaviorDrop($event)">
-        @for (behaviorControl of behaviorsFormArray().controls; track trackByBehavior($index, behaviorControl)) {
+        @for (behaviorControl of behaviorsFormArray().controls; track behaviorControl) {
           <div cdkDrag [cdkDragDisabled]="!dragEnabled"
                [class.tb-draggable]="!disabled"
                [class.tb-draggable-form-table-row]="!disabled"

ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.ts

@@ -186,10 +186,6 @@ export class ScadaSymbolBehaviorsComponent implements ControlValueAccessor, OnIn
     return this.behaviorsFormGroup.get('behaviors') as UntypedFormArray;
   }
 
-  trackByBehavior(index: number, behaviorControl: AbstractControl): any {
-    return behaviorControl;
-  }
-
   removeBehavior(index: number, emitEvent = true) {
     (this.behaviorsFormGroup.get('behaviors') as UntypedFormArray).removeAt(index, {emitEvent});
   }

ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html

@@ -24,7 +24,7 @@
     </div>
     @if (tagsFormArray().controls.length) {
       <div class="tb-form-table-body">
-        @for (tagControl of tagsFormArray().controls; track trackByTag($index, tagControl)) {
+        @for (tagControl of tagsFormArray().controls; track tagControl) {
           <div>
             <tb-scada-symbol-metadata-tag class="flex-1"
                                           [elementStateRenderFunctionCompleter]="elementStateRenderFunctionCompleter"

ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts

@@ -175,10 +175,6 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O
     return this.tagsFormGroup.get('tags') as UntypedFormArray;
   }
 
-  trackByTag(_index: number, tagControl: AbstractControl): any {
-    return tagControl;
-  }
-
   editTagStateRenderFunction(tag: string): void {
     setTimeout(() => {
       const tags: ScadaSymbolTag[] = this.tagsFormGroup.get('tags').value;

ui-ngx/src/app/modules/home/pages/security/security.component.html

@@ -191,7 +191,7 @@
       </mat-card-subtitle>
       <h3 class="mat-h3 auth-title" translate>security.2fa.authenticate-with</h3>
       <form [formGroup]="twoFactorAuth">
-        @for (provider of allowTwoFactorProviders; track trackByProvider($index, provider)) {
+        @for (provider of allowTwoFactorProviders; track provider) {
           <div class="provider">
             <h4 class="provider-title">{{ providersData.get(provider).name | translate }}</h4>
             <div class="flex flex-row items-start justify-between">

ui-ngx/src/app/modules/home/pages/security/security.component.ts

@@ -216,10 +216,6 @@ export class SecurityComponent extends PageComponent implements OnInit, OnDestro
     };
   }
 
-  trackByProvider(i: number, provider: TwoFactorAuthProviderType) {
-    return provider;
-  }
-
   copyToken() {
     if (+this.jwtTokenExpiration < Date.now()) {
       this.store.dispatch(new ActionNotificationShow({

ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html

@@ -64,7 +64,7 @@
   <mat-card-content>
     <div class="tb-drop-list tb-bundle-widgets-container" cdkDropList cdkDropListOrientation="vertical"
          (cdkDropListDropped)="widgetDrop($event)" [cdkDropListDisabled]="!editMode || widgets?.length < 2">
-      @for (widget of widgets; track trackByWidget($index, widget); let isLast = $last) {
+      @for (widget of widgets; track widget; let isLast = $last) {
         <div cdkDrag class="tb-draggable tb-bundle-widget-row">
           <div class="tb-bundle-widget-row-details">
             <img class="tb-bundle-widget-image-preview" [src]="widget.image | image: {preview: true, emptyUrl: '/assets/widget-preview-empty.svg'} | async" alt="{{ widget.name }}">

ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.ts

@@ -87,10 +87,6 @@ export class WidgetsBundleWidgetsComponent extends PageComponent implements OnIn
   ngOnInit(): void {
   }
 
-  trackByWidget(index: number, widget: WidgetTypeBundle): any {
-    return widget;
-  }
-
   widgetDrop(event: CdkDragDrop<string[]>) {
     const widget = this.widgets[event.previousIndex];
     this.widgets.splice(event.previousIndex, 1);

ui-ngx/src/app/shared/components/grid/scroll-grid.component.html

@@ -20,7 +20,7 @@
   <ng-container *cdkVirtualFor="let itemsRow of dataSource; let row = index; trackBy: trackByItemsRow">
     @if (itemsRow) {
       <div class="tb-scroll-grid-items-row" [style]="{gap: gap+'px'}">
-        @for (item of itemsRow; track trackByItem(col, item); let col = $index) {
+        @for (item of itemsRow; track item; let col = $index) {
           <div class="tb-scroll-grid-item-container">
             @if (item === 'loadingCell') {
               <ng-container *ngTemplateOutlet="loadingCell ? loadingCell : defaultLoadingCell"></ng-container>

ui-ngx/src/app/shared/components/grid/scroll-grid.component.ts

@@ -142,10 +142,6 @@ export class ScrollGridComponent<T, F> implements OnInit, AfterViewInit, OnChang
     return index;
   }
 
-  trackByItem(index: number, item: T): T {
-    return item;
-  }
-
   public update() {
     this.dataSource.update();
   }

ui-ngx/src/app/shared/components/js-func-modules.component.html

@@ -27,7 +27,7 @@
         </div>
         @if (modulesFormArray().controls.length) {
           <div class="tb-form-table-body">
-            @for (moduleControl of modulesFormArray().controls; track trackByModule($index, moduleControl)) {
+            @for (moduleControl of modulesFormArray().controls; track moduleControl) {
               <div>
                 <tb-js-func-module-row class="flex"
                                        [index]="$index"

ui-ngx/src/app/shared/components/js-func-modules.component.ts

@@ -114,10 +114,6 @@ export class JsFuncModulesComponent implements OnInit {
     return this.modulesFormGroup.get('modules') as UntypedFormArray;
   }
 
-  trackByModule(_index: number, moduleControl: AbstractControl): any {
-    return moduleControl;
-  }
-
   removeModule(index: number, emitEvent = true) {
     (this.modulesFormGroup.get('modules') as UntypedFormArray).removeAt(index, {emitEvent});
     this.modulesFormGroup.get('modules').markAsDirty({emitEvent});

ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html

@@ -38,7 +38,7 @@
       }
     </div>
     <div class="tb-form-table-body" formArrayName="intervals">
-      @for (interval of intervalsFormArray.controls; track trackByElement(i, interval); let i = $index) {
+      @for (interval of intervalsFormArray.controls; track interval; let i = $index) {
         <div [formGroupName]="i" class="tb-form-table-row">
           <div class="tb-form-table-row-cell tb-interval">
             <mat-checkbox class="tb-interval-option" formControlName="enabled" color="primary">

ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.ts

@@ -149,10 +149,6 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
     return interval as number;
   }
 
-  trackByElement(i: number, item: any) {
-    return item;
-  }
-
   update() {
     if (this.onClose) {
       const allowedIntervals: Array<TimewindowInterval> = [];

ui-ngx/src/app/shared/components/toggle-header.component.html

@@ -42,7 +42,7 @@
                              [name]="name"
                              [(ngModel)]="value"
                              (ngModelChange)="valueChange.emit(value)">
-      @for (option of options; track trackByHeaderOption($index, option)) {
+      @for (option of options; track option) {
         <mat-button-toggle [value]="option.value" [disabled]="disabled" [class.tb-toggle-button-error]="(option.error$ | async) && value !== option.value">
           {{ option.name }}
           @if ((option.error$ | async) && value !== option.value) {