Angular 20 migration

ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.html

@@ -20,7 +20,7 @@
     <div class="min-w-40 xs:min-w-fit">{{ 'alarm-rule.condition' | translate }}</div>
     <button type="button"
             class="tb-alarm-rule-condition-button"
-            mat-stroked-button [color]="conditionSet() || this.filtersArgumentsValid ? 'primary' : 'warn'"
+            mat-stroked-button [color]="conditionSet() || filtersArgumentsValid ? 'primary' : 'warn'"
             (click)="openFilterDialog($event)">
       <div class="flex items-center justify-between gap-2">
         <tb-alarm-rule-filter-text [alarmRuleExpression]="alarmRuleConditionFormGroup.get('expression').value"
@@ -32,7 +32,7 @@
                                    required
                                    addFilterPrompt="{{ 'alarm-rule.enter-alarm-rule-condition-prompt' | translate }}">
         </tb-alarm-rule-filter-text>
-        <mat-icon [color]="disabled ? '' : (conditionSet() && this.filtersArgumentsValid ? 'primary' : 'warn')"
+        <mat-icon [color]="disabled ? '' : (conditionSet() && filtersArgumentsValid ? 'primary' : 'warn')"
                   class="tb-mat-20 tb-alarm-rule-schedule-edit-icon">
           {{ disabled ? 'visibility' : (conditionSet() ? 'edit' : 'add') }}
         </mat-icon>

ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-panel.component.html

@@ -143,7 +143,7 @@
           </mat-form-field>
         </div>
       }
-      @if (this.metricForm.get('input.type').value === AggInputType.key) {
+      @if (metricForm.get('input.type').value === AggInputType.key) {
         <div class="tb-form-row">
           <div class="fixed-title-width tb-required">{{ 'calculated-fields.argument-name' | translate }}</div>
           <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">

ui-ngx/src/app/modules/home/components/calculated-fields/components/propagation-configuration/propagation-configuration.component.html

@@ -57,9 +57,9 @@
                                   [ownerId]="ownerId"
                                   [watchKeyChange]="true"
                                   [isEditValue]="isEditValue"
-                                  [isScript]="this.propagateConfiguration.get('applyExpressionToResolvedArguments').value"/>
+                                  [isScript]="propagateConfiguration.get('applyExpressionToResolvedArguments').value"/>
   </div>
-  <div class="tb-form-panel no-gap" [class.!hidden]="!this.propagateConfiguration.get('applyExpressionToResolvedArguments').value">
+  <div class="tb-form-panel no-gap" [class.!hidden]="!propagateConfiguration.get('applyExpressionToResolvedArguments').value">
     <div class="tb-form-panel-title tb-required">{{ 'calculated-fields.script' | translate }}</div>
     <div>
       <tb-js-func required

ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html

@@ -29,7 +29,7 @@
     <mat-form-field appearance="outline">
       <mat-label translate>layout.breakpoint</mat-label>
       <mat-select formControlName="newBreakpointId" [hideSingleSelectionIndicator]="false">
-        <mat-select-trigger>{{ getName(this.addBreakpointFormGroup.get('newBreakpointId').value) }}</mat-select-trigger>
+        <mat-select-trigger>{{ getName(addBreakpointFormGroup.get('newBreakpointId').value) }}</mat-select-trigger>
         <mat-option *ngFor="let breakpoint of allowBreakpointIds" [value]="breakpoint" style="min-height:56px;">
           <mat-icon><tb-icon>{{ getIcon(breakpoint) }}</tb-icon></mat-icon>
           <div>{{ getName(breakpoint) }}</div>
@@ -40,7 +40,7 @@
     <mat-form-field appearance="outline" subscriptSizing="dynamic">
       <mat-label translate>layout.copy-from</mat-label>
       <mat-select formControlName="copyFrom" [hideSingleSelectionIndicator]="false">
-        <mat-select-trigger>{{ getName(this.addBreakpointFormGroup.get('copyFrom').value) }}</mat-select-trigger>
+        <mat-select-trigger>{{ getName(addBreakpointFormGroup.get('copyFrom').value) }}</mat-select-trigger>
         <mat-option *ngFor="let breakpoint of selectedBreakpointIds" [value]="breakpoint" style="min-height:56px;">
           <mat-icon><tb-icon>{{ getIcon(breakpoint) }}</tb-icon></mat-icon>
           <div>{{ getName(breakpoint) }}</div>

ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html

@@ -132,7 +132,7 @@
             color="primary"
             *ngIf="showNext"
             [disabled]="(isLoading$ | async)"
-            (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}</button>
+            (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(selectedIndex+1) | translate)} }}</button>
   </div>
   <mat-divider style="width: 100%"></mat-divider>
   <div class="dialog-actions-row flex flex-1 flex-row items-center justify-end gap-2">

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

@@ -34,7 +34,7 @@
     <button mat-raised-button color="primary"
             type="button"
             (click)="addServerConfig()">
-      <span>{{ (this.isBootstrapServerNotAvailable() ? 'device-profile.lwm2m.add-lwm2m-server-config' :
+      <span>{{ (isBootstrapServerNotAvailable() ? 'device-profile.lwm2m.add-lwm2m-server-config' :
         'device-profile.lwm2m.add-server-config') | translate }}</span>
     </button>
   </div>

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

@@ -30,7 +30,7 @@
           </div>
           <div class="flex max-w-10% flex-full items-center justify-center">
             <mat-checkbox color="warn"
-                          [disabled]="this.disabled"
+                          [disabled]="disabled"
                           [checked]="getChecked(instances, 'attribute')"
                           (click)="$event.stopPropagation()"
                           (change)="changeInstanceResourcesCheckBox($event.checked, instances, 'attribute')"
@@ -39,7 +39,7 @@
           </div>
           <div class="flex max-w-10% flex-full items-center justify-center">
             <mat-checkbox color="primary"
-                          [disabled]="this.disabled"
+                          [disabled]="disabled"
                           [checked]="getChecked(instances, 'telemetry')"
                           (click)="$event.stopPropagation()"
                           (change)="changeInstanceResourcesCheckBox($event.checked, instances, 'telemetry')"

ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html

@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div #valueCardPanel class="tb-value-card-panel" [class]="this.layout" [style.padding]="padding" [style]="backgroundStyle$ | async">
+<div #valueCardPanel class="tb-value-card-panel" [class]="layout" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-value-card-overlay" [style]="overlayStyle"></div>
   <div class="tb-value-card-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
-  <div #valueCardContent class="tb-value-card-content" [class]="this.layout">
+  <div #valueCardContent class="tb-value-card-content" [class]="layout">
     <ng-container [ngSwitch]="layout">
       <ng-template [ngSwitchCase]="valueCardLayout.square">
         <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>

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

@@ -20,7 +20,7 @@
   <div class="tb-status-widget-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
-  <div #statusWidgetContent class="tb-status-widget-content" [class]="this.layout" [style.padding]="padding">
+  <div #statusWidgetContent class="tb-status-widget-content" [class]="layout" [style.padding]="padding">
     <div class="tb-status-widget-icon-container">
       <tb-icon [style]="iconStyle">{{ icon }}</tb-icon>
     </div>

ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html

@@ -39,10 +39,10 @@
         <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.method</mat-label>
           <input matInput formControlName="method" required>
-          <mat-error *ngIf="this.persistentFormGroup.get('method').hasError('required')">
+          <mat-error *ngIf="persistentFormGroup.get('method').hasError('required')">
             {{'widgets.persistent-table.method-error' | translate}}
           </mat-error>
-          <mat-error *ngIf="this.persistentFormGroup.get('method').hasError('pattern')">
+          <mat-error *ngIf="persistentFormGroup.get('method').hasError('pattern')">
             {{'widgets.persistent-table.white-space-error' | translate}}
           </mat-error>
         </mat-form-field>

ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html

@@ -20,7 +20,7 @@
   <div class="tb-single-switch-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
-  <div #singleSwitchContent class="tb-single-switch-content" [class]="this.layout" [class.no-label]="!showIcon && !showLabel" [class.auto-scale]="autoScale">
+  <div #singleSwitchContent class="tb-single-switch-content" [class]="layout" [class.no-label]="!showIcon && !showLabel" [class.auto-scale]="autoScale">
     <div *ngIf="showIcon || showLabel" #singleSwitchLabelRow class="tb-single-switch-label-row">
       <tb-icon *ngIf="showIcon" [style]="iconStyle"
                [style.color]="(disabled || (loading$ | async)) ? disabledColor : settings.iconColor">{{ icon }}</tb-icon>

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

@@ -97,7 +97,7 @@
           <div>{{ widgetButtonStateTranslationMap.get(state) | translate }}</div>
           <tb-widget-button-custom-style
             [state]="state"
-            [appearance]="this.appearanceFormGroup.value"
+            [appearance]="appearanceFormGroup.value"
             [borderRadius]="borderRadius"
             [autoScale]="autoScale"
             [formControlName]="state">

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

@@ -27,7 +27,7 @@
       warning
     </mat-icon>
   </mat-form-field>
-  <tb-material-icon-select formControlName="icon" asBoxInput iconClearButton [color]="this.mapActionButton.get('color').value"></tb-material-icon-select>
+  <tb-material-icon-select formControlName="icon" asBoxInput iconClearButton [color]="mapActionButton.get('color').value"></tb-material-icon-select>
   <tb-color-input formControlName="color" asBoxInput required></tb-color-input>
   <tb-widget-action-settings class="min-w-32" style="flex: 1 1 60%"
                              formControlName="action"

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

@@ -19,7 +19,7 @@
   <div translate>widgets.maps.data-layer.tooltip-tag-actions</div>
   <div class="flex min-w-0 flex-1 flex-row items-center justify-end gap-4 xs:justify-between">
     <mat-chip-listbox class="min-w-0">
-      <mat-chip *ngFor="let action of this.actionsFormGroup.get('actions').value; let $index = index;"
+      <mat-chip *ngFor="let action of actionsFormGroup.get('actions').value; let $index = index;"
                 class="tb-tag-action-chip"
                 [removable]="!disabled" (removed)="removeAction($index)">
         <div class="flex flex-row items-center justify-start gap-1">

ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html

@@ -108,7 +108,7 @@
             color="primary"
             *ngIf="showNext"
             [disabled]="(isLoading$ | async)"
-            (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}</button>
+            (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(selectedIndex+1) | translate)} }}</button>
   </div>
   <mat-divider style="width: 100%"></mat-divider>
   <div class="dialog-actions-row">

ui-ngx/src/app/modules/home/dialogs/events-dialog.component.html

@@ -35,7 +35,7 @@
       [entityId]="data.entityId"
       [functionTestButtonLabel]="data.functionTestButtonLabel ?? ''"
       [disableDebugEventAction]="data.debugActionDisabled"
-      (debugEventSelected)="this.onDebugEventSelected($event)"
+      (debugEventSelected)="onDebugEventSelected($event)"
     />
   </div>
   <div mat-dialog-actions class="justify-end">

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

@@ -89,7 +89,7 @@
                         labelText="{{ 'admin.oauth2.clients' | translate }}"
                         placeholderText="{{ 'admin.oauth2.add-client' | translate }}">
           <button mat-button color="primary" matSuffix
-                  [disabled]="this.oauthForms.get('oauth2ClientIds').disabled"
+                  [disabled]="oauthForms.get('oauth2ClientIds').disabled"
                   (click)="createClient($event)">
             <span style="white-space: nowrap">{{ 'admin.oauth2.create-new' | translate }}</span>
           </button>

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

@@ -130,7 +130,7 @@
           </mat-checkbox>
         </section>
         <div class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-xs:gap-2"
-             *ngIf="!(isAdd && this.entityForm.get('generateChecksum').value)">
+             *ngIf="!(isAdd && entityForm.get('generateChecksum').value)">
           <mat-form-field class="mat-block flex-full gt-xs:max-w-33%">
             <mat-label translate>ota-update.checksum-algorithm</mat-label>
             <mat-select formControlName="checksumAlgorithm">

ui-ngx/src/app/modules/login/pages/login/create-password.component.html

@@ -39,7 +39,7 @@
                  formControlName="newPassword"/>
           <mat-icon class="material-icons" matPrefix>lock</mat-icon>
           <tb-toggle-password matSuffix></tb-toggle-password>
-          <mat-error *ngIf="this.createPassword.get('newPassword').errors">
+          <mat-error *ngIf="createPassword.get('newPassword').errors">
             {{ 'security.password-requirement.password-not-meet-requirements' | translate }}
           </mat-error>
         </mat-form-field>

ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html

@@ -36,7 +36,7 @@
           </mat-error>
         </mat-form-field>
         <div class="flex flex-col items-center justify-start gap-4 gt-xs:flex-row gt-xs:items-start gt-xs:justify-center">
-          <button mat-flat-button color="accent" type="submit" [disabled]="(isLoading$ | async) || this.clicked">
+          <button mat-flat-button color="accent" type="submit" [disabled]="(isLoading$ | async) || clicked">
             {{ 'login.request-password-reset' | translate }}
           </button>
           <button mat-button type="button" [disabled]="(isLoading$ | async)"

ui-ngx/src/app/modules/login/pages/login/reset-password.component.html

@@ -42,7 +42,7 @@
                  formControlName="newPassword"/>
           <mat-icon class="material-icons" matPrefix>lock</mat-icon>
           <tb-toggle-password matSuffix></tb-toggle-password>
-          <mat-error *ngIf="this.resetPassword.get('newPassword').errors">
+          <mat-error *ngIf="resetPassword.get('newPassword').errors">
             {{ 'security.password-requirement.password-not-meet-requirements' | translate }}
           </mat-error>
         </mat-form-field>

ui-ngx/src/app/shared/components/entity/entity-key-autocomplete.component.html

@@ -43,7 +43,7 @@
     @for (key of filteredKeys$ | async; track key) {
       <mat-option [value]="key"><span [innerHTML]="key | highlight: searchText"></span></mat-option>
     } @empty {
-      @if (!this.keyControl.value && enableAutocomplete) {
+      @if (!keyControl.value && enableAutocomplete) {
         <mat-option [value]="''">{{ 'entity.no-keys-found' | translate }}</mat-option>
       }
     }

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

@@ -37,14 +37,14 @@
                             placeholder="{{ 'widget-config.set' | translate }}">
   </tb-resource-autocomplete>
   <div class="tb-form-table-row-cell-buttons">
-    <div [tb-help-popup-async-content]="this.moduleRowFormGroup.get('moduleLink').value ? moduleDescription : null"
+    <div [tb-help-popup-async-content]="moduleRowFormGroup.get('moduleLink').value ? moduleDescription : null"
          tb-help-popup-placement="top"
          [tb-help-popup-style]="{marginTop: '8px'}"
          help-icon-button-class=""
          help-icon="info_outline"
          help-opened-icon="info"
          help-icon-tooltip="{{ 'js-func.show-module-info' | translate }}"></div>
-    <div [tb-help-popup-async-content]="this.moduleRowFormGroup.get('moduleLink').value ? moduleSourceCode : null"
+    <div [tb-help-popup-async-content]="moduleRowFormGroup.get('moduleLink').value ? moduleSourceCode : null"
          tb-help-popup-placement="top"
          [tb-help-popup-style]="{marginTop: '8px'}"
          help-icon-button-class=""

ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html

@@ -39,7 +39,7 @@
                     #packageAutocomplete="matAutocomplete"
                     [displayWith]="displayPackageFn">
     <mat-option *ngFor="let package of filteredPackages | async" [value]="package">
-      <span [innerHTML]="this.packageTitleText(package) | highlight:searchText"></span>
+      <span [innerHTML]="packageTitleText(package) | highlight:searchText"></span>
     </mat-option>
     <mat-option *ngIf="!(filteredPackages | async)?.length" [value]="null" class="tb-not-found">
       <div class="tb-not-found-content" (click)="$event.stopPropagation()">

ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html

@@ -27,8 +27,8 @@
             <mat-slider [min]="minTimeIndex" [max]="maxTimeIndex" #ngSlider><input matSliderThumb [(ngModel)]="index"  (input)="changeIndex({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" />
             </mat-slider>
             <div class="panel-timer">
-                <span *ngIf="this.currentTime">{{ this.currentTime | date:'medium'}}</span>
-                <span *ngIf="!this.currentTime">{{ "widget.no-data-found" | translate}}</span>
+                <span *ngIf="currentTime">{{ currentTime | date:'medium'}}</span>
+                <span *ngIf="!currentTime">{{ "widget.no-data-found" | translate}}</span>
             </div>
         </div>
         <button mat-icon-button class="mat-icon-button" aria-label="Next" (click)="moveNext()">

ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html

@@ -119,17 +119,17 @@
       <mat-step>
         <ng-template matStepLabel>{{ 'action.done' | translate }}</ng-template>
         <div class="flex flex-col">
-          <p class="mat-body-2" *ngIf="this.statistical?.created">
-            {{ translate.instant('import.message.create-entities', {count: this.statistical.created}) }}
+          <p class="mat-body-2" *ngIf="statistical?.created">
+            {{ translate.instant('import.message.create-entities', {count: statistical.created}) }}
           </p>
-          <p class="mat-body-2" *ngIf="this.statistical?.updated">
-            {{ translate.instant('import.message.update-entities', {count: this.statistical.updated}) }}
+          <p class="mat-body-2" *ngIf="statistical?.updated">
+            {{ translate.instant('import.message.update-entities', {count: statistical.updated}) }}
           </p>
-          <p class="mat-body-2" style="margin-bottom: 0.8em" *ngIf="this.statistical?.errors">
-            {{ translate.instant('import.message.error-entities', {count: this.statistical.errors}) }}
+          <p class="mat-body-2" style="margin-bottom: 0.8em" *ngIf="statistical?.errors">
+            {{ translate.instant('import.message.error-entities', {count: statistical.errors}) }}
           </p>
           <mat-expansion-panel class="advanced-logs" [expanded]="false"
-                               *ngIf="this.statistical?.errorsList?.length"
+                               *ngIf="statistical?.errorsList?.length"
                                (opened)="initEditor()">
             <mat-expansion-panel-header [collapsedHeight]="'38px'" [expandedHeight]="'38px'">
               <mat-panel-title>