diff --git a/common/edge-api/src/main/proto/edge.proto b/common/edge-api/src/main/proto/edge.proto
index 48ec26f875..bcea3c30d9 100644
--- a/common/edge-api/src/main/proto/edge.proto
+++ b/common/edge-api/src/main/proto/edge.proto
@@ -48,9 +48,11 @@ enum EdgeVersion {
   V_4_2_1_2 = 14;
   V_4_2_2 = 4220;
   V_4_2_2_1 = 4221;
+  V_4_2_2_2 = 4222;
   V_4_3_0_1 = 15;
   V_4_3_1 = 4310;
   V_4_3_1_1 = 4311;
+  V_4_3_1_2 = 4312;
   V_4_4_0 = 4400;
 
   V_LATEST = 99999;
diff --git a/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html b/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
index 4aafb9b441..6802eaaf8b 100644
--- a/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
@@ -25,9 +25,12 @@
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-</mat-progress-bar>
-<div *ngIf="!(isLoading$ | async)"></div>
+@if (isLoading$ | async) {
+  <mat-progress-bar color="warn" mode="indeterminate">
+  </mat-progress-bar>
+} @else {
+  <div></div>
+}
 <div mat-dialog-content>
   <form [formGroup]="aiModelForms">
     <section class="tb-form-panel outlined no-border no-padding">
@@ -35,12 +38,16 @@
         <mat-label translate>ai-models.name</mat-label>
         <input matInput required formControlName="name">
         <mat-hint></mat-hint>
-        <mat-error *ngIf="aiModelForms.get('name').hasError('required') || aiModelForms.get('name').hasError('pattern')">
-          {{ 'ai-models.name-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="aiModelForms.get('name').hasError('maxlength')">
-          {{ 'ai-models.name-max-length' | translate }}
-        </mat-error>
+        @if (aiModelForms.get('name').hasError('required') || aiModelForms.get('name').hasError('pattern')) {
+          <mat-error>
+            {{ 'ai-models.name-required' | translate }}
+          </mat-error>
+        }
+        @if (aiModelForms.get('name').hasError('maxlength')) {
+          <mat-error>
+            {{ 'ai-models.name-max-length' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
     </section>
     <div formGroupName="configuration" class="tb-form-panel no-border no-padding">
@@ -50,9 +57,11 @@
           <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>ai-models.ai-provider</mat-label>
             <mat-select formControlName="provider">
-              <mat-option *ngFor="let provider of providerMap" [value]="provider">
-                {{providerTranslationMap.get(provider) | translate}}
-              </mat-option>
+              @for (provider of providerMap; track provider) {
+                <mat-option [value]="provider">
+                  {{providerTranslationMap.get(provider) | translate}}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
           <div formGroupName="providerConfig" class="tb-form-panel no-border no-padding no-gap">
@@ -61,30 +70,36 @@
                 <mat-label translate>ai-models.personal-access-token</mat-label>
                 <input type="password" required matInput formControlName="personalAccessToken" autocomplete="new-password">
                 <tb-toggle-password matSuffix></tb-toggle-password>
-                <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.personalAccessToken').hasError('required') ||
-                  aiModelForms.get('configuration.providerConfig.personalAccessToken').hasError('pattern')">
-                  {{ 'ai-models.personal-access-token-required' | translate }}
-                </mat-error>
+                @if (aiModelForms.get('configuration.providerConfig.personalAccessToken').hasError('required') ||
+                  aiModelForms.get('configuration.providerConfig.personalAccessToken').hasError('pattern')) {
+                  <mat-error>
+                    {{ 'ai-models.personal-access-token-required' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             }
             @if (providerFieldsList.includes('projectId')) {
               <mat-form-field class="mat-block flex-1" appearance="outline">
                 <mat-label translate>ai-models.project-id</mat-label>
                 <input matInput required formControlName="projectId">
-                <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.projectId').hasError('required') ||
-                  aiModelForms.get('configuration.providerConfig.projectId').hasError('pattern')">
-                  {{ 'ai-models.project-id-required' | translate }}
-                </mat-error>
+                @if (aiModelForms.get('configuration.providerConfig.projectId').hasError('required') ||
+                  aiModelForms.get('configuration.providerConfig.projectId').hasError('pattern')) {
+                  <mat-error>
+                    {{ 'ai-models.project-id-required' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             }
             @if (providerFieldsList.includes('location')) {
               <mat-form-field class="mat-block flex-1" appearance="outline">
                 <mat-label translate>ai-models.location</mat-label>
                 <input matInput required formControlName="location">
-                <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.location').hasError('required') ||
-                  aiModelForms.get('configuration.providerConfig.location').hasError('pattern')">
-                  {{ 'ai-models.location-required' | translate }}
-                </mat-error>
+                @if (aiModelForms.get('configuration.providerConfig.location').hasError('required') ||
+                  aiModelForms.get('configuration.providerConfig.location').hasError('pattern')) {
+                  <mat-error>
+                    {{ 'ai-models.location-required' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             }
             @if (providerFieldsList.includes('serviceAccountKey')) {
@@ -104,10 +119,12 @@
               <mat-form-field class="mat-block flex-1" appearance="outline">
                 <mat-label translate>ai-models.endpoint</mat-label>
                 <input required matInput formControlName="endpoint">
-                <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.endpoint').hasError('required') ||
-                  aiModelForms.get('configuration.providerConfig.endpoint').hasError('pattern')">
-                  {{ 'ai-models.endpoint-required' | translate }}
-                </mat-error>
+                @if (aiModelForms.get('configuration.providerConfig.endpoint').hasError('required') ||
+                  aiModelForms.get('configuration.providerConfig.endpoint').hasError('pattern')) {
+                  <mat-error>
+                    {{ 'ai-models.endpoint-required' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             }
             @if (providerFieldsList.includes('serviceVersion')) {
@@ -120,10 +137,12 @@
               <mat-form-field class="mat-block flex-1" appearance="outline">
                 <mat-label translate>ai-models.baseurl</mat-label>
                 <input required matInput formControlName="baseUrl">
-                <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.baseUrl').hasError('required') ||
-                  aiModelForms.get('configuration.providerConfig.baseUrl').hasError('pattern')">
-                  {{ 'ai-models.baseurl-required' | translate }}
-                </mat-error>
+                @if (aiModelForms.get('configuration.providerConfig.baseUrl').hasError('required') ||
+                  aiModelForms.get('configuration.providerConfig.baseUrl').hasError('pattern')) {
+                  <mat-error>
+                    {{ 'ai-models.baseurl-required' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             }
             @if (providerFieldsList.includes('apiKey')) {
@@ -131,30 +150,36 @@
                 <mat-label translate>ai-models.api-key</mat-label>
                 <input type="password" matInput formControlName="apiKey" [required]="apiKeyRequired" autocomplete="new-password">
                 <tb-toggle-password matSuffix></tb-toggle-password>
-                <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.apiKey').hasError('required') ||
-                  aiModelForms.get('configuration.providerConfig.apiKey').hasError('pattern')">
-                  {{ ( provider === aiProvider.OPENAI ? 'ai-models.api-key-open-ai-required' : 'ai-models.api-key-required') | translate }}
-                </mat-error>
+                @if (aiModelForms.get('configuration.providerConfig.apiKey').hasError('required') ||
+                  aiModelForms.get('configuration.providerConfig.apiKey').hasError('pattern')) {
+                  <mat-error>
+                    {{ ( provider === aiProvider.OPENAI ? 'ai-models.api-key-open-ai-required' : 'ai-models.api-key-required') | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             }
             @if (providerFieldsList.includes('region')) {
               <mat-form-field class="mat-block flex-1" appearance="outline">
                 <mat-label translate>ai-models.region</mat-label>
                 <input required matInput formControlName="region">
-                <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.region').hasError('required') ||
-                  aiModelForms.get('configuration.providerConfig.region').hasError('pattern')">
-                  {{ 'ai-models.region-required' | translate }}
-                </mat-error>
+                @if (aiModelForms.get('configuration.providerConfig.region').hasError('required') ||
+                  aiModelForms.get('configuration.providerConfig.region').hasError('pattern')) {
+                  <mat-error>
+                    {{ 'ai-models.region-required' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             }
             @if (providerFieldsList.includes('accessKeyId')) {
               <mat-form-field class="mat-block flex-1" appearance="outline">
                 <mat-label translate>ai-models.access-key-id</mat-label>
                 <input required matInput formControlName="accessKeyId">
-                <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.accessKeyId').hasError('required') ||
-                  aiModelForms.get('configuration.providerConfig.accessKeyId').hasError('pattern')">
-                  {{ 'ai-models.access-key-id-required' | translate }}
-                </mat-error>
+                @if (aiModelForms.get('configuration.providerConfig.accessKeyId').hasError('required') ||
+                  aiModelForms.get('configuration.providerConfig.accessKeyId').hasError('pattern')) {
+                  <mat-error>
+                    {{ 'ai-models.access-key-id-required' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             }
             @if (providerFieldsList.includes('secretAccessKey')) {
@@ -162,10 +187,12 @@
                 <mat-label translate>ai-models.secret-access-key</mat-label>
                 <input type="password" required matInput formControlName="secretAccessKey" autocomplete="new-password">
                 <tb-toggle-password matSuffix></tb-toggle-password>
-                <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.secretAccessKey').hasError('required') ||
-                  aiModelForms.get('configuration.providerConfig.secretAccessKey').hasError('pattern')">
-                  {{ 'ai-models.secret-access-key-required' | translate }}
-                </mat-error>
+                @if (aiModelForms.get('configuration.providerConfig.secretAccessKey').hasError('required') ||
+                  aiModelForms.get('configuration.providerConfig.secretAccessKey').hasError('pattern')) {
+                  <mat-error>
+                    {{ 'ai-models.secret-access-key-required' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             }
             @if (provider === aiProvider.OLLAMA) {
@@ -185,19 +212,23 @@
                     <mat-form-field class="mat-block flex-1" appearance="outline">
                       <mat-label translate>ai-models.username</mat-label>
                       <input required matInput formControlName="username">
-                      <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.auth.username').hasError('required') ||
-                        aiModelForms.get('configuration.providerConfig.auth.username').hasError('pattern')">
-                        {{ 'ai-models.username-required' | translate }}
-                      </mat-error>
+                      @if (aiModelForms.get('configuration.providerConfig.auth.username').hasError('required') ||
+                        aiModelForms.get('configuration.providerConfig.auth.username').hasError('pattern')) {
+                        <mat-error>
+                          {{ 'ai-models.username-required' | translate }}
+                        </mat-error>
+                      }
                     </mat-form-field>
                     <mat-form-field class="mat-block flex-1" appearance="outline">
                       <mat-label translate>ai-models.password</mat-label>
                       <input type="password" required matInput formControlName="password" autocomplete="new-password">
                       <tb-toggle-password matSuffix></tb-toggle-password>
-                      <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.auth.password').hasError('required') ||
-                        aiModelForms.get('configuration.providerConfig.auth.password').hasError('pattern')">
-                        {{ 'ai-models.password-required' | translate }}
-                      </mat-error>
+                      @if (aiModelForms.get('configuration.providerConfig.auth.password').hasError('required') ||
+                        aiModelForms.get('configuration.providerConfig.auth.password').hasError('pattern')) {
+                        <mat-error>
+                          {{ 'ai-models.password-required' | translate }}
+                        </mat-error>
+                      }
                     </mat-form-field>
                   }
                   @if (aiModelForms.get('configuration.providerConfig.auth.type').value === AuthenticationType.TOKEN) {
@@ -205,10 +236,12 @@
                       <mat-label translate>ai-models.token</mat-label>
                       <input type="password" required matInput formControlName="token" autocomplete="new-password">
                       <tb-toggle-password matSuffix></tb-toggle-password>
-                      <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.auth.token').hasError('required') ||
-                        aiModelForms.get('configuration.providerConfig.auth.token').hasError('pattern')">
-                        {{ 'ai-models.token-required' | translate }}
-                      </mat-error>
+                      @if (aiModelForms.get('configuration.providerConfig.auth.token').hasError('required') ||
+                        aiModelForms.get('configuration.providerConfig.auth.token').hasError('pattern')) {
+                        <mat-error>
+                          {{ 'ai-models.token-required' | translate }}
+                        </mat-error>
+                      }
                     </mat-form-field>
                   }
                 </div>
@@ -240,14 +273,15 @@
               <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
                 <input matInput formControlName="temperature"
                        type="number" min="0" step="0.1" placeholder="{{ 'ai-models.set' | translate }}">
-                <mat-icon matSuffix
-                          matTooltipPosition="above"
-                          matTooltipClass="tb-error-tooltip"
-                          [matTooltip]="'ai-models.temperature-min' | translate"
-                          *ngIf="aiModelForms.get('configuration').get('temperature').hasError('min')"
-                          class="tb-error">
-                  warning
-                </mat-icon>
+                @if (aiModelForms.get('configuration').get('temperature').hasError('min')) {
+                  <mat-icon matSuffix
+                            matTooltipPosition="above"
+                            matTooltipClass="tb-error-tooltip"
+                            [matTooltip]="'ai-models.temperature-min' | translate"
+                            class="tb-error">
+                    warning
+                  </mat-icon>
+                }
               </mat-form-field>
             </div>
           }
@@ -259,15 +293,16 @@
               <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
                 <input matInput formControlName="topP"
                        type="number" min="0" step="0.1" max="1" placeholder="{{ 'ai-models.set' | translate }}">
-                <mat-icon matSuffix
-                          matTooltipPosition="above"
-                          matTooltipClass="tb-error-tooltip"
-                          [matTooltip]="'ai-models.top-p-min-max' | translate"
-                          *ngIf="aiModelForms.get('configuration').get('topP').hasError('min') ||
-                          aiModelForms.get('configuration').get('topP').hasError('max')"
-                          class="tb-error">
-                  warning
-                </mat-icon>
+                @if (aiModelForms.get('configuration').get('topP').hasError('min') ||
+                  aiModelForms.get('configuration').get('topP').hasError('max')) {
+                  <mat-icon matSuffix
+                            matTooltipPosition="above"
+                            matTooltipClass="tb-error-tooltip"
+                            [matTooltip]="'ai-models.top-p-min-max' | translate"
+                            class="tb-error">
+                    warning
+                  </mat-icon>
+                }
               </mat-form-field>
             </div>
           }
@@ -279,14 +314,15 @@
               <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
                 <input matInput formControlName="topK"
                        type="number" min="0" step="1" placeholder="{{ 'ai-models.set' | translate }}">
-                <mat-icon matSuffix
-                          matTooltipPosition="above"
-                          matTooltipClass="tb-error-tooltip"
-                          [matTooltip]="'ai-models.top-k-min' | translate"
-                          *ngIf="aiModelForms.get('configuration').get('topK').hasError('min')"
-                          class="tb-error">
-                  warning
-                </mat-icon>
+                @if (aiModelForms.get('configuration').get('topK').hasError('min')) {
+                  <mat-icon matSuffix
+                            matTooltipPosition="above"
+                            matTooltipClass="tb-error-tooltip"
+                            [matTooltip]="'ai-models.top-k-min' | translate"
+                            class="tb-error">
+                    warning
+                  </mat-icon>
+                }
               </mat-form-field>
             </div>
           }
diff --git a/ui-ngx/src/app/modules/home/components/ai-model/check-connectivity-dialog.component.html b/ui-ngx/src/app/modules/home/components/ai-model/check-connectivity-dialog.component.html
index 8655789594..28d0fa3904 100644
--- a/ui-ngx/src/app/modules/home/components/ai-model/check-connectivity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/ai-model/check-connectivity-dialog.component.html
@@ -26,25 +26,31 @@
 </mat-toolbar>
 <div mat-dialog-content>
   <div class="flex h-full flex-1 flex-col items-center justify-center">
-    <mat-progress-spinner color="warn" mode="indeterminate"
-                          strokeWidth="5" *ngIf="!showCheckSuccess && !checkErrMsg">
-    </mat-progress-spinner>
-    <div *ngIf="showCheckSuccess">
-      <div class="flex flex-1 items-center justify-center">
-        <mat-icon class="success connection-icon">check_circle</mat-icon>
+    @if (!showCheckSuccess && !checkErrMsg) {
+      <mat-progress-spinner color="warn" mode="indeterminate"
+                            strokeWidth="5">
+      </mat-progress-spinner>
+    }
+    @if (showCheckSuccess) {
+      <div>
+        <div class="flex flex-1 items-center justify-center">
+          <mat-icon class="success connection-icon">check_circle</mat-icon>
+        </div>
+        <span class="connection-status success">{{ "ai-models.check-connectivity-success" | translate }}</span>
       </div>
-      <span class="connection-status success">{{ "ai-models.check-connectivity-success" | translate }}</span>
-    </div>
-    <div *ngIf="checkErrMsg" class="w-full">
-      <div class="flex flex-1 items-center justify-center">
-        <mat-icon class="error connection-icon">cancel</mat-icon>
+    }
+    @if (checkErrMsg) {
+      <div class="w-full">
+        <div class="flex flex-1 items-center justify-center">
+          <mat-icon class="error connection-icon">cancel</mat-icon>
+        </div>
+        <div class="connection-status error">{{ "ai-models.check-connectivity-failed" | translate }}</div>
+        <tb-json-object-edit class="json-editor"
+                             readonly
+                             [ngModel]="checkErrMsg">
+        </tb-json-object-edit>
       </div>
-      <div class="connection-status error">{{ "ai-models.check-connectivity-failed" | translate }}</div>
-      <tb-json-object-edit class="json-editor"
-        readonly
-        [ngModel]="checkErrMsg">
-      </tb-json-object-edit>
-    </div>
+    }
   </div>
 </div>
 <div mat-dialog-actions class="justify-end">
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html
index 27c7ecf63e..48f4e8a5af 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html
@@ -102,9 +102,11 @@
               <mat-icon>delete</mat-icon>
             </button>
           </div>
-          <div *ngIf="!configFormGroup.get('clearRule').value">
-            <span translate class="tb-prompt flex items-center justify-center text-base">alarm-rule.no-clear-alarm-rule</span>
-          </div>
+          @if (!configFormGroup.get('clearRule').value) {
+            <div>
+              <span translate class="tb-prompt flex items-center justify-center text-base">alarm-rule.no-clear-alarm-rule</span>
+            </div>
+          }
           <div [class.!hidden]="configFormGroup.get('clearRule').value">
             <button mat-stroked-button color="primary"
                     [disabled]="disabledClearRuleButton"
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-filter-config.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-filter-config.component.html
index 1382bf014b..929e7d581e 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-filter-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-filter-config.component.html
@@ -15,11 +15,10 @@
     limitations under the License.
 
 -->
-<ng-container *ngIf="panelMode; else componentMode">
+@if (panelMode) {
   <ng-container *ngTemplateOutlet="alarmRuleFilterPanel"></ng-container>
-</ng-container>
-<ng-template #componentMode>
-  <ng-container *ngIf="buttonMode; else alarmFilter">
+} @else {
+  @if (buttonMode) {
     <button color="primary"
             matTooltip="{{buttonDisplayValue}}"
             matTooltipPosition="above"
@@ -27,8 +26,47 @@
             (click)="toggleAlarmRuleFilterPanel($event)">
       <mat-icon>filter_list</mat-icon>{{buttonDisplayValue}}
     </button>
-  </ng-container>
-</ng-template>
+  } @else {
+    <div class="tb-form-panel tb-alarm-filter-config-component no-padding no-border" [formGroup]="alarmRuleFilterConfigForm">
+      <div class="tb-form-row column-xs">
+        <div class="fixed-title-width" translate>alarm-rule.alarm-rule-type-list</div>
+        <tb-entity-subtype-list subscriptSizing="dynamic"
+                                formControlName="name"
+                                appearance="outline"
+                                [additionalClasses]="['tb-chips', 'flex']"
+                                [entityType]="entityType.CALCULATED_FIELD">
+        </tb-entity-subtype-list>
+      </div>
+      <div class="tb-form-row column-xs">
+        <div class="fixed-title-width" translate>entity.entity-type</div>
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="entityType" placeholder="{{ 'alarm-rule.any-type' | translate }}">
+            <mat-option>{{ 'alarm-rule.any-type' | translate }}</mat-option>
+            @for (type of listEntityTypes; track type) {
+              <mat-option [value]="type">
+                {{ entityTypeTranslations.get(type)?.type | translate }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+      @if (alarmRuleFilterConfigForm.get('entityType').value) {
+        <div class="tb-form-row column-xs">
+          <div class="fixed-title-width" translate>entity.entities</div>
+          <tb-entity-list appearance="outline"
+                          subscriptSizing="dynamic"
+                          class="flex flex-1"
+                          inlineField
+                          syncIdsWithDB
+                          labelText="{{'entity.entity-list' | translate}}"
+                          [entityType]="alarmRuleFilterConfigForm.get('entityType').value"
+                          formControlName="entities">
+          </tb-entity-list>
+        </div>
+      }
+    </div>
+  }
+}
 <ng-template #alarmRuleFilterPanel>
   <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="alarmFilter"></ng-container>
@@ -70,9 +108,11 @@
       <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="entityType" placeholder="{{ 'alarm-rule.any-type' | translate }}">
           <mat-option>{{ 'alarm-rule.any-type' | translate }}</mat-option>
-          <mat-option *ngFor="let type of listEntityTypes" [value]="type">
-            {{ entityTypeTranslations.get(type)?.type | translate }}
-          </mat-option>
+          @for (type of listEntityTypes; track type) {
+            <mat-option [value]="type">
+              {{ entityTypeTranslations.get(type)?.type | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rules.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rules.component.html
index c7fd7da063..c883b20693 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rules.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rules.component.html
@@ -15,26 +15,28 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
-  <button mat-raised-button color="primary"
-          [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'open')"
-          [class.!hidden]="isEdit || isDetailsPage">
-    {{ 'common.open-details-page' | translate }}
-  </button>
-  <button mat-raised-button color="primary"
-          [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'export')"
-          [class.!hidden]="isEdit">
-    {{ 'action.export' | translate }}
-  </button>
-  <button mat-raised-button color="primary"
-          [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'delete')"
-          [class.!hidden]="hideDelete() || isEdit">
-    {{ 'action.delete' | translate }}
-  </button>
-</div>
+@if (!standalone) {
+  <div class="tb-details-buttons xs:flex xs:flex-col">
+    <button mat-raised-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'open')"
+            [class.!hidden]="isEdit || isDetailsPage">
+      {{ 'common.open-details-page' | translate }}
+    </button>
+    <button mat-raised-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'export')"
+            [class.!hidden]="isEdit">
+      {{ 'action.export' | translate }}
+    </button>
+    <button mat-raised-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'delete')"
+            [class.!hidden]="hideDelete() || isEdit">
+      {{ 'action.delete' | translate }}
+    </button>
+  </div>
+}
 <div class="mat-padding flex flex-1 flex-col" [formGroup]="entityForm">
   <div class="tb-form-panel no-border no-padding">
     <div class="tb-form-panel no-gap">
@@ -55,11 +57,11 @@
           <mat-hint></mat-hint>
         </mat-form-field>
         <tb-entity-debug-settings-button
-            formControlName="debugSettings"
-            style="margin-bottom: 22px"
-            [entityType]="EntityType.CALCULATED_FIELD"
-            [additionalActionConfig]="additionalDebugActionConfig"
-        />
+          formControlName="debugSettings"
+          style="margin-bottom: 22px"
+          [entityType]="EntityType.CALCULATED_FIELD"
+          [additionalActionConfig]="additionalDebugActionConfig"
+          />
       </div>
       <tb-entity-select formControlName="entityId"
                         appearance="outline"
@@ -107,9 +109,11 @@
             </button>
           }
         </div>
-        <div *ngIf="!configFormGroup.get('clearRule').value">
-          <span translate class="tb-prompt flex items-center justify-center text-base">alarm-rule.no-clear-alarm-rule</span>
-        </div>
+        @if (!configFormGroup.get('clearRule').value) {
+          <div>
+            <span translate class="tb-prompt flex items-center justify-center text-base">alarm-rule.no-clear-alarm-rule</span>
+          </div>
+        }
         <div [class.!hidden]="configFormGroup.get('clearRule').value">
           <button mat-stroked-button color="primary"
                   [disabled]="!isEditValue"
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html
index e1f1eed67c..3426347595 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html
@@ -119,16 +119,18 @@
               </mat-expansion-panel>
             </div>
           }
+        </div>
       </div>
-    </div>
 
       <section class="tb-form-panel stroked">
         <div class="flex flex-row items-center justify-between">
           <div class="tb-form-panel-title">{{ 'alarm-rule.type' | translate }}</div>
           <tb-toggle-select formControlName="type" selectMediaBreakpoint="xs">
-            <tb-toggle-option *ngFor="let alarmConditionType of alarmConditionTypes" [value]="alarmConditionType">
-              {{ alarmConditionTypeTranslation.get(alarmConditionType) | translate }}
-            </tb-toggle-option>
+            @for (alarmConditionType of alarmConditionTypes; track alarmConditionType) {
+              <tb-toggle-option [value]="alarmConditionType">
+                {{ alarmConditionTypeTranslation.get(alarmConditionType) | translate }}
+              </tb-toggle-option>
+            }
           </tb-toggle-select>
         </div>
         @if (isNoData) {
@@ -157,13 +159,17 @@
                 <mat-form-field class="mat-block" appearance="outline">
                   <mat-select formControlName="unit" required
                               placeholder="{{ 'alarm-rule.condition-duration-time-unit' | translate }}">
-                    <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
-                      {{ timeUnitTranslations.get(timeUnit) | translate }}
-                    </mat-option>
+                    @for (timeUnit of timeUnits; track timeUnit) {
+                      <mat-option [value]="timeUnit">
+                        {{ timeUnitTranslations.get(timeUnit) | translate }}
+                      </mat-option>
+                    }
                   </mat-select>
-                  <mat-error *ngIf="conditionFormGroup.get('unit').hasError('required')">
-                    {{ 'alarm-rule.condition-duration-time-unit-required' | translate }}
-                  </mat-error>
+                  @if (conditionFormGroup.get('unit').hasError('required')) {
+                    <mat-error>
+                      {{ 'alarm-rule.condition-duration-time-unit-required' | translate }}
+                    </mat-error>
+                  }
                 </mat-form-field>
               </div>
             </div>
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule.component.html
index f1d3ae9277..8858198d34 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule.component.html
@@ -41,10 +41,12 @@
           @if (alarmScheduleForm.get('staticValue.type').value === alarmScheduleType.SPECIFIC_TIME) {
             <section>
               <mat-chip-listbox multiple formControlName="daysOfWeek">
-                <mat-chip-option *ngFor="let day of allDays; let i = index;"
-                                 [value]="i+1">
-                  {{ dayOfWeekTranslationsArray[day] | translate }}
-                </mat-chip-option>
+                @for (day of allDays; track day; let i = $index) {
+                  <mat-chip-option
+                    [value]="i+1">
+                    {{ dayOfWeekTranslationsArray[day] | translate }}
+                  </mat-chip-option>
+                }
               </mat-chip-listbox>
               <tb-error class="mb-2 block" [error]="alarmScheduleForm.get('staticValue.daysOfWeek').hasError('required')
                     ? ('alarm-rule.schedule-days-of-week-required' | translate) : ''"></tb-error>
@@ -71,30 +73,32 @@
           }
           @if (alarmScheduleForm.get('staticValue.type').value === alarmScheduleType.CUSTOM) {
             <section class="flex flex-col gap-4">
-              <div *ngFor="let day of allDays" class="flex flex-col gap-4" formArrayName="items">
-                <div class="flex flex-row items-center justify-start gap-2 xs:flex-col xs:items-start xs:justify-center" [formGroupName]="''+day">
-                  <mat-chip-listbox formControlName="enabled">
-                    <mat-chip-option  class="w-32" color="primary" (selectionChange)="changeCustomScheduler($event, day)" [value]="true">{{ dayOfWeekTranslationsArray[day] | translate }}</mat-chip-option>
-                  </mat-chip-listbox>
-                  <div class="flex flex-1 flex-row gap-2">
-                    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-                      <mat-label translate>alarm-rule.schedule-time-from</mat-label>
-                      <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
-                      <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
-                      <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
-                    </mat-form-field>
-                    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-                      <mat-label translate>alarm-rule.schedule-time-to</mat-label>
-                      <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
-                      <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
-                      <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
-                    </mat-form-field>
-                  </div>
-                  <div class="flex flex-1 items-center justify-center text-center sm:max-w-[120px]"
-                       [innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(day))">
+              @for (day of allDays; track day) {
+                <div class="flex flex-col gap-4" formArrayName="items">
+                  <div class="flex flex-row items-center justify-start gap-2 xs:flex-col xs:items-start xs:justify-center" [formGroupName]="''+day">
+                    <mat-chip-listbox formControlName="enabled">
+                      <mat-chip-option  class="w-32" color="primary" (selectionChange)="changeCustomScheduler($event, day)" [value]="true">{{ dayOfWeekTranslationsArray[day] | translate }}</mat-chip-option>
+                    </mat-chip-listbox>
+                    <div class="flex flex-1 flex-row gap-2">
+                      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+                        <mat-label translate>alarm-rule.schedule-time-from</mat-label>
+                        <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
+                        <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
+                        <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
+                      </mat-form-field>
+                      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+                        <mat-label translate>alarm-rule.schedule-time-to</mat-label>
+                        <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
+                        <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
+                        <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
+                      </mat-form-field>
+                    </div>
+                    <div class="flex flex-1 items-center justify-center text-center sm:max-w-[120px]"
+                         [innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(day))">
+                    </div>
                   </div>
                 </div>
-              </div>
+              }
               <tb-error class="block" [error]="alarmScheduleForm.get('staticValue.items').hasError('dayOfWeeks')
                     ? ('alarm-rule.schedule-days-of-week-required' | translate) : ''"></tb-error>
             </section>
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/create-cf-alarm-rules.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/create-cf-alarm-rules.component.html
index 18ac406c97..bcf044e998 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/create-cf-alarm-rules.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/create-cf-alarm-rules.component.html
@@ -26,30 +26,34 @@
             <mat-select formControlName="severity"
                         required
                         placeholder="{{ 'alarm-rule.select-alarm-severity' | translate }}">
-              <mat-option *ngFor="let alarmSeverity of alarmSeverities" [value]="alarmSeverity"
-                          [disabled]="isDisabledSeverity(alarmSeverityEnum[alarmSeverity], index)">
-                {{ alarmSeverityTranslationMap.get(alarmSeverityEnum[alarmSeverity]) | translate }}
-              </mat-option>
+              @for (alarmSeverity of alarmSeverities; track alarmSeverity) {
+                <mat-option [value]="alarmSeverity"
+                            [disabled]="isDisabledSeverity(alarmSeverityEnum[alarmSeverity], index)">
+                  {{ alarmSeverityTranslationMap.get(alarmSeverityEnum[alarmSeverity]) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
         <tb-cf-alarm-rule formControlName="alarmRule" [arguments]="arguments" [testScript]="testScript" required class="flex-1">
         </tb-cf-alarm-rule>
       </div>
-      <button *ngIf="!disabled"
-              class="button-icon"
-              mat-icon-button
-              type="button"
-              (click)="removeCreateAlarmRule(index)"
-              matTooltip="{{ 'action.remove' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>delete</mat-icon>
-      </button>
+      @if (!disabled) {
+        <button
+          class="button-icon"
+          mat-icon-button
+          type="button"
+          (click)="removeCreateAlarmRule(index)"
+          matTooltip="{{ 'action.remove' | translate }}"
+          matTooltipPosition="above">
+          <mat-icon>delete</mat-icon>
+        </button>
+      }
     </div>
   }
   @if (!createAlarmRulesFormArray().controls.length) {
     <span translate class="tb-prompt required flex items-center justify-center text-base" [class.required]="!disabled">
-        alarm-rule.add-create-alarm-rule-prompt
+      alarm-rule.add-create-alarm-rule-prompt
     </span>
   }
   <div>
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.html
index 8f6cd68c6a..2d971f98ab 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.html
@@ -53,14 +53,18 @@
                 <mat-icon class="tb-mat-18" svgIcon="{{ entityKeyValueTypes.get(filterFormGroup.get('valueType').value)?.icon }}"></mat-icon>
                 <span>{{ entityKeyValueTypes.get(filterFormGroup.get('valueType').value)?.name | translate }}</span>
               </mat-select-trigger>
-              <mat-option *ngFor="let valueType of entityKeyValueTypesKeys" [value]="valueType">
-                <mat-icon class="tb-mat-18" svgIcon="{{ entityKeyValueTypes.get(entityKeyValueTypeEnum[valueType]).icon }}"></mat-icon>
-                <span>{{ entityKeyValueTypes.get(entityKeyValueTypeEnum[valueType]).name | translate }}</span>
-              </mat-option>
+              @for (valueType of entityKeyValueTypesKeys; track valueType) {
+                <mat-option [value]="valueType">
+                  <mat-icon class="tb-mat-18" svgIcon="{{ entityKeyValueTypes.get(entityKeyValueTypeEnum[valueType]).icon }}"></mat-icon>
+                  <span>{{ entityKeyValueTypes.get(entityKeyValueTypeEnum[valueType]).name | translate }}</span>
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="filterFormGroup.get('valueType').hasError('required')">
-              {{ 'filter.value-type-required' | translate }}
-            </mat-error>
+            @if (filterFormGroup.get('valueType').hasError('required')) {
+              <mat-error>
+                {{ 'filter.value-type-required' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </section>
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate-no-data-value.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate-no-data-value.component.html
index 09b468aeb9..b5206437c9 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate-no-data-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate-no-data-value.component.html
@@ -28,15 +28,15 @@
         <mat-form-field hideRequiredMarker class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input required type="number" matInput formControlName="staticValue" min="1"
                  placeholder="{{'filter.value' | translate}}">
-            @if (filterPredicateValueNoDataFormGroup.get('duration.staticValue').touched && filterPredicateValueNoDataFormGroup.get('duration.staticValue').errors) {
-              <mat-icon matSuffix
-                        matTooltipPosition="above"
-                        matTooltipClass="tb-error-tooltip"
-                        [matTooltip]="(filterPredicateValueNoDataFormGroup.get('duration.staticValue').hasError('required') ? 'alarm-rule.value-required' : 'alarm-rule.min-value') | translate"
-                        class="tb-error">
-                warning
-              </mat-icon>
-            }
+          @if (filterPredicateValueNoDataFormGroup.get('duration.staticValue').touched && filterPredicateValueNoDataFormGroup.get('duration.staticValue').errors) {
+            <mat-icon matSuffix
+                      matTooltipPosition="above"
+                      matTooltipClass="tb-error-tooltip"
+                      [matTooltip]="(filterPredicateValueNoDataFormGroup.get('duration.staticValue').hasError('required') ? 'alarm-rule.value-required' : 'alarm-rule.min-value') | translate"
+                      class="tb-error">
+              warning
+            </mat-icon>
+          }
         </mat-form-field>
       } @else {
         <mat-form-field class="w-full flex-1" appearance="outline" subscriptSizing="dynamic">
@@ -68,9 +68,11 @@
     </ng-container>
     <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="unit" required placeholder="{{'alarm-rule.time-unit' | translate}}">
-        <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
-          {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
-        </mat-option>
+        @for (timeUnit of timeUnits; track timeUnit) {
+          <mat-option [value]="timeUnit">
+            {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate.component.html
index 273535d394..904e115225 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate.component.html
@@ -22,9 +22,11 @@
         <div class="tb-form-row no-padding no-border column-xs flex-1/ w-full max-w-30% xs:max-w-full">
           <mat-form-field hideRequiredMarker class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
-              <mat-option *ngFor="let operation of stringOperations" [value]="operation">
-                {{stringOperationTranslationMap.get(stringOperation[operation]) | translate}}
-              </mat-option>
+              @for (operation of stringOperations; track operation) {
+                <mat-option [value]="operation">
+                  {{stringOperationTranslationMap.get(stringOperation[operation]) | translate}}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
           @if (filterPredicateFormGroup.get('operation').value !== stringOperation.NO_DATA) {
@@ -38,9 +40,11 @@
         <div class="tb-form-row no-border no-padding no-border w-full max-w-30%">
           <mat-form-field hideRequiredMarker class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
-              <mat-option *ngFor="let operation of numericOperations" [value]="operation">
-                {{numericOperationTranslations.get(numericOperationEnum[operation]) | translate}}
-              </mat-option>
+              @for (operation of numericOperations; track operation) {
+                <mat-option [value]="operation">
+                  {{numericOperationTranslations.get(numericOperationEnum[operation]) | translate}}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -49,9 +53,11 @@
         <div class="tb-form-row no-border no-padding no-border w-full max-w-30%">
           <mat-form-field hideRequiredMarker class="flex-1"  appearance="outline" subscriptSizing="dynamic">
             <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
-              <mat-option *ngFor="let operation of booleanOperations" [value]="operation">
-                {{booleanOperationTranslations.get(booleanOperationEnum[operation]) | translate}}
-              </mat-option>
+              @for (operation of booleanOperations; track operation) {
+                <mat-option [value]="operation">
+                  {{booleanOperationTranslations.get(booleanOperationEnum[operation]) | translate}}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html
index c0f983e6d0..7adea3ffc1 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html
@@ -26,32 +26,42 @@
                     #userAutocomplete="matAutocomplete"
                     [displayWith]="displayUserFn"
                     (optionSelected)="selected($event)">
-    <mat-option *ngIf="displayAssigneeNotSet" [value]="assigneeOptions.noAssignee">
-      <mat-icon class="unassigned-icon">account_circle</mat-icon>
-      <span>{{ assigneeNotSetText | translate }}</span>
-    </mat-option>
-    <mat-option *ngIf="displayAssignedToCurrentUser" [value]="assigneeOptions.currentUser">
-      <mat-icon class="unassigned-icon">account_circle</mat-icon>
-      <span>{{ assignedToCurrentUserText | translate }}</span>
-    </mat-option>
-    <mat-option *ngFor="let user of filteredUsers | async" [value]="user"
-                [class.!hidden]="assigneeId === user.id.id">
-      <span class="user-avatar" [innerHTML]="getUserInitials(user)"
-            [style.background-color]="getAvatarBgColor(user)">
-      </span>
-      <div class="user-display-name flex flex-col gap-0.5">
-        <span *ngIf="user.firstName || user.lastName"
-              [innerHTML]="getFullName(user) | highlight:searchText"></span>
-        <span [innerHTML]="user.email | highlight:searchText"></span>
-      </div>
-    </mat-option>
-    <mat-option *ngIf="!(filteredUsers | async)?.length" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <span style="white-space: normal">
-            {{ translate.get('user.no-users-matching', {entity: searchText}) | async }}
+    @if (displayAssigneeNotSet) {
+      <mat-option [value]="assigneeOptions.noAssignee">
+        <mat-icon class="unassigned-icon">account_circle</mat-icon>
+        <span>{{ assigneeNotSetText | translate }}</span>
+      </mat-option>
+    }
+    @if (displayAssignedToCurrentUser) {
+      <mat-option [value]="assigneeOptions.currentUser">
+        <mat-icon class="unassigned-icon">account_circle</mat-icon>
+        <span>{{ assignedToCurrentUserText | translate }}</span>
+      </mat-option>
+    }
+    @for (user of filteredUsers | async; track user) {
+      <mat-option [value]="user"
+                  [class.!hidden]="assigneeId === user.id.id">
+        <span class="user-avatar" [innerHTML]="getUserInitials(user)"
+              [style.background-color]="getAvatarBgColor(user)">
         </span>
-      </div>
-    </mat-option>
+        <div class="user-display-name flex flex-col gap-0.5">
+          @if (user.firstName || user.lastName) {
+            <span
+            [innerHTML]="getFullName(user) | highlight:searchText"></span>
+          }
+          <span [innerHTML]="user.email | highlight:searchText"></span>
+        </div>
+      </mat-option>
+    }
+    @if (!(filteredUsers | async)?.length) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          <span style="white-space: normal">
+            {{ translate.get('user.no-users-matching', {entity: searchText}) | async }}
+          </span>
+        </div>
+      </mat-option>
+    }
   </mat-autocomplete>
 </mat-form-field>
 
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html
index 8367d0eb4a..6148e955ad 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html
@@ -19,13 +19,21 @@
   <mat-form-field [style]="inline ? {width: '100%'} : {marginBottom: '25px'}"
                   (click)="openAlarmAssigneeSelectPanel($event)"
                   subscriptSizing="dynamic" [appearance]="inline ? 'outline' : 'fill'">
-    <mat-label *ngIf="!inline" translate>alarm.assignee</mat-label>
+    @if (!inline) {
+      <mat-label translate>alarm.assignee</mat-label>
+    }
     <input matInput readonly formControlName="assignee">
-    <span *ngIf="assignee" matPrefix class="user-avatar" [class.inline-icon]="inline"
-          [style.background-color]="getAvatarBgColor()">
-      {{ getUserInitials() }}
-    </span>
-    <mat-icon *ngIf="!assignee" matPrefix class="unassigned-icon" [class.inline-icon]="inline">account_circle</mat-icon>
-    <mat-icon *ngIf="!disabled" matSuffix>arrow_drop_down</mat-icon>
+    @if (assignee) {
+      <span matPrefix class="user-avatar" [class.inline-icon]="inline"
+            [style.background-color]="getAvatarBgColor()">
+        {{ getUserInitials() }}
+      </span>
+    }
+    @if (!assignee) {
+      <mat-icon matPrefix class="unassigned-icon" [class.inline-icon]="inline">account_circle</mat-icon>
+    }
+    @if (!disabled) {
+      <mat-icon matSuffix>arrow_drop_down</mat-icon>
+    }
   </mat-form-field>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html
index 783a763031..a566e9afb7 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html
@@ -20,12 +20,13 @@
                 subscriptSizing="dynamic">
   <mat-label translate>alarm.assignee</mat-label>
   <input matInput readonly [value]="getAssignee()">
-  <span *ngIf="userAssigned; else unassigned" matPrefix class="user-avatar"
-        [style.background-color]="getAvatarBgColor(alarm.assignee)">
-    {{ getUserInitials(alarm.assignee) }}
-  </span>
-  <ng-template #unassigned>
+  @if (userAssigned) {
+    <span matPrefix class="user-avatar"
+          [style.background-color]="getAvatarBgColor(alarm.assignee)">
+      {{ getUserInitials(alarm.assignee) }}
+    </span>
+  } @else {
     <mat-icon matPrefix class="material-icons unassigned-icon">{{ alarm?.assigneeId ? 'no_accounts' : 'account_circle' }}</mat-icon>
-  </ng-template>
+  }
   <mat-icon matSuffix>arrow_drop_down</mat-icon>
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
index 651a1dd186..a5935e1f2b 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
@@ -22,9 +22,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content style="padding: 0">
     <tb-alarm-comment [alarmId]="alarmId"
                       [alarmActivityOnly]="true">
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
index 25db54641d..31bf4dda43 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
@@ -49,104 +49,110 @@
     </div>
   </div>
   <div class="flex flex-col">
-    <ng-container *ngIf="!isDirectionAscending()">
+    @if (!isDirectionAscending()) {
       <ng-container *ngTemplateOutlet="commentInput"></ng-container>
-    </ng-container>
+    }
     <div class="comments-container flex flex-col gap-3" style="padding: 24px"
          [class.asc]="isDirectionAscending()"
          [class.activity-only]="alarmActivityOnly">
-      <div class="flex-1" *ngFor="let displayDataElement of displayData; index as i">
-        <div class="system-comment" *ngIf="displayDataElement.isSystemComment; else userComment">
-          <span class="system-text" style="margin-right: 8px">
-            {{ displayDataElement.commentText }}
-          </span>
-          <span class="time" style="padding: 3px"
-                [matTooltip]="displayDataElement.createdTime"
-                matTooltipPosition="right">
-            {{ displayDataElement.createdDateAgo }}
-          </span>
-        </div>
-        <ng-template #userComment>
-          <div class="user-comment flex flex-row items-center justify-start gap-2"
-               *ngIf="!displayDataElement.edit; else commentEditing"
-               (mouseenter)="onCommentMouseEnter(displayDataElement.commentId, i)"
-               (mouseleave)="onCommentMouseLeave(i)">
-            <div *ngIf="displayDataElement.userExists; else userDeleted"
-                 class="user-avatar flex flex-row items-center justify-center self-start xs:!hidden"
-                 [style.background-color]="displayDataElement.avatarBgColor">
-              {{ getUserInitials(displayDataElement.displayName) }}
-            </div>
-            <ng-template #userDeleted>
-              <mat-icon class="mat-icon tb-mat-28 xs:!hidden">no_accounts</mat-icon>
-            </ng-template>
-            <div class="flex flex-1 flex-col" style="gap: 5px">
-              <div class="flex flex-row items-center justify-start gap-2">
-                <span class="user-name">{{ displayDataElement.displayName }}</span>
-                <span class="time"
-                      [matTooltip]="displayDataElement.createdTime"
-                      matTooltipPosition="right">
-                  {{ displayDataElement.createdDateAgo }}
-                </span>
-                <span class="time" *ngIf="displayDataElement.isEdited"
-                      matTooltip="{{ displayDataElement.editedDateAgo }} {{ displayDataElement.editedTime }}"
-                      matTooltipPosition="right">
-                  Edited
-                </span>
-              </div>
-              <span class="text">{{ displayDataElement.commentText }}</span>
-            </div>
-            <div class="action-buttons flex flex-row xs:flex-col"
-                 [class.show-buttons]="displayDataElement.showActions">
-              <button mat-icon-button
-                      type="button"
-                      (click)="editComment(displayDataElement.commentId)">
-                <mat-icon class="material-icons">edit</mat-icon>
-              </button>
-              <button mat-icon-button
-                      type="button"
-                      (click)="deleteComment(displayDataElement.commentId)">
-                <mat-icon class="material-icons">delete</mat-icon>
-              </button>
+      @for (displayDataElement of displayData; track displayDataElement; let i = $index) {
+        <div class="flex-1">
+          @if (displayDataElement.isSystemComment) {
+            <div class="system-comment">
+              <span class="system-text" style="margin-right: 8px">
+                {{ displayDataElement.commentText }}
+              </span>
+              <span class="time" style="padding: 3px"
+                    [matTooltip]="displayDataElement.createdTime"
+                    matTooltipPosition="right">
+                {{ displayDataElement.createdDateAgo }}
+              </span>
             </div>
-          </div>
-          <ng-template #commentEditing>
-            <div class="flex flex-row items-center justify-start gap-2">
-              <div class="user-avatar flex flex-row items-center justify-center"
-                   [style.background-color]="displayDataElement.avatarBgColor">
-                {{ getUserInitials(displayDataElement.displayName) }}
-              </div>
-              <mat-form-field class="mat-block tb-appearance-transparent flex-1">
-                <textarea matInput
-                          type="text"
-                          placeholder="{{ 'alarm-activity.add' | translate }}"
-                          cdkTextareaAutosize
-                          cdkAutosizeMinRows="1"
-                          cols="1"
-                          formControlName="alarmCommentEdit"
-                          (keyup.enter)="saveEditedComment(displayDataElement.commentId)"
-                          (keydown.enter)="$event.preventDefault()">
-                </textarea>
-                <div matSuffix class="flex flex-row">
+          } @else {
+            @if (!displayDataElement.edit) {
+              <div class="user-comment flex flex-row items-center justify-start gap-2"
+                   (mouseenter)="onCommentMouseEnter(displayDataElement.commentId, i)"
+                   (mouseleave)="onCommentMouseLeave(i)">
+                @if (displayDataElement.userExists) {
+                  <div
+                    class="user-avatar flex flex-row items-center justify-center self-start xs:!hidden"
+                    [style.background-color]="displayDataElement.avatarBgColor">
+                    {{ getUserInitials(displayDataElement.displayName) }}
+                  </div>
+                } @else {
+                  <mat-icon class="mat-icon tb-mat-28 xs:!hidden">no_accounts</mat-icon>
+                }
+                <div class="flex flex-1 flex-col" style="gap: 5px">
+                  <div class="flex flex-row items-center justify-start gap-2">
+                    <span class="user-name">{{ displayDataElement.displayName }}</span>
+                    <span class="time"
+                          [matTooltip]="displayDataElement.createdTime"
+                          matTooltipPosition="right">
+                      {{ displayDataElement.createdDateAgo }}
+                    </span>
+                    @if (displayDataElement.isEdited) {
+                      <span class="time"
+                            matTooltip="{{ displayDataElement.editedDateAgo }} {{ displayDataElement.editedTime }}"
+                            matTooltipPosition="right">
+                        Edited
+                      </span>
+                    }
+                  </div>
+                  <span class="text">{{ displayDataElement.commentText }}</span>
+                </div>
+                <div class="action-buttons flex flex-row xs:flex-col"
+                     [class.show-buttons]="displayDataElement.showActions">
                   <button mat-icon-button
-                          (click)="cancelEdit(displayDataElement.commentId)"
-                          type="button">
-                    <mat-icon class="material-icons red-button">close</mat-icon>
+                          type="button"
+                          (click)="editComment(displayDataElement.commentId)">
+                    <mat-icon class="material-icons">edit</mat-icon>
                   </button>
                   <button mat-icon-button
                           type="button"
-                          (click)="saveEditedComment(displayDataElement.commentId)">
-                    <mat-icon class="material-icons green-button">check</mat-icon>
+                          (click)="deleteComment(displayDataElement.commentId)">
+                    <mat-icon class="material-icons">delete</mat-icon>
                   </button>
                 </div>
-              </mat-form-field>
-            </div>
-          </ng-template>
-        </ng-template>
-      </div>
+              </div>
+            } @else {
+              <div class="flex flex-row items-center justify-start gap-2">
+                <div class="user-avatar flex flex-row items-center justify-center"
+                     [style.background-color]="displayDataElement.avatarBgColor">
+                  {{ getUserInitials(displayDataElement.displayName) }}
+                </div>
+                <mat-form-field class="mat-block tb-appearance-transparent flex-1">
+                  <textarea matInput
+                            type="text"
+                            placeholder="{{ 'alarm-activity.add' | translate }}"
+                            cdkTextareaAutosize
+                            cdkAutosizeMinRows="1"
+                            cols="1"
+                            formControlName="alarmCommentEdit"
+                            (keyup.enter)="saveEditedComment(displayDataElement.commentId)"
+                            (keydown.enter)="$event.preventDefault()">
+                  </textarea>
+                  <div matSuffix class="flex flex-row">
+                    <button mat-icon-button
+                            (click)="cancelEdit(displayDataElement.commentId)"
+                            type="button">
+                      <mat-icon class="material-icons red-button">close</mat-icon>
+                    </button>
+                    <button mat-icon-button
+                            type="button"
+                            (click)="saveEditedComment(displayDataElement.commentId)">
+                      <mat-icon class="material-icons green-button">check</mat-icon>
+                    </button>
+                  </div>
+                </mat-form-field>
+              </div>
+            }
+          }
+        </div>
+      }
     </div>
-    <ng-container *ngIf="isDirectionAscending()">
+    @if (isDirectionAscending()) {
       <ng-container *ngTemplateOutlet="commentInput"></ng-container>
-    </ng-container>
+    }
   </div>
   <ng-template #commentInput>
     <div style="background-color: white" class="comment-input"
@@ -154,11 +160,12 @@
          [class.oldest-first]="isDirectionAscending()"
          [class.activity-only]="alarmActivityOnly">
       <div class="inner-wrap flex flex-row items-center justify-start gap-2">
-        <div class="user-avatar flex flex-row items-center justify-center"
-             *ngIf="userDisplayName$ | async; let userDisplayName"
-             [style.background-color]="getCurrentUserBgColor(userDisplayName)">
-          {{ getUserInitials(userDisplayName) }}
-        </div>
+        @if (userDisplayName$ | async; as userDisplayName) {
+          <div class="user-avatar flex flex-row items-center justify-center"
+               [style.background-color]="getCurrentUserBgColor(userDisplayName)">
+            {{ getUserInitials(userDisplayName) }}
+          </div>
+        }
         <mat-form-field class="mat-block tb-appearance-transparent flex-1">
           <textarea matInput
                     type="text"
@@ -170,15 +177,16 @@
                     (keyup.enter)="saveComment()"
                     (keydown.enter)="$event.preventDefault()">
           </textarea>
-          <button mat-icon-button
-                  type="button"
-                  matSuffix
-                  *ngIf="getAlarmCommentValue()"
-                  (click)="saveComment()">
-            <mat-icon color="primary">
-              send
-            </mat-icon>
-          </button>
+          @if (getAlarmCommentValue()) {
+            <button mat-icon-button
+                    type="button"
+                    matSuffix
+                    (click)="saveComment()">
+              <mat-icon color="primary">
+                send
+              </mat-icon>
+            </button>
+          }
         </mat-form-field>
       </div>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
index dbf649ec37..a47de5b3f7 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
@@ -25,9 +25,13 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
+  @if ((isLoading$ | async) === false) {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async" style="margin-bottom: 22px">
       <div class="flex flex-row gap-1.5">
@@ -43,14 +47,18 @@
         </mat-form-field>
       </div>
       <div class="flex flex-row gap-1.5">
-        <mat-form-field *ngIf="alarmFormGroup.get('startTime').value" class="mat-block flex-1">
-          <mat-label translate>alarm.start-time</mat-label>
-          <input matInput formControlName="startTime" readonly>
-        </mat-form-field>
-        <mat-form-field *ngIf="alarmFormGroup.get('duration').value" class="mat-block flex-1">
-          <mat-label translate>alarm.duration</mat-label>
-          <input matInput formControlName="duration" readonly>
-        </mat-form-field>
+        @if (alarmFormGroup.get('startTime').value) {
+          <mat-form-field class="mat-block flex-1">
+            <mat-label translate>alarm.start-time</mat-label>
+            <input matInput formControlName="startTime" readonly>
+          </mat-form-field>
+        }
+        @if (alarmFormGroup.get('duration').value) {
+          <mat-form-field class="mat-block flex-1">
+            <mat-label translate>alarm.duration</mat-label>
+            <input matInput formControlName="duration" readonly>
+          </mat-form-field>
+        }
       </div>
       <div class="flex flex-row gap-1.5">
         <mat-form-field class="mat-block flex-1">
@@ -71,12 +79,13 @@
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <tb-json-object-edit
-            *ngIf="displayDetails"
-            formControlName="alarmDetails"
-            readonly
-            label="{{ 'alarm.additional-info' | translate }}">
-          </tb-json-object-edit>
+          @if (displayDetails) {
+            <tb-json-object-edit
+              formControlName="alarmDetails"
+              readonly
+              label="{{ 'alarm.additional-info' | translate }}">
+            </tb-json-object-edit>
+          }
         </ng-template>
       </mat-expansion-panel>
     </fieldset>
@@ -88,25 +97,31 @@
   </div>
   <div mat-dialog-actions class="flex flex-row">
     <span class="flex-1"></span>
-    <div class="flex flex-row gap-2" *ngIf="alarm$ | async; let alarm;">
-      <button *ngIf="allowAcknowledgment && (alarm.status === alarmStatuses.ACTIVE_UNACK ||
-                                             alarm.status === alarmStatuses.CLEARED_UNACK)"
-              mat-raised-button
-              color="primary"
-              type="button"
-              (click)="acknowledge()"
-              [disabled]="(isLoading$ | async)">
-        {{ 'alarm.acknowledge' | translate }}
-      </button>
-      <button *ngIf="allowClear && (alarm.status === alarmStatuses.ACTIVE_ACK ||
-                                    alarm.status === alarmStatuses.ACTIVE_UNACK)"
-              mat-raised-button
-              color="primary"
-              type="button"
-              (click)="clear()"
-              [disabled]="(isLoading$ | async)">
-        {{ 'alarm.clear' | translate }}
-      </button>
-    </div>
+    @if (alarm$ | async; as alarm;) {
+      <div class="flex flex-row gap-2">
+        @if (allowAcknowledgment && (alarm.status === alarmStatuses.ACTIVE_UNACK ||
+          alarm.status === alarmStatuses.CLEARED_UNACK)) {
+          <button
+            mat-raised-button
+            color="primary"
+            type="button"
+            (click)="acknowledge()"
+            [disabled]="(isLoading$ | async)">
+            {{ 'alarm.acknowledge' | translate }}
+          </button>
+        }
+        @if (allowClear && (alarm.status === alarmStatuses.ACTIVE_ACK ||
+          alarm.status === alarmStatuses.ACTIVE_UNACK)) {
+          <button
+            mat-raised-button
+            color="primary"
+            type="button"
+            (click)="clear()"
+            [disabled]="(isLoading$ | async)">
+            {{ 'alarm.clear' | translate }}
+          </button>
+        }
+      </div>
+    }
   </div>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html
index 966b3374b8..ca1578c054 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html
@@ -15,11 +15,10 @@
     limitations under the License.
 
 -->
-<ng-container *ngIf="panelMode; else componentMode">
+@if (panelMode) {
   <ng-container *ngTemplateOutlet="alarmFilterPanel"></ng-container>
-</ng-container>
-<ng-template #componentMode>
-  <ng-container *ngIf="buttonMode; else alarmFilter">
+} @else {
+  @if (buttonMode) {
     <button color="primary"
             matTooltip="{{buttonDisplayValue}}"
             matTooltipPosition="above"
@@ -27,8 +26,52 @@
             (click)="toggleAlarmFilterPanel($event)">
       <mat-icon>filter_list</mat-icon>{{buttonDisplayValue}}
     </button>
-  </ng-container>
-</ng-template>
+  } @else {
+    <div class="tb-form-panel tb-alarm-filter-config-component no-padding no-border" [formGroup]="alarmFilterConfigForm">
+      <div class="tb-form-row space-between column-xs">
+        <div class="fixed-title-width" translate>alarm.alarm-status-list</div>
+        <mat-chip-listbox multiple formControlName="statusList">
+          @for (searchStatus of alarmSearchStatuses; track searchStatus) {
+            <mat-chip-option [value]="searchStatus">
+              {{ alarmSearchStatusTranslationMap.get(searchStatus) | translate }}
+            </mat-chip-option>
+          }
+        </mat-chip-listbox>
+      </div>
+      <div class="tb-form-row space-between column-xs">
+        <div class="fixed-title-width" translate>alarm.alarm-severity-list</div>
+        <mat-chip-listbox multiple formControlName="severityList">
+          @for (alarmSeverity of alarmSeverities; track alarmSeverity) {
+            <mat-chip-option [value]="alarmSeverity">
+              {{ alarmSeverityTranslationMap.get(alarmSeverityEnum[alarmSeverity]) | translate }}
+            </mat-chip-option>
+          }
+        </mat-chip-listbox>
+      </div>
+      <div class="tb-form-row column-xs">
+        <div class="fixed-title-width" translate>alarm.alarm-type-list</div>
+        <tb-entity-subtype-list subscriptSizing="dynamic"
+                                formControlName="typeList"
+                                appearance="outline"
+                                [additionalClasses]="['tb-chips', 'flex']"
+                                [entityType]="entityType.ALARM">
+        </tb-entity-subtype-list>
+      </div>
+      <div class="tb-form-row column-xs">
+        <div class="fixed-title-width" translate>alarm.assignee</div>
+        <tb-alarm-assignee-select class="flex-1" inline="true"
+                                  [userMode]="userMode"
+                                  formControlName="assigneeId">
+        </tb-alarm-assignee-select>
+      </div>
+      @if (propagatedFilter) {
+        <mat-slide-toggle class="mat-slide" formControlName="searchPropagatedAlarms">
+          {{ 'alarm.search-propagated-alarms' | translate }}
+        </mat-slide-toggle>
+      }
+    </div>
+  }
+}
 <ng-template #alarmFilterPanel>
   <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="alarmFilter"></ng-container>
@@ -59,17 +102,21 @@
     <div class="tb-form-row space-between column-xs">
       <div class="fixed-title-width" translate>alarm.alarm-status-list</div>
       <mat-chip-listbox multiple formControlName="statusList">
-        <mat-chip-option *ngFor="let searchStatus of alarmSearchStatuses" [value]="searchStatus">
-          {{ alarmSearchStatusTranslationMap.get(searchStatus) | translate }}
-        </mat-chip-option>
+        @for (searchStatus of alarmSearchStatuses; track searchStatus) {
+          <mat-chip-option [value]="searchStatus">
+            {{ alarmSearchStatusTranslationMap.get(searchStatus) | translate }}
+          </mat-chip-option>
+        }
       </mat-chip-listbox>
     </div>
     <div class="tb-form-row space-between column-xs">
       <div class="fixed-title-width" translate>alarm.alarm-severity-list</div>
       <mat-chip-listbox multiple formControlName="severityList">
-        <mat-chip-option *ngFor="let alarmSeverity of alarmSeverities" [value]="alarmSeverity">
-          {{ alarmSeverityTranslationMap.get(alarmSeverityEnum[alarmSeverity]) | translate }}
-        </mat-chip-option>
+        @for (alarmSeverity of alarmSeverities; track alarmSeverity) {
+          <mat-chip-option [value]="alarmSeverity">
+            {{ alarmSeverityTranslationMap.get(alarmSeverityEnum[alarmSeverity]) | translate }}
+          </mat-chip-option>
+        }
       </mat-chip-listbox>
     </div>
     <div class="tb-form-row column-xs">
@@ -85,11 +132,13 @@
       <div class="fixed-title-width" translate>alarm.assignee</div>
       <tb-alarm-assignee-select class="flex-1" inline="true"
                                 [userMode]="userMode"
-        formControlName="assigneeId">
+                                formControlName="assigneeId">
       </tb-alarm-assignee-select>
     </div>
-    <mat-slide-toggle class="mat-slide" *ngIf="propagatedFilter" formControlName="searchPropagatedAlarms">
-      {{ 'alarm.search-propagated-alarms' | translate }}
-    </mat-slide-toggle>
+    @if (propagatedFilter) {
+      <mat-slide-toggle class="mat-slide" formControlName="searchPropagatedAlarms">
+        {{ 'alarm.search-propagated-alarms' | translate }}
+      </mat-slide-toggle>
+    }
   </div>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-autocomplete.component.html
index 7dd028db41..adf52b3d39 100644
--- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-autocomplete.component.html
@@ -22,23 +22,29 @@
          formControlName="entityInfo"
          [required]="required"
          [matAutocomplete]="entityInfoAutocomplete">
-  <button *ngIf="selectEntityInfoFormGroup.get('entityInfo').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (selectEntityInfoFormGroup.get('entityInfo').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete
     class="tb-autocomplete"
     #entityInfoAutocomplete="matAutocomplete"
     [displayWith]="displayEntityInfoFn">
-    <mat-option *ngFor="let entityInfo of filteredEntityInfos | async" [value]="entityInfo">
-      <span [innerHTML]="entityInfo.name | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredEntityInfos | async)?.length" [value]="null">
-      <span>
+    @for (entityInfo of filteredEntityInfos | async; track entityInfo) {
+      <mat-option [value]="entityInfo">
+        <span [innerHTML]="entityInfo.name | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if (!(filteredEntityInfos | async)?.length) {
+      <mat-option [value]="null">
+        <span>
           {{ translate.get('entity.no-entities-matching', {entity: searchText}) | async }}
-      </span>
-    </mat-option>
+        </span>
+      </mat-option>
+    }
   </mat-autocomplete>
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html
index d65b790222..4dafef12e4 100644
--- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html
@@ -16,13 +16,15 @@
 
 -->
 <div class="mat-content mat-padding flex flex-col">
-  <div class="flex flex-row" *ngFor="let alias of entityAliasesInfo | keyvalue">
-    <tb-aliases-entity-autocomplete class="flex-1"
-      required
-      [alias]="alias.value.alias"
-      [entityFilter]="alias.value.entityFilter"
-      [(ngModel)]="alias.value.currentEntity"
-      (ngModelChange)="currentAliasEntityChanged(alias.key, alias.value.currentEntity)">
-    </tb-aliases-entity-autocomplete>
-  </div>
+  @for (alias of entityAliasesInfo | keyvalue; track alias) {
+    <div class="flex flex-row">
+      <tb-aliases-entity-autocomplete class="flex-1"
+                                      required
+                                      [alias]="alias.value.alias"
+                                      [entityFilter]="alias.value.entityFilter"
+                                      [(ngModel)]="alias.value.currentEntity"
+                                      (ngModelChange)="currentAliasEntityChanged(alias.key, alias.value.currentEntity)">
+      </tb-aliases-entity-autocomplete>
+    </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
index add27f87d3..fc1610dc8a 100644
--- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
@@ -15,18 +15,20 @@
     limitations under the License.
 
 -->
-<section class="tb-aliases-entity-select flex flex-row items-center justify-start" *ngIf="hasSelectableAliasEntities">
-  <button mat-icon-button
-          cdkOverlayOrigin #aliasEntitySelectPanelOrigin="cdkOverlayOrigin"
+@if (hasSelectableAliasEntities) {
+  <section class="tb-aliases-entity-select flex flex-row items-center justify-start">
+    <button mat-icon-button
+            cdkOverlayOrigin #aliasEntitySelectPanelOrigin="cdkOverlayOrigin"
+            (click)="openEditMode()"
+            matTooltip="{{ 'entity.select-entities' | translate }}"
+            [matTooltipPosition]="tooltipPosition">
+      <mat-icon class="material-icons">devices_other</mat-icon>
+    </button>
+    <span class="lt-lg:!hidden"
           (click)="openEditMode()"
           matTooltip="{{ 'entity.select-entities' | translate }}"
           [matTooltipPosition]="tooltipPosition">
-    <mat-icon class="material-icons">devices_other</mat-icon>
-  </button>
-  <span class="lt-lg:!hidden"
-        (click)="openEditMode()"
-        matTooltip="{{ 'entity.select-entities' | translate }}"
-        [matTooltipPosition]="tooltipPosition">
-    {{displayValue}}
-  </span>
-</section>
+      {{displayValue}}
+    </span>
+  </section>
+}
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
index 4689bec48f..3394114d88 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
@@ -25,20 +25,26 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content>
     <fieldset class="tb-form-panel outlined" [disabled]="isLoading$ | async">
       <div class="flex flex-row items-start xs:flex-col xs:items-stretch">
         <mat-form-field class="flex-1" appearance="outline">
           <mat-label translate>alias.name</mat-label>
           <input matInput formControlName="alias" required>
-          <mat-error *ngIf="entityAliasFormGroup.get('alias').hasError('required')">
-            {{ 'alias.name-required' | translate }}
-          </mat-error>
-          <mat-error *ngIf="entityAliasFormGroup.get('alias').hasError('duplicateAliasName')">
-            {{ 'alias.duplicate-alias' | translate }}
-          </mat-error>
+          @if (entityAliasFormGroup.get('alias').hasError('required')) {
+            <mat-error>
+              {{ 'alias.name-required' | translate }}
+            </mat-error>
+          }
+          @if (entityAliasFormGroup.get('alias').hasError('duplicateAliasName')) {
+            <mat-error>
+              {{ 'alias.duplicate-alias' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <div class="tb-resolve-multiple-switch" tb-hint-tooltip-icon="{{ 'alias.resolve-multiple-hint' | translate }}">
           <mat-slide-toggle class="mat-slide" formControlName="resolveMultiple">
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
index 3ed3b218bf..05aba8344a 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
@@ -25,9 +25,13 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
+  @if ((isLoading$ | async) === false) {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <div class="tb-aliases-header flex flex-row items-center justify-start">
       <span class="max-w-5% flex-full"></span>
@@ -40,45 +44,49 @@
     </div>
     <fieldset [disabled]="isLoading$ | async" class="tb-form-panel outlined">
       <mat-divider></mat-divider>
-      <div class="flex flex-1 flex-row items-center justify-start"
-           formArrayName="entityAliases"
-           *ngFor="let entityAliasControl of entityAliasesFormArray().controls; let $index = index">
-        <span class="max-w-5% flex-full">{{$index + 1}}.</span>
-        <div class="mat-elevation-z4 tb-alias flex max-w-95% flex-full flex-row items-center justify-start">
-          <mat-form-field class="mat-block flex-1 gt-sm:min-w-52 gt-sm:max-w-52 gt-sm:basis-52" style="padding-top: 20px;" appearance="outline">
-            <input matInput [formControl]="entityAliasControl.get('alias')" required placeholder="{{ 'entity.alias' | translate }}">
-            <mat-error *ngIf="entityAliasControl.get('alias').hasError('required')">
-              {{ 'entity.alias-required' | translate }}
-            </mat-error>
-          </mat-form-field>
-          <tb-entity-filter-view class="flex-1" style="padding-left: 10px;" [formControl]="entityAliasControl.get('filter')">
-          </tb-entity-filter-view>
-          <section style="padding-left: 10px;"
-                   class="tb-resolve-multiple-switch flex min-w-32 max-w-32 flex-1 basis-32 flex-col items-center justify-center">
-            <mat-slide-toggle class="resolve-multiple-switch"
-                   [formControl]="entityAliasControl.get('resolveMultiple')">
-            </mat-slide-toggle>
-          </section>
-          <button [disabled]="isLoading$ | async"
-                  mat-icon-button color="primary"
-                  style="min-width: 40px;"
-                  type="button"
-                  (click)="editAlias($index)"
-                  matTooltip="{{ 'alias.edit' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>edit</mat-icon>
-          </button>
-          <button [disabled]="isLoading$ | async"
-                  mat-icon-button color="primary"
-                  style="min-width: 40px;"
-                  type="button"
-                  (click)="removeAlias($index)"
-                  matTooltip="{{ 'entity.remove-alias' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>close</mat-icon>
-          </button>
+      @for (entityAliasControl of entityAliasesFormArray().controls; track entityAliasControl) {
+        <div class="flex flex-1 flex-row items-center justify-start"
+             formArrayName="entityAliases"
+             >
+          <span class="max-w-5% flex-full">{{$index + 1}}.</span>
+          <div class="mat-elevation-z4 tb-alias flex max-w-95% flex-full flex-row items-center justify-start">
+            <mat-form-field class="mat-block flex-1 gt-sm:min-w-52 gt-sm:max-w-52 gt-sm:basis-52" style="padding-top: 20px;" appearance="outline">
+              <input matInput [formControl]="entityAliasControl.get('alias')" required placeholder="{{ 'entity.alias' | translate }}">
+              @if (entityAliasControl.get('alias').hasError('required')) {
+                <mat-error>
+                  {{ 'entity.alias-required' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+            <tb-entity-filter-view class="flex-1" style="padding-left: 10px;" [formControl]="entityAliasControl.get('filter')">
+            </tb-entity-filter-view>
+            <section style="padding-left: 10px;"
+                     class="tb-resolve-multiple-switch flex min-w-32 max-w-32 flex-1 basis-32 flex-col items-center justify-center">
+              <mat-slide-toggle class="resolve-multiple-switch"
+                                [formControl]="entityAliasControl.get('resolveMultiple')">
+              </mat-slide-toggle>
+            </section>
+            <button [disabled]="isLoading$ | async"
+                    mat-icon-button color="primary"
+                    style="min-width: 40px;"
+                    type="button"
+                    (click)="editAlias($index)"
+                    matTooltip="{{ 'alias.edit' | translate }}"
+                    matTooltipPosition="above">
+              <mat-icon>edit</mat-icon>
+            </button>
+            <button [disabled]="isLoading$ | async"
+                    mat-icon-button color="primary"
+                    style="min-width: 40px;"
+                    type="button"
+                    (click)="removeAlias($index)"
+                    matTooltip="{{ 'entity.remove-alias' | translate }}"
+                    matTooltipPosition="above">
+              <mat-icon>close</mat-icon>
+            </button>
+          </div>
         </div>
-      </div>
+      }
     </fieldset>
   </div>
   <div mat-dialog-actions>
diff --git a/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html b/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html
index 738372a74e..05549f5260 100644
--- a/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html
@@ -36,9 +36,11 @@
     <mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic">
       <mat-label translate>api-key.description</mat-label>
       <textarea cdkTextareaAutosize matInput formControlName="description" rows="2" maxLength="255"></textarea>
-      <mat-error *ngIf="apiKeyForm.get('description').hasError('required')">
-        {{ 'asset.description-required' | translate }}
-      </mat-error>
+      @if (apiKeyForm.get('description').hasError('required')) {
+        <mat-error>
+          {{ 'asset.description-required' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
     <mat-slide-toggle class="mat-slide" formControlName="enabled">
       {{ 'api-key.enable' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.html b/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.html
index 1a3f159af4..ff93fd0ea7 100644
--- a/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.html
@@ -20,9 +20,11 @@
   <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>api-key.description</mat-label>
     <textarea #input cdkTextareaAutosize matInput [formControl]="descriptionFormControl" rows="2" maxLength="255"></textarea>
-    <mat-error *ngIf="descriptionFormControl.hasError('required')">
-      {{ 'asset.description-required' | translate }}
-    </mat-error>
+    @if (descriptionFormControl.hasError('required')) {
+      <mat-error>
+        {{ 'asset.description-required' | translate }}
+      </mat-error>
+    }
     <mat-hint align="end">{{ input.value?.length || 0 }}/255</mat-hint>
   </mat-form-field>
   <div class="tb-edit-api-key-description-panel-buttons">
diff --git a/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html b/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
index fa791d479e..eddcf3f9b2 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async" class="flex flex-col gap-2">
       <tb-string-autocomplete
diff --git a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
index 18145ac432..769c553635 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
@@ -25,8 +25,10 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content class="flex flex-col">
     <fieldset [disabled]="isLoading$ | async">
       <mat-radio-group formControlName="addToDashboardType">
@@ -46,9 +48,11 @@
               <mat-label translate>dashboard.new-dashboard-title</mat-label>
               <input matInput formControlName="newDashboardTitle"
                      [required]="addWidgetFormGroup.get('addToDashboardType').value === 1">
-              <mat-error *ngIf="addWidgetFormGroup.get('newDashboardTitle').hasError('required')">
-                {{ 'dashboard.title-required' | translate }}
-              </mat-error>
+              @if (addWidgetFormGroup.get('newDashboardTitle').hasError('required')) {
+                <mat-error>
+                  {{ 'dashboard.title-required' | translate }}
+                </mat-error>
+              }
             </mat-form-field>
           </section>
         </mat-radio-button>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index 553349df8e..f53b87ad9d 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -21,34 +21,40 @@
       <div class="mat-toolbar-tools">
         <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
           <span class="tb-entity-table-title">{{telemetryTypeTranslationsMap.get(attributeScope) | translate}}</span>
-          <mat-form-field class="mat-block tb-attribute-scope" *ngIf="!disableAttributeScopeSelection && !attributeScopeSelectionReadonly">
-            <mat-label translate>attribute.attributes-scope</mat-label>
-            <mat-select [disabled]="(isLoading$ | async)"
-                        [ngModel]="attributeScope"
-                        (ngModelChange)="attributeScopeChanged($event)">
-              <mat-option *ngFor="let scope of attributeScopes" [value]="scope">
-                {{ telemetryTypeTranslationsMap.get(toTelemetryTypeFunc(scope)) | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          @if (!disableAttributeScopeSelection && !attributeScopeSelectionReadonly) {
+            <mat-form-field class="mat-block tb-attribute-scope">
+              <mat-label translate>attribute.attributes-scope</mat-label>
+              <mat-select [disabled]="(isLoading$ | async)"
+                          [ngModel]="attributeScope"
+                          (ngModelChange)="attributeScopeChanged($event)">
+                @for (scope of attributeScopes; track scope) {
+                  <mat-option [value]="scope">
+                    {{ telemetryTypeTranslationsMap.get(toTelemetryTypeFunc(scope)) | translate }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }
         </div>
         <span class="flex-1"></span>
-        <button mat-icon-button
-                *ngIf="attributeScope !== attributeScopeTypes.CLIENT_SCOPE"
-                [disabled]="isLoading$ | async"
-                (click)="addAttribute($event)"
-                matTooltip="{{ 'action.add' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>add</mat-icon>
-        </button>
-        <button mat-icon-button
-                *ngIf="!isClientSideTelemetryTypeMap.get(attributeScope)"
-                [disabled]="isLoading$ | async"
-                (click)="reloadAttributes()"
-                matTooltip="{{ 'action.refresh' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>refresh</mat-icon>
-        </button>
+        @if (attributeScope !== attributeScopeTypes.CLIENT_SCOPE) {
+          <button mat-icon-button
+                  [disabled]="isLoading$ | async"
+                  (click)="addAttribute($event)"
+                  matTooltip="{{ 'action.add' | translate }}"
+                  matTooltipPosition="above">
+            <mat-icon>add</mat-icon>
+          </button>
+        }
+        @if (!isClientSideTelemetryTypeMap.get(attributeScope)) {
+          <button mat-icon-button
+                  [disabled]="isLoading$ | async"
+                  (click)="reloadAttributes()"
+                  matTooltip="{{ 'action.refresh' | translate }}"
+                  matTooltipPosition="above">
+            <mat-icon>refresh</mat-icon>
+          </button>
+        }
         <button mat-icon-button
                 [disabled]="isLoading$ | async"
                 (click)="enterFilterMode()"
@@ -82,7 +88,7 @@
       <div class="mat-toolbar-tools xs:flex xs:flex-row xs:flex-wrap">
         <span class="tb-entity-table-info">
           {{ (attributeScope === latestTelemetryTypes.LATEST_TELEMETRY ?
-                'attribute.selected-telemetry' : 'attribute.selected-attributes') | translate:{count: dataSource.selection.selected.length} }}
+          'attribute.selected-telemetry' : 'attribute.selected-attributes') | translate:{count: dataSource.selection.selected.length} }}
         </span>
         <span class="flex-1"></span>
         <button [class.!hidden]="attributeScope === attributeScopeTypes.CLIENT_SCOPE"
@@ -139,7 +145,7 @@
     </mat-toolbar>
     <div class="table-container flex-1" [class.!hidden]="mode === 'widget'">
       <table mat-table [dataSource]="dataSource"
-                 matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
+             matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
           <mat-header-cell *matHeaderCellDef style="width: 40px;">
             <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
@@ -173,7 +179,7 @@
                 tooltipPosition="above"
                 icon="content_copy"
                 [style]="{padding: '4px', 'font-size': '16px', color: 'rgba(0,0,0,.87)'}"
-              >
+                >
               </tb-copy-button>
             </div>
           </mat-cell>
@@ -186,38 +192,41 @@
             <div class="flex flex-1 flex-row" style="align-items: center">
               <div class="flex flex-1 flex-row" style="overflow: hidden; align-items: center;">
                 <span class="ellipsis">{{attribute.value | tbJson}}</span>
-                <tb-copy-button
-                  *ngIf="attribute.value !== ''"
-                  class="attribute-copy"
-                  [disabled]="isLoading$ | async"
-                  [copyText]="attribute.value | tbJson"
-                  tooltipText="{{ 'attribute.copy-value' | translate }}"
-                  tooltipPosition="above"
-                  icon="content_copy"
-                  [style]="{padding: '4px', 'font-size': '16px', color: 'rgba(0,0,0,.87)'}"
-                >
-                </tb-copy-button>
+                @if (attribute.value !== '') {
+                  <tb-copy-button
+                    class="attribute-copy"
+                    [disabled]="isLoading$ | async"
+                    [copyText]="attribute.value | tbJson"
+                    tooltipText="{{ 'attribute.copy-value' | translate }}"
+                    tooltipPosition="above"
+                    icon="content_copy"
+                    [style]="{padding: '4px', 'font-size': '16px', color: 'rgba(0,0,0,.87)'}"
+                    >
+                  </tb-copy-button>
+                }
               </div>
               <span [class.!hidden]="isClientSideTelemetryTypeMap.get(attributeScope)">
                 <mat-icon>edit</mat-icon>
               </span>
-              <button mat-icon-button *ngIf="attributeScope === latestTelemetryTypes.LATEST_TELEMETRY"
-                      (click)="deleteTimeseries($event, attribute)">
-                <mat-icon>delete</mat-icon>
-              </button>
+              @if (attributeScope === latestTelemetryTypes.LATEST_TELEMETRY) {
+                <button mat-icon-button
+                        (click)="deleteTimeseries($event, attribute)">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              }
             </div>
           </mat-cell>
         </ng-container>
         <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
         <mat-row class="mat-row-select" [class.mat-selected]="dataSource.selection.isSelected(attribute)"
-                 *matRowDef="let attribute; columns: displayedColumns;" (click)="dataSource.selection.toggle(attribute)"></mat-row>
+        *matRowDef="let attribute; columns: displayedColumns;" (click)="dataSource.selection.toggle(attribute)"></mat-row>
       </table>
       <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
             class="no-data-found flex items-center justify-center" translate>{{
-          attributeScope === latestTelemetryTypes.LATEST_TELEMETRY
-              ? 'attribute.no-telemetry-text'
-              : 'attribute.no-attributes-text'
-        }}</span>
+            attributeScope === latestTelemetryTypes.LATEST_TELEMETRY
+            ? 'attribute.no-telemetry-text'
+            : 'attribute.no-attributes-text'
+      }}</span>
     </div>
     <mat-divider [class.!hidden]="mode === 'widget'"></mat-divider>
     <mat-paginator [class.!hidden]="mode === 'widget'"
@@ -226,58 +235,65 @@
                    [pageSize]="pageLink.pageSize"
                    [pageSizeOptions]="[10, 20, 30]"
                    [hidePageSize]="hidePageSize"
-                   showFirstLastButtons></mat-paginator>
-    <ngx-hm-carousel *ngIf="mode === 'widget' && widgetsList.length > 0"
-                     #carousel
-                     [(ngModel)]="widgetsCarouselIndex"
-                     (ngModelChange)="onWidgetsCarouselIndexChanged()"
-                     [data]="widgetsList"
-                     [infinite]="false"
-                     class="carousel c-accent flex-1">
-      <section ngx-hm-carousel-container class="content">
-        <article class="item cursor-pointer"
-                 ngx-hm-carousel-item
-                 *ngFor="let widgets of widgetsList">
-          <tb-dashboard class="tb-absolute-fill"
-            [aliasController]="aliasController"
-            [widgets]="widgets"
-            [columns]="20"
-            [isEdit]="false"
-            [isMobileDisabled]="true"
-            [isEditActionEnabled]="false"
-            [isRemoveActionEnabled]="false">
-          </tb-dashboard>
-        </article>
-      </section>
-
-      <ng-template #carouselPrev>
-        <button mat-icon-button
-                *ngIf="widgetsCarouselIndex > 0"
-                matTooltip="{{ 'attribute.prev-widget' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>keyboard_arrow_left</mat-icon>
-        </button>
-      </ng-template>
-      <ng-template #carouselNext>
-        <button mat-icon-button
-                *ngIf="widgetsCarouselIndex < widgetsList.length - 1"
-                matTooltip="{{ 'attribute.next-widget' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>keyboard_arrow_right</mat-icon>
-        </button>
-      </ng-template>
-
-      <ng-template #carouselDot let-model>
-        <div class="ball"
-             [class.visible]="model.index === model.currentIndex"></div>
-      </ng-template>
-
-    </ngx-hm-carousel>
-    <span translate *ngIf="mode === 'widget' && widgetsLoaded &&
-                           widgetsList.length === 0 &&
-                           widgetBundleSet"
-          class="mat-headline-5 flex flex-1 items-center justify-center">widgets-bundle.empty</span>
-    <span translate *ngIf="mode === 'widget' && !widgetBundleSet"
-          class="mat-headline-5 flex flex-1 items-center justify-center">widget.select-widgets-bundle</span>
+    showFirstLastButtons></mat-paginator>
+    @if (mode === 'widget' && widgetsList.length > 0) {
+      <ngx-hm-carousel
+        #carousel
+        [(ngModel)]="widgetsCarouselIndex"
+        (ngModelChange)="onWidgetsCarouselIndexChanged()"
+        [data]="widgetsList"
+        [infinite]="false"
+        class="carousel c-accent flex-1">
+        <section ngx-hm-carousel-container class="content">
+          @for (widgets of widgetsList; track widgets) {
+            <article class="item cursor-pointer"
+                     ngx-hm-carousel-item
+                     >
+              <tb-dashboard class="tb-absolute-fill"
+                            [aliasController]="aliasController"
+                            [widgets]="widgets"
+                            [columns]="20"
+                            [isEdit]="false"
+                            [isMobileDisabled]="true"
+                            [isEditActionEnabled]="false"
+                            [isRemoveActionEnabled]="false">
+              </tb-dashboard>
+            </article>
+          }
+        </section>
+        <ng-template #carouselPrev>
+          @if (widgetsCarouselIndex > 0) {
+            <button mat-icon-button
+                    matTooltip="{{ 'attribute.prev-widget' | translate }}"
+                    matTooltipPosition="above">
+              <mat-icon>keyboard_arrow_left</mat-icon>
+            </button>
+          }
+        </ng-template>
+        <ng-template #carouselNext>
+          @if (widgetsCarouselIndex < widgetsList.length - 1) {
+            <button mat-icon-button
+                    matTooltip="{{ 'attribute.next-widget' | translate }}"
+                    matTooltipPosition="above">
+              <mat-icon>keyboard_arrow_right</mat-icon>
+            </button>
+          }
+        </ng-template>
+        <ng-template #carouselDot let-model>
+          <div class="ball"
+          [class.visible]="model.index === model.currentIndex"></div>
+        </ng-template>
+      </ngx-hm-carousel>
+    }
+    @if (mode === 'widget' && widgetsLoaded &&
+      widgetsList.length === 0 &&
+      widgetBundleSet) {
+      <span translate
+      class="mat-headline-5 flex flex-1 items-center justify-center">widgets-bundle.empty</span>
+    }
+    @if (mode === 'widget' && !widgetBundleSet) {
+      <span translate
+      class="mat-headline-5 flex flex-1 items-center justify-center">widget.select-widgets-bundle</span>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
index 600d3f2a93..e2aca6e139 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
@@ -28,28 +28,34 @@
   <mat-form-field class="mat-block" subscriptSizing="dynamic">
     <mat-label translate>attribute.delete-timeseries.strategy</mat-label>
     <mat-select formControlName="strategy">
-      <mat-option *ngFor="let strategy of strategiesTranslationsMap.keys()" [value]="strategy">
-        {{ strategiesTranslationsMap.get(strategy) | translate }}
-      </mat-option>
+      @for (strategy of strategiesTranslationsMap.keys(); track strategy) {
+        <mat-option [value]="strategy">
+          {{ strategiesTranslationsMap.get(strategy) | translate }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
-  <div *ngIf="isPeriodStrategy()" class="tb-select-interval">
-    <mat-form-field class="mat-block" subscriptSizing="dynamic">
-      <mat-label translate>attribute.delete-timeseries.start-time</mat-label>
-      <mat-datetimepicker-toggle [for]="startDateTimePicker" matPrefix></mat-datetimepicker-toggle>
-      <mat-datetimepicker #startDateTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
-      <input required matInput formControlName="startDateTime" [matDatetimepicker]="startDateTimePicker">
-    </mat-form-field>
-    <mat-form-field class="mat-block" subscriptSizing="dynamic">
-      <mat-label translate>attribute.delete-timeseries.ends-on</mat-label>
-      <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>
-      <mat-datetimepicker #endDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
-      <input required matInput formControlName="endDateTime" [matDatetimepicker]="endDatePicker">
-    </mat-form-field>
-  </div>
-  <mat-slide-toggle class="tb-slide-toggle" formControlName="rewriteLatest" *ngIf="isPeriodStrategy() || isDeleteLatestStrategy()">
-    {{ "attribute.delete-timeseries.rewrite-latest-value" | translate }}
-  </mat-slide-toggle>
+  @if (isPeriodStrategy()) {
+    <div class="tb-select-interval">
+      <mat-form-field class="mat-block" subscriptSizing="dynamic">
+        <mat-label translate>attribute.delete-timeseries.start-time</mat-label>
+        <mat-datetimepicker-toggle [for]="startDateTimePicker" matPrefix></mat-datetimepicker-toggle>
+        <mat-datetimepicker #startDateTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
+        <input required matInput formControlName="startDateTime" [matDatetimepicker]="startDateTimePicker">
+      </mat-form-field>
+      <mat-form-field class="mat-block" subscriptSizing="dynamic">
+        <mat-label translate>attribute.delete-timeseries.ends-on</mat-label>
+        <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>
+        <mat-datetimepicker #endDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
+        <input required matInput formControlName="endDateTime" [matDatetimepicker]="endDatePicker">
+      </mat-form-field>
+    </div>
+  }
+  @if (isPeriodStrategy() || isDeleteLatestStrategy()) {
+    <mat-slide-toggle class="tb-slide-toggle" formControlName="rewriteLatest">
+      {{ "attribute.delete-timeseries.rewrite-latest-value" | translate }}
+    </mat-slide-toggle>
+  }
 </form>
 <div class="tb-panel-actions flex flex-row">
   <span class="flex-1"></span>
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-field.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-field.component.html
index 9eb8680594..86d183dcfd 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-field.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-field.component.html
@@ -15,26 +15,28 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
-  <button mat-raised-button color="primary"
-          [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'open')"
-          [class.!hidden]="isEdit || isDetailsPage">
-    {{ 'common.open-details-page' | translate }}
-  </button>
-  <button mat-raised-button color="primary"
-          [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'export')"
-          [class.!hidden]="isEdit">
-    {{ 'action.export' | translate }}
-  </button>
-  <button mat-raised-button color="primary"
-          [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'delete')"
-          [class.!hidden]="hideDelete() || isEdit">
-    {{ 'action.delete' | translate }}
-  </button>
-</div>
+@if (!standalone) {
+  <div class="tb-details-buttons xs:flex xs:flex-col">
+    <button mat-raised-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'open')"
+            [class.!hidden]="isEdit || isDetailsPage">
+      {{ 'common.open-details-page' | translate }}
+    </button>
+    <button mat-raised-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'export')"
+            [class.!hidden]="isEdit">
+      {{ 'action.export' | translate }}
+    </button>
+    <button mat-raised-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'delete')"
+            [class.!hidden]="hideDelete() || isEdit">
+      {{ 'action.delete' | translate }}
+    </button>
+  </div>
+}
 <div class="mat-padding flex flex-1 flex-col" [formGroup]="entityForm">
   <div class="tb-form-panel no-border no-padding">
     <div class="tb-form-panel no-gap">
@@ -55,11 +57,11 @@
           <mat-hint></mat-hint>
         </mat-form-field>
         <tb-entity-debug-settings-button
-            formControlName="debugSettings"
-            style="margin-bottom: 22px"
-            [entityType]="EntityType.CALCULATED_FIELD"
-            [additionalActionConfig]="additionalDebugActionConfig"
-        />
+          formControlName="debugSettings"
+          style="margin-bottom: 22px"
+          [entityType]="EntityType.CALCULATED_FIELD"
+          [additionalActionConfig]="additionalDebugActionConfig"
+          />
       </div>
       <tb-entity-select formControlName="entityId"
                         appearance="outline"
@@ -74,8 +76,8 @@
         <mat-select formControlName="type">
           <mat-select-trigger>
             {{ CalculatedFieldTypeTranslations.has(entityForm.get('type').value)
-                ? (CalculatedFieldTypeTranslations.get(entityForm.get('type').value).name | translate)
-                : entityForm.get('type').value }}
+            ? (CalculatedFieldTypeTranslations.get(entityForm.get('type').value).name | translate)
+            : entityForm.get('type').value }}
           </mat-select-trigger>
           @for (type of fieldTypes; track type) {
             <mat-option [value]="type" class="py-1">
@@ -83,67 +85,67 @@
                 {{ CalculatedFieldTypeTranslations.get(type).name | translate }}
               </span>
               <br>
-              <small matListItemMeta style="color: inherit">
-                {{ CalculatedFieldTypeTranslations.get(type).hint | translate }}
-              </small>
-            </mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    </div>
-    @switch (entityForm.get('type').value) {
-      @case (CalculatedFieldType.GEOFENCING) {
-        <tb-geofencing-configuration formControlName="configuration"
-                                     [class.tb-form-panel-disabled]="disabledConfiguration"
-                                     [entityId]="entityId"
-                                     [entityName]="entityName"
-                                     [ownerId]="ownerId"
-                                     [tenantId]="tenantId"
-                                     [isEditValue]="isEditValue"
-        ></tb-geofencing-configuration>
-      }
-      @case (CalculatedFieldType.PROPAGATION) {
-        <tb-propagation-configuration formControlName="configuration"
-                                      [class.tb-form-panel-disabled]="disabledConfiguration"
-                                      [entityId]="entityId"
-                                      [entityName]="entityName"
-                                      [tenantId]="tenantId"
-                                      [ownerId]="ownerId"
-                                      [testScript]="onTestScript.bind(this)"
-                                      [isEditValue]="isEditValue"
-        ></tb-propagation-configuration>
-      }
-      @case (CalculatedFieldType.RELATED_ENTITIES_AGGREGATION) {
-        <tb-related-entities-aggregation-component formControlName="configuration"
-                                                   [class.tb-form-panel-disabled]="disabledConfiguration"
-                                                   [entityId]="entityId"
-                                                   [entityName]="entityName"
-                                                   [tenantId]="tenantId"
-                                                   [testScript]="onTestScript.bind(this)"
-                                                   [isEditValue]="isEditValue"
-        ></tb-related-entities-aggregation-component>
-      }
-      @case (CalculatedFieldType.ENTITY_AGGREGATION) {
-        <tb-entity-aggregation-component formControlName="configuration"
-                                         [class.tb-form-panel-disabled]="disabledConfiguration"
-                                         [entityId]="entityId"
-                                         [entityName]="entityName"
-                                         [tenantId]="tenantId"
-                                         [isEditValue]="isEditValue"
-        ></tb-entity-aggregation-component>
-      }
-      @default {
-        <tb-simple-configuration formControlName="configuration"
-                                 [class.tb-form-panel-disabled]="disabledConfiguration"
-                                 [entityId]="entityId"
-                                 [entityName]="entityName"
-                                 [ownerId]="ownerId"
-                                 [tenantId]="tenantId"
-                                 [isScript]="entityForm.get('type').value === CalculatedFieldType.SCRIPT"
-                                 [testScript]="onTestScript.bind(this)"
-                                 [isEditValue]="isEditValue"
-        ></tb-simple-configuration>
+                <small matListItemMeta style="color: inherit">
+                  {{ CalculatedFieldTypeTranslations.get(type).hint | translate }}
+                </small>
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+      @switch (entityForm.get('type').value) {
+        @case (CalculatedFieldType.GEOFENCING) {
+          <tb-geofencing-configuration formControlName="configuration"
+                                       [class.tb-form-panel-disabled]="disabledConfiguration"
+                                       [entityId]="entityId"
+                                       [entityName]="entityName"
+                                       [ownerId]="ownerId"
+                                       [tenantId]="tenantId"
+                                       [isEditValue]="isEditValue"
+          ></tb-geofencing-configuration>
+        }
+        @case (CalculatedFieldType.PROPAGATION) {
+          <tb-propagation-configuration formControlName="configuration"
+                                        [class.tb-form-panel-disabled]="disabledConfiguration"
+                                        [entityId]="entityId"
+                                        [entityName]="entityName"
+                                        [tenantId]="tenantId"
+                                        [ownerId]="ownerId"
+                                        [testScript]="onTestScript.bind(this)"
+                                        [isEditValue]="isEditValue"
+          ></tb-propagation-configuration>
+        }
+        @case (CalculatedFieldType.RELATED_ENTITIES_AGGREGATION) {
+          <tb-related-entities-aggregation-component formControlName="configuration"
+                                                     [class.tb-form-panel-disabled]="disabledConfiguration"
+                                                     [entityId]="entityId"
+                                                     [entityName]="entityName"
+                                                     [tenantId]="tenantId"
+                                                     [testScript]="onTestScript.bind(this)"
+                                                     [isEditValue]="isEditValue"
+          ></tb-related-entities-aggregation-component>
+        }
+        @case (CalculatedFieldType.ENTITY_AGGREGATION) {
+          <tb-entity-aggregation-component formControlName="configuration"
+                                           [class.tb-form-panel-disabled]="disabledConfiguration"
+                                           [entityId]="entityId"
+                                           [entityName]="entityName"
+                                           [tenantId]="tenantId"
+                                           [isEditValue]="isEditValue"
+          ></tb-entity-aggregation-component>
+        }
+        @default {
+          <tb-simple-configuration formControlName="configuration"
+                                   [class.tb-form-panel-disabled]="disabledConfiguration"
+                                   [entityId]="entityId"
+                                   [entityName]="entityName"
+                                   [ownerId]="ownerId"
+                                   [tenantId]="tenantId"
+                                   [isScript]="entityForm.get('type').value === CalculatedFieldType.SCRIPT"
+                                   [testScript]="onTestScript.bind(this)"
+                                   [isEditValue]="isEditValue"
+          ></tb-simple-configuration>
+        }
       }
-    }
+    </div>
   </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/entity-aggregation-configuration/entity-aggregation-component.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/entity-aggregation-configuration/entity-aggregation-component.component.html
index ab7987c340..2288d5403d 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/entity-aggregation-configuration/entity-aggregation-component.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/entity-aggregation-configuration/entity-aggregation-component.component.html
@@ -48,9 +48,11 @@
         <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <mat-label translate>calculated-fields.aggregate-interval-type</mat-label>
           <mat-select formControlName="type" required>
-            <mat-option *ngFor="let type of AggIntervalTypes" [value]="type">
-              {{ AggIntervalTypeTranslations.get(type) | translate }}
-            </mat-option>
+            @for (type of AggIntervalTypes; track type) {
+              <mat-option [value]="type">
+                {{ AggIntervalTypeTranslations.get(type) | translate }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <tb-timezone-select
@@ -128,7 +130,7 @@
     <div class="tb-form-panel stroked">
       <mat-slide-toggle class="mat-slide flex" formControlName="produceIntermediateResult">
         <div tb-hint-tooltip-icon="{{ 'calculated-fields.entity-aggregation.produce-intermediate-result-hint' | translate: {
-          time: (intermediateAggregationIntervalInSecForCF * 1000 | milliSecondsToTimeString: false: true )
+             time: (intermediateAggregationIntervalInSecForCF * 1000 | milliSecondsToTimeString: false: true )
         } }}">
           {{ 'calculated-fields.entity-aggregation.produce-intermediate-result' | translate }}
         </div>
@@ -140,5 +142,5 @@
                              simpleMode
                              hiddenName
                              disableType
-                             [entityId]="entityId"></tb-calculate-field-output>
+  [entityId]="entityId"></tb-calculate-field-output>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.html
index bb191e8f26..2295c17ed1 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.html
@@ -93,90 +93,92 @@
       }
     </ng-container>
     <ng-container [formGroup]="refDynamicSourceFormGroup">
-      <div class="tb-form-panel stroked" *ngIf="entityType === ArgumentEntityType.RelationQuery">
-        <mat-expansion-panel class="tb-settings" expanded>
-          <mat-expansion-panel-header>
-            <span class="tb-form-panel-title tb-required">{{ 'calculated-fields.entity-zone-relationship' | translate }}</span>
-          </mat-expansion-panel-header>
-          <div class="tb-form-table">
-            <div class="tb-form-table-header">
-              <div class="tb-form-table-header-cell tb-actions-header"></div>
-              <div class="tb-form-table-header-cell" translate>calculated-fields.level</div>
-              <div class="tb-form-table-header-cell flex-1" translate>calculated-fields.direction-level</div>
-              <div class="tb-form-table-header-cell tb-required flex-1" translate>calculated-fields.relation-type</div>
-              <div class="tb-form-table-header-cell tb-actions-header"></div>
-            </div>
-            @if (levelsFormArray()?.controls?.length) {
-              <div class="tb-form-table-body tb-drop-list"
-                   cdkDropList cdkDropListOrientation="vertical"
-                   [cdkDropListDisabled]="!dragEnabled"
-                   (cdkDropListDropped)="keyDrop($event)">
-                @for (keyControl of levelsFormArray().controls; track trackByKey; ) {
-                  <div cdkDrag [cdkDragDisabled]="!dragEnabled" class="tb-draggable-form-table-row">
-                    <div class="tb-form-table-row-cell-buttons">
-                      <button mat-icon-button
-                              type="button"
-                              cdkDragHandle
-                              class="lt-lg:!hidden"
-                              [class.tb-hidden]="!dragEnabled"
-                              matTooltip="{{ 'action.drag' | translate }}"
-                              matTooltipPosition="above">
-                        <mat-icon>drag_indicator</mat-icon>
-                      </button>
-                    </div>
-                    <div class="tb-form-row no-border flex-1" [formGroup]="keyControl">
-                      <div class="level-text">{{ $index + 1 }}</div>
-                      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-                        <mat-select formControlName="direction">
-                          @for (direction of GeofencingDirectionList; track direction) {
-                            <mat-option [value]="direction">{{ GeofencingDirectionLevelTranslations.get(direction) | translate }}</mat-option>
-                          }
-                        </mat-select>
-                      </mat-form-field>
-                      <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
-                                              additionalClass="tb-suffix-show-on-hover"
-                                              class="flex-1"
-                                              appearance="outline"
-                                              panelWidth=""
-                                              required
-                                              [errorText]="'calculated-fields.hint.relation-type-required' | translate"
-                                              formControlName="relationType">
-                      </tb-string-autocomplete>
-                    </div>
-                    <div class="tb-form-table-row-cell-buttons">
-                      <button type="button"
-                              mat-icon-button
-                              (click)="removeKey($index)"
-                              [disabled]="readonly"
-                              matTooltip="{{ 'calculated-fields.delete-level' | translate }}"
-                              matTooltipPosition="above">
-                        <mat-icon>delete</mat-icon>
-                      </button>
-                    </div>
-                  </div>
-                }
-              </div>
-            } @else {
-              <span class="tb-prompt flex items-center justify-center">{{ 'calculated-fields.no-level' | translate }}</span>
-            }
-            @if (levelsFormArray().errors) {
-              <tb-error noMargin error="{{ 'calculated-fields.levels-required' | translate }}" style="padding-left: 12px;"></tb-error>
-            }
-          </div>
-          <div>
-            @if (maxRelationLevelPerCfArgument && levelsFormArray().length >= maxRelationLevelPerCfArgument) {
-              <div class="tb-form-hint tb-primary-fill max-args-warning flex items-center gap-2">
-                <mat-icon>warning</mat-icon>
-                <span>{{ 'calculated-fields.max-allowed-levels-error' | translate }}</span>
+      @if (entityType === ArgumentEntityType.RelationQuery) {
+        <div class="tb-form-panel stroked">
+          <mat-expansion-panel class="tb-settings" expanded>
+            <mat-expansion-panel-header>
+              <span class="tb-form-panel-title tb-required">{{ 'calculated-fields.entity-zone-relationship' | translate }}</span>
+            </mat-expansion-panel-header>
+            <div class="tb-form-table">
+              <div class="tb-form-table-header">
+                <div class="tb-form-table-header-cell tb-actions-header"></div>
+                <div class="tb-form-table-header-cell" translate>calculated-fields.level</div>
+                <div class="tb-form-table-header-cell flex-1" translate>calculated-fields.direction-level</div>
+                <div class="tb-form-table-header-cell tb-required flex-1" translate>calculated-fields.relation-type</div>
+                <div class="tb-form-table-header-cell tb-actions-header"></div>
               </div>
-            } @else {
-              <button type="button" mat-stroked-button color="primary" (click)="addKey()" [disabled]="readonly">
-                {{ 'calculated-fields.add-level' | translate }}
-              </button>
-            }
-          </div>
-        </mat-expansion-panel>
-      </div>
+              @if (levelsFormArray()?.controls?.length) {
+                <div class="tb-form-table-body tb-drop-list"
+                     cdkDropList cdkDropListOrientation="vertical"
+                     [cdkDropListDisabled]="!dragEnabled"
+                     (cdkDropListDropped)="keyDrop($event)">
+                  @for (keyControl of levelsFormArray().controls; track trackByKey; ) {
+                    <div cdkDrag [cdkDragDisabled]="!dragEnabled" class="tb-draggable-form-table-row">
+                      <div class="tb-form-table-row-cell-buttons">
+                        <button mat-icon-button
+                                type="button"
+                                cdkDragHandle
+                                class="lt-lg:!hidden"
+                                [class.tb-hidden]="!dragEnabled"
+                                matTooltip="{{ 'action.drag' | translate }}"
+                                matTooltipPosition="above">
+                          <mat-icon>drag_indicator</mat-icon>
+                        </button>
+                      </div>
+                      <div class="tb-form-row no-border flex-1" [formGroup]="keyControl">
+                        <div class="level-text">{{ $index + 1 }}</div>
+                        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+                          <mat-select formControlName="direction">
+                            @for (direction of GeofencingDirectionList; track direction) {
+                              <mat-option [value]="direction">{{ GeofencingDirectionLevelTranslations.get(direction) | translate }}</mat-option>
+                            }
+                          </mat-select>
+                        </mat-form-field>
+                        <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                                additionalClass="tb-suffix-show-on-hover"
+                                                class="flex-1"
+                                                appearance="outline"
+                                                panelWidth=""
+                                                required
+                                                [errorText]="'calculated-fields.hint.relation-type-required' | translate"
+                                                formControlName="relationType">
+                        </tb-string-autocomplete>
+                      </div>
+                      <div class="tb-form-table-row-cell-buttons">
+                        <button type="button"
+                                mat-icon-button
+                                (click)="removeKey($index)"
+                                [disabled]="readonly"
+                                matTooltip="{{ 'calculated-fields.delete-level' | translate }}"
+                                matTooltipPosition="above">
+                          <mat-icon>delete</mat-icon>
+                        </button>
+                      </div>
+                    </div>
+                  }
+                </div>
+              } @else {
+                <span class="tb-prompt flex items-center justify-center">{{ 'calculated-fields.no-level' | translate }}</span>
+              }
+              @if (levelsFormArray().errors) {
+                <tb-error noMargin error="{{ 'calculated-fields.levels-required' | translate }}" style="padding-left: 12px;"></tb-error>
+              }
+            </div>
+            <div>
+              @if (maxRelationLevelPerCfArgument && levelsFormArray().length >= maxRelationLevelPerCfArgument) {
+                <div class="tb-form-hint tb-primary-fill max-args-warning flex items-center gap-2">
+                  <mat-icon>warning</mat-icon>
+                  <span>{{ 'calculated-fields.max-allowed-levels-error' | translate }}</span>
+                </div>
+              } @else {
+                <button type="button" mat-stroked-button color="primary" (click)="addKey()" [disabled]="readonly">
+                  {{ 'calculated-fields.add-level' | translate }}
+                </button>
+              }
+            </div>
+          </mat-expansion-panel>
+        </div>
+      }
     </ng-container>
     <ng-container>
       @if (entityFilter.singleEntity?.id || entityType === ArgumentEntityType.RelationQuery || entityType === ArgumentEntityType.Current || entityType === ArgumentEntityType.Owner) {
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/table-header/calculated-fields-filter-config.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/table-header/calculated-fields-filter-config.component.html
index a1ccb56560..79062b1a0e 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/table-header/calculated-fields-filter-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/table-header/calculated-fields-filter-config.component.html
@@ -15,11 +15,10 @@
     limitations under the License.
 
 -->
-<ng-container *ngIf="panelMode; else componentMode">
+@if (panelMode) {
   <ng-container *ngTemplateOutlet="calculatedFieldsFilterPanel"></ng-container>
-</ng-container>
-<ng-template #componentMode>
-  <ng-container *ngIf="buttonMode; else calculatedFieldsFilter">
+} @else {
+  @if (buttonMode) {
     <button color="primary"
             matTooltip="{{buttonDisplayValue}}"
             matTooltipPosition="above"
@@ -27,8 +26,49 @@
             (click)="toggleCfFilterPanel($event)">
       <mat-icon>filter_list</mat-icon>{{buttonDisplayValue}}
     </button>
-  </ng-container>
-</ng-template>
+  } @else {
+    <div class="tb-form-panel tb-calculated-fields-config-component no-padding no-border" [formGroup]="cfFilterForm">
+      <div class="tb-form-row column-xs">
+        <div class="fixed-title-width" translate>calculated-fields.calculated-field-types</div>
+        <tb-string-items-list subscriptSizing="dynamic"
+                              formControlName="types"
+                              appearance="outline"
+                              fieldClass="flex"
+                              class="flex-1"
+                              placeholder="{{ !cfFilterForm.get('types').value?.length ? ('calculated-fields.any-type' | translate) : '' }}"
+                              [predefinedValues]="types">
+        </tb-string-items-list>
+      </div>
+      <div class="tb-form-row column-xs">
+        <div class="fixed-title-width" translate>entity.entity-type</div>
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="entityType" placeholder="{{ 'alarm-rule.any-type' | translate }}">
+            <mat-option>{{ 'alarm-rule.any-type' | translate }}</mat-option>
+            @for (type of listEntityTypes; track type) {
+              <mat-option [value]="type">
+                {{ entityTypeTranslations.get(type)?.type | translate }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+      @if (cfFilterForm.get('entityType').value) {
+        <div class="tb-form-row column-xs">
+          <div class="fixed-title-width" translate>entity.entities</div>
+          <tb-entity-list appearance="outline"
+                          subscriptSizing="dynamic"
+                          class="flex flex-1"
+                          inlineField
+                          syncIdsWithDB
+                          labelText="{{'entity.entity-list' | translate}}"
+                          [entityType]="cfFilterForm.get('entityType').value"
+                          formControlName="entities">
+          </tb-entity-list>
+        </div>
+      }
+    </div>
+  }
+}
 <ng-template #calculatedFieldsFilterPanel>
   <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="calculatedFieldsFilter"></ng-container>
@@ -72,9 +112,11 @@
       <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="entityType" placeholder="{{ 'alarm-rule.any-type' | translate }}">
           <mat-option>{{ 'alarm-rule.any-type' | translate }}</mat-option>
-          <mat-option *ngFor="let type of listEntityTypes" [value]="type">
-            {{ entityTypeTranslations.get(type)?.type | translate }}
-          </mat-option>
+          @for (type of listEntityTypes; track type) {
+            <mat-option [value]="type">
+              {{ entityTypeTranslations.get(type)?.type | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
index 0e1b2a7e07..ebd73b5388 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
@@ -21,11 +21,13 @@
       <h2>{{'widget.add' | translate}}:</h2>
       <span class="flex-1">{{data.widgetInfo.widgetName}}</span>
       <div class="flex flex-row items-center justify-start gt-xs:gap-4" style="min-width: fit-content;">
-        <tb-toggle-select *ngIf="widgetConfig.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs"
-                          [(ngModel)]="widgetConfigMode" [ngModelOptions]="{standalone: true}">
-          <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
-          <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
-        </tb-toggle-select>
+        @if (widgetConfig.hasBasicMode) {
+          <tb-toggle-select appearance="fill-invert" selectMediaBreakpoint="xs"
+                            [(ngModel)]="widgetConfigMode" [ngModelOptions]="{standalone: true}">
+            <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
+            <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
+          </tb-toggle-select>
+        }
         <div [tb-help]="helpLinkIdForWidgetType()"></div>
       </div>
     </div>
@@ -49,22 +51,24 @@
       isAdd
       formControlName="widgetConfig">
     </tb-widget-config>
-    <tb-widget-preview *ngIf="previewMode" class="tb-absolute-fill"
-      [aliasController]="aliasController"
-      [stateController]="stateController"
-      [dashboardTimewindow]="dashboard.configuration.timewindow"
-      [widget]="widget"
-      [widgetConfig]="widgetFormGroup.get('widgetConfig').value.config"
-      [previewWidth]="widgetConfig.typeParameters.previewWidth"
-      [previewHeight]="widgetConfig.typeParameters.previewHeight">
-      <div class="tb-preview-panel-content">
-        <button mat-button
-                (click)="previewMode = false">
-          <mat-icon>chevron_left</mat-icon>
-          {{ 'action.back' | translate }}
-        </button>
-      </div>
-    </tb-widget-preview>
+    @if (previewMode) {
+      <tb-widget-preview class="tb-absolute-fill"
+                         [aliasController]="aliasController"
+                         [stateController]="stateController"
+                         [dashboardTimewindow]="dashboard.configuration.timewindow"
+                         [widget]="widget"
+                         [widgetConfig]="widgetFormGroup.get('widgetConfig').value.config"
+                         [previewWidth]="widgetConfig.typeParameters.previewWidth"
+                         [previewHeight]="widgetConfig.typeParameters.previewHeight">
+        <div class="tb-preview-panel-content">
+          <button mat-button
+                  (click)="previewMode = false">
+            <mat-icon>chevron_left</mat-icon>
+            {{ 'action.back' | translate }}
+          </button>
+        </div>
+      </tb-widget-preview>
+    }
   </div>
   <div mat-dialog-actions class="flex items-center justify-between">
     <button mat-button color="primary"
@@ -74,14 +78,16 @@
       {{ 'action.cancel' | translate }}
     </button>
     <div class="flex flex-row gap-2">
-      <button *ngIf="!previewMode"
-              mat-button color="primary"
-              type="button"
-              [disabled]="!widgetFormGroup.valid"
-              (click)="previewMode = true"
-              cdkFocusInitial>
-        {{ 'widget-config.preview' | translate }}
-      </button>
+      @if (!previewMode) {
+        <button
+          mat-button color="primary"
+          type="button"
+          [disabled]="!widgetFormGroup.valid"
+          (click)="previewMode = true"
+          cdkFocusInitial>
+          {{ 'widget-config.preview' | translate }}
+        </button>
+      }
       <button mat-raised-button color="primary"
               (click)="add()"
               [disabled]="!widgetFormGroup.valid">
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
index 0a71d7a9ae..35d77e784a 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
@@ -25,8 +25,10 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content style="position: relative;">
     <fieldset [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)" class="flex flex-col items-stretch justify-center gap-2">
       <div [formGroup]="dashboardRectFormGroup" class="flex flex-col items-center justify-center gap-2">
@@ -40,8 +42,11 @@
             <input matInput formControlName="left" type="number" step="1" min="0" max="100">
           </mat-form-field>
           <div class="tb-image-preview-container">
-            <div *ngIf="!imageUrl; else elseBlock">{{ 'dashboard.no-image' | translate }}</div>
-            <ng-template #elseBlock><img class="tb-image-preview" [src]="imageUrl | image | async" /></ng-template>
+            @if (!imageUrl) {
+              <div>{{ 'dashboard.no-image' | translate }}</div>
+            } @else {
+              <img class="tb-image-preview" [src]="imageUrl | image | async" />
+            }
           </div>
           <mat-form-field class="rect-field">
             <mat-label>Right %</mat-label>
@@ -63,13 +68,15 @@
       </div>
       <div [formGroup]="dashboardImageFormGroup">
         <tb-gallery-image-input label="{{'dashboard.image' | translate}}"
-                        formControlName="dashboardImage">
+                                formControlName="dashboardImage">
         </tb-gallery-image-input>
       </div>
     </fieldset>
-    <div *ngIf="takingScreenshot$ | async" class="taking-screenshot-progress tb-absolute-fill flex flex-col items-center justify-center">
+    @if (takingScreenshot$ | async) {
+      <div class="taking-screenshot-progress tb-absolute-fill flex flex-col items-center justify-center">
         <mat-progress-spinner color="accent" mode="indeterminate"></mat-progress-spinner>
-    </div>
+      </div>
+    }
   </div>
   <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
index e971c3da39..46b2bbb9ae 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
@@ -25,9 +25,11 @@
                           [toolbarOpened]="toolbarOpened" (triggerClick)="openToolbar()">
       <div class="tb-dashboard-action-panels flex flex-col items-stretch justify-center gt-sm:flex-row gt-sm:items-center gt-sm:justify-between">
         <div class="tb-dashboard-action-panel tb-left-panel" [class.!hidden]="isMobileApp && !isEdit">
-          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" class="gt-sm:!hidden" displayUserInfo="true">
-          </tb-user-menu>
-          <ng-container *ngIf="isEdit">
+          @if (!isPublicUser() && forceFullscreen) {
+            <tb-user-menu class="gt-sm:!hidden" displayUserInfo="true">
+            </tb-user-menu>
+          }
+          @if (isEdit) {
             <div style="flex: 1 1 100%" class="gt-sm:!hidden"></div>
             <div class="flex flex-row items-center justify-end lg:gap-1.5 lt-md:flex-1 lt-lg:gap-0.75 gt-sm:items-center gt-sm:justify-start gt-lg:gap-3">
               <mat-divider class="tb-toolbar-divider" vertical></mat-divider>
@@ -48,7 +50,7 @@
                 [dashboardCtrl]="this">
               </tb-select-dashboard-breakpoint>
             </div>
-          </ng-container>
+          }
           <tb-states-component class="lt-md:flex-1"
                                [statesControllerId]="isEdit ? 'default' : dashboardConfiguration.settings.stateControllerId"
                                [dashboardCtrl]="this"
@@ -59,7 +61,7 @@
                                [syncStateWithQueryParam]="syncStateWithQueryParam"
                                [states]="dashboardConfiguration.states">
           </tb-states-component>
-          <ng-container *ngIf="isEdit">
+          @if (isEdit) {
             <button class="gt-md:!hidden" mat-icon-button
                     matTooltip="{{'dashboard.manage-states' | translate}}"
                     matTooltipPosition="below"
@@ -73,8 +75,10 @@
               <mat-icon>layers</mat-icon>
               {{'dashboard.states-short' | translate}}
             </button>
-          </ng-container>
-          <tb-logo *ngIf="showDashboardLogo()" [link]="dashboardLogoLink" [src]="dashboardLogo | image | async" class="dashboard_logo"></tb-logo>
+          }
+          @if (showDashboardLogo()) {
+            <tb-logo [link]="dashboardLogoLink" [src]="dashboardLogo | image | async" class="dashboard_logo"></tb-logo>
+          }
         </div>
         <div class="tb-dashboard-action-panel">
           <button [class.!hidden]="!showCloseToolbar()" mat-icon-button class="close-action"
@@ -83,8 +87,10 @@
                   (click)="closeToolbar()">
             <mat-icon>arrow_forward</mat-icon>
           </button>
-          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" class="lt-md:!hidden" displayUserInfo="true">
-          </tb-user-menu>
+          @if (!isPublicUser() && forceFullscreen) {
+            <tb-user-menu class="lt-md:!hidden" displayUserInfo="true">
+            </tb-user-menu>
+          }
           <button [class.!hidden]="!showRightLayoutSwitch()" mat-icon-button
                   matTooltip="{{ (isRightLayoutOpened ? 'dashboard.hide-details' : 'dashboard.show-details') | translate }}"
                   matTooltipPosition="below"
@@ -103,371 +109,399 @@
                   (click)="exportDashboard($event)">
             <mat-icon>file_download</mat-icon>
           </button>
-          <ng-container *ngIf="!readonly && !isEdit">
+          @if (!readonly && !isEdit) {
             <button class="gt-md:!hidden" mat-icon-button (click)="toggleDashboardEditMode()"
                     matTooltip="{{'dashboard.edit-mode' | translate}}"
                     matTooltipPosition="below">
               <mat-icon>edit</mat-icon></button>
-            <button class="lt-lg:!hidden" mat-stroked-button (click)="toggleDashboardEditMode()">
-              <mat-icon>edit</mat-icon>{{'dashboard.edit-mode' | translate}}</button>
-          </ng-container>
-          <ng-container *ngIf="isEdit">
-            <button class="gt-md:!hidden" mat-icon-button (click)="saveDashboard()" [disabled]="isLoading$ | async"
-                    matTooltip="{{'action.save' | translate}}"
-                    matTooltipPosition="below">
-              <mat-icon>done</mat-icon></button>
-            <button class="lt-lg:!hidden" mat-stroked-button [disabled]="isLoading$ | async" (click)="saveDashboard()">
-              <mat-icon>done</mat-icon>{{ 'action.save' | translate }}</button>
-            <button class="gt-md:!hidden" mat-icon-button (click)="toggleDashboardEditMode()"
-                    matTooltip="{{'action.cancel' | translate}}"
-                    [disabled]="isLoading$ | async"
-                    matTooltipPosition="below">
-              <mat-icon>close</mat-icon></button>
-            <button class="lt-lg:!hidden" mat-button (click)="toggleDashboardEditMode()" [disabled]="isLoading$ | async">
-              <mat-icon>close</mat-icon>{{ 'action.cancel' | translate }}</button>
-            <mat-divider class="tb-toolbar-divider" vertical></mat-divider>
-          </ng-container>
-          <ng-container *ngIf="currentDashboardId && isEdit && isTenantAdmin()">
-            <button class="lt-lg:!hidden gt-lg:!hidden" mat-icon-button
-                    #versionControlIconButton
-                    matTooltip="{{'version-control.version-control' | translate}}"
-                    matTooltipPosition="below"
-                    (click)="toggleVersionControl($event, versionControlIconButton)">
-              <mat-icon>history</mat-icon>
-            </button>
-            <button class="lt-xl:!hidden" mat-button
-                    #versionControlButton
-                    matTooltip="{{'version-control.version-control' | translate}}"
-                    matTooltipPosition="below"
-                    (click)="toggleVersionControl($event, versionControlButton)">
-              <mat-icon>history</mat-icon>
-              {{'version-control.versions' | translate}}
-            </button>
-          </ng-container>
-          <ng-container *ngIf="isEdit">
-            <button class="gt-lg:!hidden" mat-icon-button
-                    matTooltip="{{ 'filter.filters' | translate }}"
-                    matTooltipPosition="below"
-                    (click)="openFilters($event)">
-              <mat-icon>filter_list</mat-icon>
-            </button>
-            <button class="lt-xl:!hidden" mat-button
-                    matTooltip="{{ 'filter.filters' | translate }}"
-                    matTooltipPosition="below"
-                    (click)="openFilters($event)">
-              <mat-icon>filter_list</mat-icon>
-              {{ 'filter.filters' | translate }}
-            </button>
-          </ng-container>
-          <ng-container *ngIf="isEdit">
-            <button class="gt-lg:!hidden" mat-icon-button
-                    matTooltip="{{ 'entity.aliases' | translate }}"
-                    matTooltipPosition="below"
-                    (click)="openEntityAliases($event)">
-              <mat-icon>devices_other</mat-icon>
-            </button>
-            <button class="lt-xl:!hidden" mat-button
-                    matTooltip="{{ 'entity.aliases' | translate }}"
-                    matTooltipPosition="below"
-                    (click)="openEntityAliases($event)">
-              <mat-icon>devices_other</mat-icon>
-              {{ 'entity.aliases-short' | translate }}
-            </button>
-          </ng-container>
-          <ng-container *ngIf="isEdit">
-            <button class="gt-lg:!hidden" mat-icon-button
-                    matTooltip="{{ 'dashboard.settings' | translate }}"
-                    matTooltipPosition="below"
-                    (click)="openDashboardSettings($event)">
-              <mat-icon>settings</mat-icon>
-            </button>
-            <button class="lt-xl:!hidden" mat-button
-                    matTooltip="{{ 'dashboard.settings' | translate }}"
-                    matTooltipPosition="below"
-                    (click)="openDashboardSettings($event)">
-              <mat-icon>settings</mat-icon>
-              {{ 'dashboard.settings' | translate }}
-            </button>
-          </ng-container>
-          <button [class.!hidden]="!currentDashboardId || isEdit || isMobileApp || !isTenantAdmin() || !displayUpdateDashboardImage()" mat-icon-button
-                  matTooltip="{{'dashboard.update-image' | translate}}"
-                  matTooltipPosition="below"
-                  (click)="updateDashboardImage($event)">
-            <mat-icon>wallpaper</mat-icon>
-          </button>
-          <ng-container *ngIf="isEdit; else timewindowTemplate">
-            <tb-timewindow class="lt-xl:!hidden" asButton
-                           flatButton
-                           showSaveAsDefault
-                           [displayTimewindowValue]="false"
-                           [isEdit]="true"
-                           tooltipPosition="below"
-                           aggregation="true"
-                           timezone="true"
-                           [(ngModel)]="dashboardCtx.dashboardTimewindow">
-            </tb-timewindow>
-            <tb-timewindow class="gt-lg:!hidden"
-                           hideLabel
-                           showSaveAsDefault
-                           [isEdit]="true"
-                           tooltipPosition="below"
-                           aggregation="true"
-                           timezone="true"
-                           [(ngModel)]="dashboardCtx.dashboardTimewindow">
-            </tb-timewindow>
-          </ng-container>
-          <ng-template #timewindowTemplate>
-            <ng-container *ngIf="displayDashboardTimewindow()">
-              <tb-timewindow class="gt-md:!hidden"
-                             [isEdit]="false"
-                             hideLabel
-                             tooltipPosition="below"
-                             aggregation="true"
-                             timezone="true"
-                             [showSaveAsDefault]="!readonly"
-                             [(ngModel)]="dashboardCtx.dashboardTimewindow"
-                             (saveAsDefault)="saveDashboard()">>
-              </tb-timewindow>
-              <tb-timewindow class="lt-lg:!hidden"
-                             [isEdit]="false"
-                             tooltipPosition="below"
-                             aggregation="true"
-                             timezone="true"
-                             [showSaveAsDefault]="!readonly"
-                             [(ngModel)]="dashboardCtx.dashboardTimewindow"
-                             (saveAsDefault)="saveDashboard()">>
-              </tb-timewindow>
-            </ng-container>
-          </ng-template>
-          <ng-container *ngIf="isEdit">
-            <button class="gt-md:!hidden" mat-icon-button
-                    matTooltip="{{ 'dashboard.add-widget-button-text' | translate }}"
-                    matTooltipPosition="below"
-                    (click)="addWidget($event)">
-              <mat-icon>add</mat-icon>
-            </button>
-            <button class="lt-lg:!hidden" mat-stroked-button
-                    matTooltip="{{ 'dashboard.add-widget-button-text' | translate }}"
-                    matTooltipPosition="below"
-                    (click)="addWidget($event)">
-              <mat-icon>add</mat-icon>
-              {{ 'dashboard.add-widget-button-text' | translate }}
-            </button>
-          </ng-container>
-          <tb-filters-edit [class.!hidden]="isEdit || !displayFilters()"
-                           tooltipPosition="below"
-                           [aliasController]="dashboardCtx.aliasController">
-          </tb-filters-edit>
-          <tb-aliases-entity-select [class.!hidden]="isEdit || !displayEntitiesSelect()"
-                                    tooltipPosition="below"
-                                    [aliasController]="dashboardCtx.aliasController">
-          </tb-aliases-entity-select>
-          <tb-dashboard-select *ngIf="!isEdit && !widgetEditMode && !embedded && displayDashboardsSelect()"
-                               [(ngModel)]="currentDashboardId"
-                               (ngModelChange)="currentDashboardIdChanged(currentDashboardId)"
-                               [customerId]="currentCustomerId"
-                               [dashboardsScope]="currentDashboardScope">
-          </tb-dashboard-select>
-        </div>
-      </div>
-    </tb-dashboard-toolbar>
-  </section>
-  <section class="tb-dashboard-container tb-absolute-fill"
-           tb-toast toastTarget="dashboardRoot"
-           #dashboardContainer
-           [class.is-fullscreen]="forceFullscreen"
-           [class.tb-dashboard-toolbar-opened]="toolbarOpened"
-           [class.tb-dashboard-toolbar-animated]="isToolbarOpenedAnimate"
-           [class.tb-dashboard-toolbar-closed]="!toolbarOpened">
-    <mat-drawer-container hasBackdrop="false" class="tb-absolute-fill tb-dashboard-drawer-container">
-      <mat-drawer-content #dashboardContent class="flex flex-col items-start justify-center">
-        <section *ngIf="!widgetEditMode" class="tb-dashboard-title"
-                 [style.color]="dashboard.configuration.settings.titleColor">
-          <h3 [class.!hidden]="isEdit || !displayTitle()">{{ translatedDashboardTitle }}</h3>
-          <mat-form-field [class.!hidden]="!isEdit" class="mat-block tb-appearance-transparent" subscriptSizing="dynamic">
-            <mat-label translate [style.color]="dashboard.configuration.settings.titleColor">dashboard.title</mat-label>
-            <input matInput class="tb-dashboard-title"
-                   [style.color]="dashboard.configuration.settings.titleColor"
-                   required name="title" [(ngModel)]="dashboard.title">
-          </mat-form-field>
-        </section>
-        <mat-drawer-container class="tb-dashboard-layouts flex-1"
-                              [class.tb-shrinked]="isEditingWidget">
-          <mat-drawer *ngIf="layouts.right.show"
-                      id="tb-right-layout"
-                      style="border-left: none"
-                      [style.min-width]="rightLayoutSize.width"
-                      [style.max-width]="rightLayoutSize.width"
-                      [style.height]="rightLayoutSize.height"
-              disableClose="true"
-              [@.disabled]="!isMobile"
-              position="end"
-              [mode]="isMobile ? 'over' : 'side'"
-              [(opened)]="rightLayoutOpened">
-            <tb-dashboard-layout style="height: 100%;"
-              [dashboardCheatSheet]="cheatSheetComponent"
-              [layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.main.layoutCtx : layouts.right.layoutCtx"
-              [dashboardCtx]="dashboardCtx"
-              [isEdit]="isEdit"
-              [isEditingWidget]="isEditingWidget"
-              [isMobile]="forceDashboardMobileMode"
-              [widgetEditMode]="widgetEditMode"
-              [parentDashboard]="parentDashboard"
-              [popoverComponent]="popoverComponent">
-            </tb-dashboard-layout>
-          </mat-drawer>
-          <mat-drawer-content [class.!hidden]="!layouts.main.show"
-                              id="tb-main-layout"
-                              [style.width]="mainLayoutSize.width"
-                              [style.height]="mainLayoutSize.height">
-            <tb-dashboard-layout
-              [style.max-width]="mainLayoutSize.maxWidth"
-              [style.min-width]="mainLayoutSize.minWidth"
-              [dashboardCheatSheet]="cheatSheetComponent"
-              [layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.right.layoutCtx : layouts.main.layoutCtx"
-              [dashboardCtx]="dashboardCtx"
-              [isEdit]="isEdit"
-              [isEditingWidget]="isEditingWidget"
-              [isMobile]="forceDashboardMobileMode"
-              [widgetEditMode]="widgetEditMode"
-              [parentDashboard]="parentDashboard"
-              [popoverComponent]="popoverComponent">
-            </tb-dashboard-layout>
-            <div class="layout-filler"
-                 *ngIf="isEdit"
-                 [class.!hidden]="!showMainLayoutFiller">
-              {{ 'dashboard.breakpoint-value' | translate : {value: currentBreakpointValue } }}
-            </div>
-          </mat-drawer-content>
-        </mat-drawer-container>
-        <section data-html2canvas-ignore class="tb-header-buttons tb-enter-edit-mode flex flex-row flex-wrap items-end justify-start" *ngIf="!readonly && (hideToolbar || widgetEditMode)">
-          <button [class.!hidden]="isEdit"
-                  color="primary"
-                  mat-mini-fab
-                  class="tb-btn-header tb-btn-edit"
-                  (click)="toggleDashboardEditMode()"
-                  matTooltip="{{ 'action.enter-edit-mode' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>edit</mat-icon>
-          </button>
-          <button [class.!hidden]="!isEdit"
-                  color="primary"
-                  mat-mini-fab
-                  class="tb-btn-header tb-btn-edit"
-                  (click)="saveDashboard()"
-                  [disabled]="isLoading$ | async"
-                  matTooltip="{{'action.save' | translate}}"
-                  matTooltipPosition="below">
-            <mat-icon>done</mat-icon></button>
-          <button [class.!hidden]="!isEdit"
-                  color="primary"
-                  mat-mini-fab
-                  class="tb-btn-header tb-btn-edit"
-                  (click)="toggleDashboardEditMode()"
-                  [disabled]="isLoading$ | async"
-                  matTooltip="{{'action.cancel' | translate}}"
-                  matTooltipPosition="below">
-            <mat-icon>close</mat-icon></button>
-        </section>
-        <section *ngIf="!embedded" data-html2canvas-ignore class="tb-powered-by-footer" [style.color]="dashboard.configuration.settings.titleColor">
-          <span>Powered by <a href="https://thingsboard.io" target="_blank">ThingsBoard v.{{ thingsboardVersion }}</a></span>
-        </section>
-      </mat-drawer-content>
-      <mat-drawer class="tb-details-drawer"
-                  [opened]="isEditingWidget || isAddingWidget"
-                  (openedStart)="detailsDrawerOpenedStart()"
-                  (closed)="detailsDrawerClosed()"
-                  disableClose
-                  mode="over"
-                  position="end">
-        <tb-details-panel *ngIf="!isEditingWidgetClosed" class="flex-1"
-                          headerTitle="{{editingWidget?.config.title}}"
-                          headerSubtitle="{{ editingWidgetSubtitle }}"
-                          [isReadOnly]="true"
-                          (closeDetails)="onEditWidgetClosed()">
-          <div class="details-buttons flex flex-row items-center justify-start gap-4">
-            <tb-toggle-select *ngIf="tbEditWidget.widgetConfig?.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs" [(ngModel)]="tbEditWidget.widgetConfigMode">
-              <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
-              <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
-            </tb-toggle-select>
-            <div [tb-help]="helpLinkIdForWidgetType()"></div>
-          </div>
-          <tb-edit-widget #tbEditWidget
-                          [dashboard]="dashboard"
-                          [aliasController]="dashboardCtx.aliasController"
-                          [stateController]="dashboardCtx.stateController"
+              <button class="lt-lg:!hidden" mat-stroked-button (click)="toggleDashboardEditMode()">
+                <mat-icon>edit</mat-icon>{{'dashboard.edit-mode' | translate}}</button>
+              }
+              @if (isEdit) {
+                <button class="gt-md:!hidden" mat-icon-button (click)="saveDashboard()" [disabled]="isLoading$ | async"
+                        matTooltip="{{'action.save' | translate}}"
+                        matTooltipPosition="below">
+                  <mat-icon>done</mat-icon></button>
+                  <button class="lt-lg:!hidden" mat-stroked-button [disabled]="isLoading$ | async" (click)="saveDashboard()">
+                    <mat-icon>done</mat-icon>{{ 'action.save' | translate }}</button>
+                    <button class="gt-md:!hidden" mat-icon-button (click)="toggleDashboardEditMode()"
+                            matTooltip="{{'action.cancel' | translate}}"
+                            [disabled]="isLoading$ | async"
+                            matTooltipPosition="below">
+                      <mat-icon>close</mat-icon></button>
+                      <button class="lt-lg:!hidden" mat-button (click)="toggleDashboardEditMode()" [disabled]="isLoading$ | async">
+                        <mat-icon>close</mat-icon>{{ 'action.cancel' | translate }}</button>
+                        <mat-divider class="tb-toolbar-divider" vertical></mat-divider>
+                      }
+                      @if (currentDashboardId && isEdit && isTenantAdmin()) {
+                        <button class="lt-lg:!hidden gt-lg:!hidden" mat-icon-button
+                                #versionControlIconButton
+                                matTooltip="{{'version-control.version-control' | translate}}"
+                                matTooltipPosition="below"
+                                (click)="toggleVersionControl($event, versionControlIconButton)">
+                          <mat-icon>history</mat-icon>
+                        </button>
+                        <button class="lt-xl:!hidden" mat-button
+                                #versionControlButton
+                                matTooltip="{{'version-control.version-control' | translate}}"
+                                matTooltipPosition="below"
+                                (click)="toggleVersionControl($event, versionControlButton)">
+                          <mat-icon>history</mat-icon>
+                          {{'version-control.versions' | translate}}
+                        </button>
+                      }
+                      @if (isEdit) {
+                        <button class="gt-lg:!hidden" mat-icon-button
+                                matTooltip="{{ 'filter.filters' | translate }}"
+                                matTooltipPosition="below"
+                                (click)="openFilters($event)">
+                          <mat-icon>filter_list</mat-icon>
+                        </button>
+                        <button class="lt-xl:!hidden" mat-button
+                                matTooltip="{{ 'filter.filters' | translate }}"
+                                matTooltipPosition="below"
+                                (click)="openFilters($event)">
+                          <mat-icon>filter_list</mat-icon>
+                          {{ 'filter.filters' | translate }}
+                        </button>
+                      }
+                      @if (isEdit) {
+                        <button class="gt-lg:!hidden" mat-icon-button
+                                matTooltip="{{ 'entity.aliases' | translate }}"
+                                matTooltipPosition="below"
+                                (click)="openEntityAliases($event)">
+                          <mat-icon>devices_other</mat-icon>
+                        </button>
+                        <button class="lt-xl:!hidden" mat-button
+                                matTooltip="{{ 'entity.aliases' | translate }}"
+                                matTooltipPosition="below"
+                                (click)="openEntityAliases($event)">
+                          <mat-icon>devices_other</mat-icon>
+                          {{ 'entity.aliases-short' | translate }}
+                        </button>
+                      }
+                      @if (isEdit) {
+                        <button class="gt-lg:!hidden" mat-icon-button
+                                matTooltip="{{ 'dashboard.settings' | translate }}"
+                                matTooltipPosition="below"
+                                (click)="openDashboardSettings($event)">
+                          <mat-icon>settings</mat-icon>
+                        </button>
+                        <button class="lt-xl:!hidden" mat-button
+                                matTooltip="{{ 'dashboard.settings' | translate }}"
+                                matTooltipPosition="below"
+                                (click)="openDashboardSettings($event)">
+                          <mat-icon>settings</mat-icon>
+                          {{ 'dashboard.settings' | translate }}
+                        </button>
+                      }
+                      <button [class.!hidden]="!currentDashboardId || isEdit || isMobileApp || !isTenantAdmin() || !displayUpdateDashboardImage()" mat-icon-button
+                              matTooltip="{{'dashboard.update-image' | translate}}"
+                              matTooltipPosition="below"
+                              (click)="updateDashboardImage($event)">
+                        <mat-icon>wallpaper</mat-icon>
+                      </button>
+                      @if (isEdit) {
+                        <tb-timewindow class="lt-xl:!hidden" asButton
+                                       flatButton
+                                       showSaveAsDefault
+                                       [displayTimewindowValue]="false"
+                                       [isEdit]="true"
+                                       tooltipPosition="below"
+                                       aggregation="true"
+                                       timezone="true"
+                                       [(ngModel)]="dashboardCtx.dashboardTimewindow">
+                        </tb-timewindow>
+                        <tb-timewindow class="gt-lg:!hidden"
+                                       hideLabel
+                                       showSaveAsDefault
+                                       [isEdit]="true"
+                                       tooltipPosition="below"
+                                       aggregation="true"
+                                       timezone="true"
+                                       [(ngModel)]="dashboardCtx.dashboardTimewindow">
+                        </tb-timewindow>
+                      } @else {
+                        @if (displayDashboardTimewindow()) {
+                          <tb-timewindow class="gt-md:!hidden"
+                                         [isEdit]="false"
+                                         hideLabel
+                                         tooltipPosition="below"
+                                         aggregation="true"
+                                         timezone="true"
+                                         [showSaveAsDefault]="!readonly"
+                                         [(ngModel)]="dashboardCtx.dashboardTimewindow"
+                                         (saveAsDefault)="saveDashboard()">>
+                          </tb-timewindow>
+                          <tb-timewindow class="lt-lg:!hidden"
+                                         [isEdit]="false"
+                                         tooltipPosition="below"
+                                         aggregation="true"
+                                         timezone="true"
+                                         [showSaveAsDefault]="!readonly"
+                                         [(ngModel)]="dashboardCtx.dashboardTimewindow"
+                                         (saveAsDefault)="saveDashboard()">>
+                          </tb-timewindow>
+                        }
+                      }
+                      @if (isEdit) {
+                        <button class="gt-md:!hidden" mat-icon-button
+                                matTooltip="{{ 'dashboard.add-widget-button-text' | translate }}"
+                                matTooltipPosition="below"
+                                (click)="addWidget($event)">
+                          <mat-icon>add</mat-icon>
+                        </button>
+                        <button class="lt-lg:!hidden" mat-stroked-button
+                                matTooltip="{{ 'dashboard.add-widget-button-text' | translate }}"
+                                matTooltipPosition="below"
+                                (click)="addWidget($event)">
+                          <mat-icon>add</mat-icon>
+                          {{ 'dashboard.add-widget-button-text' | translate }}
+                        </button>
+                      }
+                      <tb-filters-edit [class.!hidden]="isEdit || !displayFilters()"
+                                       tooltipPosition="below"
+                                       [aliasController]="dashboardCtx.aliasController">
+                      </tb-filters-edit>
+                      <tb-aliases-entity-select [class.!hidden]="isEdit || !displayEntitiesSelect()"
+                                                tooltipPosition="below"
+                                                [aliasController]="dashboardCtx.aliasController">
+                      </tb-aliases-entity-select>
+                      @if (!isEdit && !widgetEditMode && !embedded && displayDashboardsSelect()) {
+                        <tb-dashboard-select
+                          [(ngModel)]="currentDashboardId"
+                          (ngModelChange)="currentDashboardIdChanged(currentDashboardId)"
+                          [customerId]="currentCustomerId"
+                          [dashboardsScope]="currentDashboardScope">
+                        </tb-dashboard-select>
+                      }
+                    </div>
+                  </div>
+                </tb-dashboard-toolbar>
+              </section>
+              <section class="tb-dashboard-container tb-absolute-fill"
+                       tb-toast toastTarget="dashboardRoot"
+                       #dashboardContainer
+                       [class.is-fullscreen]="forceFullscreen"
+                       [class.tb-dashboard-toolbar-opened]="toolbarOpened"
+                       [class.tb-dashboard-toolbar-animated]="isToolbarOpenedAnimate"
+                       [class.tb-dashboard-toolbar-closed]="!toolbarOpened">
+                <mat-drawer-container hasBackdrop="false" class="tb-absolute-fill tb-dashboard-drawer-container">
+                  <mat-drawer-content #dashboardContent class="flex flex-col items-start justify-center">
+                    @if (!widgetEditMode) {
+                      <section class="tb-dashboard-title"
+                               [style.color]="dashboard.configuration.settings.titleColor">
+                        <h3 [class.!hidden]="isEdit || !displayTitle()">{{ translatedDashboardTitle }}</h3>
+                        <mat-form-field [class.!hidden]="!isEdit" class="mat-block tb-appearance-transparent" subscriptSizing="dynamic">
+                          <mat-label translate [style.color]="dashboard.configuration.settings.titleColor">dashboard.title</mat-label>
+                          <input matInput class="tb-dashboard-title"
+                                 [style.color]="dashboard.configuration.settings.titleColor"
+                                 required name="title" [(ngModel)]="dashboard.title">
+                        </mat-form-field>
+                      </section>
+                    }
+                    <mat-drawer-container class="tb-dashboard-layouts flex-1"
+                                          [class.tb-shrinked]="isEditingWidget">
+                      @if (layouts.right.show) {
+                        <mat-drawer
+                          id="tb-right-layout"
+                          style="border-left: none"
+                          [style.min-width]="rightLayoutSize.width"
+                          [style.max-width]="rightLayoutSize.width"
+                          [style.height]="rightLayoutSize.height"
+                          disableClose="true"
+                          [@.disabled]="!isMobile"
+                          position="end"
+                          [mode]="isMobile ? 'over' : 'side'"
+                          [(opened)]="rightLayoutOpened">
+                          <tb-dashboard-layout style="height: 100%;"
+                                               [dashboardCheatSheet]="cheatSheetComponent"
+                                               [layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.main.layoutCtx : layouts.right.layoutCtx"
+                                               [dashboardCtx]="dashboardCtx"
+                                               [isEdit]="isEdit"
+                                               [isEditingWidget]="isEditingWidget"
+                                               [isMobile]="forceDashboardMobileMode"
+                                               [widgetEditMode]="widgetEditMode"
+                                               [parentDashboard]="parentDashboard"
+                                               [popoverComponent]="popoverComponent">
+                          </tb-dashboard-layout>
+                        </mat-drawer>
+                      }
+                      <mat-drawer-content [class.!hidden]="!layouts.main.show"
+                                          id="tb-main-layout"
+                                          [style.width]="mainLayoutSize.width"
+                                          [style.height]="mainLayoutSize.height">
+                        <tb-dashboard-layout
+                          [style.max-width]="mainLayoutSize.maxWidth"
+                          [style.min-width]="mainLayoutSize.minWidth"
+                          [dashboardCheatSheet]="cheatSheetComponent"
+                          [layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.right.layoutCtx : layouts.main.layoutCtx"
+                          [dashboardCtx]="dashboardCtx"
+                          [isEdit]="isEdit"
+                          [isEditingWidget]="isEditingWidget"
+                          [isMobile]="forceDashboardMobileMode"
                           [widgetEditMode]="widgetEditMode"
-                          [widget]="editingWidget"
-                          [widgetLayout]="editingWidgetLayout"
-                          [showLayoutConfig]="showLayoutConfigInEdit(editingLayoutCtx)"
-                          [isDefaultBreakpoint]="editingLayoutCtx?.breakpoint === 'default'"
-                          (revertWidgetConfig)="onRevertWidgetEdit()"
-                          (applyWidgetConfig)="saveWidget()">
-          </tb-edit-widget>
-        </tb-details-panel>
-        <tb-details-panel *ngIf="!isAddingWidgetClosed && !widgetEditMode" class="flex-1"
+                          [parentDashboard]="parentDashboard"
+                          [popoverComponent]="popoverComponent">
+                        </tb-dashboard-layout>
+                        @if (isEdit) {
+                          <div class="layout-filler"
+                               [class.!hidden]="!showMainLayoutFiller">
+                            {{ 'dashboard.breakpoint-value' | translate : {value: currentBreakpointValue } }}
+                          </div>
+                        }
+                      </mat-drawer-content>
+                    </mat-drawer-container>
+                    @if (!readonly && (hideToolbar || widgetEditMode)) {
+                      <section data-html2canvas-ignore class="tb-header-buttons tb-enter-edit-mode flex flex-row flex-wrap items-end justify-start">
+                        <button [class.!hidden]="isEdit"
+                                color="primary"
+                                mat-mini-fab
+                                class="tb-btn-header tb-btn-edit"
+                                (click)="toggleDashboardEditMode()"
+                                matTooltip="{{ 'action.enter-edit-mode' | translate }}"
+                                matTooltipPosition="above">
+                          <mat-icon>edit</mat-icon>
+                        </button>
+                        <button [class.!hidden]="!isEdit"
+                                color="primary"
+                                mat-mini-fab
+                                class="tb-btn-header tb-btn-edit"
+                                (click)="saveDashboard()"
+                                [disabled]="isLoading$ | async"
+                                matTooltip="{{'action.save' | translate}}"
+                                matTooltipPosition="below">
+                          <mat-icon>done</mat-icon></button>
+                          <button [class.!hidden]="!isEdit"
+                                  color="primary"
+                                  mat-mini-fab
+                                  class="tb-btn-header tb-btn-edit"
+                                  (click)="toggleDashboardEditMode()"
+                                  [disabled]="isLoading$ | async"
+                                  matTooltip="{{'action.cancel' | translate}}"
+                                  matTooltipPosition="below">
+                            <mat-icon>close</mat-icon></button>
+                          </section>
+                        }
+                        @if (!embedded) {
+                          <section data-html2canvas-ignore class="tb-powered-by-footer" [style.color]="dashboard.configuration.settings.titleColor">
+                            <span>Powered by <a href="https://thingsboard.io" target="_blank">ThingsBoard v.{{ thingsboardVersion }}</a></span>
+                          </section>
+                        }
+                      </mat-drawer-content>
+                      <mat-drawer class="tb-details-drawer"
+                                  [opened]="isEditingWidget || isAddingWidget"
+                                  (openedStart)="detailsDrawerOpenedStart()"
+                                  (closed)="detailsDrawerClosed()"
+                                  disableClose
+                                  mode="over"
+                                  position="end">
+                        @if (!isEditingWidgetClosed) {
+                          <tb-details-panel class="flex-1"
+                                            headerTitle="{{editingWidget?.config.title}}"
+                                            headerSubtitle="{{ editingWidgetSubtitle }}"
+                                            [isReadOnly]="true"
+                                            (closeDetails)="onEditWidgetClosed()">
+                            <div class="details-buttons flex flex-row items-center justify-start gap-4">
+                              @if (tbEditWidget.widgetConfig?.hasBasicMode) {
+                                <tb-toggle-select appearance="fill-invert" selectMediaBreakpoint="xs" [(ngModel)]="tbEditWidget.widgetConfigMode">
+                                  <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
+                                  <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
+                                </tb-toggle-select>
+                              }
+                              <div [tb-help]="helpLinkIdForWidgetType()"></div>
+                            </div>
+                            <tb-edit-widget #tbEditWidget
+                                            [dashboard]="dashboard"
+                                            [aliasController]="dashboardCtx.aliasController"
+                                            [stateController]="dashboardCtx.stateController"
+                                            [widgetEditMode]="widgetEditMode"
+                                            [widget]="editingWidget"
+                                            [widgetLayout]="editingWidgetLayout"
+                                            [showLayoutConfig]="showLayoutConfigInEdit(editingLayoutCtx)"
+                                            [isDefaultBreakpoint]="editingLayoutCtx?.breakpoint === 'default'"
+                                            (revertWidgetConfig)="onRevertWidgetEdit()"
+                                            (applyWidgetConfig)="saveWidget()">
+                            </tb-edit-widget>
+                          </tb-details-panel>
+                        }
+                        @if (!isAddingWidgetClosed && !widgetEditMode) {
+                          <tb-details-panel class="flex-1"
                           headerTitle="{{ isAddingWidget ?
                             ((dashboardWidgetSelectComponent?.selectWidgetMode === 'allWidgets' ? ('dashboard.select-widget-value' | translate: { title: ('widget.all-widgets' | translate) }) :
                                (!dashboardWidgetSelectComponent?.widgetsBundle ?
                                    'widget.select-widgets-bundle' : 'dashboard.select-widget-value') | translate: dashboardWidgetSelectComponent?.widgetsBundle)) : ''
                           }}"
-                          headerHeightPx="64"
-                          [isShowSearch]="true"
-                          [isReadOnly]="true"
-                          [isEdit]="false"
-                          backgroundColor="#cfd8dc"
-                          (closeDetails)="onAddWidgetClosed()"
-                          (closeSearch)="dashboardWidgetSelectComponent.search = ''">
-          <div class="prefix-title-buttons" [class.!hidden]="!(isAddingWidget && (dashboardWidgetSelectComponent?.widgetsBundle || dashboardWidgetSelectComponent?.selectWidgetMode === 'allWidgets'))" style="height: 28px; margin-right: 12px">
-            <button class="tb-mat-28" mat-icon-button type="button" (click)="clearSelectedWidgetBundle()">
-              <mat-icon>arrow_back</mat-icon>
-            </button>
-          </div>
-          <div class="search-pane flex flex-row" *ngIf="isAddingWidget && dashboardWidgetSelectComponent">
-            <tb-widgets-bundle-search class="flex-1"
-                                      [(ngModel)]="dashboardWidgetSelectComponent.search"
+                            headerHeightPx="64"
+                            [isShowSearch]="true"
+                            [isReadOnly]="true"
+                            [isEdit]="false"
+                            backgroundColor="#cfd8dc"
+                            (closeDetails)="onAddWidgetClosed()"
+                            (closeSearch)="dashboardWidgetSelectComponent.search = ''">
+                            <div class="prefix-title-buttons" [class.!hidden]="!(isAddingWidget && (dashboardWidgetSelectComponent?.widgetsBundle || dashboardWidgetSelectComponent?.selectWidgetMode === 'allWidgets'))" style="height: 28px; margin-right: 12px">
+                              <button class="tb-mat-28" mat-icon-button type="button" (click)="clearSelectedWidgetBundle()">
+                                <mat-icon>arrow_back</mat-icon>
+                              </button>
+                            </div>
+                            @if (isAddingWidget && dashboardWidgetSelectComponent) {
+                              <div class="search-pane flex flex-row">
+                                <tb-widgets-bundle-search class="flex-1"
+                                                          [(ngModel)]="dashboardWidgetSelectComponent.search"
                                       placeholder="{{ ((!dashboardWidgetSelectComponent.widgetsBundle && dashboardWidgetSelectComponent.selectWidgetMode === 'bundles')
                                                         ? 'widgets-bundle.search' : 'widget.search') | translate }}">
-            </tb-widgets-bundle-search>
-          </div>
-          <div class="details-buttons flex flex-row items-center justify-start" *ngIf="isAddingWidget">
-            <button mat-button type="button" (click)="importWidget($event)"
-                    *ngIf="dashboardWidgetSelectComponent?.selectWidgetMode === 'bundles' && !dashboardWidgetSelectComponent?.widgetsBundle">
-              <mat-icon>file_upload</mat-icon>{{ 'dashboard.import-widget' | translate }}</button>
-            <tb-toggle-select *ngIf="dashboardWidgetSelectComponent?.selectWidgetMode === 'bundles' && !dashboardWidgetSelectComponent?.widgetsBundle"
-                              appearance="fill-invert"
-                              disablePagination
-                              selectMediaBreakpoint="xs"
-                              [(ngModel)]="dashboardWidgetSelectComponent.selectWidgetMode">
-              <tb-toggle-option value="bundles">{{ 'widgets-bundle.widgets-bundles' | translate }}</tb-toggle-option>
-              <tb-toggle-option value="allWidgets">{{ 'widget.all-widgets' | translate }}</tb-toggle-option>
-            </tb-toggle-select>
-            <button mat-icon-button type="button"
-                    *ngIf="dashboardWidgetSelectComponent?.widgetTypes.size > 1"
-                    (click)="editWidgetsTypesToDisplay($event)"
-                    matTooltip="{{ 'widget.filter' | translate }}"
-                    matTooltipPosition="above">
-              <mat-icon>filter_list</mat-icon>
-            </button>
-            <tb-toggle-select *ngIf="dashboardWidgetSelectComponent?.hasDeprecated"
-                              appearance="fill-invert"
-                              disablePagination
-                              selectMediaBreakpoint="xs"
-                              [(ngModel)]="dashboardWidgetSelectComponent.deprecatedFilter">
-              <tb-toggle-option value="ALL">{{ 'widget.all' | translate }}</tb-toggle-option>
-              <tb-toggle-option value="ACTUAL">{{ 'widget.actual' | translate }}</tb-toggle-option>
-              <tb-toggle-option value="DEPRECATED">{{ 'widget.deprecated' | translate }}</tb-toggle-option>
-            </tb-toggle-select>
-          </div>
-          <tb-dashboard-widget-select #dashboardWidgetSelect
-                                      *ngIf="isAddingWidget"
-                                      [aliasController]="dashboardCtx.aliasController"
-                                      [filterWidgetTypes]="filterWidgetTypes"
-                                      [scadaFirst]="layouts.main.layoutCtx.gridSettings.layoutType === LayoutType.scada"
-                                      (widgetSelected)="addWidgetFromType($event)">
-          </tb-dashboard-widget-select>
-        </tb-details-panel>
-      </mat-drawer>
-    </mat-drawer-container>
-  </section>
-</div>
+                                </tb-widgets-bundle-search>
+                              </div>
+                            }
+                            @if (isAddingWidget) {
+                              <div class="details-buttons flex flex-row items-center justify-start">
+                                @if (dashboardWidgetSelectComponent?.selectWidgetMode === 'bundles' && !dashboardWidgetSelectComponent?.widgetsBundle) {
+                                  <button mat-button type="button" (click)="importWidget($event)"
+                                          >
+                                    <mat-icon>file_upload</mat-icon>{{ 'dashboard.import-widget' | translate }}</button>
+                                  }
+                                  @if (dashboardWidgetSelectComponent?.selectWidgetMode === 'bundles' && !dashboardWidgetSelectComponent?.widgetsBundle) {
+                                    <tb-toggle-select
+                                      appearance="fill-invert"
+                                      disablePagination
+                                      selectMediaBreakpoint="xs"
+                                      [(ngModel)]="dashboardWidgetSelectComponent.selectWidgetMode">
+                                      <tb-toggle-option value="bundles">{{ 'widgets-bundle.widgets-bundles' | translate }}</tb-toggle-option>
+                                      <tb-toggle-option value="allWidgets">{{ 'widget.all-widgets' | translate }}</tb-toggle-option>
+                                    </tb-toggle-select>
+                                  }
+                                  @if (dashboardWidgetSelectComponent?.widgetTypes.size > 1) {
+                                    <button mat-icon-button type="button"
+                                            (click)="editWidgetsTypesToDisplay($event)"
+                                            matTooltip="{{ 'widget.filter' | translate }}"
+                                            matTooltipPosition="above">
+                                      <mat-icon>filter_list</mat-icon>
+                                    </button>
+                                  }
+                                  @if (dashboardWidgetSelectComponent?.hasDeprecated) {
+                                    <tb-toggle-select
+                                      appearance="fill-invert"
+                                      disablePagination
+                                      selectMediaBreakpoint="xs"
+                                      [(ngModel)]="dashboardWidgetSelectComponent.deprecatedFilter">
+                                      <tb-toggle-option value="ALL">{{ 'widget.all' | translate }}</tb-toggle-option>
+                                      <tb-toggle-option value="ACTUAL">{{ 'widget.actual' | translate }}</tb-toggle-option>
+                                      <tb-toggle-option value="DEPRECATED">{{ 'widget.deprecated' | translate }}</tb-toggle-option>
+                                    </tb-toggle-select>
+                                  }
+                                </div>
+                              }
+                              @if (isAddingWidget) {
+                                <tb-dashboard-widget-select #dashboardWidgetSelect
+                                                            [aliasController]="dashboardCtx.aliasController"
+                                                            [filterWidgetTypes]="filterWidgetTypes"
+                                                            [scadaFirst]="layouts.main.layoutCtx.gridSettings.layoutType === LayoutType.scada"
+                                                            (widgetSelected)="addWidgetFromType($event)">
+                                </tb-dashboard-widget-select>
+                              }
+                            </tb-details-panel>
+                          }
+                        </mat-drawer>
+                      </mat-drawer-container>
+                    </section>
+                  </div>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
index 70be4a9e55..7fb0f3f68d 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
@@ -25,224 +25,258 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content class="tb-form-panel no-border no-padding">
-    <div *ngIf="settings" class="tb-form-panel no-border no-padding" [formGroup]="settingsFormGroup">
-      <div class="tb-form-row space-between">
-        <div>{{ 'dashboard.state-controller' | translate }}</div>
-        <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
-          <mat-select required formControlName="stateControllerId">
-            <mat-option *ngFor="let stateControllerId of stateControllerIds" [value]="stateControllerId">
-              {{ getStatesControllerTranslation(stateControllerId) }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div class="tb-form-panel stroked">
-        <div class="tb-form-panel-title" translate>dashboard.title-settings</div>
+    @if (settings) {
+      <div class="tb-form-panel no-border no-padding" [formGroup]="settingsFormGroup">
         <div class="tb-form-row space-between">
-          <mat-slide-toggle class="mat-slide" formControlName="showTitle">
-            {{ 'dashboard.title' | translate }}
-          </mat-slide-toggle>
-          <tb-color-input asBoxInput
-                          colorClearButton
-                          formControlName="titleColor">
-          </tb-color-input>
-        </div>
-      </div>
-      <div class="tb-form-panel stroked">
-        <div class="tb-form-panel-title" translate>dashboard.dashboard-logo-settings</div>
-        <div class="tb-form-row">
-          <mat-slide-toggle class="mat-slide" formControlName="showDashboardLogo">
-            {{ 'dashboard.display-dashboard-logo' | translate }}
-          </mat-slide-toggle>
-        </div>
-        <tb-gallery-image-input class="flex-1"
-                                label="{{'dashboard.dashboard-logo-image' | translate}}"
-                                formControlName="dashboardLogoUrl">
-        </tb-gallery-image-input>
-      </div>
-      <div class="tb-form-panel stroked">
-        <div class="tb-form-panel-title" translate>dashboard.toolbar-settings</div>
-        <mat-slide-toggle class="mat-slide" formControlName="hideToolbar">
-          {{ 'dashboard.hide-toolbar' | translate }}
-        </mat-slide-toggle>
-        <mat-slide-toggle class="mat-slide" formControlName="toolbarAlwaysOpen">
-          {{ 'dashboard.toolbar-always-open' | translate }}
-        </mat-slide-toggle>
-        <mat-slide-toggle class="mat-slide" formControlName="showDashboardsSelect">
-          {{ 'dashboard.display-dashboards-selection' | translate }}
-        </mat-slide-toggle>
-        <mat-slide-toggle class="mat-slide" formControlName="showEntitiesSelect">
-          {{ 'dashboard.display-entities-selection' | translate }}
-        </mat-slide-toggle>
-        <mat-slide-toggle class="mat-slide" formControlName="showFilters">
-          {{ 'dashboard.display-filters' | translate }}
-        </mat-slide-toggle>
-        <mat-slide-toggle class="mat-slide" formControlName="showDashboardTimewindow">
-          {{ 'dashboard.display-dashboard-timewindow' | translate }}
-        </mat-slide-toggle>
-        <mat-slide-toggle class="mat-slide" formControlName="showDashboardExport">
-          {{ 'dashboard.display-dashboard-export' | translate }}
-        </mat-slide-toggle>
-        <mat-slide-toggle class="mat-slide" formControlName="showUpdateDashboardImage">
-          {{ 'dashboard.display-update-dashboard-image' | translate }}
-        </mat-slide-toggle>
-      </div>
-      <mat-expansion-panel class="tb-settings">
-        <mat-expansion-panel-header>
-          <mat-panel-description class="flex items-stretch justify-end" translate>
-            dashboard.advanced-settings
-          </mat-panel-description>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
-          <tb-css
-            label="{{ 'dashboard.dashboard-css' | translate }}"
-            formControlName="dashboardCss"
-          ></tb-css>
-        </ng-template>
-      </mat-expansion-panel>
-    </div>
-    <div *ngIf="gridSettings" class="tb-form-panel no-border no-padding" [formGroup]="gridSettingsFormGroup">
-      <div class="tb-form-panel stroked">
-        <div class="tb-form-panel-title" translate [translateParams]="{type: layoutSettingsType}">dashboard.layout-settings-type</div>
-        <div *ngIf="isDefaultLayout && !isDefaultBreakpoint" class="tb-form-row space-between">
-          <div class="fixed-title-width" translate>dashboard.view-format</div>
+          <div>{{ 'dashboard.state-controller' | translate }}</div>
           <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
-            <mat-select formControlName="viewFormat">
-              <mat-option *ngFor="let type of viewFormatTypes" [value]="type">
-                {{ viewFormatTypeTranslationMap.get(type) | translate }}
-              </mat-option>
+            <mat-select required formControlName="stateControllerId">
+              @for (stateControllerId of stateControllerIds; track stateControllerId) {
+                <mat-option [value]="stateControllerId">
+                  {{ getStatesControllerTranslation(stateControllerId) }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
-        <div class="tb-form-row space-between">
-          <div translate>dashboard.columns-count</div>
-          <mat-form-field *ngIf="!isScada()" appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic"
-                          matTooltipPosition="above"
-                          matTooltipClass="tb-error-tooltip"
-                          [matTooltipDisabled]="!(gridSettingsFormGroup.get('columns').invalid && gridSettingsFormGroup.get('columns').touched)"
+        <div class="tb-form-panel stroked">
+          <div class="tb-form-panel-title" translate>dashboard.title-settings</div>
+          <div class="tb-form-row space-between">
+            <mat-slide-toggle class="mat-slide" formControlName="showTitle">
+              {{ 'dashboard.title' | translate }}
+            </mat-slide-toggle>
+            <tb-color-input asBoxInput
+                            colorClearButton
+                            formControlName="titleColor">
+            </tb-color-input>
+          </div>
+        </div>
+        <div class="tb-form-panel stroked">
+          <div class="tb-form-panel-title" translate>dashboard.dashboard-logo-settings</div>
+          <div class="tb-form-row">
+            <mat-slide-toggle class="mat-slide" formControlName="showDashboardLogo">
+              {{ 'dashboard.display-dashboard-logo' | translate }}
+            </mat-slide-toggle>
+          </div>
+          <tb-gallery-image-input class="flex-1"
+                                  label="{{'dashboard.dashboard-logo-image' | translate}}"
+                                  formControlName="dashboardLogoUrl">
+          </tb-gallery-image-input>
+        </div>
+        <div class="tb-form-panel stroked">
+          <div class="tb-form-panel-title" translate>dashboard.toolbar-settings</div>
+          <mat-slide-toggle class="mat-slide" formControlName="hideToolbar">
+            {{ 'dashboard.hide-toolbar' | translate }}
+          </mat-slide-toggle>
+          <mat-slide-toggle class="mat-slide" formControlName="toolbarAlwaysOpen">
+            {{ 'dashboard.toolbar-always-open' | translate }}
+          </mat-slide-toggle>
+          <mat-slide-toggle class="mat-slide" formControlName="showDashboardsSelect">
+            {{ 'dashboard.display-dashboards-selection' | translate }}
+          </mat-slide-toggle>
+          <mat-slide-toggle class="mat-slide" formControlName="showEntitiesSelect">
+            {{ 'dashboard.display-entities-selection' | translate }}
+          </mat-slide-toggle>
+          <mat-slide-toggle class="mat-slide" formControlName="showFilters">
+            {{ 'dashboard.display-filters' | translate }}
+          </mat-slide-toggle>
+          <mat-slide-toggle class="mat-slide" formControlName="showDashboardTimewindow">
+            {{ 'dashboard.display-dashboard-timewindow' | translate }}
+          </mat-slide-toggle>
+          <mat-slide-toggle class="mat-slide" formControlName="showDashboardExport">
+            {{ 'dashboard.display-dashboard-export' | translate }}
+          </mat-slide-toggle>
+          <mat-slide-toggle class="mat-slide" formControlName="showUpdateDashboardImage">
+            {{ 'dashboard.display-update-dashboard-image' | translate }}
+          </mat-slide-toggle>
+        </div>
+        <mat-expansion-panel class="tb-settings">
+          <mat-expansion-panel-header>
+            <mat-panel-description class="flex items-stretch justify-end" translate>
+              dashboard.advanced-settings
+            </mat-panel-description>
+          </mat-expansion-panel-header>
+          <ng-template matExpansionPanelContent>
+            <tb-css
+              label="{{ 'dashboard.dashboard-css' | translate }}"
+              formControlName="dashboardCss"
+            ></tb-css>
+          </ng-template>
+        </mat-expansion-panel>
+      </div>
+    }
+    @if (gridSettings) {
+      <div class="tb-form-panel no-border no-padding" [formGroup]="gridSettingsFormGroup">
+        <div class="tb-form-panel stroked">
+          <div class="tb-form-panel-title" translate [translateParams]="{type: layoutSettingsType}">dashboard.layout-settings-type</div>
+          @if (isDefaultLayout && !isDefaultBreakpoint) {
+            <div class="tb-form-row space-between">
+              <div class="fixed-title-width" translate>dashboard.view-format</div>
+              <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
+                <mat-select formControlName="viewFormat">
+                  @for (type of viewFormatTypes; track type) {
+                    <mat-option [value]="type">
+                      {{ viewFormatTypeTranslationMap.get(type) | translate }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            </div>
+          }
+          <div class="tb-form-row space-between">
+            <div translate>dashboard.columns-count</div>
+            @if (!isScada()) {
+              <mat-form-field appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic"
+                              matTooltipPosition="above"
+                              matTooltipClass="tb-error-tooltip"
+                              [matTooltipDisabled]="!(gridSettingsFormGroup.get('columns').invalid && gridSettingsFormGroup.get('columns').touched)"
                           [matTooltip]="(gridSettingsFormGroup.get('columns').hasError('required') ? 'dashboard.columns-count-required' :
                                      (gridSettingsFormGroup.get('columns').hasError('min') ? 'dashboard.min-columns-count-message' : 'dashboard.max-columns-count-message')) | translate">
-            <input matInput formControlName="columns" type="number" min="10" max="1008" step="1"
-                   required
-                   placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-          <mat-form-field *ngIf="isScada()"
-                          class="medium-width" appearance="outline" subscriptSizing="dynamic">
-            <mat-select required formControlName="columns">
-              <mat-option *ngFor="let columns of scadaColumns" [value]="columns">
-                {{ columns }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="tb-form-row space-between">
-          <div translate>dashboard.min-layout-width</div>
-          <mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
-                          matTooltipPosition="above"
-                          matTooltipClass="tb-error-tooltip"
-                          [matTooltipDisabled]="!(gridSettingsFormGroup.get('minColumns').invalid && gridSettingsFormGroup.get('minColumns').touched)"
+                <input matInput formControlName="columns" type="number" min="10" max="1008" step="1"
+                       required
+                       placeholder="{{ 'widget-config.set' | translate }}">
+              </mat-form-field>
+            }
+            @if (isScada()) {
+              <mat-form-field
+                class="medium-width" appearance="outline" subscriptSizing="dynamic">
+                <mat-select required formControlName="columns">
+                  @for (columns of scadaColumns; track columns) {
+                    <mat-option [value]="columns">
+                      {{ columns }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            }
+          </div>
+          <div class="tb-form-row space-between">
+            <div translate>dashboard.min-layout-width</div>
+            <mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
+                            matTooltipPosition="above"
+                            matTooltipClass="tb-error-tooltip"
+                            [matTooltipDisabled]="!(gridSettingsFormGroup.get('minColumns').invalid && gridSettingsFormGroup.get('minColumns').touched)"
                           [matTooltip]="(gridSettingsFormGroup.get('minColumns').hasError('required') ? 'dashboard.columns-count-required' :
                                      (gridSettingsFormGroup.get('minColumns').hasError('min') ? 'dashboard.min-columns-count-message' : 'dashboard.max-columns-count-message')) | translate">
-            <input matInput formControlName="minColumns" type="number" min="10" max="1008" step="1"
-                   required
-                   placeholder="{{ 'widget-config.set' | translate }}">
-            <span translate matSuffix>dashboard.columns-suffix</span>
-          </mat-form-field>
-        </div>
-        <div *ngIf="!isScada()" class="tb-form-row space-between">
-          <div translate>dashboard.widgets-margins</div>
-          <mat-form-field appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic"
-                          matTooltipPosition="above"
-                          matTooltipClass="tb-error-tooltip"
-                          [matTooltipDisabled]="!(gridSettingsFormGroup.get('margin').invalid && gridSettingsFormGroup.get('margin').touched)"
+              <input matInput formControlName="minColumns" type="number" min="10" max="1008" step="1"
+                     required
+                     placeholder="{{ 'widget-config.set' | translate }}">
+              <span translate matSuffix>dashboard.columns-suffix</span>
+            </mat-form-field>
+          </div>
+          @if (!isScada()) {
+            <div class="tb-form-row space-between">
+              <div translate>dashboard.widgets-margins</div>
+              <mat-form-field appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic"
+                              matTooltipPosition="above"
+                              matTooltipClass="tb-error-tooltip"
+                              [matTooltipDisabled]="!(gridSettingsFormGroup.get('margin').invalid && gridSettingsFormGroup.get('margin').touched)"
                           [matTooltip]="(gridSettingsFormGroup.get('margin').hasError('required') ? 'dashboard.margin-required' :
                                      (gridSettingsFormGroup.get('margin').hasError('min') ? 'dashboard.min-margin-message' : 'dashboard.max-margin-message')) | translate">
-            <input matInput formControlName="margin" type="number" min="0" max="50" step="any"
-                   required
-                   placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-        </div>
-        <div *ngIf="!isScada()" class="tb-form-row">
-          <mat-slide-toggle class="mat-slide" formControlName="outerMargin">
-            {{ 'dashboard.apply-outer-margin' | translate }}
-          </mat-slide-toggle>
-        </div>
-        <div *ngIf="!isScada()" class="tb-form-row">
-          <mat-slide-toggle class="mat-slide" formControlName="autoFillHeight">
-            {{ 'dashboard.autofill-height' | translate }}
-          </mat-slide-toggle>
-        </div>
-        <div *ngIf="isDefaultLayout && !isDefaultBreakpoint" class="tb-form-row space-between">
-          <div translate>dashboard.row-height</div>
-          <mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
-                          matTooltipPosition="above"
-                          matTooltipClass="tb-error-tooltip"
-                          [matTooltipDisabled]="!(gridSettingsFormGroup.get('rowHeight').invalid && gridSettingsFormGroup.get('rowHeight').touched)"
+                <input matInput formControlName="margin" type="number" min="0" max="50" step="any"
+                       required
+                       placeholder="{{ 'widget-config.set' | translate }}">
+              </mat-form-field>
+            </div>
+          }
+          @if (!isScada()) {
+            <div class="tb-form-row">
+              <mat-slide-toggle class="mat-slide" formControlName="outerMargin">
+                {{ 'dashboard.apply-outer-margin' | translate }}
+              </mat-slide-toggle>
+            </div>
+          }
+          @if (!isScada()) {
+            <div class="tb-form-row">
+              <mat-slide-toggle class="mat-slide" formControlName="autoFillHeight">
+                {{ 'dashboard.autofill-height' | translate }}
+              </mat-slide-toggle>
+            </div>
+          }
+          @if (isDefaultLayout && !isDefaultBreakpoint) {
+            <div class="tb-form-row space-between">
+              <div translate>dashboard.row-height</div>
+              <mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
+                              matTooltipPosition="above"
+                              matTooltipClass="tb-error-tooltip"
+                              [matTooltipDisabled]="!(gridSettingsFormGroup.get('rowHeight').invalid && gridSettingsFormGroup.get('rowHeight').touched)"
                           [matTooltip]="(gridSettingsFormGroup.get('rowHeight').hasError('required') ? 'dashboard.row-height-required' :
                                      (gridSettingsFormGroup.get('rowHeight').hasError('min') ?
                                        'dashboard.min-row-height-message' : 'dashboard.max-row-height-message')) | translate">
-            <input matInput formControlName="rowHeight" type="number" min="5" max="200" step="any"
-                   required
-                   placeholder="{{ 'widget-config.set' | translate }}">
-            <span matSuffix>px</span>
-          </mat-form-field>
-        </div>
-        <div class="tb-form-row space-between">
-          <div translate>dashboard.background-color</div>
-          <tb-color-input asBoxInput
-                          colorClearButton
-                          formControlName="backgroundColor">
-          </tb-color-input>
+                <input matInput formControlName="rowHeight" type="number" min="5" max="200" step="any"
+                       required
+                       placeholder="{{ 'widget-config.set' | translate }}">
+                <span matSuffix>px</span>
+              </mat-form-field>
+            </div>
+          }
+          <div class="tb-form-row space-between">
+            <div translate>dashboard.background-color</div>
+            <tb-color-input asBoxInput
+                            colorClearButton
+                            formControlName="backgroundColor">
+            </tb-color-input>
+          </div>
+          <tb-gallery-image-input class="flex-1"
+                                  label="{{'dashboard.background-image' | translate}}"
+                                  formControlName="backgroundImageUrl">
+          </tb-gallery-image-input>
+          <div class="tb-form-row space-between">
+            <div>{{ 'dashboard.background-size-mode' | translate }}</div>
+            <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
+              <mat-select formControlName="backgroundSizeMode">
+                <mat-option value="100%">Fit width</mat-option>
+                <mat-option value="auto 100%">Fit height</mat-option>
+                <mat-option value="cover">Cover</mat-option>
+                <mat-option value="contain">Contain</mat-option>
+                <mat-option value="auto">Original size</mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
         </div>
-        <tb-gallery-image-input class="flex-1"
-                                label="{{'dashboard.background-image' | translate}}"
-                                formControlName="backgroundImageUrl">
-        </tb-gallery-image-input>
-        <div class="tb-form-row space-between">
-          <div>{{ 'dashboard.background-size-mode' | translate }}</div>
-          <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
-            <mat-select formControlName="backgroundSizeMode">
-              <mat-option value="100%">Fit width</mat-option>
-              <mat-option value="auto 100%">Fit height</mat-option>
-              <mat-option value="cover">Cover</mat-option>
-              <mat-option value="contain">Contain</mat-option>
-              <mat-option value="auto">Original size</mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-      </div>
-      <div *ngIf="!isScada() && isDefaultBreakpoint" class="tb-form-panel stroked">
-        <div class="tb-form-panel-title" translate>dashboard.mobile-layout</div>
-        <div *ngIf="isRightLayout" class="tb-form-row">
-          <mat-slide-toggle class="mat-slide" formControlName="mobileDisplayLayoutFirst">
-            {{ 'dashboard.display-first-in-mobile-view' | translate }}
-          </mat-slide-toggle>
-        </div>
-        <div *ngIf="!isScada()" class="tb-form-row">
-          <mat-slide-toggle class="mat-slide" formControlName="mobileAutoFillHeight">
-            {{ 'dashboard.autofill-height' | translate }}
-          </mat-slide-toggle>
-        </div>
-        <div *ngIf="!isScada()" class="tb-form-row space-between">
-          <div translate>dashboard.mobile-row-height</div>
-          <mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
-                          matTooltipPosition="above"
-                          matTooltipClass="tb-error-tooltip"
-                          [matTooltipDisabled]="!(gridSettingsFormGroup.get('mobileRowHeight').invalid && gridSettingsFormGroup.get('mobileRowHeight').touched)"
+        @if (!isScada() && isDefaultBreakpoint) {
+          <div class="tb-form-panel stroked">
+            <div class="tb-form-panel-title" translate>dashboard.mobile-layout</div>
+            @if (isRightLayout) {
+              <div class="tb-form-row">
+                <mat-slide-toggle class="mat-slide" formControlName="mobileDisplayLayoutFirst">
+                  {{ 'dashboard.display-first-in-mobile-view' | translate }}
+                </mat-slide-toggle>
+              </div>
+            }
+            @if (!isScada()) {
+              <div class="tb-form-row">
+                <mat-slide-toggle class="mat-slide" formControlName="mobileAutoFillHeight">
+                  {{ 'dashboard.autofill-height' | translate }}
+                </mat-slide-toggle>
+              </div>
+            }
+            @if (!isScada()) {
+              <div class="tb-form-row space-between">
+                <div translate>dashboard.mobile-row-height</div>
+                <mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
+                                matTooltipPosition="above"
+                                matTooltipClass="tb-error-tooltip"
+                                [matTooltipDisabled]="!(gridSettingsFormGroup.get('mobileRowHeight').invalid && gridSettingsFormGroup.get('mobileRowHeight').touched)"
                           [matTooltip]="(gridSettingsFormGroup.get('mobileRowHeight').hasError('required') ? 'dashboard.mobile-row-height-required' :
                                      (gridSettingsFormGroup.get('mobileRowHeight').hasError('min') ?
                                        'dashboard.min-mobile-row-height-message' : 'dashboard.max-mobile-row-height-message')) | translate">
-            <input matInput formControlName="mobileRowHeight" type="number" min="5" max="200" step="any"
-                   required
-                   placeholder="{{ 'widget-config.set' | translate }}">
-            <span matSuffix>px</span>
-          </mat-form-field>
-        </div>
+                  <input matInput formControlName="mobileRowHeight" type="number" min="5" max="200" step="any"
+                         required
+                         placeholder="{{ 'widget-config.set' | translate }}">
+                  <span matSuffix>px</span>
+                </mat-form-field>
+              </div>
+            }
+          </div>
+        }
       </div>
-    </div>
+    }
   </div>
   <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-state.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-state.component.html
index 7d0af2f79c..fa9dc29dca 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-state.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-state.component.html
@@ -15,15 +15,19 @@
     limitations under the License.
 
 -->
-<tb-dashboard-page *ngIf="stateExists"
-  [embedded]="true"
-  [syncStateWithQueryParam]="false"
-  [hideToolbar]="true"
-  [currentState]="currentState"
-  [dashboard]="dashboard"
-  [parentDashboard]="parentDashboard"
-  [parentAliasController]="parentAliasController">
-</tb-dashboard-page>
-<div class="tb-absolute-fill tb-widget-error" *ngIf="!stateExists">
-  <span>{{ 'dashboard.non-existent-dashboard-state-error' | translate:{stateId} }}</span>
-</div>
+@if (stateExists) {
+  <tb-dashboard-page
+    [embedded]="true"
+    [syncStateWithQueryParam]="false"
+    [hideToolbar]="true"
+    [currentState]="currentState"
+    [dashboard]="dashboard"
+    [parentDashboard]="parentDashboard"
+    [parentAliasController]="parentAliasController">
+  </tb-dashboard-page>
+}
+@if (!stateExists) {
+  <div class="tb-absolute-fill tb-widget-error">
+    <span>{{ 'dashboard.non-existent-dashboard-state-error' | translate:{stateId} }}</span>
+  </div>
+}
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
index 582e266005..adc4e2ca0c 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
@@ -16,14 +16,55 @@
 
 -->
 <div class="tb-dashboard-widget-select">
-  <ng-container *ngIf="selectWidgetMode === 'bundles'; else allWidgets">
-    <ng-container *ngIf="widgetsBundle; else bundles">
+  @if (selectWidgetMode === 'bundles') {
+    @if (widgetsBundle) {
       <ng-container *ngTemplateOutlet="widgets; context:{ fetchFunction: widgetsFetchFunction, filter: widgetsFilter }"></ng-container>
-    </ng-container>
-  </ng-container>
-  <ng-template #allWidgets>
+    } @else {
+      <tb-scroll-grid
+        [columns]="columns"
+        [itemSize]="gridWidgetsItemSizeStrategy"
+        [fetchFunction]="widgetBundlesFetchFunction"
+        [filter]="widgetsBundleFilter"
+        [itemCard]="widgetsBundleCard"
+        [loadingCell]="widgetLoadingCard"
+        [dataLoading]="loadingWidgetBundles"
+        [noData]="noWidgetBundles">
+      </tb-scroll-grid>
+      <ng-template #widgetsBundleCard let-item="item">
+        <mat-card class="tb-widget-preview-card flex flex-col gap-2" appearance="raised" (click)="selectBundle($event, item)">
+          <div class="title-container">
+            <div title="{{item.name}}" class="widget-title">
+              {{item.title}}
+            </div>
+            <div class="title-items">
+              @if (isSystem(item)) {
+                <div class="widget-type">sys</div>
+              }
+              <div tb-popover [tbPopoverContent]="item.description" [tbPopoverOverlayStyle]="{maxWidth: '300px'}" tbPopoverShowCloseButton="false" class="info-banner tb-primary-fill"><span>i</span></div>
+            </div>
+          </div>
+          <div class="preview-container">
+            <div class="preview-spacer"></div>
+            <img class="preview" [src]="item.image | image: {emptyUrl: '/assets/widget-preview-empty.svg'} | async" alt="{{ item.title }}">
+          </div>
+        </mat-card>
+      </ng-template>
+      <ng-template #loadingWidgetBundles>
+        <div class="tb-absolute-fill flex flex-col items-center justify-center">
+          <span class="mat-headline-5" style="padding-bottom: 20px;">
+            {{ 'widgets-bundle.loading-widgets-bundles' | translate }}
+          </span>
+          <mat-spinner strokeWidth="5"></mat-spinner>
+        </div>
+      </ng-template>
+      <ng-template #noWidgetBundles>
+        <span translate
+        class="mat-headline-5 tb-absolute-fill flex items-center justify-center">widgets-bundle.no-widgets-bundles-text</span>
+      </ng-template>
+    }
+  } @else {
     <ng-container *ngTemplateOutlet="widgets; context:{ fetchFunction: allWidgetsFetchFunction, filter: allWidgetsFilter }"></ng-container>
-  </ng-template>
+  }
   <ng-template #widgets let-fetchFunction="fetchFunction" let-filter="filter">
     <tb-scroll-grid
       [columns]="columns"
@@ -46,7 +87,9 @@
               <div class="widget-type">{{ 'widget.' + item.widgetType + '-short' | translate }}</div>
               <div tb-popover [tbPopoverContent]="item.description" [tbPopoverOverlayStyle]="{maxWidth: '300px'}" tbPopoverShowCloseButton="false" class="info-banner tb-primary-fill"><span>i</span></div>
             </div>
-            <div *ngIf="item.deprecated" class="widget-deprecated" translate>widget.deprecated</div>
+            @if (item.deprecated) {
+              <div class="widget-deprecated" translate>widget.deprecated</div>
+            }
           </div>
         </div>
         <div class="preview-container">
@@ -64,51 +107,10 @@
       </div>
     </ng-template>
     <ng-template #noWidgets>
-        <span class="mat-headline-5 tb-absolute-fill flex items-center justify-center">{{(selectWidgetMode === 'bundles' ? 'widgets-bundle.empty' : 'widget.no-widgets-text') | translate}}</span>
+      <span class="mat-headline-5 tb-absolute-fill flex items-center justify-center">{{(selectWidgetMode === 'bundles' ? 'widgets-bundle.empty' : 'widget.no-widgets-text') | translate}}</span>
     </ng-template>
   </ng-template>
 
-  <ng-template #bundles>
-    <tb-scroll-grid
-      [columns]="columns"
-      [itemSize]="gridWidgetsItemSizeStrategy"
-      [fetchFunction]="widgetBundlesFetchFunction"
-      [filter]="widgetsBundleFilter"
-      [itemCard]="widgetsBundleCard"
-      [loadingCell]="widgetLoadingCard"
-      [dataLoading]="loadingWidgetBundles"
-      [noData]="noWidgetBundles">
-    </tb-scroll-grid>
-    <ng-template #widgetsBundleCard let-item="item">
-      <mat-card class="tb-widget-preview-card flex flex-col gap-2" appearance="raised" (click)="selectBundle($event, item)">
-        <div class="title-container">
-          <div title="{{item.name}}" class="widget-title">
-            {{item.title}}
-          </div>
-          <div class="title-items">
-            <div *ngIf="isSystem(item)" class="widget-type">sys</div>
-            <div tb-popover [tbPopoverContent]="item.description" [tbPopoverOverlayStyle]="{maxWidth: '300px'}" tbPopoverShowCloseButton="false" class="info-banner tb-primary-fill"><span>i</span></div>
-          </div>
-        </div>
-        <div class="preview-container">
-          <div class="preview-spacer"></div>
-          <img class="preview" [src]="item.image | image: {emptyUrl: '/assets/widget-preview-empty.svg'} | async" alt="{{ item.title }}">
-        </div>
-      </mat-card>
-    </ng-template>
-    <ng-template #loadingWidgetBundles>
-      <div class="tb-absolute-fill flex flex-col items-center justify-center">
-        <span class="mat-headline-5" style="padding-bottom: 20px;">
-          {{ 'widgets-bundle.loading-widgets-bundles' | translate }}
-        </span>
-        <mat-spinner strokeWidth="5"></mat-spinner>
-      </div>
-    </ng-template>
-    <ng-template #noWidgetBundles>
-        <span translate
-              class="mat-headline-5 tb-absolute-fill flex items-center justify-center">widgets-bundle.no-widgets-bundles-text</span>
-    </ng-template>
-  </ng-template>
   <ng-template #widgetLoadingCard>
     <mat-card class="tb-widget-preview-card loading-cell flex flex-col gap-2" appearance="raised">
       <div class="title-container">
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html
index 9b8e45c6dd..cc53c50fa9 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html
@@ -28,56 +28,63 @@
       [isDefaultBreakpoint]="isDefaultBreakpoint"
       formControlName="widgetConfig">
       <div class="tb-widget-config-header-prefix">
-        <button mat-button
-                *ngIf="previewMode"
-                (click)="previewMode = false">
-          <mat-icon>chevron_left</mat-icon>
-          {{ 'action.back' | translate }}
-        </button>
-        <button *ngIf="!previewMode"
-                class="gt-sm:!hidden"
-                [disabled]="!widgetFormGroup.valid"
-                mat-button color="primary"
-                (click)="previewMode = true">
-          <mat-icon>visibility</mat-icon>
-          {{ 'widget-config.preview' | translate }}
-        </button>
+        @if (previewMode) {
+          <button mat-button
+                  (click)="previewMode = false">
+            <mat-icon>chevron_left</mat-icon>
+            {{ 'action.back' | translate }}
+          </button>
+        }
+        @if (!previewMode) {
+          <button
+            class="gt-sm:!hidden"
+            [disabled]="!widgetFormGroup.valid"
+            mat-button color="primary"
+            (click)="previewMode = true">
+            <mat-icon>visibility</mat-icon>
+            {{ 'widget-config.preview' | translate }}
+          </button>
+        }
       </div>
       <div class="tb-widget-config-header-suffix flex flex-row items-center justify-end gap-3 lt-md:flex-1">
-        <button *ngIf="!previewMode"
-                class="lt-md:!hidden"
-                [disabled]="!widgetFormGroup.valid"
-                mat-button color="primary"
-                (click)="previewMode = true">
-          <mat-icon>visibility</mat-icon>
-          {{ 'widget-config.preview' | translate }}
-        </button>
+        @if (!previewMode) {
+          <button
+            class="lt-md:!hidden"
+            [disabled]="!widgetFormGroup.valid"
+            mat-button color="primary"
+            (click)="previewMode = true">
+            <mat-icon>visibility</mat-icon>
+            {{ 'widget-config.preview' | translate }}
+          </button>
+        }
         <div class="flex flex-row items-center justify-start gap-3">
           <button [disabled]="!widgetFormGroup.dirty"
-            mat-stroked-button color="primary"
-            (click)="onRevertWidgetConfig()">
+                  mat-stroked-button color="primary"
+                  (click)="onRevertWidgetConfig()">
             <mat-icon>close</mat-icon>
             {{ 'action.decline' | translate }}
           </button>
           <button [disabled]="!widgetFormGroup.valid || !widgetFormGroup.dirty"
-            mat-flat-button color="primary"
-            (click)="onApplyWidgetConfig()">
+                  mat-flat-button color="primary"
+                  (click)="onApplyWidgetConfig()">
             <mat-icon>done</mat-icon>
             {{ 'action.apply' | translate }}
           </button>
         </div>
       </div>
     </tb-widget-config>
-    <div *ngIf="previewMode" class="widget-preview-background">
-      <tb-widget-preview class="widget-preview-section"
-                         [aliasController]="aliasController"
-                         [stateController]="stateController"
-                         [dashboardTimewindow]="dashboard.configuration.timewindow"
-                         [widget]="widget"
-                         [widgetConfig]="widgetFormGroup.get('widgetConfig').value.config"
-                         [previewWidth]="widgetConfig.typeParameters.previewWidth"
-                         [previewHeight]="widgetConfig.typeParameters.previewHeight">
-      </tb-widget-preview>
-    </div>
+    @if (previewMode) {
+      <div class="widget-preview-background">
+        <tb-widget-preview class="widget-preview-section"
+                           [aliasController]="aliasController"
+                           [stateController]="stateController"
+                           [dashboardTimewindow]="dashboard.configuration.timewindow"
+                           [widget]="widget"
+                           [widgetConfig]="widgetFormGroup.get('widgetConfig').value.config"
+                           [previewWidth]="widgetConfig.typeParameters.previewWidth"
+                           [previewHeight]="widgetConfig.typeParameters.previewHeight">
+        </tb-widget-preview>
+      </div>
+    }
   </fieldset>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
index 230d930b05..14656f6b7c 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
@@ -30,22 +30,26 @@
       <mat-label translate>layout.breakpoint</mat-label>
       <mat-select formControlName="newBreakpointId" [hideSingleSelectionIndicator]="false">
         <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>
-          <div style="font-size: 12px;letter-spacing: 0.4px;color: #9e9e9e;">{{ getSizeDescription(breakpoint) }}</div>
-        </mat-option>
+        @for (breakpoint of allowBreakpointIds; track breakpoint) {
+          <mat-option [value]="breakpoint" style="min-height:56px;">
+            <mat-icon><tb-icon>{{ getIcon(breakpoint) }}</tb-icon></mat-icon>
+            <div>{{ getName(breakpoint) }}</div>
+            <div style="font-size: 12px;letter-spacing: 0.4px;color: #9e9e9e;">{{ getSizeDescription(breakpoint) }}</div>
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
     <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(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>
-          <div style="font-size: 12px;letter-spacing: 0.4px;color: #9e9e9e;">{{ getSizeDescription(breakpoint) }}</div>
-        </mat-option>
+        @for (breakpoint of selectedBreakpointIds; track breakpoint) {
+          <mat-option [value]="breakpoint" style="min-height:56px;">
+            <mat-icon><tb-icon>{{ getIcon(breakpoint) }}</tb-icon></mat-icon>
+            <div>{{ getName(breakpoint) }}</div>
+            <div style="font-size: 12px;letter-spacing: 0.4px;color: #9e9e9e;">{{ getSizeDescription(breakpoint) }}</div>
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
   </form>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
index ef892d7ac1..e07be60cb5 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
@@ -15,28 +15,36 @@
     limitations under the License.
 
 -->
-<div class="tb-progress-cover flex flex-col items-center justify-center"
-  *ngIf="layoutCtx.widgets.isLoading()">
-  <mat-spinner color="warn" mode="indeterminate" diameter="100">
-  </mat-spinner>
-</div>
+@if (layoutCtx.widgets.isLoading()) {
+  <div class="tb-progress-cover flex flex-col items-center justify-center"
+       >
+    <mat-spinner color="warn" mode="indeterminate" diameter="100">
+    </mat-spinner>
+  </div>
+}
 <div class="mat-content"
-          style="position: relative; width: 100%; height: 100%;" [tb-hotkeys]="hotKeys"
-          [cheatSheet]="dashboardCheatSheet"
-          [style.background-image]="backgroundImage$ | async"
-          [style]="dashboardStyle">
-  <section *ngIf="layoutCtx.widgets.isEmpty()"
-           style="z-index: 1; pointer-events: none;"
-           class="mat-headline-5 tb-absolute-fill flex items-center justify-center">
-    <span *ngIf="!isEdit" style="text-align: center;">
-      {{'dashboard.no-widgets' | translate}}
-    </span>
-    <button mat-button *ngIf="isEdit && !widgetEditMode" class="tb-add-new-widget"
-            (click)="addWidget($event)">
-      <mat-icon class="tb-mat-96">add</mat-icon>
-      <span>{{ 'dashboard.add-widget' | translate }}</span>
-    </button>
-  </section>
+     style="position: relative; width: 100%; height: 100%;" [tb-hotkeys]="hotKeys"
+     [cheatSheet]="dashboardCheatSheet"
+     [style.background-image]="backgroundImage$ | async"
+     [style]="dashboardStyle">
+  @if (layoutCtx.widgets.isEmpty()) {
+    <section
+      style="z-index: 1; pointer-events: none;"
+      class="mat-headline-5 tb-absolute-fill flex items-center justify-center">
+      @if (!isEdit) {
+        <span style="text-align: center;">
+          {{'dashboard.no-widgets' | translate}}
+        </span>
+      }
+      @if (isEdit && !widgetEditMode) {
+        <button mat-button class="tb-add-new-widget"
+                (click)="addWidget($event)">
+          <mat-icon class="tb-mat-96">add</mat-icon>
+          <span>{{ 'dashboard.add-widget' | translate }}</span>
+        </button>
+      }
+    </section>
+  }
   <tb-dashboard #dashboard [dashboardStyle]="dashboardStyle"
                 [backgroundImage]="backgroundImage$ | async"
                 [widgets]="layoutCtx.widgets"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
index a403bb781d..d96f491113 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
@@ -20,7 +20,7 @@
     <h2 translate>layout.manage</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
-      (click)="cancel()"
+            (click)="cancel()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -31,201 +31,226 @@
         <div class="fixed-title-width" translate>dashboard.layout</div>
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="layoutType">
-            <mat-option *ngFor="let type of layoutTypes" [value]="type">
-              {{ layoutTypeTranslations.get(type) | translate }}
-            </mat-option>
+            @for (type of layoutTypes; track type) {
+              <mat-option [value]="type">
+                {{ layoutTypeTranslations.get(type) | translate }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
-      <div *ngIf="!isDividerLayout; else dividerLayout" class="tb-form-panel stroked">
-        <div class="tb-form-table tb-layout-breakpoints">
-          <div class="tb-form-table-header no-padding-right">
-            <div class="tb-form-table-header-cell tb-icon"></div>
-            <div class="tb-form-table-header-cell tb-breakpoint" translate>layout.breakpoints</div>
-            <div class="tb-form-table-header-cell tb-size" translate>layout.size</div>
-            <div class="tb-form-table-header-cell tb-actions"></div>
-          </div>
-          <div class="tb-form-table-body no-gap">
-            <ng-container *ngFor="let breakpoint of layoutBreakpoints; let last = last">
-              <div class="tb-form-table-row no-padding-right">
-                <div class="tb-form-table-row-cell tb-icon">
-                  <tb-icon>{{ breakpoint.icon }}</tb-icon>
-                </div>
-                <div class="tb-form-table-row-cell tb-breakpoint">
-                  {{ breakpoint.name }}
-                </div>
-                <div class="tb-form-table-row-cell tb-size" tbTruncateWithTooltip>
-                  {{ breakpoint.descriptionSize }}
+      @if (!isDividerLayout) {
+        <div class="tb-form-panel stroked">
+          <div class="tb-form-table tb-layout-breakpoints">
+            <div class="tb-form-table-header no-padding-right">
+              <div class="tb-form-table-header-cell tb-icon"></div>
+              <div class="tb-form-table-header-cell tb-breakpoint" translate>layout.breakpoints</div>
+              <div class="tb-form-table-header-cell tb-size" translate>layout.size</div>
+              <div class="tb-form-table-header-cell tb-actions"></div>
+            </div>
+            <div class="tb-form-table-body no-gap">
+              @for (breakpoint of layoutBreakpoints; track breakpoint; let last = $last) {
+                <div class="tb-form-table-row no-padding-right">
+                  <div class="tb-form-table-row-cell tb-icon">
+                    <tb-icon>{{ breakpoint.icon }}</tb-icon>
+                  </div>
+                  <div class="tb-form-table-row-cell tb-breakpoint">
+                    {{ breakpoint.name }}
+                  </div>
+                  <div class="tb-form-table-row-cell tb-size" tbTruncateWithTooltip>
+                    {{ breakpoint.descriptionSize }}
+                  </div>
+                  <div class="tb-form-table-row-cell-buttons tb-actions">
+                    <button mat-icon-button
+                            matTooltip="{{ 'layout.settings' | translate }}"
+                            matTooltipPosition="above"
+                            (click)="openLayoutSettings('main', breakpoint.breakpoint)"
+                            type="button" >
+                      <mat-icon>settings</mat-icon>
+                    </button>
+                    <button mat-icon-button
+                            matTooltip="{{ 'action.delete' | translate }}"
+                            matTooltipPosition="above"
+                            [disabled]="breakpoint.breakpoint === 'default'"
+                            [class.tb-hidden]="breakpoint.breakpoint === 'default'"
+                            (click)="deleteBreakpoint($event, breakpoint.breakpoint)"
+                            type="button" >
+                      <tb-icon>delete</tb-icon>
+                    </button>
+                  </div>
                 </div>
-                <div class="tb-form-table-row-cell-buttons tb-actions">
+                @if (!last) {
+                  <mat-divider></mat-divider>
+                }
+              }
+            </div>
+          </div>
+          <button mat-button class="tb-add-breakpoint-button flex-1"
+                  matTooltip="{{ 'layout.add-new-breakpoint' | translate }}"
+                  matTooltipPosition="above"
+                  color="primary"
+                  type="button"
+                  [disabled]="!allowBreakpointIds.length"
+                  (click)="addBreakpoint()">
+            <mat-icon>add</mat-icon>
+          </button>
+        </div>
+      } @else {
+        <div class="flex flex-col items-center justify-start gap-5">
+          <mat-button-toggle-group aria-label="Select width value type"
+                                   formControlName="type"
+                                   [class.!hidden]="!isDividerLayout">
+            <mat-button-toggle class="flex-1" value="percentage">
+              {{ 'layout.percentage-width' | translate }}
+            </mat-button-toggle>
+            <mat-button-toggle class="flex-1" value="fixed">
+              {{ 'layout.fixed-width' | translate }}
+            </mat-button-toggle>
+          </mat-button-toggle-group>
+          <div class="tb-layout-preview flex flex-row items-center justify-center">
+            <div class="tb-layout-preview-container flex flex-row items-center justify-start"
+                 #tooltip="matTooltip"
+                 matTooltip=""
+                 matTooltipPosition="below">
+              <div [style.flex-basis]="buttonFlexValue() + '%'" [style.max-width]="buttonFlexValue() + '%'"
+                   class="tb-layout-preview-container-main flex flex-1 flex-col items-center justify-start">
+                <button mat-icon-button
+                        type="button"
+                        matTooltip="{{ 'layout.settings' | translate }}"
+                        matTooltipPosition="above"
+                        (click)="openLayoutSettings('main')"
+                        class="tb-layout-preview-element"
+                        aria-label="Layout settings"
+                        [class]="layoutButtonClass('main')">
+                  <mat-icon>settings</mat-icon>
+                </button>
+                <button type="button"
+                        mat-raised-button
+                        color="primary"
+                        class="tb-layout-button flex-1"
+                        (mouseover)="mainLayoutTooltip.show()"
+                        (mouseleave)="mainLayoutTooltip.hide()"
+                        (click)="setFixedLayout('main')"
+                        [class]="layoutButtonClass('main', true)">
+                  <span [matTooltip]="layoutButtonText('main')"
+                        #mainLayoutTooltip="matTooltip"
+                        matTooltipPosition="above">
+                    {{ (isDividerLayout ? 'layout.left' : 'layout.main')  | translate }}
+                  </span>
+                </button>
+                @if (showPreviewInputs('main')) {
+                  <div class="tb-layout-preview-element tb-layout-preview-input flex-1">
+                    @if (layoutsFormGroup.get('type').value !== layoutWidthType.FIXED) {
+                      <input
+                        formControlName="leftWidthPercentage"
+                        type="number"
+                        step="1"
+                        min="{{ layoutPercentageSize.MIN }}"
+                        max="{{ layoutPercentageSize.MAX }}"
+                        required>
+                    }
+                    @if (layoutsFormGroup.get('type').value === layoutWidthType.FIXED &&
+                      layoutsFormGroup.get('fixedLayout').value === 'main') {
+                      <input
+                        formControlName="fixedWidth"
+                        type="number"
+                        step="1"
+                        min="{{ layoutFixedSize.MIN }}"
+                        max="{{ layoutFixedSize.MAX }}"
+                        required>
+                    }
+                  </div>
+                }
+              </div>
+              @if (isDividerLayout) {
+                <div class="flex flex-1 flex-col items-center justify-start" matTooltip="">
                   <button mat-icon-button
+                          type="button"
                           matTooltip="{{ 'layout.settings' | translate }}"
                           matTooltipPosition="above"
-                          (click)="openLayoutSettings('main', breakpoint.breakpoint)"
-                          type="button" >
+                          (click)="openLayoutSettings('right')"
+                          class="tb-layout-preview-element"
+                          aria-label="Layout settings"
+                          [class]="layoutButtonClass('right')">
                     <mat-icon>settings</mat-icon>
                   </button>
-                  <button mat-icon-button
-                          matTooltip="{{ 'action.delete' | translate }}"
-                          matTooltipPosition="above"
-                          [disabled]="breakpoint.breakpoint === 'default'"
-                          [class.tb-hidden]="breakpoint.breakpoint === 'default'"
-                          (click)="deleteBreakpoint($event, breakpoint.breakpoint)"
-                          type="button" >
-                    <tb-icon>delete</tb-icon>
+                  <button type="button"
+                          mat-raised-button
+                          color="primary"
+                          class="tb-layout-button tb-layout-button-right flex-1"
+                          (mouseover)="rightLayoutTooltip.show()"
+                          (mouseleave)="rightLayoutTooltip.hide()"
+                          (click)="setFixedLayout('right')"
+                          [class]="layoutButtonClass('right')">
+                    <span [matTooltip]="layoutButtonText('right')"
+                          #rightLayoutTooltip="matTooltip"
+                          matTooltipPosition="above">
+                      {{ 'layout.right' | translate }}
+                    </span>
                   </button>
+                  @if (showPreviewInputs('right')) {
+                    <div class="tb-layout-preview-element tb-layout-preview-input flex-1">
+                      @if (layoutsFormGroup.get('type').value !== layoutWidthType.FIXED) {
+                        <input
+                          formControlName="rightWidthPercentage"
+                          type="number"
+                          step="1"
+                          min="{{ layoutPercentageSize.MIN }}"
+                          max="{{ layoutPercentageSize.MAX }}"
+                          required>
+                      }
+                      @if (layoutsFormGroup.get('type').value === layoutWidthType.FIXED) {
+                        <input
+                          formControlName="fixedWidth"
+                          type="number"
+                          step="1"
+                          min="{{ layoutFixedSize.MIN }}"
+                          max="{{ layoutFixedSize.MAX }}"
+                          required>
+                      }
+                    </div>
+                  }
                 </div>
-              </div>
-              <mat-divider *ngIf="!last"></mat-divider>
-            </ng-container>
-          </div>
-        </div>
-        <button mat-button class="tb-add-breakpoint-button flex-1"
-                matTooltip="{{ 'layout.add-new-breakpoint' | translate }}"
-                matTooltipPosition="above"
-                color="primary"
-                type="button"
-                [disabled]="!allowBreakpointIds.length"
-                (click)="addBreakpoint()">
-          <mat-icon>add</mat-icon>
-        </button>
-      </div>
-    </section>
-    <ng-template #dividerLayout>
-    <div class="flex flex-col items-center justify-start gap-5">
-      <mat-button-toggle-group aria-label="Select width value type"
-                               formControlName="type"
-                               [class.!hidden]="!isDividerLayout">
-        <mat-button-toggle class="flex-1" value="percentage">
-          {{ 'layout.percentage-width' | translate }}
-        </mat-button-toggle>
-        <mat-button-toggle class="flex-1" value="fixed">
-          {{ 'layout.fixed-width' | translate }}
-        </mat-button-toggle>
-      </mat-button-toggle-group>
-      <div class="tb-layout-preview flex flex-row items-center justify-center">
-        <div class="tb-layout-preview-container flex flex-row items-center justify-start"
-             #tooltip="matTooltip"
-             matTooltip=""
-             matTooltipPosition="below">
-          <div [style.flex-basis]="buttonFlexValue() + '%'" [style.max-width]="buttonFlexValue() + '%'"
-               class="tb-layout-preview-container-main flex flex-1 flex-col items-center justify-start">
-            <button mat-icon-button
-                    type="button"
-                    matTooltip="{{ 'layout.settings' | translate }}"
-                    matTooltipPosition="above"
-                    (click)="openLayoutSettings('main')"
-                    class="tb-layout-preview-element"
-                    aria-label="Layout settings"
-                    [class]="layoutButtonClass('main')">
-              <mat-icon>settings</mat-icon>
-            </button>
-            <button type="button"
-                    mat-raised-button
-                    color="primary"
-                    class="tb-layout-button flex-1"
-                    (mouseover)="mainLayoutTooltip.show()"
-                    (mouseleave)="mainLayoutTooltip.hide()"
-                    (click)="setFixedLayout('main')"
-                    [class]="layoutButtonClass('main', true)">
-              <span [matTooltip]="layoutButtonText('main')"
-                    #mainLayoutTooltip="matTooltip"
-                    matTooltipPosition="above">
-                {{ (isDividerLayout ? 'layout.left' : 'layout.main')  | translate }}
-              </span>
-            </button>
-            <div class="tb-layout-preview-element tb-layout-preview-input flex-1" *ngIf="showPreviewInputs('main')">
-              <input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
-                     formControlName="leftWidthPercentage"
-                     type="number"
-                     step="1"
-                     min="{{ layoutPercentageSize.MIN }}"
-                     max="{{ layoutPercentageSize.MAX }}"
-                     required>
-              <input *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.FIXED &&
-                            layoutsFormGroup.get('fixedLayout').value === 'main'"
-                     formControlName="fixedWidth"
-                     type="number"
-                     step="1"
-                     min="{{ layoutFixedSize.MIN }}"
-                     max="{{ layoutFixedSize.MAX }}"
-                     required>
+              }
             </div>
           </div>
-          <div class="flex flex-1 flex-col items-center justify-start" *ngIf="isDividerLayout" matTooltip="">
-            <button mat-icon-button
-                    type="button"
-                    matTooltip="{{ 'layout.settings' | translate }}"
-                    matTooltipPosition="above"
-                    (click)="openLayoutSettings('right')"
-                    class="tb-layout-preview-element"
-                    aria-label="Layout settings"
-                    [class]="layoutButtonClass('right')">
-              <mat-icon>settings</mat-icon>
-            </button>
-            <button type="button"
-                    mat-raised-button
-                    color="primary"
-                    class="tb-layout-button tb-layout-button-right flex-1"
-                    (mouseover)="rightLayoutTooltip.show()"
-                    (mouseleave)="rightLayoutTooltip.hide()"
-                    (click)="setFixedLayout('right')"
-                    [class]="layoutButtonClass('right')">
-              <span [matTooltip]="layoutButtonText('right')"
-                    #rightLayoutTooltip="matTooltip"
-                    matTooltipPosition="above">
-                {{ 'layout.right' | translate }}
-              </span>
-            </button>
-            <div class="tb-layout-preview-element tb-layout-preview-input flex-1" *ngIf="showPreviewInputs('right')">
-              <input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
-                     formControlName="rightWidthPercentage"
-                     type="number"
-                     step="1"
-                     min="{{ layoutPercentageSize.MIN }}"
-                     max="{{ layoutPercentageSize.MAX }}"
-                     required>
-              <input *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.FIXED"
-                     formControlName="fixedWidth"
-                     type="number"
-                     step="1"
-                     min="{{ layoutFixedSize.MIN }}"
-                     max="{{ layoutFixedSize.MAX }}"
-                     required>
+          @if (isDividerLayout) {
+            <div class="flex flex-col items-center justify-center gap-2" style="width: 80%">
+              @if (layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE) {
+                <mat-slider
+                  step="1"
+                  min="{{ layoutPercentageSize.MIN }}"
+                  max="{{ layoutPercentageSize.MAX }}"
+                  style="width: 100%;"
+                  color="accent"
+                  discrete
+                  [displayWith]="formatSliderTooltipLabel.bind(this)"><input matSliderThumb formControlName="sliderPercentage"/>
+                </mat-slider>
+              }
+              @if (layoutsFormGroup.get('type').value !== layoutWidthType.PERCENTAGE) {
+                <mat-slider
+                  step="1"
+                  min="{{ layoutFixedSize.MIN }}"
+                  max="{{ layoutFixedSize.MAX }}"
+                  style="width: 100%;"
+                  color="accent"
+                  discrete
+                  [displayWith]="formatSliderTooltipLabel.bind(this)"><input matSliderThumb formControlName="sliderFixed"/>
+                </mat-slider>
+              }
+              <div class="tb-hint tb-hint-group flex flex-row items-center justify-between" style="width: 100%;">
+                <label>
+                  {{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MIN + '%' : layoutFixedSize.MIN + 'px'}}
+                </label>
+                <label>
+                  {{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MAX + '%' : layoutFixedSize.MAX + 'px'}}
+                </label>
+              </div>
             </div>
-          </div>
-        </div>
-      </div>
-      <div class="flex flex-col items-center justify-center gap-2" *ngIf="isDividerLayout" style="width: 80%">
-        <mat-slider *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE"
-                    step="1"
-                    min="{{ layoutPercentageSize.MIN }}"
-                    max="{{ layoutPercentageSize.MAX }}"
-                    style="width: 100%;"
-                    color="accent"
-                    discrete
-                    [displayWith]="formatSliderTooltipLabel.bind(this)"><input matSliderThumb formControlName="sliderPercentage"/>
-        </mat-slider>
-        <mat-slider *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.PERCENTAGE"
-                    step="1"
-                    min="{{ layoutFixedSize.MIN }}"
-                    max="{{ layoutFixedSize.MAX }}"
-                    style="width: 100%;"
-                    color="accent"
-                    discrete
-                    [displayWith]="formatSliderTooltipLabel.bind(this)"><input matSliderThumb formControlName="sliderFixed"/>
-        </mat-slider>
-        <div class="tb-hint tb-hint-group flex flex-row items-center justify-between" style="width: 100%;">
-          <label>
-            {{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MIN + '%' : layoutFixedSize.MIN + 'px'}}
-          </label>
-          <label>
-            {{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MAX + '%' : layoutFixedSize.MAX + 'px'}}
-          </label>
+          }
         </div>
-      </div>
-    </div>
-    </ng-template>
+      }
+    </section>
   </div>
   <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
index 800b94556e..1e0d835d4f 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
@@ -25,8 +25,10 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content class="tb-form-panel no-border no-padding" [formGroup]="moveWidgetsFormGroup">
     <div class="tb-form-row space-between column-xs">
       <div translate>dashboard.move-by</div>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.html
index d9e98fc48a..312cf304cd 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.html
@@ -21,9 +21,11 @@
   [(ngModel)]="selectedBreakpoint"
   (ngModelChange)="selectLayoutChanged()">
   <mat-select-trigger>{{ getName(selectedBreakpoint) }}</mat-select-trigger>
-  <mat-option *ngFor="let breakpointId of breakpointIds" [value]="breakpointId" style="min-height:56px;">
-    <mat-icon><tb-icon>{{ getIcon(breakpointId) }}</tb-icon></mat-icon>
-    <div>{{ getName(breakpointId) }}</div>
-    <div style="font-size: 12px;letter-spacing: 0.4px;color: #9e9e9e;">{{ getSizeDescription(breakpointId) }}</div>
-  </mat-option>
+  @for (breakpointId of breakpointIds; track breakpointId) {
+    <mat-option [value]="breakpointId" style="min-height:56px;">
+      <mat-icon><tb-icon>{{ getIcon(breakpointId) }}</tb-icon></mat-icon>
+      <div>{{ getName(breakpointId) }}</div>
+      <div style="font-size: 12px;letter-spacing: 0.4px;color: #9e9e9e;">{{ getSizeDescription(breakpointId) }}</div>
+    </mat-option>
+  }
 </mat-select>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
index c06d184162..ad0aeb097c 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
@@ -25,26 +25,34 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
       <mat-form-field class="mat-block">
         <mat-label translate>dashboard.state-name</mat-label>
         <input required matInput formControlName="name">
-        <mat-error *ngIf="stateFormGroup.get('name').hasError('required')">
-          {{ 'dashboard.state-name-required' | translate }}
-        </mat-error>
+        @if (stateFormGroup.get('name').hasError('required')) {
+          <mat-error>
+            {{ 'dashboard.state-name-required' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
       <mat-form-field class="mat-block">
         <mat-label translate>dashboard.state-id</mat-label>
         <input required matInput formControlName="id">
-        <mat-error *ngIf="stateFormGroup.get('id').hasError('required')">
-          {{ 'dashboard.state-id-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="stateFormGroup.get('id').hasError('stateExists')">
-          {{ 'dashboard.state-id-exists' | translate }}
-        </mat-error>
+        @if (stateFormGroup.get('id').hasError('required')) {
+          <mat-error>
+            {{ 'dashboard.state-id-required' | translate }}
+          </mat-error>
+        }
+        @if (stateFormGroup.get('id').hasError('stateExists')) {
+          <mat-error>
+            {{ 'dashboard.state-id-exists' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
       <mat-checkbox formControlName="root">
         {{ 'dashboard.is-root-state' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
index fcf77163c9..a84fb44d26 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
@@ -16,8 +16,10 @@
 
 -->
 <mat-select class="default-state-controller" [class.!hidden]="!displayStateSelection()"
-    [(ngModel)]="stateObject[0].id" (ngModelChange)="selectedStateIdChanged()">
-  <mat-option *ngFor="let stateKv of states | keyvalue" [value]="stateKv.key">
-    {{getStateName(stateKv.key, stateKv.value)}}
-  </mat-option>
+            [(ngModel)]="stateObject[0].id" (ngModelChange)="selectedStateIdChanged()">
+  @for (stateKv of states | keyvalue; track stateKv) {
+    <mat-option [value]="stateKv.key">
+      {{getStateName(stateKv.key, stateKv.value)}}
+    </mat-option>
+  }
 </mat-select>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
index 394bf14091..a932cd145e 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
@@ -16,20 +16,28 @@
 
 -->
 <div class="entity-state-controller">
-  <div *ngIf="!isMobile || stateObject.length === 1" class="flex flex-row items-center justify-start">
-        <span *ngFor="let state of stateObject; index as i; last as isLast" class="state-entry"
+  @if (!isMobile || stateObject.length === 1) {
+    <div class="flex flex-row items-center justify-start">
+      @for (state of stateObject; track state; let i = $index; let isLast = $last) {
+        <span class="state-entry"
               [style.font-weight]="isLast ? 'bold' : 'normal'"
               [style.cursor]="isLast ? 'default' : 'pointer'" (click)="navigatePrevState(i)">
-            {{getStateName(i)}}
+          {{getStateName(i)}}
           <span class='state-divider' [class.!hidden]="isLast"> > </span>
         </span>
-  </div>
-  <mat-select *ngIf="isMobile && stateObject.length > 1"
-              [(ngModel)]="selectedStateIndex" (ngModelChange)="selectedStateIndexChanged()">
-    <mat-option *ngFor="let state of stateObject; index as i" [value]="i">
-      {{getStateName(i)}}
-    </mat-option>
-  </mat-select>
+      }
+    </div>
+  }
+  @if (isMobile && stateObject.length > 1) {
+    <mat-select
+      [(ngModel)]="selectedStateIndex" (ngModelChange)="selectedStateIndexChanged()">
+      @for (state of stateObject; track state; let i = $index) {
+        <mat-option [value]="i">
+          {{getStateName(i)}}
+        </mat-option>
+      }
+    </mat-select>
+  }
 </div>
 
 
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html
index 51eebbf7ed..f26be70987 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html
@@ -16,8 +16,10 @@
 
 -->
 <div class="mat-content mat-padding flex flex-col">
-  <mat-checkbox style="padding-bottom: 8px;" [(ngModel)]="type.display" *ngFor="let type of types"
-                (ngModelChange)="update()">
-    {{ 'widget.' + type.type | translate }}
-  </mat-checkbox>
+  @for (type of types; track type) {
+    <mat-checkbox style="padding-bottom: 8px;" [(ngModel)]="type.display"
+                  (ngModelChange)="update()">
+      {{ 'widget.' + type.type | translate }}
+    </mat-checkbox>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
index ef9d754ebb..5ba7c784b3 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
@@ -24,10 +24,10 @@
 </div>
 <div id="gridster-parent"
      class="tb-dashboard-content flex-1" [class.autofill-height]="isAutofillHeight()"
-                [class.center-vertical]="centerVertical"
-                [class.center-horizontal]="centerHorizontal"
-                (mousedown)="onDashboardMouseDown($event)"
-                (tbcontextmenu)="openDashboardContextMenu($event)">
+     [class.center-vertical]="centerVertical"
+     [class.center-horizontal]="centerHorizontal"
+     (mousedown)="onDashboardMouseDown($event)"
+     (tbcontextmenu)="openDashboardContextMenu($event)">
   <div #dashboardMenuTrigger="matMenuTrigger" style="visibility: hidden; position: fixed"
        [style.left]="dashboardMenuPosition.x"
        [style.top]="dashboardMenuPosition.y"
@@ -36,13 +36,19 @@
   <mat-menu #dashboardMenu="matMenu">
     <ng-template matMenuContent let-items="items">
       <div class="tb-dashboard-context-menu-items">
-        <button mat-menu-item *ngFor="let item of items;"
-                [disabled]="!item.enabled"
-                (click)="item.action(dashboardContextMenuEvent)">
-          <span *ngIf="item.shortcut" class="tb-alt-text"> {{ item.shortcut | keyboardShortcut }}</span>
-          <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
-          <span translate>{{item.value}}</span>
-        </button>
+        @for (item of items; track item) {
+          <button mat-menu-item
+                  [disabled]="!item.enabled"
+                  (click)="item.action(dashboardContextMenuEvent)">
+            @if (item.shortcut) {
+              <span class="tb-alt-text"> {{ item.shortcut | keyboardShortcut }}</span>
+            }
+            @if (item.icon) {
+              <mat-icon>{{item.icon}}</mat-icon>
+            }
+            <span translate>{{item.value}}</span>
+          </button>
+        }
       </div>
     </ng-template>
   </mat-menu>
@@ -54,37 +60,45 @@
   <mat-menu #widgetMenu="matMenu">
     <ng-template matMenuContent let-items="items" let-widget="widget">
       <div class="tb-dashboard-context-menu-items">
-        <button mat-menu-item *ngFor="let item of items;"
-                [disabled]="!item.enabled"
-                (click)="item.action(widgetContextMenuEvent, widget)">
-          <span *ngIf="item.shortcut" class="tb-alt-text"> {{ item.shortcut | keyboardShortcut }}</span>
-          <tb-icon matMenuItemIcon *ngIf="item.icon">{{item.icon}}</tb-icon>
-          <span translate>{{item.value}}</span>
-        </button>
+        @for (item of items; track item) {
+          <button mat-menu-item
+                  [disabled]="!item.enabled"
+                  (click)="item.action(widgetContextMenuEvent, widget)">
+            @if (item.shortcut) {
+              <span class="tb-alt-text"> {{ item.shortcut | keyboardShortcut }}</span>
+            }
+            @if (item.icon) {
+              <tb-icon matMenuItemIcon>{{item.icon}}</tb-icon>
+            }
+            <span translate>{{item.value}}</span>
+          </button>
+        }
       </div>
     </ng-template>
   </mat-menu>
   <div [class]="dashboardClass" id="gridster-background">
     <gridster #gridster id="gridster-child" [options]="gridsterOpts">
-      <gridster-item #gridsterItem [item]="widget" [class]="{'tb-noselect': isEdit}" *ngFor="let widget of dashboardWidgets">
-        <tb-widget-container
-          [gridsterItem]="gridsterItem"
-          [widget]="widget"
-          [dashboardWidgets]="dashboardWidgets"
-          [dashboardStyle]="dashboardStyle"
-          [backgroundImage]="backgroundImage"
-          [isEdit]="isEdit"
-          [isEditingWidget]="isEditingWidget"
-          [isPreview]="isPreview"
-          [isMobile]="isMobileSize"
-          [isEditActionEnabled]="isEditActionEnabled"
-          [isExportActionEnabled]="isExportActionEnabled"
-          [isRemoveActionEnabled]="isRemoveActionEnabled"
-          [disableWidgetInteraction]="disableWidgetInteraction"
-          (widgetFullscreenChanged)="onWidgetFullscreenChanged($event)"
-          (widgetComponentAction)="onWidgetComponentAction($event, widget)">
-        </tb-widget-container>
-      </gridster-item>
+      @for (widget of dashboardWidgets; track widget) {
+        <gridster-item #gridsterItem [item]="widget" [class]="{'tb-noselect': isEdit}">
+          <tb-widget-container
+            [gridsterItem]="gridsterItem"
+            [widget]="widget"
+            [dashboardWidgets]="dashboardWidgets"
+            [dashboardStyle]="dashboardStyle"
+            [backgroundImage]="backgroundImage"
+            [isEdit]="isEdit"
+            [isEditingWidget]="isEditingWidget"
+            [isPreview]="isPreview"
+            [isMobile]="isMobileSize"
+            [isEditActionEnabled]="isEditActionEnabled"
+            [isExportActionEnabled]="isExportActionEnabled"
+            [isRemoveActionEnabled]="isRemoveActionEnabled"
+            [disableWidgetInteraction]="disableWidgetInteraction"
+            (widgetFullscreenChanged)="onWidgetFullscreenChanged($event)"
+            (widgetComponentAction)="onWidgetComponentAction($event, widget)">
+          </tb-widget-container>
+        </gridster-item>
+      }
     </gridster>
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
index c7524428e3..bf89db1b8d 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
@@ -20,13 +20,15 @@
     <h2 translate>layout.select</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
-      (click)="cancel()"
+            (click)="cancel()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async" class="flex flex-col gap-2">
       <div class="flex flex-row items-center justify-start gap-2">
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
index a1ae9ba969..fdd4b84397 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
@@ -25,16 +25,20 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
       <mat-form-field class="mat-block">
         <mat-label translate>dashboard.state</mat-label>
         <mat-select required formControlName="stateId">
-          <mat-option *ngFor="let stateItem of states | keyvalue" [value]="stateItem.key">
-            {{ stateItem.value.name }}
-          </mat-option>
+          @for (stateItem of states | keyvalue; track stateItem) {
+            <mat-option [value]="stateItem.key">
+              {{ stateItem.value.name }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </fieldset>
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.html b/ui-ngx/src/app/modules/home/components/details-panel.component.html
index db9caf2cf3..eebb9a6db7 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.html
@@ -28,41 +28,49 @@
           <ng-content select=".header-pane"></ng-content>
         </span>
       </div>
-      <div *ngIf="isShowSearch" [class.!hidden]="!showSearchPane" class="flex flex-row items-center justify-start" style="width: 100%;">
+      @if (isShowSearch) {
+        <div [class.!hidden]="!showSearchPane" class="flex flex-row items-center justify-start" style="width: 100%;">
+          <button mat-icon-button (click)="onToggleSearch()">
+            <mat-icon class="material-icons">arrow_back</mat-icon>
+          </button>
+          <div style="width: 100%; margin: 0 20px">
+            <ng-content select=".search-pane"></ng-content>
+          </div>
+        </div>
+      }
+      @if (isShowSearch && !showSearchPane) {
         <button mat-icon-button (click)="onToggleSearch()">
-          <mat-icon class="material-icons">arrow_back</mat-icon>
+          <mat-icon class="material-icons">search</mat-icon>
         </button>
-        <div style="width: 100%; margin: 0 20px">
-          <ng-content select=".search-pane"></ng-content>
-        </div>
-      </div>
-      <button mat-icon-button *ngIf="isShowSearch && !showSearchPane" (click)="onToggleSearch()">
-        <mat-icon class="material-icons">search</mat-icon>
-      </button>
+      }
       <ng-content select=".details-buttons"></ng-content>
-      <button *ngIf="showCloseDetails" mat-icon-button (click)="onCloseDetails()">
-        <mat-icon class="material-icons">close</mat-icon>
-      </button>
+      @if (showCloseDetails) {
+        <button mat-icon-button (click)="onCloseDetails()">
+          <mat-icon class="material-icons">close</mat-icon>
+        </button>
+      }
     </div>
-    <section *ngIf="!isReadOnly" class="layout-wrap tb-header-buttons flex flex-row">
-      <button [disabled]="(isLoading$ | async) || theForm?.invalid || !theForm?.dirty"
-              mat-fab
-              matTooltip="{{ 'action.apply-changes' | translate }}"
-              matTooltipPosition="above"
-              color="accent" class="tb-btn-header mat-fab-bottom-right"
-              [class.tb-hide]="!isEdit"
-              (click)="onApplyDetails()">
-        <mat-icon class="material-icons">done</mat-icon>
-      </button>
-      <button [disabled]="(isLoading$ | async) || (isAlwaysEdit && !theForm?.dirty)"
-              mat-fab
-              matTooltip="{{ (isAlwaysEdit ? 'action.decline-changes' : (isEdit ? 'action.decline-changes' : 'details.toggle-edit-mode')) | translate }}"
-              matTooltipPosition="above"
-              color="accent" class="tb-btn-header mat-fab-bottom-right"
-              (click)="onToggleDetailsEditMode()">
-        <mat-icon class="material-icons">{{isEdit ? 'close' : 'edit'}}</mat-icon>
-      </button>
-    </section>
+    @if (!isReadOnly) {
+      <section class="layout-wrap tb-header-buttons flex flex-row">
+        <button [disabled]="(isLoading$ | async) || theForm?.invalid || !theForm?.dirty"
+                mat-fab
+                matTooltip="{{ 'action.apply-changes' | translate }}"
+                matTooltipPosition="above"
+                color="accent" class="tb-btn-header mat-fab-bottom-right"
+                [class.tb-hide]="!isEdit"
+                (click)="onApplyDetails()">
+          <mat-icon class="material-icons">done</mat-icon>
+        </button>
+        <button [disabled]="(isLoading$ | async) || (isAlwaysEdit && !theForm?.dirty)"
+                mat-fab
+                matTooltip="{{ (isAlwaysEdit ? 'action.decline-changes' : (isEdit ? 'action.decline-changes' : 'details.toggle-edit-mode')) | translate }}"
+                matTooltipPosition="above"
+                color="accent" class="tb-btn-header mat-fab-bottom-right"
+                (click)="onToggleDetailsEditMode()">
+          <mat-icon class="material-icons">{{isEdit ? 'close' : 'edit'}}</mat-icon>
+        </button>
+      </section>
+    }
   </mat-toolbar>
 </header>
 <div class="mat-content flex-1" [style.background-color]="backgroundColor">
diff --git a/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html b/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
index f2617c7fc8..0029a3ba3f 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
@@ -15,11 +15,10 @@
     limitations under the License.
 
 -->
-<ng-container *ngIf="panelMode; else componentMode">
+@if (panelMode) {
   <ng-container *ngTemplateOutlet="deviceFilterPanel"></ng-container>
-</ng-container>
-<ng-template #componentMode>
-  <ng-container *ngIf="buttonMode; else deviceFilter">
+} @else {
+  @if (buttonMode) {
     <button color="primary"
             matTooltip="{{buttonDisplayValue}}"
             matTooltipPosition="above"
@@ -27,8 +26,33 @@
             (click)="toggleDeviceFilterPanel($event)">
       <mat-icon>filter_list</mat-icon>{{buttonDisplayValue}}
     </button>
-  </ng-container>
-</ng-template>
+  } @else {
+    <div class="tb-device-filter-config-component tb-form-panel no-padding no-border" [formGroup]="deviceInfoFilterForm">
+      <div class="tb-form-row column-xs">
+        <div class="fixed-title-width" translate>device-profile.device-profile</div>
+        <tb-device-profile-autocomplete
+          class="flex-1"
+          formControlName="deviceProfileId"
+          [inlineField]="true"
+          [displayAllOnEmpty]="true"
+          (deviceProfileChanged)="deviceProfileChanged($event)"
+          [editProfileEnabled]="false"
+          [addNewProfile]="false">
+        </tb-device-profile-autocomplete>
+      </div>
+      <div class="tb-form-row column-xs">
+        <div class="fixed-title-width" translate>device.device-state</div>
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="active" placeholder="{{ 'device.any' | translate }}">
+            <mat-option>{{ 'device.any' | translate }}</mat-option>
+            <mat-option [value]="true">{{ 'device.active' | translate }}</mat-option>
+            <mat-option [value]="false">{{ 'device.inactive' | translate }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </div>
+  }
+}
 <ng-template #deviceFilterPanel>
   <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="deviceFilter"></ng-container>
@@ -59,13 +83,13 @@
     <div class="tb-form-row column-xs">
       <div class="fixed-title-width" translate>device-profile.device-profile</div>
       <tb-device-profile-autocomplete
-          class="flex-1"
-          formControlName="deviceProfileId"
-          [inlineField]="true"
-          [displayAllOnEmpty]="true"
-          (deviceProfileChanged)="deviceProfileChanged($event)"
-          [editProfileEnabled]="false"
-          [addNewProfile]="false">
+        class="flex-1"
+        formControlName="deviceProfileId"
+        [inlineField]="true"
+        [displayAllOnEmpty]="true"
+        (deviceProfileChanged)="deviceProfileChanged($event)"
+        [editProfileEnabled]="false"
+        [addNewProfile]="false">
       </tb-device-profile-autocomplete>
     </div>
     <div class="tb-form-row column-xs">
diff --git a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
index 955f8f58be..795bde21c1 100644
--- a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
@@ -26,9 +26,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <tb-anchor #entityDetailsForm></tb-anchor>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings-panel.component.html
index 4d7ab8ee58..f23f7d00fc 100644
--- a/ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings-panel.component.html
@@ -36,14 +36,16 @@
           {{ 'debug-settings.all-messages' | translate: { time: (isDebugAllActive$ | async) && !allEnabled && debugAllControl.untouched ? (allEnabledUntil | durationLeft) : (maxDebugModeDuration | milliSecondsToTimeString: true : true) } }}
         </div>
       </mat-slide-toggle>
-      <button mat-icon-button *ngIf="(isDebugAllActive$ | async) && !allEnabled && debugAllControl.untouched"
-              class="tb-mat-20"
-              matTooltip="{{ 'action.reset' | translate }}"
-              matTooltipPosition="above"
-              color="primary"
-              (click)="onReset()">
-        <mat-icon class="material-icons">refresh</mat-icon>
-      </button>
+      @if ((isDebugAllActive$ | async) && !allEnabled && debugAllControl.untouched) {
+        <button mat-icon-button
+                class="tb-mat-20"
+                matTooltip="{{ 'action.reset' | translate }}"
+                matTooltipPosition="above"
+                color="primary"
+                (click)="onReset()">
+          <mat-icon class="material-icons">refresh</mat-icon>
+        </button>
+      }
     </div>
   </div>
   <div class="flex justify-between">
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
index 5b290980c6..c59c4cf5a9 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@@ -16,37 +16,43 @@
 
 -->
 <mat-drawer-container hasBackdrop="false" class="tb-absolute-fill">
-  <mat-drawer *ngIf="entitiesTableConfig.detailsPanelEnabled"
-              class="tb-details-drawer mat-elevation-z4"
-              #drawer
-              mode="over"
-              position="end"
-              [opened]="isDetailsOpen">
-    <tb-entity-details-panel
-      #entityDetailsPanel
-      [entitiesTableConfig]="entitiesTableConfig"
-      [entityId]="isDetailsOpen ? dataSource.currentEntity?.id : null"
-      (closeEntityDetails)="isDetailsOpen = false; detailsPanelOpened.emit(isDetailsOpen);"
-      (entityUpdated)="onEntityUpdated($event)"
-      (entityAction)="onEntityAction($event)"
-    >
-    </tb-entity-details-panel>
-  </mat-drawer>
+  @if (entitiesTableConfig.detailsPanelEnabled) {
+    <mat-drawer
+      class="tb-details-drawer mat-elevation-z4"
+      #drawer
+      mode="over"
+      position="end"
+      [opened]="isDetailsOpen">
+      <tb-entity-details-panel
+        #entityDetailsPanel
+        [entitiesTableConfig]="entitiesTableConfig"
+        [entityId]="isDetailsOpen ? dataSource.currentEntity?.id : null"
+        (closeEntityDetails)="isDetailsOpen = false; detailsPanelOpened.emit(isDetailsOpen);"
+        (entityUpdated)="onEntityUpdated($event)"
+        (entityAction)="onEntityAction($event)"
+        >
+      </tb-entity-details-panel>
+    </mat-drawer>
+  }
   <mat-drawer-content>
     <div class="mat-padding tb-entity-table tb-absolute-fill">
       <div class="tb-entity-table-content tb-outlined-border flex flex-col">
         <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
             <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
-              <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
+              @if (entitiesTableConfig.tableTitle) {
+                <span class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
+              }
               <tb-anchor #entityTableHeader></tb-anchor>
-              <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
-                              (ngModelChange)="onTimewindowChange()"
-                              asButton strokedButton historyOnly [forAllTimeEnabled]="entitiesTableConfig.forAllTimeEnabled"></tb-timewindow>
+              @if (entitiesTableConfig.useTimePageLink) {
+                <tb-timewindow [(ngModel)]="timewindow"
+                               (ngModelChange)="onTimewindowChange()"
+                asButton strokedButton historyOnly [forAllTimeEnabled]="entitiesTableConfig.forAllTimeEnabled"></tb-timewindow>
+              }
             </div>
             <span class="flex-1"></span>
             <div [class.!hidden]="!addEnabled() || entitiesTableConfig.addAsTextButton">
-              <ng-container *ngIf="!entitiesTableConfig.addActionDescriptors.length; else iconCustom">
+              @if (!entitiesTableConfig.addActionDescriptors.length) {
                 <button mat-icon-button
                         [disabled]="isLoading$ | async"
                         (click)="addEntity($event)"
@@ -54,48 +60,52 @@
                         matTooltipPosition="above">
                   <mat-icon>add</mat-icon>
                 </button>
-              </ng-container>
-              <ng-template #iconCustom>
-                <ng-container *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else iconMenu">
-                  <button *ngIf="entitiesTableConfig.addActionDescriptors[0].isEnabled()"
-                          mat-icon-button
-                          [disabled]="isLoading$ | async"
-                          (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
-                          matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
-                          matTooltipPosition="above">
-                    <tb-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</tb-icon>
-                  </button>
-                </ng-container>
-                <ng-template #iconMenu>
+              } @else {
+                @if (entitiesTableConfig.addActionDescriptors.length === 1) {
+                  @if (entitiesTableConfig.addActionDescriptors[0].isEnabled()) {
+                    <button
+                      mat-icon-button
+                      [disabled]="isLoading$ | async"
+                      (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
+                      matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
+                      matTooltipPosition="above">
+                      <tb-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</tb-icon>
+                    </button>
+                  }
+                } @else {
                   <button mat-icon-button [disabled]="isLoading$ | async"
                           matTooltip="{{ translations.add | translate }}"
                           matTooltipPosition="above"
                           [matMenuTriggerFor]="addActionsMenu">
                     <mat-icon>add</mat-icon>
                   </button>
-                </ng-template>
-              </ng-template>
+                }
+              }
             </div>
-            <button mat-icon-button [disabled]="isLoading$ | async"
-                    [class.!hidden]="!actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
-                    matTooltip="{{ actionDescriptor.name }}"
-                    matTooltipPosition="above"
-                    (click)="actionDescriptor.onAction($event)">
-              <tb-icon>{{actionDescriptor.icon}}</tb-icon>
-            </button>
+            @for (actionDescriptor of headerActionDescriptors; track actionDescriptor) {
+              <button mat-icon-button [disabled]="isLoading$ | async"
+                      [class.!hidden]="!actionDescriptor.isEnabled()"
+                      matTooltip="{{ actionDescriptor.name }}"
+                      matTooltipPosition="above"
+                      (click)="actionDescriptor.onAction($event)">
+                <tb-icon>{{actionDescriptor.icon}}</tb-icon>
+              </button>
+            }
             <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
                     matTooltip="{{ 'action.refresh' | translate }}"
                     matTooltipPosition="above">
               <mat-icon>refresh</mat-icon>
             </button>
-            <button *ngIf="entitiesTableConfig.searchEnabled"
-                    mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
-                    matTooltip="{{ translations.search | translate }}"
-                    matTooltipPosition="above">
-              <mat-icon>search</mat-icon>
-            </button>
+            @if (entitiesTableConfig.searchEnabled) {
+              <button
+                mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
+                matTooltip="{{ translations.search | translate }}"
+                matTooltipPosition="above">
+                <mat-icon>search</mat-icon>
+              </button>
+            }
             <div [class.!hidden]="!addEnabled() || !entitiesTableConfig.addAsTextButton" class="pl-3" style="--mat-fab-small-container-elevation-shadow: none;">
-              <ng-container *ngIf="!entitiesTableConfig.addActionDescriptors.length; else textActions">
+              @if (!entitiesTableConfig.addActionDescriptors.length) {
                 <button class="lt-sm:!hidden"
                         mat-flat-button color="primary"
                         [disabled]="isLoading$ | async"
@@ -111,10 +121,9 @@
                         matTooltipPosition="above">
                   <mat-icon>add</mat-icon>
                 </button>
-              </ng-container>
-              <ng-template #textActions>
-                <ng-container *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else textMenu">
-                  <ng-container *ngIf="entitiesTableConfig.addActionDescriptors[0].isEnabled()">
+              } @else {
+                @if (entitiesTableConfig.addActionDescriptors.length === 1) {
+                  @if (entitiesTableConfig.addActionDescriptors[0].isEnabled()) {
                     <button class="lt-sm:!hidden"
                             mat-flat-button color="primary"
                             [disabled]="isLoading$ | async"
@@ -130,9 +139,8 @@
                             matTooltipPosition="above">
                       <mat-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</mat-icon>
                     </button>
-                  </ng-container>
-                </ng-container>
-                <ng-template #textMenu>
+                  }
+                } @else {
                   <button class="lt-sm:!hidden"
                           mat-flat-button color="primary"
                           [disabled]="isLoading$ | async"
@@ -148,17 +156,19 @@
                           matTooltipPosition="above">
                     <mat-icon>add</mat-icon>
                   </button>
-                </ng-template>
-              </ng-template>
+                }
+              }
             </div>
             <mat-menu #addActionsMenu="matMenu" xPosition="before">
-              <button mat-menu-item *ngFor="let actionDescriptor of entitiesTableConfig.addActionDescriptors"
-                      [disabled]="isLoading$ | async"
-                      [class.!hidden]="!actionDescriptor.isEnabled()"
-                      (click)="actionDescriptor.onAction($event)">
-                <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                <span>{{ actionDescriptor.name }}</span>
-              </button>
+              @for (actionDescriptor of entitiesTableConfig.addActionDescriptors; track actionDescriptor) {
+                <button mat-menu-item
+                        [disabled]="isLoading$ | async"
+                        [class.!hidden]="!actionDescriptor.isEnabled()"
+                        (click)="actionDescriptor.onAction($event)">
+                  <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                  <span>{{ actionDescriptor.name }}</span>
+                </button>
+              }
             </mat-menu>
           </div>
         </mat-toolbar>
@@ -182,24 +192,28 @@
             </button>
           </div>
         </mat-toolbar>
-        <mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="dataSource.selection.isEmpty()">
-          <div class="mat-toolbar-tools">
-            <span class="tb-entity-table-info">
-              {{ translations.selectedEntities | translate:{count: dataSource.selection.selected.length} }}
-            </span>
-            <span class="flex-1"></span>
-            <button mat-icon-button [disabled]="isLoading$ | async"
-                    [class.!hidden]="!actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
-                    matTooltip="{{ actionDescriptor.name }}"
-                    matTooltipPosition="above"
-                    (click)="actionDescriptor.onAction($event, dataSource.selection.selected)">
-              <tb-icon>{{actionDescriptor.icon}}</tb-icon>
-            </button>
-          </div>
-        </mat-toolbar>
+        @if (entitiesTableConfig.selectionEnabled) {
+          <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="dataSource.selection.isEmpty()">
+            <div class="mat-toolbar-tools">
+              <span class="tb-entity-table-info">
+                {{ translations.selectedEntities | translate:{count: dataSource.selection.selected.length} }}
+              </span>
+              <span class="flex-1"></span>
+              @for (actionDescriptor of groupActionDescriptors; track actionDescriptor) {
+                <button mat-icon-button [disabled]="isLoading$ | async"
+                        [class.!hidden]="!actionDescriptor.isEnabled"
+                        matTooltip="{{ actionDescriptor.name }}"
+                        matTooltipPosition="above"
+                        (click)="actionDescriptor.onAction($event, dataSource.selection.selected)">
+                  <tb-icon>{{actionDescriptor.icon}}</tb-icon>
+                </button>
+              }
+            </div>
+          </mat-toolbar>
+        }
         <div class="table-container flex-1">
           <table mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
-                     matSort [matSortActive]="pageLink.sortOrder?.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
+                 matSort [matSortActive]="pageLink.sortOrder?.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
             <ng-container matColumnDef="select" sticky>
               <mat-header-cell *matHeaderCellDef style="width: 40px;">
                 <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
@@ -215,82 +229,90 @@
                 </mat-checkbox>
               </mat-cell>
             </ng-container>
-            <ng-container [matColumnDef]="column.key" *ngFor="let column of entityColumns; trackBy: trackByColumnKey;">
-              <mat-header-cell [class.mat-number-cell]="column.isNumberColumn"
-                               [class.lt-lg:!hidden]="column.mobileHide"
-                               *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
+            @for (column of entityColumns; track column.key) {
+              <ng-container [matColumnDef]="column.key">
+                <mat-header-cell [class.mat-number-cell]="column.isNumberColumn"
+                                 [class.lt-lg:!hidden]="column.mobileHide"
+                                 *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
                 {{ column.ignoreTranslate ? column.title : (column.title | translate) }} </mat-header-cell>
-              <mat-cell [class.mat-number-cell]="column.isNumberColumn"
-                        [class.cell-action]="column.actionCell?.type === cellActionType.COPY_BUTTON"
-                        [class.lt-lg:!hidden]="column.mobileHide"
-                        *matCellDef="let entity; let row = index"
-                        [matTooltip]="cellTooltip(entity, column, row)"
-                        #cellMatTooltip="matTooltip"
-                        matTooltipPosition="above"
-                        [style]="cellStyle(entity, column, row)">
-                <ng-container [ngSwitch]="column.type">
-                  <ng-template [ngSwitchCase]="'link'">
-                    <a *ngIf="column.entityURL(entity) as detailsPageURL; else defaultContent"
-                       [routerLink]="detailsPageURL" [innerHTML]="cellContent(entity, column, row)"
-                       (click)="$event.stopPropagation();"></a>
-                  </ng-template>
-                  <ng-template [ngSwitchCase]="'entityChips'">
-                    <tb-entity-chips [entity]="entity" [key]="column.key"
-                                     [detailsPagePrefixUrl]="column.entityURL ? column.entityURL(entity) : ''"></tb-entity-chips>
-                  </ng-template>
-                  <ng-template #defaultContent ngSwitchDefault>
-                    <span [innerHTML]="cellContent(entity, column, row)"></span>
-                  </ng-template>
-                </ng-container>
-                <ng-template [ngIf]="column.actionCell">
-                  <ng-container [ngSwitch]="column.actionCell.type">
-                    <ng-template [ngSwitchCase]="cellActionType.COPY_BUTTON">
-                      <tb-copy-button
-                        class="copy-button"
-                        [disabled]="isLoading$ | async"
-                        [class.!hidden]="!column.actionCell.isEnabled(entity)"
-                        [copyText]="column.actionCell.onAction(null, entity)"
-                        tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
-                        tooltipPosition="above"
-                        (mouseover)="cellMatTooltip.hide()"
-                        (mouseleave)="cellMatTooltip.show()"
-                        [icon]="column.actionCell.icon"
-                        [style]="column.actionCell.style">
-                      </tb-copy-button>
-                    </ng-template>
-                    <ng-template ngSwitchDefault>
-                      <button mat-icon-button [disabled]="isLoading$ | async"
-                              [class.!hidden]="!column.actionCell.isEnabled(entity)"
-                              matTooltip="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
-                              matTooltipPosition="above"
-                              (click)="column.actionCell.onAction($event, entity)">
-                        <tb-icon [style]="column.actionCell.style">
-                          {{column.actionCell.icon}}
-                        </tb-icon>
-                      </button>
-                    </ng-template>
-                  </ng-container>
-                </ng-template>
-              </mat-cell>
-            </ng-container>
-            <ng-container [matColumnDef]="column.key" *ngFor="let column of actionColumns; trackBy: trackByColumnKey;">
-              <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"
-                        [style]="cellStyle(entity, column, row)">
-                <button mat-icon-button [disabled]="isLoading$ | async"
-                        [class.!hidden]="!column.actionDescriptor.isEnabled(entity)"
-                        matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
-                        matTooltipPosition="above"
-                        (click)="column.actionDescriptor.onAction($event, entity)">
-                  <tb-icon [style]="column.actionDescriptor.style">
-                    {{column.actionDescriptor.iconFunction ? column.actionDescriptor.iconFunction(entity) : column.actionDescriptor.icon}}
-                  </tb-icon>
-                </button>
-              </mat-cell>
-            </ng-container>
+                <mat-cell [class.mat-number-cell]="column.isNumberColumn"
+                          [class.cell-action]="column.actionCell?.type === cellActionType.COPY_BUTTON"
+                          [class.lt-lg:!hidden]="column.mobileHide"
+                          *matCellDef="let entity; let row = index"
+                          [matTooltip]="cellTooltip(entity, column, row)"
+                          #cellMatTooltip="matTooltip"
+                          matTooltipPosition="above"
+                          [style]="cellStyle(entity, column, row)">
+                  @switch (column.type) {
+                    @case ('link') {
+                      @if (column.entityURL(entity); as detailsPageURL) {
+                        <a
+                          [routerLink]="detailsPageURL" [innerHTML]="cellContent(entity, column, row)"
+                        (click)="$event.stopPropagation();"></a>
+                      } @else {
+                        <span [innerHTML]="cellContent(entity, column, row)"></span>
+                      }
+                    }
+                    @case ('entityChips') {
+                      <tb-entity-chips [entity]="entity" [key]="column.key"
+                      [detailsPagePrefixUrl]="column.entityURL ? column.entityURL(entity) : ''"></tb-entity-chips>
+                    }
+                    @default {
+                      <span [innerHTML]="cellContent(entity, column, row)"></span>
+                    }
+                  }
+                  @if (column.actionCell) {
+                    @switch (column.actionCell.type) {
+                      @case (cellActionType.COPY_BUTTON) {
+                        <tb-copy-button
+                          class="copy-button"
+                          [disabled]="isLoading$ | async"
+                          [class.!hidden]="!column.actionCell.isEnabled(entity)"
+                          [copyText]="column.actionCell.onAction(null, entity)"
+                          tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
+                          tooltipPosition="above"
+                          (mouseover)="cellMatTooltip.hide()"
+                          (mouseleave)="cellMatTooltip.show()"
+                          [icon]="column.actionCell.icon"
+                          [style]="column.actionCell.style">
+                        </tb-copy-button>
+                      }
+                      @default {
+                        <button mat-icon-button [disabled]="isLoading$ | async"
+                                [class.!hidden]="!column.actionCell.isEnabled(entity)"
+                                matTooltip="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
+                                matTooltipPosition="above"
+                                (click)="column.actionCell.onAction($event, entity)">
+                          <tb-icon [style]="column.actionCell.style">
+                            {{column.actionCell.icon}}
+                          </tb-icon>
+                        </button>
+                      }
+                    }
+                  }
+                </mat-cell>
+              </ng-container>
+            }
+            @for (column of actionColumns; track trackByColumnKey($index, 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"
+                          [style]="cellStyle(entity, column, row)">
+                  <button mat-icon-button [disabled]="isLoading$ | async"
+                          [class.!hidden]="!column.actionDescriptor.isEnabled(entity)"
+                          matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
+                          matTooltipPosition="above"
+                          (click)="column.actionDescriptor.onAction($event, entity)">
+                    <tb-icon [style]="column.actionDescriptor.style">
+                      {{column.actionDescriptor.iconFunction ? column.actionDescriptor.iconFunction(entity) : column.actionDescriptor.icon}}
+                    </tb-icon>
+                  </button>
+                </mat-cell>
+              </ng-container>
+            }
             <ng-container matColumnDef="actions" stickyEnd>
               <mat-header-cell *matHeaderCellDef>
-                <ng-container *ngIf="cellActionDescriptors.length">
+                @if (cellActionDescriptors.length) {
                   <div class="gt-md:!hidden" style="min-width: 48px;">
                     {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
                   </div>
@@ -298,21 +320,22 @@
                        [style.min-width]="(cellActionDescriptors.length * 48) + 'px'">
                     {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
                   </div>
-                </ng-container>
+                }
               </mat-header-cell>
               <mat-cell *matCellDef="let entity">
-                <ng-container *ngIf="cellActionDescriptors.length">
+                @if (cellActionDescriptors.length) {
                   <div [class.lt-lg:!hidden]="cellActionDescriptors.length !== 1" class="flex flex-row items-stretch justify-end"
                        [style.min-width]="(cellActionDescriptors.length * 48) + 'px'">
-                    <button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
-                            *ngFor="let actionDescriptor of cellActionDescriptors"
-                            matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
-                            matTooltipPosition="above"
-                            (click)="actionDescriptor.onAction($event, entity)">
-                      <tb-icon [style]="actionDescriptor.style">
-                        {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
-                      </tb-icon>
-                    </button>
+                    @for (actionDescriptor of cellActionDescriptors; track actionDescriptor) {
+                      <button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
+                              matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
+                              matTooltipPosition="above"
+                              (click)="actionDescriptor.onAction($event, entity)">
+                        <tb-icon [style]="actionDescriptor.style">
+                          {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
+                        </tb-icon>
+                      </button>
+                    }
                   </div>
                   <div [class.!hidden]="cellActionDescriptors.length === 1" class="gt-md:!hidden">
                     <button mat-icon-button
@@ -321,18 +344,20 @@
                       <mat-icon class="material-icons">more_vert</mat-icon>
                     </button>
                     <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                      <button mat-menu-item *ngFor="let actionDescriptor of cellActionDescriptors"
-                              [disabled]="isLoading$ | async"
-                              [class.!hidden]="!actionDescriptor.isEnabled(entity)"
-                              (click)="actionDescriptor.onAction($event, entity)">
-                        <tb-icon matMenuItemIcon [style]="actionDescriptor.style">
-                          {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
-                        </tb-icon>
-                        <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
-                      </button>
+                      @for (actionDescriptor of cellActionDescriptors; track actionDescriptor) {
+                        <button mat-menu-item
+                                [disabled]="isLoading$ | async"
+                                [class.!hidden]="!actionDescriptor.isEnabled(entity)"
+                                (click)="actionDescriptor.onAction($event, entity)">
+                          <tb-icon matMenuItemIcon [style]="actionDescriptor.style">
+                            {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
+                          </tb-icon>
+                          <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
+                        </button>
+                      }
                     </mat-menu>
                   </div>
-                </ng-container>
+                }
               </mat-cell>
             </ng-container>
             <mat-header-row [class.mat-row-select]="selectionEnabled" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
@@ -341,21 +366,25 @@
                      [class.mat-selected]="dataSource.selection.isSelected(entity)"
                      [class.tb-current-entity]="dataSource.isCurrentEntity(entity)"
                      [class.tb-pointer]="entitiesTableConfig.rowPointer"
-                     *matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
+            *matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
           </table>
           <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
-                class="no-data-found flex items-center justify-center">{{ translations.noEntities | translate }}</span>
+          class="no-data-found flex items-center justify-center">{{ translations.noEntities | translate }}</span>
           <span [class.!hidden]="!dataSource.dataLoading"
-                class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
+          class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
         </div>
-        <mat-divider *ngIf="displayPagination"></mat-divider>
-        <mat-paginator *ngIf="displayPagination"
-                       [length]="dataSource.total() | async"
-                       [pageIndex]="pageLink.page"
-                       [pageSize]="pageLink.pageSize"
-                       [pageSizeOptions]="pageSizeOptions"
-                       [hidePageSize]="hidePageSize"
-                       showFirstLastButtons></mat-paginator>
+        @if (displayPagination) {
+          <mat-divider></mat-divider>
+        }
+        @if (displayPagination) {
+          <mat-paginator
+            [length]="dataSource.total() | async"
+            [pageIndex]="pageLink.page"
+            [pageSize]="pageLink.pageSize"
+            [pageSizeOptions]="pageSizeOptions"
+            [hidePageSize]="hidePageSize"
+          showFirstLastButtons></mat-paginator>
+        }
       </div>
     </div>
   </mat-drawer-content>
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
index 6999c76180..45fcf98eb0 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
@@ -49,7 +49,7 @@ import {
   CellActionDescriptorType,
   EntityActionTableColumn,
   EntityChipsEntityTableColumn,
-  EntityColumn,
+  EntityColumn, EntityColumnsType, EntityColumnType,
   EntityLinkTableColumn,
   EntityTableColumn,
   EntityTableConfig,
@@ -89,8 +89,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
   cellActionDescriptors: Array<CellActionDescriptor<BaseData<HasId>>>;
 
   actionColumns: Array<EntityActionTableColumn<BaseData<HasId>>>;
-  entityColumns: Array<EntityTableColumn<BaseData<HasId>>>;
-
+  entityColumns: EntityColumnsType;
   displayedColumns: string[];
 
   headerCellStyleCache: Array<any> = [];
@@ -594,8 +593,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
   columnsUpdated(resetData: boolean = false) {
     this.entityColumns = this.entitiesTableConfig.columns.filter(
       (column) => column instanceof EntityTableColumn || column instanceof EntityLinkTableColumn ||
-        column instanceof EntityChipsEntityTableColumn)
-      .map(column => column as EntityTableColumn<BaseData<HasId>>);
+        column instanceof EntityChipsEntityTableColumn);
     this.actionColumns = this.entitiesTableConfig.columns.filter(
       (column) => column instanceof EntityActionTableColumn)
       .map(column => column as EntityActionTableColumn<BaseData<HasId>>);
@@ -624,8 +622,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
     this.cellActionDescriptors = [...this.entitiesTableConfig.cellActionDescriptors];
   }
 
-  headerCellStyle(column: EntityColumn<BaseData<HasId>>) {
-    const index = this.entitiesTableConfig.columns.indexOf(column);
+  headerCellStyle(column: EntityColumnType) {
+    const index = this.entitiesTableConfig.columns.indexOf(column as EntityColumn<BaseData<HasId>>);
     let res = this.headerCellStyleCache[index];
     if (!res) {
       const widthStyle: any = {width: column.width};
@@ -650,7 +648,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
     this.cellStyleCache[index] = undefined;
   }
 
-  cellContent(entity: BaseData<HasId>, column: EntityColumn<BaseData<HasId>>, row: number) {
+  cellContent(entity: BaseData<HasId>, column: EntityColumnType, row: number) {
     if (column instanceof EntityTableColumn || column instanceof EntityLinkTableColumn) {
       const col = this.entitiesTableConfig.columns.indexOf(column);
       const index = row * this.entitiesTableConfig.columns.length + col;
@@ -665,7 +663,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
     }
   }
 
-  cellTooltip(entity: BaseData<HasId>, column: EntityColumn<BaseData<HasId>>, row: number) {
+  cellTooltip(entity: BaseData<HasId>, column: EntityColumnType, row: number) {
     if (column instanceof EntityTableColumn || column instanceof EntityLinkTableColumn) {
       const col = this.entitiesTableConfig.columns.indexOf(column);
       const index = row * this.entitiesTableConfig.columns.length + col;
@@ -682,8 +680,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
     }
   }
 
-  cellStyle(entity: BaseData<HasId>, column: EntityColumn<BaseData<HasId>>, row: number) {
-    const col = this.entitiesTableConfig.columns.indexOf(column);
+  cellStyle(entity: BaseData<HasId>, column: EntityColumnType, row: number) {
+    const col = this.entitiesTableConfig.columns.indexOf(column as EntityColumn<BaseData<HasId>>);
     const index = row * this.entitiesTableConfig.columns.length + col;
     let res = this.cellStyleCache[index];
     if (!res) {
@@ -702,7 +700,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
     return res;
   }
 
-  trackByColumnKey(index, column: EntityTableColumn<BaseData<HasId>>) {
+  trackByColumnKey(index, column: EntityTableColumn<BaseData<HasId>> | EntityActionTableColumn<BaseData<HasId>>) {
     return column.key;
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-chips.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-chips.component.html
index b0c7c71e00..856e56b9ea 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-chips.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-chips.component.html
@@ -15,7 +15,9 @@
     limitations under the License.
 
 -->
-<a *ngFor="let subEntity of subEntities" class="tb-entity-chip"
-   routerLink="{{entityDetailsPrefixUrl}}/{{subEntity.id.id}}" (click)="$event.stopPropagation();">
-  {{ subEntity.name | customTranslate }}
-</a>
+@for (subEntity of subEntities; track subEntity) {
+  <a class="tb-entity-chip"
+     routerLink="{{entityDetailsPrefixUrl}}/{{subEntity.id.id}}" (click)="$event.stopPropagation();">
+    {{ subEntity.name | customTranslate }}
+  </a>
+}
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
index 496566ed3a..070d80b4ab 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
@@ -30,25 +30,27 @@
       </div>
       <div class="tb-help" [tb-help]="helpLinkId()"></div>
       <span class="flex-1"></span>
-      <section *ngIf="!isReadOnly" class="tb-header-button flex flex-row gap-2">
-        <button [disabled]="(isLoading$ | async) || detailsForm.invalid || !detailsForm.dirty"
-                mat-fab
-                matTooltip="{{ 'action.apply-changes' | translate }}"
-                matTooltipPosition="above"
-                color="accent" class="tb-btn-header"
-                [class.tb-hide]="!isEdit"
-                (click)="onApplyDetails()">
-          <mat-icon class="material-icons">done</mat-icon>
-        </button>
-        <button [disabled]="(isLoading$ | async)"
-                mat-fab
-                matTooltip="{{ (isEdit ? 'action.decline-changes' : 'details.toggle-edit-mode') | translate }}"
-                matTooltipPosition="above"
-                color="accent" class="tb-btn-header"
-                (click)="onToggleDetailsEditMode()">
-          <mat-icon class="material-icons">{{isEdit ? 'close' : 'edit'}}</mat-icon>
-        </button>
-      </section>
+      @if (!isReadOnly) {
+        <section class="tb-header-button flex flex-row gap-2">
+          <button [disabled]="(isLoading$ | async) || detailsForm.invalid || !detailsForm.dirty"
+                  mat-fab
+                  matTooltip="{{ 'action.apply-changes' | translate }}"
+                  matTooltipPosition="above"
+                  color="accent" class="tb-btn-header"
+                  [class.tb-hide]="!isEdit"
+                  (click)="onApplyDetails()">
+            <mat-icon class="material-icons">done</mat-icon>
+          </button>
+          <button [disabled]="(isLoading$ | async)"
+                  mat-fab
+                  matTooltip="{{ (isEdit ? 'action.decline-changes' : 'details.toggle-edit-mode') | translate }}"
+                  matTooltipPosition="above"
+                  color="accent" class="tb-btn-header"
+                  (click)="onToggleDetailsEditMode()">
+            <mat-icon class="material-icons">{{isEdit ? 'close' : 'edit'}}</mat-icon>
+          </button>
+        </section>
+      }
     </div>
   </mat-toolbar>
   <mat-card-content class="flex-full">
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.html
index 333eafd7fa..319bb2fbf0 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.html
@@ -16,10 +16,11 @@
 
 -->
 <div class="tb-entity-filter-view flex flex-col">
-  <div *ngIf="!filter || !filter.type; else filterView" class="entity-filter-empty" translate>alias.no-entity-filter-specified</div>
-  <ng-template #filterView>
+  @if (!filter || !filter.type) {
+    <div class="entity-filter-empty" translate>alias.no-entity-filter-specified</div>
+  } @else {
     <div class="flex flex-col">
       <div class="entity-filter-value">{{ filterDisplayValue }}</div>
     </div>
-  </ng-template>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
index edbea5d1aa..ab517b2501 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
@@ -19,315 +19,330 @@
   <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>alias.filter-type</mat-label>
     <mat-select required formControlName="type">
-      <mat-option *ngFor="let type of aliasFilterTypes" [value]="type">
-        {{aliasFilterTypeTranslations.get(type) | translate}}
-      </mat-option>
+      @for (type of aliasFilterTypes; track type) {
+        <mat-option [value]="type">
+          {{aliasFilterTypeTranslations.get(type) | translate}}
+        </mat-option>
+      }
     </mat-select>
-    <mat-error *ngIf="entityFilterFormGroup.get('type').hasError('required')">
-      {{ 'alias.filter-type-required' | translate }}
-    </mat-error>
+    @if (entityFilterFormGroup.get('type').hasError('required')) {
+      <mat-error>
+        {{ 'alias.filter-type-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
-  <section class="flex flex-col" [formGroup]="filterFormGroup" [ngSwitch]="entityFilterFormGroup.get('type').value">
-    <ng-template [ngSwitchCase]="aliasFilterType.singleEntity">
-      <tb-entity-select required
-                        appearance="outline"
-                        useAliasEntityTypes="true"
-                        formControlName="singleEntity">
-      </tb-entity-select>
-    </ng-template>
-    <ng-template [ngSwitchCase]="aliasFilterType.entityList">
-      <tb-entity-type-select required
-                             appearance="outline"
-                             showLabel
-                             useAliasEntityTypes="true"
-                             [allowedEntityTypes]="listEntityTypes"
-                             formControlName="entityType">
-      </tb-entity-type-select>
-      <tb-entity-list required
-                      appearance="outline"
-                      syncIdsWithDB
-                      labelText="{{'entity.entity-list' | translate}}"
-                      [entityType]="filterFormGroup.get('entityType').value"
-                      formControlName="entityList">
-      </tb-entity-list>
-    </ng-template>
-    <ng-template [ngSwitchCase]="aliasFilterType.entityName">
-      <tb-entity-type-select required
-                             appearance="outline"
-                             showLabel
-                             useAliasEntityTypes="true"
-                             [allowedEntityTypes]="listEntityTypes"
-                             formControlName="entityType">
-      </tb-entity-type-select>
-      <mat-form-field class="mat-block" appearance="outline">
-        <mat-label translate>entity.name-starts-with</mat-label>
-        <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
-                  matTooltip="{{'entity.help-text' | translate }}">help</mat-icon>
-        <input matInput formControlName="entityNameFilter" required>
-        <mat-error *ngIf="filterFormGroup.get('entityNameFilter').hasError('required')">
-          {{ 'entity.entity-name-filter-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-    </ng-template>
-    <ng-template [ngSwitchCase]="aliasFilterType.entityType">
-      <tb-entity-type-select required
-                             appearance="outline"
-                             showLabel
-                             useAliasEntityTypes="true"
-                             [allowedEntityTypes]="listEntityTypes"
-                             formControlName="entityType">
-      </tb-entity-type-select>
-    </ng-template>
-    <ng-template [ngSwitchCase]="aliasFilterType.stateEntity">
-      <mat-form-field floatLabel="always" class="mat-block" appearance="outline">
-        <mat-label translate>alias.state-entity-parameter-name</mat-label>
-        <input matInput formControlName="stateEntityParamName"
-               placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
-      </mat-form-field>
-      <div class="tb-form-panel stroked no-padding-bottom">
-        <div class="tb-form-panel-title tb-normal">{{ 'alias.default-state-entity' | translate }}</div>
-        <tb-entity-select appearance="outline"
+  <section class="flex flex-col" [formGroup]="filterFormGroup">
+    @switch (entityFilterFormGroup.get('type').value) {
+      @case (aliasFilterType.singleEntity) {
+        <tb-entity-select required
+                          appearance="outline"
                           useAliasEntityTypes="true"
-                          formControlName="defaultStateEntity">
+                          formControlName="singleEntity">
         </tb-entity-select>
-      </div>
-    </ng-template>
-    <ng-template [ngSwitchCase]="aliasFilterType.assetType">
-      <tb-entity-subtype-list required
-                              floatLabel="always"
-                              appearance="outline"
-                              label="{{ 'asset.asset-types' | translate }}"
-                              [entityType]="entityType.ASSET"
-                              formControlName="assetTypes">
-      </tb-entity-subtype-list>
-      <mat-form-field class="mat-block" appearance="outline">
-        <mat-label translate>asset.name-starts-with</mat-label>
-        <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
-                  matTooltip="{{'asset.help-text' | translate }}">help</mat-icon>
-        <input matInput formControlName="assetNameFilter">
-      </mat-form-field>
-    </ng-template>
-    <ng-template [ngSwitchCase]="aliasFilterType.deviceType">
-      <tb-entity-subtype-list required
-                              floatLabel="always"
-                              appearance="outline"
-                              label="{{ 'device.device-types' | translate }}"
-                              [entityType]="entityType.DEVICE"
-                              formControlName="deviceTypes">
-      </tb-entity-subtype-list>
-      <mat-form-field class="mat-block" appearance="outline">
-        <mat-label translate>device.name-starts-with</mat-label>
-        <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
-                  matTooltip="{{'device.help-text' | translate }}">help</mat-icon>
-        <input matInput formControlName="deviceNameFilter">
-      </mat-form-field>
-    </ng-template>
-    <ng-template [ngSwitchCase]="aliasFilterType.entityViewType">
-      <tb-entity-subtype-list required
-                              floatLabel="always"
-                              appearance="outline"
-                              label="{{ 'entity-view.entity-view-types' | translate }}"
-                              [entityType]="entityType.ENTITY_VIEW"
-                              formControlName="entityViewTypes">
-      </tb-entity-subtype-list>
-      <mat-form-field class="mat-block" appearance="outline">
-        <mat-label translate>entity-view.name-starts-with</mat-label>
-        <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
-                  matTooltip="{{'entity-view.help-text' | translate }}">help</mat-icon>
-        <input matInput formControlName="entityViewNameFilter">
-      </mat-form-field>
-    </ng-template>
-    <ng-template [ngSwitchCase]="aliasFilterType.edgeType">
-      <tb-entity-subtype-list required
-                              floatLabel="always"
-                              appearance="outline"
-                              label="{{ 'edge.edge-types' | translate }}"
-                              [entityType]="entityType.EDGE"
-                              formControlName="edgeTypes">
-      </tb-entity-subtype-list>
-      <mat-form-field class="mat-block" appearance="outline">
-        <mat-label translate>edge.name-starts-with</mat-label>
-        <input matInput formControlName="edgeNameFilter">
-      </mat-form-field>
-    </ng-template>
-    <ng-template [ngSwitchCase]="aliasFilterType.relationsQuery">
-      <section class="tb-form-panel no-border no-padding">
-        <div class="tb-form-panel stroked" [class.no-padding-bottom]="!filterFormGroup.get('rootStateEntity').value">
-          <div class="tb-form-panel-title" translate>alias.root-entity</div>
-          <mat-slide-toggle class="mat-slide" formControlName="rootStateEntity">
-            {{ 'alias.root-state-entity' | translate }}
-          </mat-slide-toggle>
-          @if (filterFormGroup.get('rootStateEntity').value) {
-            <div class="tb-form-panel no-border no-padding no-gap">
-              <mat-form-field floatLabel="always" class="mat-block" appearance="outline">
-                <mat-label translate>alias.state-entity-parameter-name</mat-label>
-                <input matInput formControlName="stateEntityParamName"
-                       placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
-              </mat-form-field>
-              <div class="tb-form-panel stroked no-padding-bottom">
-                <div class="tb-form-panel-title tb-normal">{{ 'alias.default-state-entity' | translate }}</div>
-                <tb-entity-select appearance="outline"
-                                  useAliasEntityTypes="true"
-                                  formControlName="defaultStateEntity">
-                </tb-entity-select>
-              </div>
-            </div>
-          } @else {
-            <tb-entity-select required
-                              appearance="outline"
-                              useAliasEntityTypes="true"
-                              formControlName="rootEntity">
-            </tb-entity-select>
+      }
+      @case (aliasFilterType.entityList) {
+        <tb-entity-type-select required
+                               appearance="outline"
+                               showLabel
+                               useAliasEntityTypes="true"
+                               [allowedEntityTypes]="listEntityTypes"
+                               formControlName="entityType">
+        </tb-entity-type-select>
+        <tb-entity-list required
+                        appearance="outline"
+                        syncIdsWithDB
+                        labelText="{{'entity.entity-list' | translate}}"
+                        [entityType]="filterFormGroup.get('entityType').value"
+                        formControlName="entityList">
+        </tb-entity-list>
+      }
+      @case (aliasFilterType.entityName) {
+        <tb-entity-type-select required
+                               appearance="outline"
+                               showLabel
+                               useAliasEntityTypes="true"
+                               [allowedEntityTypes]="listEntityTypes"
+                               formControlName="entityType">
+        </tb-entity-type-select>
+        <mat-form-field class="mat-block" appearance="outline">
+          <mat-label translate>entity.name-starts-with</mat-label>
+          <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
+          matTooltip="{{'entity.help-text' | translate }}">help</mat-icon>
+          <input matInput formControlName="entityNameFilter" required>
+          @if (filterFormGroup.get('entityNameFilter').hasError('required')) {
+            <mat-error>
+              {{ 'entity.entity-name-filter-required' | translate }}
+            </mat-error>
           }
+        </mat-form-field>
+      }
+      @case (aliasFilterType.entityType) {
+        <tb-entity-type-select required
+                               appearance="outline"
+                               showLabel
+                               useAliasEntityTypes="true"
+                               [allowedEntityTypes]="listEntityTypes"
+                               formControlName="entityType">
+        </tb-entity-type-select>
+      }
+      @case (aliasFilterType.stateEntity) {
+        <mat-form-field floatLabel="always" class="mat-block" appearance="outline">
+          <mat-label translate>alias.state-entity-parameter-name</mat-label>
+          <input matInput formControlName="stateEntityParamName"
+                 placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
+        </mat-form-field>
+        <div class="tb-form-panel stroked no-padding-bottom">
+          <div class="tb-form-panel-title tb-normal">{{ 'alias.default-state-entity' | translate }}</div>
+          <tb-entity-select appearance="outline"
+                            useAliasEntityTypes="true"
+                            formControlName="defaultStateEntity">
+          </tb-entity-select>
         </div>
-        <div class="tb-form-panel stroked">
-          <div class="tb-form-panel-title" translate>alias.query-options</div>
-          <div class="flex flex-row gap-4">
-            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-              <mat-label translate>relation.direction</mat-label>
-              <mat-select required formControlName="direction">
-                <mat-option *ngFor="let type of directionTypes" [value]="type">
-                  {{ directionTypeTranslations.get(directionTypeEnum[type]) | translate }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-            <mat-form-field class="flex-1" floatLabel="always" appearance="outline" subscriptSizing="dynamic">
-              <mat-label translate>alias.max-relation-level</mat-label>
-              <input matInput
-                     type="number"
-                     min="1"
-                     step="1"
-                     placeholder="{{ 'alias.unlimited-level' | translate }}"
-                     formControlName="maxLevel">
-            </mat-form-field>
+      }
+      @case (aliasFilterType.assetType) {
+        <tb-entity-subtype-list required
+                                floatLabel="always"
+                                appearance="outline"
+                                label="{{ 'asset.asset-types' | translate }}"
+                                [entityType]="entityType.ASSET"
+                                formControlName="assetTypes">
+        </tb-entity-subtype-list>
+        <mat-form-field class="mat-block" appearance="outline">
+          <mat-label translate>asset.name-starts-with</mat-label>
+          <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
+          matTooltip="{{'asset.help-text' | translate }}">help</mat-icon>
+          <input matInput formControlName="assetNameFilter">
+        </mat-form-field>
+      }
+      @case (aliasFilterType.deviceType) {
+        <tb-entity-subtype-list required
+                                floatLabel="always"
+                                appearance="outline"
+                                label="{{ 'device.device-types' | translate }}"
+                                [entityType]="entityType.DEVICE"
+                                formControlName="deviceTypes">
+        </tb-entity-subtype-list>
+        <mat-form-field class="mat-block" appearance="outline">
+          <mat-label translate>device.name-starts-with</mat-label>
+          <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
+          matTooltip="{{'device.help-text' | translate }}">help</mat-icon>
+          <input matInput formControlName="deviceNameFilter">
+        </mat-form-field>
+      }
+      @case (aliasFilterType.entityViewType) {
+        <tb-entity-subtype-list required
+                                floatLabel="always"
+                                appearance="outline"
+                                label="{{ 'entity-view.entity-view-types' | translate }}"
+                                [entityType]="entityType.ENTITY_VIEW"
+                                formControlName="entityViewTypes">
+        </tb-entity-subtype-list>
+        <mat-form-field class="mat-block" appearance="outline">
+          <mat-label translate>entity-view.name-starts-with</mat-label>
+          <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
+          matTooltip="{{'entity-view.help-text' | translate }}">help</mat-icon>
+          <input matInput formControlName="entityViewNameFilter">
+        </mat-form-field>
+      }
+      @case (aliasFilterType.edgeType) {
+        <tb-entity-subtype-list required
+                                floatLabel="always"
+                                appearance="outline"
+                                label="{{ 'edge.edge-types' | translate }}"
+                                [entityType]="entityType.EDGE"
+                                formControlName="edgeTypes">
+        </tb-entity-subtype-list>
+        <mat-form-field class="mat-block" appearance="outline">
+          <mat-label translate>edge.name-starts-with</mat-label>
+          <input matInput formControlName="edgeNameFilter">
+        </mat-form-field>
+      }
+      @case (aliasFilterType.relationsQuery) {
+        <section class="tb-form-panel no-border no-padding">
+          <div class="tb-form-panel stroked" [class.no-padding-bottom]="!filterFormGroup.get('rootStateEntity').value">
+            <div class="tb-form-panel-title" translate>alias.root-entity</div>
+            <mat-slide-toggle class="mat-slide" formControlName="rootStateEntity">
+              {{ 'alias.root-state-entity' | translate }}
+            </mat-slide-toggle>
+            @if (filterFormGroup.get('rootStateEntity').value) {
+              <div class="tb-form-panel no-border no-padding no-gap">
+                <mat-form-field floatLabel="always" class="mat-block" appearance="outline">
+                  <mat-label translate>alias.state-entity-parameter-name</mat-label>
+                  <input matInput formControlName="stateEntityParamName"
+                         placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
+                </mat-form-field>
+                <div class="tb-form-panel stroked no-padding-bottom">
+                  <div class="tb-form-panel-title tb-normal">{{ 'alias.default-state-entity' | translate }}</div>
+                  <tb-entity-select appearance="outline"
+                                    useAliasEntityTypes="true"
+                                    formControlName="defaultStateEntity">
+                  </tb-entity-select>
+                </div>
+              </div>
+            } @else {
+              <tb-entity-select required
+                                appearance="outline"
+                                useAliasEntityTypes="true"
+                                formControlName="rootEntity">
+              </tb-entity-select>
+            }
           </div>
-          <mat-slide-toggle *ngIf="filterFormGroup.get('maxLevel').value > 1 || !filterFormGroup.get('maxLevel').value"
-                            class="mat-slide" formControlName="fetchLastLevelOnly">
-            {{ 'alias.last-level-relation' | translate }}
-          </mat-slide-toggle>
-        </div>
-        <div class="tb-form-panel stroked">
-          <div class="tb-form-panel-title" translate>relation.relation-filters</div>
-          <tb-relation-filters
-            enableNotOption
-            [allowedEntityTypes]="allowedEntityTypes"
-            formControlName="filters">
-          </tb-relation-filters>
-        </div>
-      </section>
-    </ng-template>
-    <ng-template [ngSwitchCase]="entityFilterFormGroup.get('type').value === aliasFilterType.assetSearchQuery ||
-                                 entityFilterFormGroup.get('type').value === aliasFilterType.deviceSearchQuery ||
-                                 entityFilterFormGroup.get('type').value === aliasFilterType.edgeSearchQuery ||
-                                 entityFilterFormGroup.get('type').value === aliasFilterType.entityViewSearchQuery ?
-                                 entityFilterFormGroup.get('type').value : ''">
-      <section class="tb-form-panel no-border no-padding">
-        <div class="tb-form-panel stroked" [class.no-padding-bottom]="!filterFormGroup.get('rootStateEntity').value">
-          <div class="tb-form-panel-title" translate>alias.root-entity</div>
-          <mat-slide-toggle class="mat-slide" formControlName="rootStateEntity">
-            {{ 'alias.root-state-entity' | translate }}
-          </mat-slide-toggle>
-          @if (filterFormGroup.get('rootStateEntity').value) {
-            <div class="tb-form-panel no-border no-padding no-gap">
-              <mat-form-field floatLabel="always" class="mat-block" appearance="outline">
-                <mat-label translate>alias.state-entity-parameter-name</mat-label>
-                <input matInput formControlName="stateEntityParamName"
-                       placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
+          <div class="tb-form-panel stroked">
+            <div class="tb-form-panel-title" translate>alias.query-options</div>
+            <div class="flex flex-row gap-4">
+              <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+                <mat-label translate>relation.direction</mat-label>
+                <mat-select required formControlName="direction">
+                  @for (type of directionTypes; track type) {
+                    <mat-option [value]="type">
+                      {{ directionTypeTranslations.get(directionTypeEnum[type]) | translate }}
+                    </mat-option>
+                  }
+                </mat-select>
               </mat-form-field>
-              <div class="tb-form-panel stroked no-padding-bottom">
-                <div class="tb-form-panel-title tb-normal">{{ 'alias.default-state-entity' | translate }}</div>
-                <tb-entity-select appearance="outline"
-                                  useAliasEntityTypes="true"
-                                  formControlName="defaultStateEntity">
-                </tb-entity-select>
+              <mat-form-field class="flex-1" floatLabel="always" appearance="outline" subscriptSizing="dynamic">
+                <mat-label translate>alias.max-relation-level</mat-label>
+                <input matInput
+                       type="number"
+                       min="1"
+                       step="1"
+                       placeholder="{{ 'alias.unlimited-level' | translate }}"
+                       formControlName="maxLevel">
+              </mat-form-field>
+            </div>
+            @if (filterFormGroup.get('maxLevel').value > 1 || !filterFormGroup.get('maxLevel').value) {
+              <mat-slide-toggle
+                class="mat-slide" formControlName="fetchLastLevelOnly">
+                {{ 'alias.last-level-relation' | translate }}
+              </mat-slide-toggle>
+            }
+          </div>
+          <div class="tb-form-panel stroked">
+            <div class="tb-form-panel-title" translate>relation.relation-filters</div>
+            <tb-relation-filters
+              enableNotOption
+              [allowedEntityTypes]="allowedEntityTypes"
+              formControlName="filters">
+            </tb-relation-filters>
+          </div>
+        </section>
+      }
+      @case (entityFilterFormGroup.get('type').value === aliasFilterType.assetSearchQuery ||
+        entityFilterFormGroup.get('type').value === aliasFilterType.deviceSearchQuery ||
+        entityFilterFormGroup.get('type').value === aliasFilterType.edgeSearchQuery ||
+        entityFilterFormGroup.get('type').value === aliasFilterType.entityViewSearchQuery ?
+        entityFilterFormGroup.get('type').value : '') {
+        <section class="tb-form-panel no-border no-padding">
+          <div class="tb-form-panel stroked" [class.no-padding-bottom]="!filterFormGroup.get('rootStateEntity').value">
+            <div class="tb-form-panel-title" translate>alias.root-entity</div>
+            <mat-slide-toggle class="mat-slide" formControlName="rootStateEntity">
+              {{ 'alias.root-state-entity' | translate }}
+            </mat-slide-toggle>
+            @if (filterFormGroup.get('rootStateEntity').value) {
+              <div class="tb-form-panel no-border no-padding no-gap">
+                <mat-form-field floatLabel="always" class="mat-block" appearance="outline">
+                  <mat-label translate>alias.state-entity-parameter-name</mat-label>
+                  <input matInput formControlName="stateEntityParamName"
+                         placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
+                </mat-form-field>
+                <div class="tb-form-panel stroked no-padding-bottom">
+                  <div class="tb-form-panel-title tb-normal">{{ 'alias.default-state-entity' | translate }}</div>
+                  <tb-entity-select appearance="outline"
+                                    useAliasEntityTypes="true"
+                                    formControlName="defaultStateEntity">
+                  </tb-entity-select>
+                </div>
               </div>
+            } @else {
+              <tb-entity-select required
+                                appearance="outline"
+                                useAliasEntityTypes="true"
+                                formControlName="rootEntity">
+              </tb-entity-select>
+            }
+          </div>
+          <div class="tb-form-panel stroked">
+            <div class="tb-form-panel-title" translate>alias.query-options</div>
+            <div class="flex flex-row gap-4">
+              <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+                <mat-label translate>relation.direction</mat-label>
+                <mat-select required formControlName="direction">
+                  @for (type of directionTypes; track type) {
+                    <mat-option [value]="type">
+                      {{ directionTypeTranslations.get(directionTypeEnum[type]) | translate }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field class="flex-1" floatLabel="always" appearance="outline" subscriptSizing="dynamic">
+                <mat-label translate>alias.max-relation-level</mat-label>
+                <input matInput
+                       type="number"
+                       min="1"
+                       step="1"
+                       placeholder="{{ 'alias.unlimited-level' | translate }}"
+                       formControlName="maxLevel">
+              </mat-form-field>
             </div>
-          } @else {
-            <tb-entity-select required
-                              appearance="outline"
-                              useAliasEntityTypes="true"
-                              formControlName="rootEntity">
-            </tb-entity-select>
-          }
-        </div>
-        <div class="tb-form-panel stroked">
-          <div class="tb-form-panel-title" translate>alias.query-options</div>
-          <div class="flex flex-row gap-4">
-            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-              <mat-label translate>relation.direction</mat-label>
-              <mat-select required formControlName="direction">
-                <mat-option *ngFor="let type of directionTypes" [value]="type">
-                  {{ directionTypeTranslations.get(directionTypeEnum[type]) | translate }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-            <mat-form-field class="flex-1" floatLabel="always" appearance="outline" subscriptSizing="dynamic">
-              <mat-label translate>alias.max-relation-level</mat-label>
-              <input matInput
-                     type="number"
-                     min="1"
-                     step="1"
-                     placeholder="{{ 'alias.unlimited-level' | translate }}"
-                     formControlName="maxLevel">
-            </mat-form-field>
+            @if (filterFormGroup.get('maxLevel').value > 1 || !filterFormGroup.get('maxLevel').value) {
+              <mat-slide-toggle
+                class="mat-slide" formControlName="fetchLastLevelOnly">
+                {{ 'alias.last-level-relation' | translate }}
+              </mat-slide-toggle>
+            }
           </div>
-          <mat-slide-toggle *ngIf="filterFormGroup.get('maxLevel').value > 1 || !filterFormGroup.get('maxLevel').value"
-                            class="mat-slide" formControlName="fetchLastLevelOnly">
-            {{ 'alias.last-level-relation' | translate }}
-          </mat-slide-toggle>
-        </div>
-        <div class="tb-form-panel stroked no-padding-bottom">
-          <div class="tb-form-panel-title" translate>relation.relation-filter</div>
-          <tb-relation-type-autocomplete
-            appearance="outline"
-            subscriptSizing="dynamic"
-            formControlName="relationType">
-          </tb-relation-type-autocomplete>
-          <ng-container [ngSwitch]="entityFilterFormGroup.get('type').value">
-            <ng-template [ngSwitchCase]="aliasFilterType.assetSearchQuery">
-              <tb-entity-subtype-list
-                required
-                floatLabel="always"
-                appearance="outline"
-                label="{{ 'asset.asset-types' | translate }}"
-                [entityType]="entityType.ASSET"
-                formControlName="assetTypes">
-              </tb-entity-subtype-list>
-            </ng-template>
-            <ng-template [ngSwitchCase]="aliasFilterType.deviceSearchQuery">
-              <tb-entity-subtype-list
-                required
-                floatLabel="always"
-                appearance="outline"
-                label="{{ 'device.device-types' | translate }}"
-                [entityType]="entityType.DEVICE"
-                formControlName="deviceTypes">
-              </tb-entity-subtype-list>
-            </ng-template>
-            <ng-template [ngSwitchCase]="aliasFilterType.edgeSearchQuery">
-              <tb-entity-subtype-list
-                required
-                floatLabel="always"
-                appearance="outline"
-                label="{{ 'edge.edge-types' | translate }}"
-                [entityType]="entityType.EDGE"
-                formControlName="edgeTypes">
-              </tb-entity-subtype-list>
-            </ng-template>
-            <ng-template [ngSwitchCase]="aliasFilterType.entityViewSearchQuery">
-              <tb-entity-subtype-list
-                required
-                floatLabel="always"
-                appearance="outline"
-                label="{{ 'entity-view.entity-view-types' | translate }}"
-                [entityType]="entityType.ENTITY_VIEW"
-                formControlName="entityViewTypes">
-              </tb-entity-subtype-list>
-            </ng-template>
-          </ng-container>
-        </div>
-      </section>
-    </ng-template>
-
+          <div class="tb-form-panel stroked no-padding-bottom">
+            <div class="tb-form-panel-title" translate>relation.relation-filter</div>
+            <tb-relation-type-autocomplete
+              appearance="outline"
+              subscriptSizing="dynamic"
+              formControlName="relationType">
+            </tb-relation-type-autocomplete>
+            @switch (entityFilterFormGroup.get('type').value) {
+              @case (aliasFilterType.assetSearchQuery) {
+                <tb-entity-subtype-list
+                  required
+                  floatLabel="always"
+                  appearance="outline"
+                  label="{{ 'asset.asset-types' | translate }}"
+                  [entityType]="entityType.ASSET"
+                  formControlName="assetTypes">
+                </tb-entity-subtype-list>
+              }
+              @case (aliasFilterType.deviceSearchQuery) {
+                <tb-entity-subtype-list
+                  required
+                  floatLabel="always"
+                  appearance="outline"
+                  label="{{ 'device.device-types' | translate }}"
+                  [entityType]="entityType.DEVICE"
+                  formControlName="deviceTypes">
+                </tb-entity-subtype-list>
+              }
+              @case (aliasFilterType.edgeSearchQuery) {
+                <tb-entity-subtype-list
+                  required
+                  floatLabel="always"
+                  appearance="outline"
+                  label="{{ 'edge.edge-types' | translate }}"
+                  [entityType]="entityType.EDGE"
+                  formControlName="edgeTypes">
+                </tb-entity-subtype-list>
+              }
+              @case (aliasFilterType.entityViewSearchQuery) {
+                <tb-entity-subtype-list
+                  required
+                  floatLabel="always"
+                  appearance="outline"
+                  label="{{ 'entity-view.entity-view-types' | translate }}"
+                  [entityType]="entityType.ENTITY_VIEW"
+                  formControlName="entityViewTypes">
+                </tb-entity-subtype-list>
+              }
+            }
+          </div>
+        </section>
+      }
+    }
   </section>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
index df073b8702..f59cac1d7f 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
@@ -17,48 +17,52 @@
 -->
 <form class="tb-filter flex flex-col" [formGroup]="eventFilterFormGroup" (ngSubmit)="update()">
   <div class="tb-filter-container mat-padding flex flex-col">
-    <ng-container *ngFor="let column of showColumns">
-      <ng-container [ngSwitch]="column.key">
-        <ng-template [ngSwitchCase]="isSelector(column.key)">
+    @for (column of showColumns; track column) {
+      @switch (column.key) {
+        @case (isSelector(column.key)) {
           <mat-form-field>
             <mat-label>{{ column.title | translate}}</mat-label>
             <mat-select [formControlName]="column.key">
               <mat-option [value]="">{{ 'event.all-events' | translate}}</mat-option>
-              <mat-option *ngFor="let value of selectorValues(column.key)" [value]="value">
-                {{ value }}
-              </mat-option>
+              @for (value of selectorValues(column.key); track value) {
+                <mat-option [value]="value">
+                  {{ value }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
-        </ng-template>
-        <ng-template [ngSwitchCase]="isNumberFields(column.key)">
+        }
+        @case (isNumberFields(column.key)) {
           <mat-form-field>
             <mat-label>{{ column.title | translate}}</mat-label>
             <input matInput type="number" min="0" [name]="column.key" [formControlName]="column.key">
-            <mat-error *ngIf="eventFilterFormGroup.get(column.key).hasError('min')">
-              {{ 'event.min-value' | translate }}
-            </mat-error>
+            @if (eventFilterFormGroup.get(column.key).hasError('min')) {
+              <mat-error>
+                {{ 'event.min-value' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
-        </ng-template>
-        <ng-template [ngSwitchCase]="'isError'">
+        }
+        @case ('isError') {
           <tb-checkbox formControlName="isError" [falseValue]="''"
                        (ngModelChange)="changeIsError($event)">
             {{ 'event.has-error' | translate }}
           </tb-checkbox>
-        </ng-template>
-        <ng-template [ngSwitchCase]="'errorStr'">
+        }
+        @case ('errorStr') {
           <mat-form-field [class.!hidden]="!showErrorMsgFields()">
             <mat-label>{{ column.title | translate}}</mat-label>
             <input matInput type="text" name="errorSearchText" formControlName="errorStr">
           </mat-form-field>
-        </ng-template>
-        <ng-container *ngSwitchDefault>
+        }
+        @default {
           <mat-form-field>
             <mat-label>{{ column.title | translate}}</mat-label>
             <input matInput type="text" [name]="column.key" [formControlName]="column.key">
           </mat-form-field>
-        </ng-container>
-      </ng-container>
-    </ng-container>
+        }
+      }
+    }
   </div>
   <div class="tb-panel-actions mat-padding flex flex-row items-center justify-end">
     <button type="button"
diff --git a/ui-ngx/src/app/modules/home/components/event/event-table-header.component.html b/ui-ngx/src/app/modules/home/components/event/event-table-header.component.html
index 30988468fa..d78c466397 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-table-header.component.html
@@ -19,8 +19,10 @@
   <mat-label translate>event.event-type</mat-label>
   <mat-select [ngModel]="eventTableConfig.eventType"
               (ngModelChange)="eventTypeChanged($event)">
-    <mat-option *ngFor="let type of eventTableConfig.eventTypes" [value]="type">
-      {{ eventTypeTranslationsMap.get(type) | translate }}
-    </mat-option>
+    @for (type of eventTableConfig.eventTypes; track type) {
+      <mat-option [value]="type">
+        {{ eventTypeTranslationsMap.get(type) | translate }}
+      </mat-option>
+    }
   </mat-select>
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
index 0861fa7201..1423689595 100644
--- a/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
@@ -18,9 +18,11 @@
 <div class="flex flex-1 flex-row items-start justify-start gap-2" [formGroup]="booleanFilterPredicateFormGroup">
   <mat-form-field hideRequiredMarker class="mat-block max-w-30% flex-full">
     <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
-      <mat-option *ngFor="let operation of booleanOperations" [value]="operation">
-        {{booleanOperationTranslations.get(booleanOperationEnum[operation]) | translate}}
-      </mat-option>
+      @for (operation of booleanOperations; track operation) {
+        <mat-option [value]="operation">
+          {{booleanOperationTranslations.get(booleanOperationEnum[operation]) | translate}}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
diff --git a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
index 52ab305d54..59d5faa155 100644
--- a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
@@ -30,9 +30,11 @@
       <mat-form-field class="mat-block">
         <mat-label translate>filter.operation.operation</mat-label>
         <mat-select required formControlName="operation">
-          <mat-option *ngFor="let operation of complexOperations" [value]="operation">
-            {{complexOperationTranslations.get(complexOperationEnum[operation]) | translate}}
-          </mat-option>
+          @for (operation of complexOperations; track operation) {
+            <mat-option [value]="operation">
+              {{complexOperationTranslations.get(complexOperationEnum[operation]) | translate}}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <tb-filter-predicate-list
@@ -54,11 +56,12 @@
             cdkFocusInitial>
       {{ (data.readonly ? 'action.close' : 'action.cancel') | translate }}
     </button>
-    <button mat-raised-button color="primary"
-            *ngIf="!data.readonly"
-            type="submit"
-            [disabled]="(isLoading$ | async) || complexFilterFormGroup.invalid || !complexFilterFormGroup.dirty">
-      {{ (isAdd ? 'action.add' : 'action.update') | translate }}
-    </button>
+    @if (!data.readonly) {
+      <button mat-raised-button color="primary"
+              type="submit"
+              [disabled]="(isLoading$ | async) || complexFilterFormGroup.invalid || !complexFilterFormGroup.dirty">
+        {{ (isAdd ? 'action.add' : 'action.update') | translate }}
+      </button>
+    }
   </div>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
index ff4f5de857..e4261076d5 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
@@ -28,49 +28,57 @@
         <div class="flex flex-1 flex-row gap-2">
           <div class="flex max-w-30% flex-full flex-row items-center justify-start gap-2">
             <label translate class="tb-title no-padding flex-1">filter.operation.operation</label>
-            <label *ngIf="valueType === valueTypeEnum.STRING"
-                   translate class="tb-title no-padding" style="min-width: 70px;">filter.ignore-case</label>
+            @if (valueType === valueTypeEnum.STRING) {
+              <label
+              translate class="tb-title no-padding" style="min-width: 70px;">filter.ignore-case</label>
+            }
           </div>
           <label translate class="tb-title no-padding max-w-70% flex-full">filter.value</label>
         </div>
-        <label *ngIf="displayUserParameters"
-               translate class="tb-title no-padding" style="width: 60px;">filter.user-parameters</label>
+        @if (displayUserParameters) {
+          <label
+          translate class="tb-title no-padding" style="width: 60px;">filter.user-parameters</label>
+        }
         <span [class.!hidden]="disabled" style="min-width: 40px;">&nbsp;</span>
       </div>
     </div>
     <mat-divider style="padding-bottom: 5px;"></mat-divider>
     <div class="predicate-list">
-      <div class="flex flex-row items-stretch justify-start h-full min-h-19 max-h-24"
-           formArrayName="predicates"
-           *ngFor="let predicateControl of predicatesFormArray.controls; let $index = index">
-        <div class="filters-operation flex max-w-8% flex-full flex-row items-stretch justify-center">
-          <span *ngIf="$index > 0">{{ complexOperationTranslations.get(operation) | translate }}</span>
-        </div>
-        <div class="flex max-w-92% min-w-147.5 flex-full flex-col">
-          <div class="flex flex-1 flex-row items-center justify-start gap-2">
-            <tb-filter-predicate
-              class="flex-1"
-              [valueType]="valueType"
-              [displayUserParameters]="displayUserParameters"
-              [allowUserDynamicSource]="allowUserDynamicSource"
-              [onlyUserDynamicSource]="onlyUserDynamicSource"
-              [key]="key"
-              [formControl]="predicateControl">
-            </tb-filter-predicate>
-            <button mat-icon-button color="primary"
-                    [class.!hidden]="disabled"
-                    type="button"
-                    (click)="removePredicate($index)"
-                    matTooltip="{{ 'filter.remove-filter' | translate }}"
-                    matTooltipPosition="above">
-              <mat-icon>close</mat-icon>
-            </button>
+      @for (predicateControl of predicatesFormArray.controls; track predicateControl) {
+        <div class="flex flex-row items-stretch justify-start h-full min-h-19 max-h-24"
+             formArrayName="predicates"
+             >
+          <div class="filters-operation flex max-w-8% flex-full flex-row items-stretch justify-center">
+            @if ($index > 0) {
+              <span>{{ complexOperationTranslations.get(operation) | translate }}</span>
+            }
+          </div>
+          <div class="flex max-w-92% min-w-147.5 flex-full flex-col">
+            <div class="flex flex-1 flex-row items-center justify-start gap-2">
+              <tb-filter-predicate
+                class="flex-1"
+                [valueType]="valueType"
+                [displayUserParameters]="displayUserParameters"
+                [allowUserDynamicSource]="allowUserDynamicSource"
+                [onlyUserDynamicSource]="onlyUserDynamicSource"
+                [key]="key"
+                [formControl]="predicateControl">
+              </tb-filter-predicate>
+              <button mat-icon-button color="primary"
+                      [class.!hidden]="disabled"
+                      type="button"
+                      (click)="removePredicate($index)"
+                      matTooltip="{{ 'filter.remove-filter' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>close</mat-icon>
+              </button>
+            </div>
           </div>
         </div>
-      </div>
+      }
       <span [class.!hidden]="!!predicatesFormArray.length"
             [class.disabled]="disabled"
-            class="no-data-found flex items-center justify-center" translate>filter.no-filters</span>
+      class="no-data-found flex items-center justify-center" translate>filter.no-filters</span>
     </div>
     <div style="margin-top: 16px;" class="flex flex-row gap-2">
       <button mat-button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
index eb1aa4ce53..e0c3aa20c7 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
@@ -17,28 +17,30 @@
 -->
 <div class="flex flex-1 flex-row items-center justify-start gap-2" [formGroup]="filterPredicateValueFormGroup">
   <div class="flex flex-1 flex-col" [class.!hidden]="dynamicMode || onlyUserDynamicSource">
-    <div class="flex flex-col" [ngSwitch]="valueType">
-      <ng-template [ngSwitchCase]="valueTypeEnum.STRING">
-        <mat-form-field hideRequiredMarker class="mat-block">
-          <input matInput formControlName="defaultValue" placeholder="{{'filter.value' | translate}}">
-        </mat-form-field>
-      </ng-template>
-      <ng-template [ngSwitchCase]="valueTypeEnum.NUMERIC">
-        <mat-form-field hideRequiredMarker class="mat-block">
-          <input required type="number" matInput formControlName="defaultValue"
-                 placeholder="{{'filter.value' | translate}}">
-        </mat-form-field>
-      </ng-template>
-      <ng-template [ngSwitchCase]="valueTypeEnum.DATE_TIME">
-        <tb-datetime formControlName="defaultValue"
-                     dateText="{{ 'filter.date' | translate }}"
-                     required [showLabel]="false"></tb-datetime>
-      </ng-template>
-      <ng-template [ngSwitchCase]="valueTypeEnum.BOOLEAN">
-        <mat-checkbox formControlName="defaultValue">
-          {{ (filterPredicateValueFormGroup.get('defaultValue').value ? 'value.true' : 'value.false') | translate }}
-        </mat-checkbox>
-      </ng-template>
+    <div class="flex flex-col">
+      @switch (valueType) {
+        @case (valueTypeEnum.STRING) {
+          <mat-form-field hideRequiredMarker class="mat-block">
+            <input matInput formControlName="defaultValue" placeholder="{{'filter.value' | translate}}">
+          </mat-form-field>
+        }
+        @case (valueTypeEnum.NUMERIC) {
+          <mat-form-field hideRequiredMarker class="mat-block">
+            <input required type="number" matInput formControlName="defaultValue"
+                   placeholder="{{'filter.value' | translate}}">
+          </mat-form-field>
+        }
+        @case (valueTypeEnum.DATE_TIME) {
+          <tb-datetime formControlName="defaultValue"
+                       dateText="{{ 'filter.date' | translate }}"
+          required [showLabel]="false"></tb-datetime>
+        }
+        @case (valueTypeEnum.BOOLEAN) {
+          <mat-checkbox formControlName="defaultValue">
+            {{ (filterPredicateValueFormGroup.get('defaultValue').value ? 'value.true' : 'value.false') | translate }}
+          </mat-checkbox>
+        }
+      }
     </div>
     <div class="tb-hint">{{ hintText | translate }}</div>
   </div>
@@ -50,9 +52,11 @@
             <mat-option [value]="null">
               {{'filter.no-dynamic-value' | translate}}
             </mat-option>
-            <mat-option *ngFor="let sourceType of dynamicValueSourceTypes" [value]="sourceType">
-              {{dynamicValueSourceTypeTranslations.get(sourceType) | translate}}
-            </mat-option>
+            @for (sourceType of dynamicValueSourceTypes; track sourceType) {
+              <mat-option [value]="sourceType">
+                {{dynamicValueSourceTypeTranslations.get(sourceType) | translate}}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <div class="tb-hint" translate>filter.dynamic-source-type</div>
@@ -63,23 +67,27 @@
         </mat-form-field>
         <div class="tb-hint" translate>filter.source-attribute</div>
       </div>
-      <div *ngIf="!allow && inheritMode"
-           class="flex flex-col"
-           style="padding-top: 6px">
-        <mat-checkbox formControlName="inherit">
-          {{ 'filter.inherit-owner' | translate}}
-        </mat-checkbox>
-        <div class="tb-hint" translate>filter.source-attribute-not-set</div>
-      </div>
+      @if (!allow && inheritMode) {
+        <div
+          class="flex flex-col"
+          style="padding-top: 6px">
+          <mat-checkbox formControlName="inherit">
+            {{ 'filter.inherit-owner' | translate}}
+          </mat-checkbox>
+          <div class="tb-hint" translate>filter.source-attribute-not-set</div>
+        </div>
+      }
     </div>
   </div>
-  <button mat-icon-button *ngIf="!onlyUserDynamicSource"
-          class="mat-elevation-z1 tb-mat-32"
-          color="primary"
-          type="button"
-          matTooltip="{{ (dynamicMode ? 'filter.switch-to-default-value' : 'filter.switch-to-dynamic-value') | translate }}"
-          matTooltipPosition="above"
-          (click)="dynamicMode = !dynamicMode">
-    <tb-icon class="tb-mat-20">{{ dynamicMode ? 'mdi:numeric' : 'mdi:variable' }}</tb-icon>
-  </button>
+  @if (!onlyUserDynamicSource) {
+    <button mat-icon-button
+            class="mat-elevation-z1 tb-mat-32"
+            color="primary"
+            type="button"
+            matTooltip="{{ (dynamicMode ? 'filter.switch-to-default-value' : 'filter.switch-to-dynamic-value') | translate }}"
+            matTooltipPosition="above"
+            (click)="dynamicMode = !dynamicMode">
+      <tb-icon class="tb-mat-20">{{ dynamicMode ? 'mdi:numeric' : 'mdi:variable' }}</tb-icon>
+    </button>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
index 89db536b53..037510fc9e 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
@@ -16,46 +16,50 @@
 
 -->
 <div class="flex flex-1 flex-row items-center justify-start gap-2" [formGroup]="filterPredicateFormGroup">
-  <div class="flex flex-1 flex-col" [ngSwitch]="type">
-    <ng-template [ngSwitchCase]="filterPredicateType.STRING">
-      <tb-string-filter-predicate
-        [allowUserDynamicSource]="allowUserDynamicSource"
-        [onlyUserDynamicSource]="onlyUserDynamicSource"
-        formControlName="predicate">
-      </tb-string-filter-predicate>
-    </ng-template>
-    <ng-template [ngSwitchCase]="filterPredicateType.NUMERIC">
-      <tb-numeric-filter-predicate
-        [allowUserDynamicSource]="allowUserDynamicSource"
-        [onlyUserDynamicSource]="onlyUserDynamicSource"
-        [valueType]="valueType"
-        formControlName="predicate">
-      </tb-numeric-filter-predicate>
-    </ng-template>
-    <ng-template [ngSwitchCase]="filterPredicateType.BOOLEAN">
-      <tb-boolean-filter-predicate
-        [allowUserDynamicSource]="allowUserDynamicSource"
-        [onlyUserDynamicSource]="onlyUserDynamicSource"
-        formControlName="predicate">
-      </tb-boolean-filter-predicate>
-    </ng-template>
-    <ng-template [ngSwitchCase]="filterPredicateType.COMPLEX">
-      <tb-complex-filter-predicate
-        [allowUserDynamicSource]="allowUserDynamicSource"
-        [onlyUserDynamicSource]="onlyUserDynamicSource"
-        [key]="key"
-        [valueType]="valueType"
-        [displayUserParameters]="displayUserParameters"
-        formControlName="predicate">
-      </tb-complex-filter-predicate>
-    </ng-template>
+  <div class="flex flex-1 flex-col">
+    @switch (type) {
+      @case (filterPredicateType.STRING) {
+        <tb-string-filter-predicate
+          [allowUserDynamicSource]="allowUserDynamicSource"
+          [onlyUserDynamicSource]="onlyUserDynamicSource"
+          formControlName="predicate">
+        </tb-string-filter-predicate>
+      }
+      @case (filterPredicateType.NUMERIC) {
+        <tb-numeric-filter-predicate
+          [allowUserDynamicSource]="allowUserDynamicSource"
+          [onlyUserDynamicSource]="onlyUserDynamicSource"
+          [valueType]="valueType"
+          formControlName="predicate">
+        </tb-numeric-filter-predicate>
+      }
+      @case (filterPredicateType.BOOLEAN) {
+        <tb-boolean-filter-predicate
+          [allowUserDynamicSource]="allowUserDynamicSource"
+          [onlyUserDynamicSource]="onlyUserDynamicSource"
+          formControlName="predicate">
+        </tb-boolean-filter-predicate>
+      }
+      @case (filterPredicateType.COMPLEX) {
+        <tb-complex-filter-predicate
+          [allowUserDynamicSource]="allowUserDynamicSource"
+          [onlyUserDynamicSource]="onlyUserDynamicSource"
+          [key]="key"
+          [valueType]="valueType"
+          [displayUserParameters]="displayUserParameters"
+          formControlName="predicate">
+        </tb-complex-filter-predicate>
+      }
+    }
   </div>
-  <tb-filter-user-info *ngIf="type !== filterPredicateType.COMPLEX && displayUserParameters"
-                       style="width: 60px;"
-                       class="flex flex-row items-stretch justify-center"
-                       [valueType]="valueType"
-                       [operation]="filterPredicateFormGroup.get('predicate').value?.operation"
-                       [key]="key"
-                       formControlName="userInfo">
-  </tb-filter-user-info>
+  @if (type !== filterPredicateType.COMPLEX && displayUserParameters) {
+    <tb-filter-user-info
+      style="width: 60px;"
+      class="flex flex-row items-stretch justify-center"
+      [valueType]="valueType"
+      [operation]="filterPredicateFormGroup.get('predicate').value?.operation"
+      [key]="key"
+      formControlName="userInfo">
+    </tb-filter-user-info>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
index 52df01d33d..1190125501 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
@@ -50,11 +50,13 @@
           <input matInput type="number" formControlName="order">
         </mat-form-field>
       </div>
-      <div class="tb-form-row space-between" *ngIf="showUniInput">
-        <div class="min-w-44" translate>filter.unit</div>
-        <tb-unit-input supportsUnitConversion formControlName="unit" class="medium-width flex-xs">
-        </tb-unit-input>
-      </div>
+      @if (showUniInput) {
+        <div class="tb-form-row space-between">
+          <div class="min-w-44" translate>filter.unit</div>
+          <tb-unit-input supportsUnitConversion formControlName="unit" class="medium-width flex-xs">
+          </tb-unit-input>
+        </div>
+      }
     </div>
   </div>
   <div mat-dialog-actions class="flex items-center justify-end">
@@ -65,11 +67,12 @@
             cdkFocusInitial>
       {{ (data.readonly ? 'action.close' : 'action.cancel') | translate }}
     </button>
-    <button mat-raised-button color="primary"
-            *ngIf="!data.readonly"
-            type="submit"
-            [disabled]="(isLoading$ | async) || filterUserInfoFormGroup.invalid || !filterUserInfoFormGroup.dirty">
-      {{ 'action.update' | translate }}
-    </button>
+    @if (!data.readonly) {
+      <button mat-raised-button color="primary"
+              type="submit"
+              [disabled]="(isLoading$ | async) || filterUserInfoFormGroup.invalid || !filterUserInfoFormGroup.dirty">
+        {{ 'action.update' | translate }}
+      </button>
+    }
   </div>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
index 5251d87c4d..59c4c47eea 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
@@ -25,62 +25,68 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
+  @if ((isLoading$ | async) === false) {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <div class="tb-filters-header flex flex-row items-center justify-start">
       <span class="max-w-5% flex-full"></span>
       <div class="flex max-w-95% flex-full flex-row items-center justify-start">
         <div class="tb-header-label flex-1" translate>filter.filter</div>
         <div class="tb-header-label flex min-w-20 max-w-20 flex-1 basis-20 flex-col items-center justify-center" translate
-             style="padding-left: 5px;">filter.editable</div>
+        style="padding-left: 5px;">filter.editable</div>
         <div style="min-width: 132px;"></div>
       </div>
     </div>
     <fieldset [disabled]="isLoading$ | async">
       <mat-divider></mat-divider>
-      <div class="flex flex-1 flex-row items-center justify-start"
-           formArrayName="filters"
-           *ngFor="let filterControl of filtersFormArray().controls; let $index = index">
-        <span class="max-w-5% flex-full">{{$index + 1}}.</span>
-        <div class="mat-elevation-z4 tb-filter flex max-w-95% flex-full flex-row items-center justify-start">
-          <mat-label class="flex-1">{{filterControl.get('filter').value}}</mat-label>
-          <section style="padding-left: 10px;"
-                   class="tb-editable-switch flex min-w-20 max-w-20 flex-1 basis-20 flex-col items-center justify-center">
-            <mat-slide-toggle class="editable-switch"
-                              [formControl]="filterControl.get('editable')">
-            </mat-slide-toggle>
-          </section>
-          <button [disabled]="isLoading$ | async"
-                  mat-icon-button color="primary"
-                  style="min-width: 40px;"
-                  type="button"
-                  (click)="editFilter($index)"
-                  matTooltip="{{ 'filter.edit' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>edit</mat-icon>
-          </button>
-          <button [disabled]="isLoading$ | async"
-                  mat-icon-button color="primary"
-                  style="min-width: 48px;"
-                  type="button"
-                  (click)="duplicateFilter($index)"
-                  matTooltip="{{ 'filter.duplicate-filter-action' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>content_copy</mat-icon>
-          </button>
-          <button [disabled]="isLoading$ | async"
-                  mat-icon-button color="primary"
-                  style="min-width: 40px;"
-                  type="button"
-                  (click)="removeFilter($index)"
-                  matTooltip="{{ 'filter.remove-filter' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>close</mat-icon>
-          </button>
+      @for (filterControl of filtersFormArray().controls; track filterControl) {
+        <div class="flex flex-1 flex-row items-center justify-start"
+             formArrayName="filters"
+             >
+          <span class="max-w-5% flex-full">{{$index + 1}}.</span>
+          <div class="mat-elevation-z4 tb-filter flex max-w-95% flex-full flex-row items-center justify-start">
+            <mat-label class="flex-1">{{filterControl.get('filter').value}}</mat-label>
+            <section style="padding-left: 10px;"
+                     class="tb-editable-switch flex min-w-20 max-w-20 flex-1 basis-20 flex-col items-center justify-center">
+              <mat-slide-toggle class="editable-switch"
+                                [formControl]="filterControl.get('editable')">
+              </mat-slide-toggle>
+            </section>
+            <button [disabled]="isLoading$ | async"
+                    mat-icon-button color="primary"
+                    style="min-width: 40px;"
+                    type="button"
+                    (click)="editFilter($index)"
+                    matTooltip="{{ 'filter.edit' | translate }}"
+                    matTooltipPosition="above">
+              <mat-icon>edit</mat-icon>
+            </button>
+            <button [disabled]="isLoading$ | async"
+                    mat-icon-button color="primary"
+                    style="min-width: 48px;"
+                    type="button"
+                    (click)="duplicateFilter($index)"
+                    matTooltip="{{ 'filter.duplicate-filter-action' | translate }}"
+                    matTooltipPosition="above">
+              <mat-icon>content_copy</mat-icon>
+            </button>
+            <button [disabled]="isLoading$ | async"
+                    mat-icon-button color="primary"
+                    style="min-width: 40px;"
+                    type="button"
+                    (click)="removeFilter($index)"
+                    matTooltip="{{ 'filter.remove-filter' | translate }}"
+                    matTooltipPosition="above">
+              <mat-icon>close</mat-icon>
+            </button>
+          </div>
         </div>
-      </div>
+      }
     </fieldset>
   </div>
   <div mat-dialog-actions>
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
index 6481c90d9c..3d4cdc1b77 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
@@ -16,18 +16,22 @@
 
 -->
 <div class="mat-content mat-padding flex flex-col">
-  <div *ngFor="let filter of filtersInfo | keyvalue; let last = last">
-    <div class="flex flex-row items-center justify-start">
-      <mat-label class="flex-1">{{filter.value.filter}}</mat-label>
-      <button mat-icon-button color="primary"
-              style="min-width: 40px;"
-              type="button"
-              (click)="editFilter(filter.key, filter.value)"
-              matTooltip="{{ 'filter.edit' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>edit</mat-icon>
-      </button>
+  @for (filter of filtersInfo | keyvalue; track filter; let last = $last) {
+    <div>
+      <div class="flex flex-row items-center justify-start">
+        <mat-label class="flex-1">{{filter.value.filter}}</mat-label>
+        <button mat-icon-button color="primary"
+                style="min-width: 40px;"
+                type="button"
+                (click)="editFilter(filter.key, filter.value)"
+                matTooltip="{{ 'filter.edit' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon>edit</mat-icon>
+        </button>
+      </div>
+      @if (!last) {
+        <mat-divider></mat-divider>
+      }
     </div>
-    <mat-divider *ngIf="!last"></mat-divider>
-  </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
index f70b00d863..f669c77b28 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
@@ -15,18 +15,20 @@
     limitations under the License.
 
 -->
-<section class="tb-filters-edit flex flex-row items-center justify-start" *ngIf="hasEditableFilters">
-  <button mat-icon-button
-          cdkOverlayOrigin #filtersEditPanelOrigin="cdkOverlayOrigin"
+@if (hasEditableFilters) {
+  <section class="tb-filters-edit flex flex-row items-center justify-start">
+    <button mat-icon-button
+            cdkOverlayOrigin #filtersEditPanelOrigin="cdkOverlayOrigin"
+            (click)="openEditMode()"
+            matTooltip="{{ 'filter.filters' | translate }}"
+            [matTooltipPosition]="tooltipPosition">
+      <mat-icon>filter_list</mat-icon>
+    </button>
+    <span class="lt-lg:!hidden"
           (click)="openEditMode()"
           matTooltip="{{ 'filter.filters' | translate }}"
           [matTooltipPosition]="tooltipPosition">
-    <mat-icon>filter_list</mat-icon>
-  </button>
-  <span class="lt-lg:!hidden"
-        (click)="openEditMode()"
-        matTooltip="{{ 'filter.filters' | translate }}"
-        [matTooltipPosition]="tooltipPosition">
-    {{ 'filter.filters' | translate }}
-  </span>
-</section>
+      {{ 'filter.filters' | translate }}
+    </span>
+  </section>
+}
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
index d8e4264a8e..74d2e79290 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
@@ -33,13 +33,15 @@
                     'max-w-45%': isConstantKeyType,
                     'max-w-70%': !isConstantKeyType
                  }"
-                 formGroupName="key">
+          formGroupName="key">
           <mat-form-field class="mat-block max-w-40% flex-full">
             <mat-label translate>filter.key-type.key-type</mat-label>
             <mat-select required formControlName="type">
-              <mat-option *ngFor="let type of entityKeyTypes" [value]="type">
-                {{entityKeyTypeTranslations.get(type) | translate}}
-              </mat-option>
+              @for (type of entityKeyTypes; track type) {
+                <mat-option [value]="type">
+                  {{entityKeyTypeTranslations.get(type) | translate}}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
           <mat-form-field class="mat-block max-w-60% flex-full">
@@ -49,20 +51,26 @@
                    (focusin)="onFocus()"
                    [matAutocomplete]="keyName"
                    [matAutocompleteDisabled]="!showAutocomplete">
-            <button *ngIf="keyFilterFormGroup.get('key.key').value && showAutocomplete"
-                    type="button"
-                    matSuffix mat-icon-button aria-label="Clear"
-                    (click)="clear()">
-              <mat-icon class="material-icons">close</mat-icon>
-            </button>
+            @if (keyFilterFormGroup.get('key.key').value && showAutocomplete) {
+              <button
+                type="button"
+                matSuffix mat-icon-button aria-label="Clear"
+                (click)="clear()">
+                <mat-icon class="material-icons">close</mat-icon>
+              </button>
+            }
             <mat-autocomplete autoActiveFirstOption #keyName="matAutocomplete">
-              <mat-option *ngFor="let keyName of filteredKeysName | async" [value]="keyName">
-                <span [innerHTML]="keyName | highlight:searchText"></span>
-              </mat-option>
+              @for (keyName of filteredKeysName | async; track keyName) {
+                <mat-option [value]="keyName">
+                  <span [innerHTML]="keyName | highlight:searchText"></span>
+                </mat-option>
+              }
             </mat-autocomplete>
-            <mat-error *ngIf="keyFilterFormGroup.get('key.key').hasError('required')">
-              {{ 'filter.key-name-required' | translate }}
-            </mat-error>
+            @if (keyFilterFormGroup.get('key.key').hasError('required')) {
+              <mat-error>
+                {{ 'filter.key-name-required' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
         </section>
         <mat-form-field class="mat-block tb-value-type flex-full"
@@ -76,50 +84,60 @@
               <mat-icon class="tb-mat-18" svgIcon="{{ entityKeyValueTypes.get(keyFilterFormGroup.get('valueType').value)?.icon }}"></mat-icon>
               <span>{{ entityKeyValueTypes.get(keyFilterFormGroup.get('valueType').value)?.name | translate }}</span>
             </mat-select-trigger>
-            <mat-option *ngFor="let valueType of entityKeyValueTypesKeys" [value]="valueType">
-              <mat-icon class="tb-mat-18" svgIcon="{{ entityKeyValueTypes.get(entityKeyValueTypeEnum[valueType]).icon }}"></mat-icon>
-              <span>{{ entityKeyValueTypes.get(entityKeyValueTypeEnum[valueType]).name | translate }}</span>
-            </mat-option>
+            @for (valueType of entityKeyValueTypesKeys; track valueType) {
+              <mat-option [value]="valueType">
+                <mat-icon class="tb-mat-18" svgIcon="{{ entityKeyValueTypes.get(entityKeyValueTypeEnum[valueType]).icon }}"></mat-icon>
+                <span>{{ entityKeyValueTypes.get(entityKeyValueTypeEnum[valueType]).name | translate }}</span>
+              </mat-option>
+            }
           </mat-select>
-          <mat-error *ngIf="keyFilterFormGroup.get('valueType').hasError('required')">
-            {{ 'filter.value-type-required' | translate }}
-          </mat-error>
+          @if (keyFilterFormGroup.get('valueType').hasError('required')) {
+            <mat-error>
+              {{ 'filter.value-type-required' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
-        <div class="flex-1" *ngIf="isConstantKeyType">
-          <div class="flex flex-col" [ngSwitch]="keyFilterFormGroup.get('valueType').value">
-            <ng-template [ngSwitchCase]="entityKeyValueTypeEnum.STRING">
-              <mat-form-field class="mat-block">
-                <mat-label translate>filter.value</mat-label>
-                <input matInput required formControlName="value" placeholder="{{'filter.value' | translate}}">
-              </mat-form-field>
-            </ng-template>
-            <ng-template [ngSwitchCase]="entityKeyValueTypeEnum.NUMERIC">
-              <mat-form-field class="mat-block">
-                <mat-label translate>filter.value</mat-label>
-                <input required type="number" matInput formControlName="value">
-              </mat-form-field>
-            </ng-template>
-            <ng-template [ngSwitchCase]="entityKeyValueTypeEnum.DATE_TIME">
-              <tb-datetime formControlName="value"
-                           dateText="{{ 'filter.date' | translate }}"
-                           required></tb-datetime>
-            </ng-template>
-            <ng-template [ngSwitchCase]="entityKeyValueTypeEnum.BOOLEAN">
-              <mat-checkbox formControlName="value" style="margin-top: 20px">
-                {{ (keyFilterFormGroup.get('value').value ? 'value.true' : 'value.false') | translate }}
-              </mat-checkbox>
-            </ng-template>
+        @if (isConstantKeyType) {
+          <div class="flex-1">
+            <div class="flex flex-col">
+              @switch (keyFilterFormGroup.get('valueType').value) {
+                @case (entityKeyValueTypeEnum.STRING) {
+                  <mat-form-field class="mat-block">
+                    <mat-label translate>filter.value</mat-label>
+                    <input matInput required formControlName="value" placeholder="{{'filter.value' | translate}}">
+                  </mat-form-field>
+                }
+                @case (entityKeyValueTypeEnum.NUMERIC) {
+                  <mat-form-field class="mat-block">
+                    <mat-label translate>filter.value</mat-label>
+                    <input required type="number" matInput formControlName="value">
+                  </mat-form-field>
+                }
+                @case (entityKeyValueTypeEnum.DATE_TIME) {
+                  <tb-datetime formControlName="value"
+                               dateText="{{ 'filter.date' | translate }}"
+                  required></tb-datetime>
+                }
+                @case (entityKeyValueTypeEnum.BOOLEAN) {
+                  <mat-checkbox formControlName="value" style="margin-top: 20px">
+                    {{ (keyFilterFormGroup.get('value').value ? 'value.true' : 'value.false') | translate }}
+                  </mat-checkbox>
+                }
+              }
+            </div>
           </div>
-        </div>
+        }
       </section>
-      <tb-filter-predicate-list *ngIf="keyFilterFormGroup.get('valueType').value"
-                                [allowUserDynamicSource]="data.allowUserDynamicSource"
-                                [onlyUserDynamicSource]="isConstantKeyType"
-                                [displayUserParameters]="data.displayUserParameters"
-                                [valueType]="keyFilterFormGroup.get('valueType').value"
-                                [key]="keyFilterFormGroup.get('key.key').value"
-                                formControlName="predicates">
-      </tb-filter-predicate-list>
+      @if (keyFilterFormGroup.get('valueType').value) {
+        <tb-filter-predicate-list
+          [allowUserDynamicSource]="data.allowUserDynamicSource"
+          [onlyUserDynamicSource]="isConstantKeyType"
+          [displayUserParameters]="data.displayUserParameters"
+          [valueType]="keyFilterFormGroup.get('valueType').value"
+          [key]="keyFilterFormGroup.get('key.key').value"
+          formControlName="predicates">
+        </tb-filter-predicate-list>
+      }
     </fieldset>
   </div>
   <div mat-dialog-actions class="flex items-center justify-end">
@@ -130,11 +148,12 @@
             cdkFocusInitial>
       {{ (data.readonly ? 'action.close' : 'action.cancel') | translate }}
     </button>
-    <button mat-raised-button color="primary"
-            type="submit"
-            *ngIf="!data.readonly"
-            [disabled]="(isLoading$ | async) || keyFilterFormGroup.invalid || !keyFilterFormGroup.dirty">
-      {{ (data.isAdd ? 'action.add' : 'action.update') | translate }}
-    </button>
+    @if (!data.readonly) {
+      <button mat-raised-button color="primary"
+              type="submit"
+              [disabled]="(isLoading$ | async) || keyFilterFormGroup.invalid || !keyFilterFormGroup.dirty">
+        {{ (data.isAdd ? 'action.add' : 'action.update') | translate }}
+      </button>
+    }
   </div>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
index f113bfcde9..76394def54 100644
--- a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
@@ -18,9 +18,11 @@
 <div class="flex flex-1 flex-row items-start justify-start gap-2" [formGroup]="numericFilterPredicateFormGroup">
   <mat-form-field hideRequiredMarker class="mat-block max-w-30% flex-full">
     <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
-      <mat-option *ngFor="let operation of numericOperations" [value]="operation">
-        {{numericOperationTranslations.get(numericOperationEnum[operation]) | translate}}
-      </mat-option>
+      @for (operation of numericOperations; track operation) {
+        <mat-option [value]="operation">
+          {{numericOperationTranslations.get(numericOperationEnum[operation]) | translate}}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
diff --git a/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
index ab6737ee97..10b3087e71 100644
--- a/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
@@ -19,9 +19,11 @@
   <div class="flex max-w-30% flex-full flex-row items-center justify-start gap-2">
     <mat-form-field hideRequiredMarker class="mat-block flex-1">
       <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
-        <mat-option *ngFor="let operation of stringOperations" [value]="operation">
-          {{stringOperationTranslations.get(stringOperationEnum[operation]) | translate}}
-        </mat-option>
+        @for (operation of stringOperations; track operation) {
+          <mat-option [value]="operation">
+            {{stringOperationTranslations.get(stringOperationEnum[operation]) | translate}}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
     <mat-checkbox class="flex flex-row items-stretch justify-center" formControlName="ignoreCase" style="min-width: 70px;">
diff --git a/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html b/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html
index 0b04505520..ad9f187f76 100644
--- a/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html
+++ b/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html
@@ -15,12 +15,14 @@
     limitations under the License.
 
 -->
-<div *ngIf="show()" class="flex flex-row items-end justify-end" style="height: 100%; padding: 0 16px;">
-  <button class="lt-md:!hidden" mat-flat-button color="primary" (click)="sendNotification($event)">
-    <mat-icon>send</mat-icon>
-    <span translate>notification.send-notification</span>
-  </button>
-  <button class="mat-elevation-z0 gt-sm:!hidden" mat-mini-fab color="primary" (click)="sendNotification($event)">
-    <mat-icon>send</mat-icon>
-  </button>
-</div>
+@if (show()) {
+  <div class="flex flex-row items-end justify-end" style="height: 100%; padding: 0 16px;">
+    <button class="lt-md:!hidden" mat-flat-button color="primary" (click)="sendNotification($event)">
+      <mat-icon>send</mat-icon>
+      <span translate>notification.send-notification</span>
+    </button>
+    <button class="mat-elevation-z0 gt-sm:!hidden" mat-mini-fab color="primary" (click)="sendNotification($event)">
+      <mat-icon>send</mat-icon>
+    </button>
+  </div>
+}
diff --git a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
index d58b525d5f..f05d9e372c 100644
--- a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
+++ b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
@@ -17,43 +17,52 @@
 -->
 <section class="flex flex-row items-center justify-between" style="margin: 0 10px 4px; min-height: 36px">
   <div style="font-weight: 500; letter-spacing: .25px" translate>notification.notification</div>
-  <button mat-button color="primary"
-          *ngIf="(notifications$ | async)?.length"
-          (click)="markAsAllRead($event)">
-    {{ 'notification.mark-all-as-read' | translate }}
-  </button>
+  @if ((notifications$ | async)?.length) {
+    <button mat-button color="primary"
+            (click)="markAsAllRead($event)">
+      {{ 'notification.mark-all-as-read' | translate }}
+    </button>
+  }
 </section>
 <mat-divider></mat-divider>
-<ng-container *ngIf="notifications$ | async; else loadingNotification">
-  <div *ngIf="(notifications$ | async).length; else emptyNotification" style="overflow: auto">
-    <section style="min-height: 100px; overflow: auto; padding: 6px 0;">
-      <div *ngFor="let notification of (notifications$ | async); let last = last; trackBy: trackById">
-        <tb-notification [notification]="notification"
-                         [onClose]="onClose"
-                         (markAsRead)="markAsRead($event)">
-        </tb-notification>
-        <mat-divider *ngIf="!last" style="margin: 4px"></mat-divider>
-      </div>
+@if (notifications$ | async) {
+  @if ((notifications$ | async).length) {
+    <div style="overflow: auto">
+      <section style="min-height: 100px; overflow: auto; padding: 6px 0;">
+        @for (notification of (notifications$ | async); track notification.id.id; let last = $last) {
+          <div>
+            <tb-notification [notification]="notification"
+                             [onClose]="onClose"
+                             (markAsRead)="markAsRead($event)">
+            </tb-notification>
+            @if (!last) {
+              <mat-divider style="margin: 4px"></mat-divider>
+            }
+          </div>
+        }
+      </section>
+    </div>
+  } @else {
+    <div class="tb-no-notification-svg-color" style="margin: 20px 24%">
+      <svg height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 149 156" width="100%">
+        <use [attr.xlink:href]="'assets/notification-bell.svg#CHECK_ICON'"></use>
+      </svg>
+    </div>
+    <span style="text-align: center; margin-bottom: 12px" translate>notification.no-notifications-yet</span>
+  }
+  @if ((notifications$ | async).length) {
+    <mat-divider></mat-divider>
+  }
+  @if ((notifications$ | async).length) {
+    <section class="flex items-center justify-center">
+      <button class="flex-1" mat-button color="primary" (click)="viewAll($event)">
+        {{ 'notification.view-all' | translate }}
+      </button>
     </section>
-  </div>
-  <mat-divider *ngIf="(notifications$ | async).length"></mat-divider>
-  <section class="flex items-center justify-center" *ngIf="(notifications$ | async).length">
-    <button class="flex-1" mat-button color="primary" (click)="viewAll($event)">
-      {{ 'notification.view-all' | translate }}
-    </button>
-  </section>
-</ng-container>
-<ng-template #emptyNotification>
-  <div class="tb-no-notification-svg-color" style="margin: 20px 24%">
-    <svg height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 149 156" width="100%">
-      <use [attr.xlink:href]="'assets/notification-bell.svg#CHECK_ICON'"></use>
-    </svg>
-  </div>
-  <span style="text-align: center; margin-bottom: 12px" translate>notification.no-notifications-yet</span>
-</ng-template>
-<ng-template #loadingNotification>
+  }
+} @else {
   <div class="tb-no-data-available" style="margin: 20px; gap: 16px;">
     <mat-spinner color="accent" diameter="65" strokeWidth="4"></mat-spinner>
     <div class="tb-no-data-text" translate>notification.loading-notifications</div>
   </div>
-</ng-template>
+}
diff --git a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts
index f9e4969788..7bc4934629 100644
--- a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts
+++ b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts
@@ -46,8 +46,8 @@ export class ShowNotificationPopoverComponent extends PageComponent implements O
 
   private notificationSubscriber = NotificationSubscriber.createNotificationsSubscription(this.notificationWsService, this.zone, 6);
 
-  notifications$: Observable<Notification[]> = this.notificationSubscriber.notifications$.pipe(
-    filter(value => Array.isArray(value)),
+  notifications$: Observable<Notification[]> = (this.notificationSubscriber.notifications$ as Observable<Notification[] | null>).pipe(
+    filter((value): value is Notification[] => Array.isArray(value)),
     shareReplay(1),
     tap(() => setTimeout(() => this.cd.markForCheck()))
   );
@@ -91,8 +91,4 @@ export class ShowNotificationPopoverComponent extends PageComponent implements O
     this.onClose();
     this.router.navigateByUrl(this.router.parseUrl('/notification/inbox')).then(() => {});
   }
-
-  trackById(index: number, item: NotificationRequest): string {
-    return item.id.id;
-  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
index 0fae730f16..39a5c625e3 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
@@ -22,18 +22,26 @@
              step="1" min="1" max="2147483647"
              formControlName="defaultValue"
              placeholder="{{ defaultValuePlaceholder | translate }}">
-      <mat-error *ngIf="alarmDurationPredicateValueFormGroup.get('defaultValue').hasError('required')">
-        {{ defaultValueRequiredError | translate }}
-      </mat-error>
-      <mat-error *ngIf="alarmDurationPredicateValueFormGroup.get('defaultValue').hasError('min')">
-        {{ defaultValueRangeError | translate }}
-      </mat-error>
-      <mat-error *ngIf="alarmDurationPredicateValueFormGroup.get('defaultValue').hasError('max')">
-        {{ defaultValueRangeError | translate }}
-      </mat-error>
-      <mat-error *ngIf="alarmDurationPredicateValueFormGroup.get('defaultValue').hasError('pattern')">
-        {{ defaultValuePatternError | translate }}
-      </mat-error>
+      @if (alarmDurationPredicateValueFormGroup.get('defaultValue').hasError('required')) {
+        <mat-error>
+          {{ defaultValueRequiredError | translate }}
+        </mat-error>
+      }
+      @if (alarmDurationPredicateValueFormGroup.get('defaultValue').hasError('min')) {
+        <mat-error>
+          {{ defaultValueRangeError | translate }}
+        </mat-error>
+      }
+      @if (alarmDurationPredicateValueFormGroup.get('defaultValue').hasError('max')) {
+        <mat-error>
+          {{ defaultValueRangeError | translate }}
+        </mat-error>
+      }
+      @if (alarmDurationPredicateValueFormGroup.get('defaultValue').hasError('pattern')) {
+        <mat-error>
+          {{ defaultValuePatternError | translate }}
+        </mat-error>
+      }
     </mat-form-field>
   </div>
   <div class="flex flex-1 flex-col" [class.!hidden]="!dynamicMode">
@@ -44,9 +52,11 @@
             <mat-option [value]="null">
               {{'filter.no-dynamic-value' | translate}}
             </mat-option>
-            <mat-option *ngFor="let sourceType of dynamicValueSourceTypes" [value]="sourceType">
-              {{dynamicValueSourceTypeTranslations.get(sourceType) | translate}}
-            </mat-option>
+            @for (sourceType of dynamicValueSourceTypes; track sourceType) {
+              <mat-option [value]="sourceType">
+                {{dynamicValueSourceTypeTranslations.get(sourceType) | translate}}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
@@ -55,13 +65,15 @@
           <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
         </mat-form-field>
       </div>
-      <div *ngIf="inheritMode"
-           class="flex flex-col"
-           style="padding-top: 6px">
-        <mat-checkbox formControlName="inherit">
-          {{ 'filter.inherit-owner' | translate}}
-        </mat-checkbox>
-      </div>
+      @if (inheritMode) {
+        <div
+          class="flex flex-col"
+          style="padding-top: 6px">
+          <mat-checkbox formControlName="inherit">
+            {{ 'filter.inherit-owner' | translate}}
+          </mat-checkbox>
+        </div>
+      }
     </div>
   </div>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
index 562c33f0d7..476a9e95db 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
@@ -35,9 +35,11 @@
               <mat-option [value]="null">
                 {{'filter.no-dynamic-value' | translate}}
               </mat-option>
-              <mat-option *ngFor="let sourceType of dynamicValueSourceTypes" [value]="sourceType">
-                {{dynamicValueSourceTypeTranslations.get(sourceType) | translate}}
-              </mat-option>
+              @for (sourceType of dynamicValueSourceTypes; track sourceType) {
+                <mat-option [value]="sourceType">
+                  {{dynamicValueSourceTypeTranslations.get(sourceType) | translate}}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
index 7fb953620b..c039992035 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
@@ -25,8 +25,10 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
       <div class="flex flex-1 flex-col">
@@ -41,35 +43,47 @@
           <mat-form-field class="mat-block" hideRequiredMarker>
             <mat-label translate>device-profile.condition-type</mat-label>
             <mat-select formControlName="type" required>
-              <mat-option *ngFor="let alarmConditionType of alarmConditionTypes" [value]="alarmConditionType">
-                {{ alarmConditionTypeTranslation.get(alarmConditionType) | translate }}
-              </mat-option>
+              @for (alarmConditionType of alarmConditionTypes; track alarmConditionType) {
+                <mat-option [value]="alarmConditionType">
+                  {{ alarmConditionTypeTranslation.get(alarmConditionType) | translate }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="conditionFormGroup.get('spec.type').hasError('required')">
-              {{ 'device-profile.condition-type-required' | translate }}
-            </mat-error>
+            @if (conditionFormGroup.get('spec.type').hasError('required')) {
+              <mat-error>
+                {{ 'device-profile.condition-type-required' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
-          <div class="flex flex-row xs:flex-col gt-xs:gap-4" *ngIf="conditionFormGroup.get('spec.type').value != AlarmConditionType.SIMPLE">
-            <tb-alarm-duration-predicate-value
-              class="flex flex-1 flex-row"
-              formControlName="predicate"
-              [alarmConditionType]="conditionFormGroup.get('spec.type').value"
-            >
-            </tb-alarm-duration-predicate-value>
-            <div class="max-w-23% flex-full" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
-              <mat-form-field class="mat-block" subscriptSizing="dynamic">
-                <mat-select formControlName="unit" required
-                            placeholder="{{ 'device-profile.condition-duration-time-unit' | translate }}">
-                  <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
-                    {{ timeUnitTranslations.get(timeUnit) | translate }}
-                  </mat-option>
-                </mat-select>
-                <mat-error *ngIf="conditionFormGroup.get('spec.unit').hasError('required')">
-                  {{ 'device-profile.condition-duration-time-unit-required' | translate }}
-                </mat-error>
-              </mat-form-field>
+          @if (conditionFormGroup.get('spec.type').value != AlarmConditionType.SIMPLE) {
+            <div class="flex flex-row xs:flex-col gt-xs:gap-4">
+              <tb-alarm-duration-predicate-value
+                class="flex flex-1 flex-row"
+                formControlName="predicate"
+                [alarmConditionType]="conditionFormGroup.get('spec.type').value"
+                >
+              </tb-alarm-duration-predicate-value>
+              @if (conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION) {
+                <div class="max-w-23% flex-full">
+                  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+                    <mat-select formControlName="unit" required
+                                placeholder="{{ 'device-profile.condition-duration-time-unit' | translate }}">
+                      @for (timeUnit of timeUnits; track timeUnit) {
+                        <mat-option [value]="timeUnit">
+                          {{ timeUnitTranslations.get(timeUnit) | translate }}
+                        </mat-option>
+                      }
+                    </mat-select>
+                    @if (conditionFormGroup.get('spec.unit').hasError('required')) {
+                      <mat-error>
+                        {{ 'device-profile.condition-duration-time-unit-required' | translate }}
+                      </mat-error>
+                    }
+                  </mat-form-field>
+                </div>
+              }
             </div>
-          </div>
+          }
         </section>
       </div>
     </fieldset>
@@ -81,11 +95,12 @@
             (click)="cancel()" cdkFocusInitial>
       {{ (readonly ? 'action.close' : 'action.cancel') | translate }}
     </button>
-    <button mat-raised-button color="primary"
-            *ngIf="!readonly"
-            type="submit"
-            [disabled]="(isLoading$ | async) || conditionFormGroup.invalid || !conditionFormGroup.dirty">
-      {{ 'action.save' | translate }}
-    </button>
+    @if (!readonly) {
+      <button mat-raised-button color="primary"
+              type="submit"
+              [disabled]="(isLoading$ | async) || conditionFormGroup.invalid || !conditionFormGroup.dirty">
+        {{ 'action.save' | translate }}
+      </button>
+    }
   </div>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html
index 38d632b8ad..31cfb9aebb 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html
@@ -23,8 +23,10 @@
                     required
                     addFilterPrompt="{{'device-profile.enter-alarm-rule-condition-prompt' | translate}}">
     </tb-filter-text>
-    <span *ngIf="specText" class="tb-alarm-rule-condition-spec" [class.disabled]="disabled" [innerHTML]="specText">
-    </span>
+    @if (specText) {
+      <span class="tb-alarm-rule-condition-spec" [class.disabled]="disabled" [innerHTML]="specText">
+      </span>
+    }
   </div>
   <button mat-icon-button
           [color]="conditionSet() ? 'primary' : 'warn'"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
index 6b6d0182e3..edf62d79ad 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
@@ -20,30 +20,36 @@
   </tb-alarm-rule-condition>
   <tb-alarm-schedule-info formControlName="schedule">
   </tb-alarm-schedule-info>
-  <div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" class="flex flex-row items-center justify-start">
-    <span class="tb-alarm-rule-details title" (click)="openEditDetailsDialog($event)">
-      {{ ('device-profile.alarm-rule-additional-info' | translate) + ': ' }}
-    </span>
-    <span *ngIf="alarmRuleFormGroup.get('alarmDetails').value" class="tb-alarm-rule-details"
-          (click)="openEditDetailsDialog($event)"
-          [innerHTML]="alarmDetailsText"></span>
-    <button mat-icon-button color="primary"
-       type="button"
-       (click)="openEditDetailsDialog($event)"
-       matTooltip="{{ (disabled ? 'action.view' : 'action.edit') | translate }}"
-       matTooltipPosition="above">
-      <mat-icon>{{ disabled ? 'visibility' : (alarmRuleFormGroup.get('alarmDetails').value ? 'edit' : 'add') }}</mat-icon>
-    </button>
-  </div>
-  <div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" class="flex flex-col items-start justify-start gt-sm:flex-row gt-sm:items-center">
-    <span class="tb-alarm-rule-dashboard title">
-      {{ ('device-profile.alarm-rule-mobile-dashboard' | translate) + ': ' }}
-    </span>
-    <tb-dashboard-autocomplete class="tb-alarm-rule-dashboard dashboard"
-      label=""
-      placeholder="{{ 'device-profile.alarm-rule-no-mobile-dashboard' | translate }}"
-      formControlName="dashboardId">
-      <span tb-hint>{{'device-profile.alarm-rule-mobile-dashboard-hint' | translate}}</span>
-    </tb-dashboard-autocomplete>
-  </div>
+  @if (!disabled || alarmRuleFormGroup.get('alarmDetails').value) {
+    <div class="flex flex-row items-center justify-start">
+      <span class="tb-alarm-rule-details title" (click)="openEditDetailsDialog($event)">
+        {{ ('device-profile.alarm-rule-additional-info' | translate) + ': ' }}
+      </span>
+      @if (alarmRuleFormGroup.get('alarmDetails').value) {
+        <span class="tb-alarm-rule-details"
+              (click)="openEditDetailsDialog($event)"
+        [innerHTML]="alarmDetailsText"></span>
+      }
+      <button mat-icon-button color="primary"
+              type="button"
+              (click)="openEditDetailsDialog($event)"
+              matTooltip="{{ (disabled ? 'action.view' : 'action.edit') | translate }}"
+              matTooltipPosition="above">
+        <mat-icon>{{ disabled ? 'visibility' : (alarmRuleFormGroup.get('alarmDetails').value ? 'edit' : 'add') }}</mat-icon>
+      </button>
+    </div>
+  }
+  @if (!disabled || alarmRuleFormGroup.get('dashboardId').value) {
+    <div class="flex flex-col items-start justify-start gt-sm:flex-row gt-sm:items-center">
+      <span class="tb-alarm-rule-dashboard title">
+        {{ ('device-profile.alarm-rule-mobile-dashboard' | translate) + ': ' }}
+      </span>
+      <tb-dashboard-autocomplete class="tb-alarm-rule-dashboard dashboard"
+                                 label=""
+                                 placeholder="{{ 'device-profile.alarm-rule-no-mobile-dashboard' | translate }}"
+                                 formControlName="dashboardId">
+        <span tb-hint>{{'device-profile.alarm-rule-mobile-dashboard-hint' | translate}}</span>
+      </tb-dashboard-autocomplete>
+    </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
index 1e302d9063..141713832f 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
@@ -25,8 +25,10 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content>
     <tb-alarm-schedule
       formControlName="alarmSchedule">
@@ -39,11 +41,12 @@
             (click)="cancel()" cdkFocusInitial>
       {{ (readonly ? 'action.close' : 'action.cancel') | translate }}
     </button>
-    <button mat-raised-button color="primary"
-            *ngIf="!readonly"
-            type="submit"
-            [disabled]="(isLoading$ | async) || alarmScheduleFormGroup.invalid || !alarmScheduleFormGroup.dirty">
-      {{ 'action.save' | translate }}
-    </button>
+    @if (!readonly) {
+      <button mat-raised-button color="primary"
+              type="submit"
+              [disabled]="(isLoading$ | async) || alarmScheduleFormGroup.invalid || !alarmScheduleFormGroup.dirty">
+        {{ 'action.save' | translate }}
+      </button>
+    }
   </div>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
index 1e0675900f..23226cd17a 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
@@ -18,91 +18,106 @@
 <section [formGroup]="alarmScheduleForm" class="flex flex-col">
   <mat-form-field class="mat-block">
     <mat-select formControlName="type" required placeholder="{{ 'device-profile.schedule-type' | translate }}">
-      <mat-option *ngFor="let alarmScheduleType of alarmScheduleTypes" [value]="alarmScheduleType">
-        {{ alarmScheduleTypeTranslate.get(alarmScheduleType) | translate }}
-      </mat-option>
+      @for (alarmScheduleType of alarmScheduleTypes; track alarmScheduleType) {
+        <mat-option [value]="alarmScheduleType">
+          {{ alarmScheduleTypeTranslate.get(alarmScheduleType) | translate }}
+        </mat-option>
+      }
     </mat-select>
-    <mat-error *ngIf="alarmScheduleForm.get('type').hasError('required')">
-      {{ 'device-profile.schedule-type-required' | translate }}
-    </mat-error>
+    @if (alarmScheduleForm.get('type').hasError('required')) {
+      <mat-error>
+        {{ 'device-profile.schedule-type-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
-  <div *ngIf="alarmScheduleForm.get('type').value !== alarmScheduleType.ANY_TIME">
-    <tb-timezone-select
-      userTimezoneByDefault
-      required
-      formControlName="timezone">
-    </tb-timezone-select>
-    <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.SPECIFIC_TIME">
-      <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_specific_schedule_format'></tb-alarm-dynamic-value>
-      <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
-      <div class="flex flex-col gap-2 gt-md:flex-row">
-        <div class="flex flex-row gap-2">
-          <mat-checkbox *ngFor="let day of firstRowDays" [formControl]="weeklyRepeatControl(day)">
-            {{ dayOfWeekTranslationsArray[day] | translate }}
-          </mat-checkbox>
-        </div>
-        <div class="flex flex-row gap-2">
-          <mat-checkbox *ngFor="let day of secondRowDays" [formControl]="weeklyRepeatControl(day)">
-            {{ dayOfWeekTranslationsArray[day] | translate }}
-          </mat-checkbox>
-        </div>
-      </div>
+  @if (alarmScheduleForm.get('type').value !== alarmScheduleType.ANY_TIME) {
+    <div>
+      <tb-timezone-select
+        userTimezoneByDefault
+        required
+        formControlName="timezone">
+      </tb-timezone-select>
+      @if (alarmScheduleForm.get('type').value === alarmScheduleType.SPECIFIC_TIME) {
+        <section>
+          <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_specific_schedule_format'></tb-alarm-dynamic-value>
+          <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
+          <div class="flex flex-col gap-2 gt-md:flex-row">
+            <div class="flex flex-row gap-2">
+              @for (day of firstRowDays; track day) {
+                <mat-checkbox [formControl]="weeklyRepeatControl(day)">
+                  {{ dayOfWeekTranslationsArray[day] | translate }}
+                </mat-checkbox>
+              }
+            </div>
+            <div class="flex flex-row gap-2">
+              @for (day of secondRowDays; track day) {
+                <mat-checkbox [formControl]="weeklyRepeatControl(day)">
+                  {{ dayOfWeekTranslationsArray[day] | translate }}
+                </mat-checkbox>
+              }
+            </div>
+          </div>
       <tb-error style="display: block;" [error]="alarmScheduleForm.get('daysOfWeek').hasError('dayOfWeeks')
                   ? ('device-profile.schedule-days-of-week-required' | translate) : ''"></tb-error>
-      <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-time</div>
-      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
-        <div class="flex flex-row gap-2 gt-md:flex-1">
-          <mat-form-field class="flex-1 sm:min-w-37.5 sm:max-w-37.5 sm:basis-37.5 md:min-w-37.5 md:max-w-37.5 md:basis-37.5">
-            <mat-label translate>device-profile.schedule-time-from</mat-label>
-            <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
-            <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
-            <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
-          </mat-form-field>
-          <mat-form-field class="flex-1 sm:min-w-37.5 sm:max-w-37.5 sm:basis-37.5 md:min-w-37.5 md:max-w-37.5 md:basis-37.5">
-            <mat-label translate>device-profile.schedule-time-to</mat-label>
-            <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
-            <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
-            <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
-          </mat-form-field>
-        </div>
-        <div class="flex flex-1 items-center justify-center" style="margin: auto">
-          <div style="text-align: center"
-               [innerHTML]="getSchedulerRangeText(alarmScheduleForm)">
-          </div>
-        </div>
-      </div>
-    </section>
-    <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.CUSTOM">
-      <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_custom_schedule_format'></tb-alarm-dynamic-value>
-      <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
-      <div *ngFor="let day of allDays" class="flex flex-col gap-4" formArrayName="items">
-        <div class="flex flex-row items-center justify-start gap-2 xs:flex-col xs:items-start xs:justify-center" [formGroupName]="''+day">
-          <mat-checkbox formControlName="enabled" class="max-w-17% flex-full" (change)="changeCustomScheduler($event, day)">
-            {{ dayOfWeekTranslationsArray[day] | translate }}
-          </mat-checkbox>
-          <div class="flex flex-1 flex-row gap-2">
-            <mat-form-field class="xs:flex-1 sm:min-w-25 sm:max-w-25 sm:flex-1 sm:basis-25 md:min-w-25 md:max-w-25 md:flex-1 md:basis-25">
-              <mat-label translate>device-profile.schedule-time-from</mat-label>
-              <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
-              <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
-              <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
-            </mat-form-field>
-            <mat-form-field class="xs:flex-1 sm:min-w-25 sm:max-w-25 sm:flex-1 sm:basis-25 md:min-w-25 md:max-w-25 md:flex-1 md:basis-25">
-              <mat-label translate>device-profile.schedule-time-to</mat-label>
-              <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
-              <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
-              <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
-            </mat-form-field>
+          <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-time</div>
+          <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+            <div class="flex flex-row gap-2 gt-md:flex-1">
+              <mat-form-field class="flex-1 sm:min-w-37.5 sm:max-w-37.5 sm:basis-37.5 md:min-w-37.5 md:max-w-37.5 md:basis-37.5">
+                <mat-label translate>device-profile.schedule-time-from</mat-label>
+                <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
+                <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
+                <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
+              </mat-form-field>
+              <mat-form-field class="flex-1 sm:min-w-37.5 sm:max-w-37.5 sm:basis-37.5 md:min-w-37.5 md:max-w-37.5 md:basis-37.5">
+                <mat-label translate>device-profile.schedule-time-to</mat-label>
+                <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
+                <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
+                <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
+              </mat-form-field>
+            </div>
+            <div class="flex flex-1 items-center justify-center" style="margin: auto">
+              <div style="text-align: center"
+                   [innerHTML]="getSchedulerRangeText(alarmScheduleForm)">
+              </div>
+            </div>
           </div>
-          <div class="flex flex-1 items-center justify-center"
-               style="text-align: center"
-               [innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(day))">
-          </div>
-        </div>
-      </div>
-
+        </section>
+      }
+      @if (alarmScheduleForm.get('type').value === alarmScheduleType.CUSTOM) {
+        <section>
+          <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_custom_schedule_format'></tb-alarm-dynamic-value>
+          <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
+          @for (day of allDays; track day) {
+            <div class="flex flex-col gap-4" formArrayName="items">
+              <div class="flex flex-row items-center justify-start gap-2 xs:flex-col xs:items-start xs:justify-center" [formGroupName]="''+day">
+                <mat-checkbox formControlName="enabled" class="max-w-17% flex-full" (change)="changeCustomScheduler($event, day)">
+                  {{ dayOfWeekTranslationsArray[day] | translate }}
+                </mat-checkbox>
+                <div class="flex flex-1 flex-row gap-2">
+                  <mat-form-field class="xs:flex-1 sm:min-w-25 sm:max-w-25 sm:flex-1 sm:basis-25 md:min-w-25 md:max-w-25 md:flex-1 md:basis-25">
+                    <mat-label translate>device-profile.schedule-time-from</mat-label>
+                    <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
+                    <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
+                    <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
+                  </mat-form-field>
+                  <mat-form-field class="xs:flex-1 sm:min-w-25 sm:max-w-25 sm:flex-1 sm:basis-25 md:min-w-25 md:max-w-25 md:flex-1 md:basis-25">
+                    <mat-label translate>device-profile.schedule-time-to</mat-label>
+                    <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
+                    <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
+                    <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
+                  </mat-form-field>
+                </div>
+                <div class="flex flex-1 items-center justify-center"
+                     style="text-align: center"
+                     [innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(day))">
+                </div>
+              </div>
+            </div>
+          }
       <tb-error style="display: block;" [error]="alarmScheduleForm.get('items').hasError('dayOfWeeks')
                   ? ('device-profile.schedule-days-of-week-required' | translate) : ''"></tb-error>
-    </section>
-  </div>
+        </section>
+      }
+    </div>
+  }
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts
index 90caf04b70..e8224cabf3 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts
@@ -63,7 +63,7 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
 
   alarmScheduleForm: UntypedFormGroup;
 
-  alarmScheduleTypes = Object.keys(AlarmScheduleType);
+  alarmScheduleTypes = Object.values(AlarmScheduleType);
   alarmScheduleType = AlarmScheduleType;
   alarmScheduleTypeTranslate = AlarmScheduleTypeTranslationMap;
   dayOfWeekTranslationsArray = dayOfWeekTranslations;
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
index d0c5d25273..e98fe00d2c 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
@@ -16,49 +16,60 @@
 
 -->
 <div class="flex flex-1 flex-col">
-  <div *ngFor="let createAlarmRuleControl of createAlarmRulesFormArray().controls; let $index = index;
-               last as isLast;" class="flex flex-row items-center justify-start gap-2"
-               style="padding-bottom: 8px;" [formGroup]="createAlarmRuleControl">
-    <div class="create-alarm-rule flex flex-1 flex-row items-stretch justify-start gap-2">
-      <mat-form-field class="severity mat-block" floatLabel="always" hideRequiredMarker>
-        <mat-label translate>alarm.severity</mat-label>
-        <mat-select formControlName="severity"
-                    required
-                    placeholder="{{ 'device-profile.select-alarm-severity' | translate }}">
-          <mat-option *ngFor="let alarmSeverity of alarmSeverities" [value]="alarmSeverity"
-                       [disabled]="isDisabledSeverity(alarmSeverityEnum[alarmSeverity], $index)">
-            {{ alarmSeverityTranslationMap.get(alarmSeverityEnum[alarmSeverity]) | translate }}
-          </mat-option>
-        </mat-select>
-        <mat-error *ngIf="createAlarmRuleControl.get('severity').hasError('required')">
-          {{ 'device-profile.alarm-severity-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <mat-divider vertical></mat-divider>
-      <tb-alarm-rule formControlName="alarmRule" [deviceProfileId]="deviceProfileId" required class="flex-1">
-      </tb-alarm-rule>
+  @for (createAlarmRuleControl of createAlarmRulesFormArray().controls; track createAlarmRuleControl; let isLast = $last) {
+    <div class="flex flex-row items-center justify-start gap-2"
+         style="padding-bottom: 8px;" [formGroup]="createAlarmRuleControl">
+      <div class="create-alarm-rule flex flex-1 flex-row items-stretch justify-start gap-2">
+        <mat-form-field class="severity mat-block" floatLabel="always" hideRequiredMarker>
+          <mat-label translate>alarm.severity</mat-label>
+          <mat-select formControlName="severity"
+                      required
+                      placeholder="{{ 'device-profile.select-alarm-severity' | translate }}">
+            @for (alarmSeverity of alarmSeverities; track alarmSeverity) {
+              <mat-option [value]="alarmSeverity"
+                          [disabled]="isDisabledSeverity(alarmSeverityEnum[alarmSeverity], $index)">
+                {{ alarmSeverityTranslationMap.get(alarmSeverityEnum[alarmSeverity]) | translate }}
+              </mat-option>
+            }
+          </mat-select>
+          @if (createAlarmRuleControl.get('severity').hasError('required')) {
+            <mat-error>
+              {{ 'device-profile.alarm-severity-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+        <mat-divider vertical></mat-divider>
+        <tb-alarm-rule formControlName="alarmRule" [deviceProfileId]="deviceProfileId" required class="flex-1">
+        </tb-alarm-rule>
+      </div>
+      @if (!disabled) {
+        <button
+          mat-icon-button color="primary" style="min-width: 40px;"
+          type="button"
+          (click)="removeCreateAlarmRule($index)"
+          matTooltip="{{ 'action.remove' | translate }}"
+          matTooltipPosition="above">
+          <mat-icon>remove_circle_outline</mat-icon>
+        </button>
+      }
     </div>
-    <button *ngIf="!disabled"
-            mat-icon-button color="primary" style="min-width: 40px;"
-            type="button"
-            (click)="removeCreateAlarmRule($index)"
-            matTooltip="{{ 'action.remove' | translate }}"
-            matTooltipPosition="above">
-      <mat-icon>remove_circle_outline</mat-icon>
-    </button>
-  </div>
-  <div *ngIf="!createAlarmRulesFormArray().controls.length && !disabled">
+  }
+  @if (!createAlarmRulesFormArray().controls.length && !disabled) {
+    <div>
       <span translate class="flex items-center justify-center" style="margin: 16px 0"
-            class="tb-prompt required">device-profile.add-create-alarm-rule-prompt</span>
-  </div>
-  <div *ngIf="!disabled">
-    <button mat-stroked-button color="primary"
-            type="button"
-            (click)="addCreateAlarmRule()"
-            matTooltip="{{ 'device-profile.add-create-alarm-rule' | translate }}"
-            matTooltipPosition="above">
-      <mat-icon class="button-icon">add_circle_outline</mat-icon>
-      {{ 'device-profile.add-create-alarm-rule' | translate }}
-    </button>
-  </div>
+      class="tb-prompt required">device-profile.add-create-alarm-rule-prompt</span>
+    </div>
+  }
+  @if (!disabled) {
+    <div>
+      <button mat-stroked-button color="primary"
+              type="button"
+              (click)="addCreateAlarmRule()"
+              matTooltip="{{ 'device-profile.add-create-alarm-rule' | translate }}"
+              matTooltipPosition="above">
+        <mat-icon class="button-icon">add_circle_outline</mat-icon>
+        {{ 'device-profile.add-create-alarm-rule' | translate }}
+      </button>
+    </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
index 3a9577df18..739f9e0716 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
@@ -24,13 +24,15 @@
         </div>
       </mat-panel-title>
       <span class="flex-1"></span>
-      <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
-              type="button"
-              (click)="removeAlarm.emit()"
-              matTooltip="{{ 'action.remove' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>delete</mat-icon>
-      </button>
+      @if (!disabled) {
+        <button mat-icon-button style="min-width: 40px;"
+                type="button"
+                (click)="removeAlarm.emit()"
+                matTooltip="{{ 'action.remove' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon>delete</mat-icon>
+        </button>
+      }
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
@@ -39,15 +41,21 @@
       <mat-form-field class="flex-1" floatLabel="always">
         <mat-label>{{'device-profile.alarm-type' | translate}}</mat-label>
         <input required matInput formControlName="alarmType" placeholder="Enter alarm type">
-        <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')">
-          {{ 'device-profile.alarm-type-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('unique')">
-          {{ 'device-profile.alarm-type-unique' | translate }}
-        </mat-error>
-        <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('maxlength')">
-          {{ 'device-profile.alarm-type-max-length' | translate }}
-        </mat-error>
+        @if (alarmFormGroup.get('alarmType').hasError('required')) {
+          <mat-error>
+            {{ 'device-profile.alarm-type-required' | translate }}
+          </mat-error>
+        }
+        @if (alarmFormGroup.get('alarmType').hasError('unique')) {
+          <mat-error>
+            {{ 'device-profile.alarm-type-unique' | translate }}
+          </mat-error>
+        }
+        @if (alarmFormGroup.get('alarmType').hasError('maxlength')) {
+          <mat-error>
+            {{ 'device-profile.alarm-type-max-length' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
     </div>
     <mat-expansion-panel class="advanced-settings" [expanded]="false">
@@ -62,25 +70,28 @@
         <mat-checkbox formControlName="propagate" style="display: block;">
           {{ 'device-profile.propagate-alarm' | translate }}
         </mat-checkbox>
-        <section *ngIf="alarmFormGroup.get('propagate').value === true">
-          <mat-form-field floatLabel="always" class="mat-block">
-            <mat-label translate>device-profile.alarm-rule-relation-types-list</mat-label>
-            <mat-chip-grid #relationTypesChipList [disabled]="disabled">
-              <mat-chip-row
-                *ngFor="let key of alarmFormGroup.get('propagateRelationTypes').value;"
-                (removed)="removeRelationType(key)">
-                {{key}}
-                <mat-icon matChipRemove>close</mat-icon>
-              </mat-chip-row>
-              <input matInput type="text" placeholder="{{'device-profile.alarm-rule-relation-types-list' | translate}}"
-                     [matChipInputFor]="relationTypesChipList"
-                     [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                     matChipInputAddOnBlur
-                     (matChipInputTokenEnd)="addRelationType($event)">
-            </mat-chip-grid>
-            <mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
-          </mat-form-field>
-        </section>
+        @if (alarmFormGroup.get('propagate').value === true) {
+          <section>
+            <mat-form-field floatLabel="always" class="mat-block">
+              <mat-label translate>device-profile.alarm-rule-relation-types-list</mat-label>
+              <mat-chip-grid #relationTypesChipList [disabled]="disabled">
+                @for (key of alarmFormGroup.get('propagateRelationTypes').value; track key) {
+                  <mat-chip-row
+                    (removed)="removeRelationType(key)">
+                    {{key}}
+                    <mat-icon matChipRemove>close</mat-icon>
+                  </mat-chip-row>
+                }
+                <input matInput type="text" placeholder="{{'device-profile.alarm-rule-relation-types-list' | translate}}"
+                       [matChipInputFor]="relationTypesChipList"
+                       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                       matChipInputAddOnBlur
+                       (matChipInputTokenEnd)="addRelationType($event)">
+              </mat-chip-grid>
+              <mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
+            </mat-form-field>
+          </section>
+        }
         <mat-checkbox formControlName="propagateToOwner" style="display: block;">
           {{ 'device-profile.propagate-alarm-to-owner' | translate }}
         </mat-checkbox>
@@ -103,29 +114,35 @@
           <tb-alarm-rule formControlName="clearRule" class="flex-1" [deviceProfileId]="deviceProfileId">
           </tb-alarm-rule>
         </div>
-        <button *ngIf="!disabled"
-                mat-icon-button color="primary" style="min-width: 40px;"
-                type="button"
-                (click)="removeClearAlarmRule()"
-                matTooltip="{{ 'action.remove' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>remove_circle_outline</mat-icon>
-        </button>
-      </div>
-      <div *ngIf="disabled && !alarmFormGroup.get('clearRule').value">
-        <span translate style="margin: 16px 0"
-              class="tb-prompt flex items-center justify-center">device-profile.no-clear-alarm-rule</span>
-      </div>
-      <div *ngIf="!disabled" [class.!hidden]="alarmFormGroup.get('clearRule').value">
-        <button mat-stroked-button color="primary"
-                type="button"
-                (click)="addClearAlarmRule()"
-                matTooltip="{{ 'device-profile.add-clear-alarm-rule' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon class="button-icon">add_circle_outline</mat-icon>
-          {{ 'device-profile.add-clear-alarm-rule' | translate }}
-        </button>
+        @if (!disabled) {
+          <button
+            mat-icon-button color="primary" style="min-width: 40px;"
+            type="button"
+            (click)="removeClearAlarmRule()"
+            matTooltip="{{ 'action.remove' | translate }}"
+            matTooltipPosition="above">
+            <mat-icon>remove_circle_outline</mat-icon>
+          </button>
+        }
       </div>
+      @if (disabled && !alarmFormGroup.get('clearRule').value) {
+        <div>
+          <span translate style="margin: 16px 0"
+          class="tb-prompt flex items-center justify-center">device-profile.no-clear-alarm-rule</span>
+        </div>
+      }
+      @if (!disabled) {
+        <div [class.!hidden]="alarmFormGroup.get('clearRule').value">
+          <button mat-stroked-button color="primary"
+                  type="button"
+                  (click)="addClearAlarmRule()"
+                  matTooltip="{{ 'device-profile.add-clear-alarm-rule' | translate }}"
+                  matTooltipPosition="above">
+            <mat-icon class="button-icon">add_circle_outline</mat-icon>
+            {{ 'device-profile.add-clear-alarm-rule' | translate }}
+          </button>
+        </div>
+      }
     </div>
   </ng-template>
 </mat-expansion-panel>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
index 648217c6f5..71a8ad389e 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
@@ -17,25 +17,30 @@
 -->
 <div class="flex flex-col">
   <div class="tb-device-profile-alarms">
-    <div *ngFor="let alarmControl of alarmsFormArray.controls; trackBy: trackByAlarm;
-                 let $index = index; last as isLast;"
-         class="flex flex-col" [class.pb-2]="!isLast">
-      <tb-device-profile-alarm [formControl]="alarmControl"
-                               [expanded]="$index === 0"
-                               [deviceProfileId]="deviceProfileId"
-                               (removeAlarm)="removeAlarm($index)">
-      </tb-device-profile-alarm>
-    </div>
+    @for (alarmControl of alarmsFormArray.controls; track trackByAlarm($index, alarmControl); let isLast = $last) {
+      <div
+        class="flex flex-col" [class.pb-2]="!isLast">
+        <tb-device-profile-alarm [formControl]="alarmControl"
+                                 [expanded]="$index === 0"
+                                 [deviceProfileId]="deviceProfileId"
+                                 (removeAlarm)="removeAlarm($index)">
+        </tb-device-profile-alarm>
+      </div>
+    }
   </div>
-  <div *ngIf="!alarmsFormArray.controls.length">
+  @if (!alarmsFormArray.controls.length) {
+    <div>
       <span translate
-            class="tb-prompt flex items-center justify-center">device-profile.no-alarm-rules</span>
-  </div>
-  <div *ngIf="!disabled" style="padding-top: 16px;">
-    <button mat-raised-button color="primary"
-            type="button"
-            (click)="addAlarm()">
-      <span translate>device-profile.add-alarm-rule</span>
-    </button>
-  </div>
+      class="tb-prompt flex items-center justify-center">device-profile.no-alarm-rules</span>
+    </div>
+  }
+  @if (!disabled) {
+    <div style="padding-top: 16px;">
+      <button mat-raised-button color="primary"
+              type="button"
+              (click)="addAlarm()">
+        <span translate>device-profile.add-alarm-rule</span>
+      </button>
+    </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
index 7a94f51423..30caafd1aa 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
@@ -25,14 +25,16 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
       <div class="flex flex-1 flex-col">
         <mat-form-field class="mat-block">
           <textarea matInput formControlName="alarmDetails" rows="5"
-            placeholder="{{ 'device-profile.alarm-rule-additional-info-placeholder' | translate }}"></textarea>
+          placeholder="{{ 'device-profile.alarm-rule-additional-info-placeholder' | translate }}"></textarea>
           <mat-hint [innerHTML]="'device-profile.alarm-rule-additional-info-hint' | translate | safe: 'html'"></mat-hint>
         </mat-form-field>
       </div>
@@ -45,10 +47,12 @@
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
-    <button *ngIf="!data.readonly" mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || editDetailsFormGroup.invalid || !editDetailsFormGroup.dirty">
-      {{ 'action.save' | translate }}
-    </button>
+    @if (!data.readonly) {
+      <button mat-raised-button color="primary"
+              type="submit"
+              [disabled]="(isLoading$ | async) || editDetailsFormGroup.invalid || !editDetailsFormGroup.dirty">
+        {{ 'action.save' | translate }}
+      </button>
+    }
   </div>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
index 9a349c3ef4..c699aea0a1 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
@@ -26,56 +26,73 @@
          (keypress)="assetProfileEnter($event)"
          [matAutocomplete]="assetProfileAutocomplete"
          [class.!hidden]="showDetailsPageLink && useAssetProfileLink && disabled && selectAssetProfileFormGroup.get('assetProfile').value">
-  <a *ngIf="showDetailsPageLink && useAssetProfileLink && selectAssetProfileFormGroup.get('assetProfile').value && disabled"
-     aria-label="Open asset profile" [routerLink]=assetProfileURL>
-    {{ displayAssetProfileFn(selectAssetProfileFormGroup.get('assetProfile').value) }}
-  </a>
-  <button *ngIf="selectAssetProfileFormGroup.get('assetProfile').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
-  <button *ngIf="selectAssetProfileFormGroup.get('assetProfile').value?.id && !disabled && editProfileEnabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Edit"
-          matTooltip="{{ 'asset-profile.edit' | translate }}"
-          matTooltipPosition="above"
-          (click)="editAssetProfile($event)">
-    <mat-icon class="material-icons">edit</mat-icon>
-  </button>
-  <button mat-button color="primary" matSuffix
-          (click)="createAssetProfile($event, '')"
-          *ngIf="!selectAssetProfileFormGroup.get('assetProfile').value && !disabled && addNewProfile">
-    <span style="white-space: nowrap">{{ 'notification.create-new' | translate }}</span>
-  </button>
+  @if (showDetailsPageLink && useAssetProfileLink && selectAssetProfileFormGroup.get('assetProfile').value && disabled) {
+    <a
+      aria-label="Open asset profile" [routerLink]=assetProfileURL>
+      {{ displayAssetProfileFn(selectAssetProfileFormGroup.get('assetProfile').value) }}
+    </a>
+  }
+  @if (selectAssetProfileFormGroup.get('assetProfile').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
+  @if (selectAssetProfileFormGroup.get('assetProfile').value?.id && !disabled && editProfileEnabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Edit"
+      matTooltip="{{ 'asset-profile.edit' | translate }}"
+      matTooltipPosition="above"
+      (click)="editAssetProfile($event)">
+      <mat-icon class="material-icons">edit</mat-icon>
+    </button>
+  }
+  @if (!selectAssetProfileFormGroup.get('assetProfile').value && !disabled && addNewProfile) {
+    <button mat-button color="primary" matSuffix
+            (click)="createAssetProfile($event, '')"
+            >
+      <span style="white-space: nowrap">{{ 'notification.create-new' | translate }}</span>
+    </button>
+  }
   <mat-autocomplete
     class="tb-autocomplete"
     (closed)="onPanelClosed()"
     #assetProfileAutocomplete="matAutocomplete"
     [displayWith]="displayAssetProfileFn">
-    <mat-option *ngFor="let assetProfile of filteredAssetProfiles | async" [value]="assetProfile">
-      <span [innerHTML]="assetProfile.name | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredAssetProfiles | async)?.length" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText) || !addNewProfile; else searchNotEmpty">
-          <span translate>asset-profile.no-asset-profiles-found</span>
-        </div>
-        <ng-template #searchNotEmpty>
-          <span>
+    @for (assetProfile of filteredAssetProfiles | async; track assetProfile) {
+      <mat-option [value]="assetProfile">
+        <span [innerHTML]="assetProfile.name | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if (!(filteredAssetProfiles | async)?.length) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText) || !addNewProfile) {
+            <div>
+              <span translate>asset-profile.no-asset-profiles-found</span>
+            </div>
+          } @else {
+            <span>
               {{ translate.get('asset-profile.no-asset-profiles-matching',
-            {entity: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
-          </span>
-          <span>
-            <a translate (click)="createAssetProfile($event, searchText)">asset-profile.create-new-asset-profile</a>
-          </span>
-        </ng-template>
-      </div>
-    </mat-option>
+              {entity: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
+            </span>
+            <span>
+              <a translate (click)="createAssetProfile($event, searchText)">asset-profile.create-new-asset-profile</a>
+            </span>
+          }
+        </div>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="selectAssetProfileFormGroup.get('assetProfile').hasError('required')">
-    {{ 'asset-profile.asset-profile-required' | translate }}
-  </mat-error>
-  <mat-hint *ngIf="hint && !disabled">{{ hint | translate }}</mat-hint>
+  @if (selectAssetProfileFormGroup.get('assetProfile').hasError('required')) {
+    <mat-error>
+      {{ 'asset-profile.asset-profile-required' | translate }}
+    </mat-error>
+  }
+  @if (hint && !disabled) {
+    <mat-hint>{{ hint | translate }}</mat-hint>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
index 724bc80e61..d47b4fa65c 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <tb-asset-profile
       #assetProfileComponent
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
index 183f4319d4..1f1d13b0be 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
@@ -21,7 +21,9 @@
                 class="mat-block"
                 [appearance]="inlineField ? 'outline' : appearance"
                 [subscriptSizing]="inlineField ? 'dynamic' : subscriptSizing">
-  <mat-label *ngIf="!inlineField">{{ 'device-profile.device-profile' | translate }}</mat-label>
+  @if (!inlineField) {
+    <mat-label>{{ 'device-profile.device-profile' | translate }}</mat-label>
+  }
   <input matInput type="text"
          #deviceProfileInput
          formControlName="deviceProfile"
@@ -31,56 +33,73 @@
          (keypress)="deviceProfileEnter($event)"
          [matAutocomplete]="deviceProfileAutocomplete"
          [class.!hidden]="showDetailsPageLink && useDeviceProfileLink && disabled && selectDeviceProfileFormGroup.get('deviceProfile').value">
-  <a *ngIf="showDetailsPageLink && useDeviceProfileLink && selectDeviceProfileFormGroup.get('deviceProfile').value && disabled"
-     aria-label="Open device profile" [routerLink]=deviceProfileURL>
-    {{ displayDeviceProfileFn(selectDeviceProfileFormGroup.get('deviceProfile').value) }}
-  </a>
-  <button *ngIf="selectDeviceProfileFormGroup.get('deviceProfile').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
-  <button *ngIf="selectDeviceProfileFormGroup.get('deviceProfile').value?.id && !disabled && editProfileEnabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Edit"
-          matTooltip="{{ 'device-profile.edit' | translate }}"
-          matTooltipPosition="above"
-          (click)="editDeviceProfile($event)">
-    <mat-icon class="material-icons">edit</mat-icon>
-  </button>
-  <button mat-button color="primary" matSuffix
-          (click)="createDeviceProfile($event, '')"
-          *ngIf="!selectDeviceProfileFormGroup.get('deviceProfile').value && !disabled && addNewProfile">
-    <span style="white-space: nowrap">{{ 'notification.create-new' | translate }}</span>
-  </button>
+  @if (showDetailsPageLink && useDeviceProfileLink && selectDeviceProfileFormGroup.get('deviceProfile').value && disabled) {
+    <a
+      aria-label="Open device profile" [routerLink]=deviceProfileURL>
+      {{ displayDeviceProfileFn(selectDeviceProfileFormGroup.get('deviceProfile').value) }}
+    </a>
+  }
+  @if (selectDeviceProfileFormGroup.get('deviceProfile').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
+  @if (selectDeviceProfileFormGroup.get('deviceProfile').value?.id && !disabled && editProfileEnabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Edit"
+      matTooltip="{{ 'device-profile.edit' | translate }}"
+      matTooltipPosition="above"
+      (click)="editDeviceProfile($event)">
+      <mat-icon class="material-icons">edit</mat-icon>
+    </button>
+  }
+  @if (!selectDeviceProfileFormGroup.get('deviceProfile').value && !disabled && addNewProfile) {
+    <button mat-button color="primary" matSuffix
+            (click)="createDeviceProfile($event, '')"
+            >
+      <span style="white-space: nowrap">{{ 'notification.create-new' | translate }}</span>
+    </button>
+  }
   <mat-autocomplete
     class="tb-autocomplete"
     (closed)="onPanelClosed()"
     #deviceProfileAutocomplete="matAutocomplete"
     [displayWith]="displayDeviceProfileFn">
-    <mat-option *ngFor="let deviceProfile of filteredDeviceProfiles | async" [value]="deviceProfile">
-      <span [innerHTML]="deviceProfile.name | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredDeviceProfiles | async)?.length" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText) || !addNewProfile; else searchNotEmpty">
-          <span translate>device-profile.no-device-profiles-found</span>
-        </div>
-        <ng-template #searchNotEmpty>
-          <span>
+    @for (deviceProfile of filteredDeviceProfiles | async; track deviceProfile) {
+      <mat-option [value]="deviceProfile">
+        <span [innerHTML]="deviceProfile.name | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if (!(filteredDeviceProfiles | async)?.length) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText) || !addNewProfile) {
+            <div>
+              <span translate>device-profile.no-device-profiles-found</span>
+            </div>
+          } @else {
+            <span>
               {{ translate.get('device-profile.no-device-profiles-matching',
-            {entity: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
-          </span>
-          <span>
-            <a translate (click)="createDeviceProfile($event, searchText)">device-profile.create-new-device-profile</a>
-          </span>
-        </ng-template>
-      </div>
-    </mat-option>
+              {entity: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
+            </span>
+            <span>
+              <a translate (click)="createDeviceProfile($event, searchText)">device-profile.create-new-device-profile</a>
+            </span>
+          }
+        </div>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="selectDeviceProfileFormGroup.get('deviceProfile').hasError('required')">
-    {{ 'device-profile.device-profile-required' | translate }}
-  </mat-error>
-  <mat-hint *ngIf="hint && !disabled">{{ hint | translate }}</mat-hint>
+  @if (selectDeviceProfileFormGroup.get('deviceProfile').hasError('required')) {
+    <mat-error>
+      {{ 'device-profile.device-profile-required' | translate }}
+    </mat-error>
+  }
+  @if (hint && !disabled) {
+    <mat-hint>{{ hint | translate }}</mat-hint>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
index 246912b170..dcb15e48b8 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <tb-device-profile
       #deviceProfileComponent
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.html b/ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.html
index 511ec76673..7b1b74bcb5 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.html
@@ -19,22 +19,30 @@
   <mat-form-field class="mat-block flex-1" [appearance]="appearance">
     <mat-label>{{ labelText | translate }}</mat-label>
     <input matInput type="number" min="0" formControlName="time" required>
-    <mat-error *ngIf="timeUnitSelectFormGroup.get('time').hasError('required')">
-      {{ requiredText | translate }}
-    </mat-error>
-    <mat-error *ngIf="timeUnitSelectFormGroup.get('time').hasError('pattern')">
-      {{ patternText | translate }}
-    </mat-error>
-    <mat-error *ngIf="timeUnitSelectFormGroup.get('time').hasError('min')">
-      {{ (minText || patternText) | translate : {min: minTime/1000} }}
-    </mat-error>
+    @if (timeUnitSelectFormGroup.get('time').hasError('required')) {
+      <mat-error>
+        {{ requiredText | translate }}
+      </mat-error>
+    }
+    @if (timeUnitSelectFormGroup.get('time').hasError('pattern')) {
+      <mat-error>
+        {{ patternText | translate }}
+      </mat-error>
+    }
+    @if (timeUnitSelectFormGroup.get('time').hasError('min')) {
+      <mat-error>
+        {{ (minText || patternText) | translate : {min: minTime/1000} }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block flex-1" [appearance]="appearance">
     <mat-label translate>device-profile.condition-duration-time-unit</mat-label>
     <mat-select formControlName="unit">
-      <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
-        {{ timeUnitTranslations.get(timeUnit) | translate }}
-      </mat-option>
+      @for (timeUnit of timeUnits; track timeUnit) {
+        <mat-option [value]="timeUnit">
+          {{ timeUnitTranslations.get(timeUnit) | translate }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/device-profile-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/device-profile-configuration.component.html
index 30cbfd8d36..61c5f4f9d4 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/device-profile-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/device-profile-configuration.component.html
@@ -16,11 +16,13 @@
 
 -->
 <div [formGroup]="deviceProfileConfigurationFormGroup">
-  <div [ngSwitch]="type">
-    <ng-template [ngSwitchCase]="deviceProfileType.DEFAULT">
-      <tb-default-device-profile-configuration
-        formControlName="configuration">
-      </tb-default-device-profile-configuration>
-    </ng-template>
+  <div>
+    @switch (type) {
+      @case (deviceProfileType.DEFAULT) {
+        <tb-default-device-profile-configuration
+          formControlName="configuration">
+        </tb-default-device-profile-configuration>
+      }
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/device-profile-transport-configuration.component.html
index f8fdf1895d..84b7893cee 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/device-profile-transport-configuration.component.html
@@ -16,32 +16,34 @@
 
 -->
 <div [formGroup]="deviceProfileTransportConfigurationFormGroup">
-  <div [ngSwitch]="transportType">
-    <ng-template [ngSwitchCase]="deviceTransportType.DEFAULT">
-      <tb-default-device-profile-transport-configuration
-        formControlName="configuration">
-      </tb-default-device-profile-transport-configuration>
-    </ng-template>
-    <ng-template [ngSwitchCase]="deviceTransportType.MQTT">
-      <tb-mqtt-device-profile-transport-configuration
-        formControlName="configuration">
-      </tb-mqtt-device-profile-transport-configuration>
-    </ng-template>
-    <ng-template [ngSwitchCase]="deviceTransportType.COAP">
-      <tb-coap-device-profile-transport-configuration
-        formControlName="configuration">
-      </tb-coap-device-profile-transport-configuration>
-    </ng-template>
-    <ng-template [ngSwitchCase]="deviceTransportType.LWM2M">
-      <tb-profile-lwm2m-device-transport-configuration
-        [isAdd]="isAdd"
-        formControlName="configuration">
-      </tb-profile-lwm2m-device-transport-configuration>
-    </ng-template>
-    <ng-template [ngSwitchCase]="deviceTransportType.SNMP">
-      <tb-snmp-device-profile-transport-configuration
-        formControlName="configuration">
-      </tb-snmp-device-profile-transport-configuration>
-    </ng-template>
+  <div>
+    @switch (transportType) {
+      @case (deviceTransportType.DEFAULT) {
+        <tb-default-device-profile-transport-configuration
+          formControlName="configuration">
+        </tb-default-device-profile-transport-configuration>
+      }
+      @case (deviceTransportType.MQTT) {
+        <tb-mqtt-device-profile-transport-configuration
+          formControlName="configuration">
+        </tb-mqtt-device-profile-transport-configuration>
+      }
+      @case (deviceTransportType.COAP) {
+        <tb-coap-device-profile-transport-configuration
+          formControlName="configuration">
+        </tb-coap-device-profile-transport-configuration>
+      }
+      @case (deviceTransportType.LWM2M) {
+        <tb-profile-lwm2m-device-transport-configuration
+          [isAdd]="isAdd"
+          formControlName="configuration">
+        </tb-profile-lwm2m-device-transport-configuration>
+      }
+      @case (deviceTransportType.SNMP) {
+        <tb-snmp-device-profile-transport-configuration
+          formControlName="configuration">
+        </tb-snmp-device-profile-transport-configuration>
+      }
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
index 7b4913446c..6a631c8df2 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
@@ -27,8 +27,10 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content>
     <tb-lwm2m-attributes-key-list
       [isResource]="isResource"
@@ -42,11 +44,12 @@
             (click)="cancel()" cdkFocusInitial>
       {{ (readonly ? 'action.close' : 'action.cancel') | translate }}
     </button>
-    <button mat-raised-button color="primary"
-            *ngIf="!readonly"
-            type="submit"
-            [disabled]="(isLoading$ | async) || attributeFormGroup.invalid || !attributeFormGroup.dirty">
-      {{ 'action.save' | translate }}
-    </button>
+    @if (!readonly) {
+      <button mat-raised-button color="primary"
+              type="submit"
+              [disabled]="(isLoading$ | async) || attributeFormGroup.invalid || !attributeFormGroup.dirty">
+        {{ 'action.save' | translate }}
+      </button>
+    }
   </div>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
index 7d82ef2581..e2ac4da12b 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
@@ -21,51 +21,64 @@
     <label class="tb-title no-padding max-w-60% flex-full" translate>device-profile.lwm2m.attribute-value</label>
     <span [class.!hidden]="disabled" style="width: 40px;"></span>
   </div>
-  <div class="map-list flex flex-col"
-       *ngFor="let nameValueControl of attributesValueFormArray().controls; let $index = index"
-        [formGroup]="nameValueControl">
-    <div class="flex flex-row items-center justify-start gap-2">
-      <mat-form-field class="max-w-40% flex-full">
-        <mat-select formControlName="name" required>
-          <mat-option *ngFor="let attributeName of attributeNames" [value]="attributeName"
-                      [disabled]="isDisabledAttributeName(attributeName, $index)">
-            {{ attributeNameTranslationMap.get(attributeName) | translate }}
-          </mat-option>
-        </mat-select>
-        <mat-error *ngIf="nameValueControl.get('name').hasError('required')">
-          {{ 'device-profile.lwm2m.attribute-name-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field class="max-w-60% flex-full">
-        <input formControlName="value" matInput required type="number"
-               placeholder="{{ 'key-val.value' | translate }}">
-        <mat-error class="flex flex-row" *ngIf="nameValueControl.get('value').hasError('required')">
-          {{ 'device-profile.lwm2m.attribute-value-required' | translate }}
-        </mat-error>
-        <mat-error class="flex flex-row" *ngIf="nameValueControl.get('value').hasError('min') ||
-                                          nameValueControl.get('value').hasError('pattern')">
-          {{ 'device-profile.lwm2m.attribute-value-pattern' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <button *ngIf="!disabled"
-              mat-icon-button color="primary" style="min-width: 40px;"
+  @for (nameValueControl of attributesValueFormArray().controls; track nameValueControl) {
+    <div class="map-list flex flex-col"
+         [formGroup]="nameValueControl">
+      <div class="flex flex-row items-center justify-start gap-2">
+        <mat-form-field class="max-w-40% flex-full">
+          <mat-select formControlName="name" required>
+            @for (attributeName of attributeNames; track attributeName) {
+              <mat-option [value]="attributeName"
+                          [disabled]="isDisabledAttributeName(attributeName, $index)">
+                {{ attributeNameTranslationMap.get(attributeName) | translate }}
+              </mat-option>
+            }
+          </mat-select>
+          @if (nameValueControl.get('name').hasError('required')) {
+            <mat-error>
+              {{ 'device-profile.lwm2m.attribute-name-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field class="max-w-60% flex-full">
+          <input formControlName="value" matInput required type="number"
+                 placeholder="{{ 'key-val.value' | translate }}">
+          @if (nameValueControl.get('value').hasError('required')) {
+            <mat-error class="flex flex-row">
+              {{ 'device-profile.lwm2m.attribute-value-required' | translate }}
+            </mat-error>
+          }
+          @if (nameValueControl.get('value').hasError('min') ||
+            nameValueControl.get('value').hasError('pattern')) {
+            <mat-error class="flex flex-row">
+              {{ 'device-profile.lwm2m.attribute-value-pattern' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+        @if (!disabled) {
+          <button
+            mat-icon-button color="primary" style="min-width: 40px;"
+            type="button"
+            (click)="removeKeyVal($index)"
+            matTooltip="{{ 'device-profile.lwm2m.remove-attribute' | translate }}"
+            matTooltipPosition="above">
+            <mat-icon>close</mat-icon>
+          </button>
+        }
+      </div>
+    </div>
+  }
+  <div [class.!hidden]="attributesValueFormArray().length"
+  class="map-list flex items-center justify-center" translate>device-profile.lwm2m.no-attributes-set</div>
+  @if (!disabled && isAddEnabled) {
+    <div style="margin-top: 9px;">
+      <button mat-stroked-button color="primary"
+              [disabled]="isLoading$ | async"
               type="button"
-              (click)="removeKeyVal($index)"
-              matTooltip="{{ 'device-profile.lwm2m.remove-attribute' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>close</mat-icon>
+              (click)="addKeyVal()">
+        <mat-icon class="button-icon">add_circle_outline</mat-icon>
+        {{ 'device-profile.lwm2m.add-attribute' | translate }}
       </button>
     </div>
-  </div>
-  <div [class.!hidden]="attributesValueFormArray().length"
-        class="map-list flex items-center justify-center" translate>device-profile.lwm2m.no-attributes-set</div>
-  <div style="margin-top: 9px;" *ngIf="!disabled && isAddEnabled">
-    <button mat-stroked-button color="primary"
-            [disabled]="isLoading$ | async"
-            type="button"
-            (click)="addKeyVal()">
-      <mat-icon class="button-icon">add_circle_outline</mat-icon>
-      {{ 'device-profile.lwm2m.add-attribute' | translate }}
-    </button>
-  </div>
+  }
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
index 468cb62a60..a966d6197b 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
@@ -23,17 +23,23 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
+  @if ((isLoading$ | async) === false) {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content class="flex flex-col">
     <mat-form-field>
       <mat-label>{{ 'device-profile.lwm2m.server-type' | translate }}</mat-label>
       <mat-select formControlName="serverType">
-        <mat-option *ngFor="let serverType of serverTypes"
-                    [value]="serverType">
-          {{ serverConfigTypeNamesMap.get(serverType) | translate }}
-        </mat-option>
+        @for (serverType of serverTypes; track serverType) {
+          <mat-option
+            [value]="serverType">
+            {{ serverConfigTypeNamesMap.get(serverType) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
index 41ac62dae2..1f36c01fe4 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
       <tb-profile-lwm2m-object-add-instances-list
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-list.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-list.component.html
index af8be58cc0..0b5741b177 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-list.component.html
@@ -19,13 +19,16 @@
   <mat-form-field class="mat-block">
     <mat-label>{{ 'device-profile.lwm2m.instances-list' | translate }}</mat-label>
     <mat-chip-grid #chipList formControlName="instanceList" [required]="required" (focus)="onFocus()">
-      <mat-chip-row
-        *ngFor="let instanceId of instancesId"
-        [removable]="!disabled"
-        (removed)="remove(instanceId)">
-        {{instanceId}}
-        <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
-      </mat-chip-row>
+      @for (instanceId of instancesId; track instanceId) {
+        <mat-chip-row
+          [removable]="!disabled"
+          (removed)="remove(instanceId)">
+          {{instanceId}}
+          @if (!disabled) {
+            <mat-icon matChipRemove>close</mat-icon>
+          }
+        </mat-chip-row>
+      }
       <input matInput type="text"
              #instanceId
              style="max-width: 70px;"
@@ -35,15 +38,21 @@
              matChipInputAddOnBlur
              (matChipInputTokenEnd)="add($event)">
     </mat-chip-grid>
-    <mat-error *ngIf="instancesListFormGroup.get('instanceList').hasError('required')">
-      {{ 'device-profile.lwm2m.instances-list-required' | translate }}
-    </mat-error>
-    <mat-error *ngIf="instancesListFormGroup.get('instanceId').hasError('pattern')">
-      {{ 'device-profile.lwm2m.instance-id-pattern' | translate }}
-    </mat-error>
-    <mat-error *ngIf="instancesListFormGroup.get('instanceId').hasError('max')">
-      {{ 'device-profile.lwm2m.instance-id-max' | translate: {max: instanceIdValueMax} }}
-    </mat-error>
+    @if (instancesListFormGroup.get('instanceList').hasError('required')) {
+      <mat-error>
+        {{ 'device-profile.lwm2m.instances-list-required' | translate }}
+      </mat-error>
+    }
+    @if (instancesListFormGroup.get('instanceId').hasError('pattern')) {
+      <mat-error>
+        {{ 'device-profile.lwm2m.instance-id-pattern' | translate }}
+      </mat-error>
+    }
+    @if (instancesListFormGroup.get('instanceId').hasError('max')) {
+      <mat-error>
+        {{ 'device-profile.lwm2m.instance-id-max' | translate: {max: instanceIdValueMax} }}
+      </mat-error>
+    }
   </mat-form-field>
 </section>
 
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-list.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-list.component.html
index 1dea3c6a64..d56183f562 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-list.component.html
@@ -18,13 +18,16 @@
 <mat-form-field [formGroup]="lwm2mListFormGroup" class="mat-block" [appearance]="appearance">
   <mat-label translate>device-profile.lwm2m.object-list</mat-label>
   <mat-chip-grid #chipList formControlName="objectsList" [required]="required">
-    <mat-chip-row
-      *ngFor="let objectLwm2m of objectsList"
-      [removable]="!disabled"
-      (removed)="remove(objectLwm2m)">
-      {{objectLwm2m.name}} #{{objectLwm2m.keyId}}
-      <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
-    </mat-chip-row>
+    @for (objectLwm2m of objectsList; track objectLwm2m) {
+      <mat-chip-row
+        [removable]="!disabled"
+        (removed)="remove(objectLwm2m)">
+        {{objectLwm2m.name}} #{{objectLwm2m.keyId}}
+        @if (!disabled) {
+          <mat-icon matChipRemove>close</mat-icon>
+        }
+      </mat-chip-row>
+    }
     <input matInput type="text"
            style="max-width: 200px;"
            #objectInput
@@ -39,22 +42,29 @@
   <mat-autocomplete #objectAutocomplete="matAutocomplete"
                     class="tb-autocomplete"
                     [displayWith]="displayObjectLwm2mFn">
-    <mat-option *ngFor="let objectLwm2m of filteredObjectsList | async" [value]="objectLwm2m">
-      <span [innerHTML]="objectLwm2m.keyId + ': ' + (objectLwm2m.name  | highlight: searchText)"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredObjectsList | async)?.length" [value]="null">
-      <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-        <span translate>device-profile.lwm2m.no-objects-found</span>
-      </div>
-      <ng-template #searchNotEmpty>
-        <span>
+    @for (objectLwm2m of filteredObjectsList | async; track objectLwm2m) {
+      <mat-option [value]="objectLwm2m">
+        <span [innerHTML]="objectLwm2m.keyId + ': ' + (objectLwm2m.name  | highlight: searchText)"></span>
+      </mat-option>
+    }
+    @if (!(filteredObjectsList | async)?.length) {
+      <mat-option [value]="null">
+        @if (!textIsNotEmpty(searchText)) {
+          <div>
+            <span translate>device-profile.lwm2m.no-objects-found</span>
+          </div>
+        } @else {
+          <span>
             {{ 'device-profile.lwm2m.no-objects-matching' | translate:{object: (searchText | truncate: true: 6: &apos;...&apos;)} }}
-        </span>
-      </ng-template>
-    </mat-option>
+          </span>
+        }
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="lwm2mListFormGroup.get('objectsList').hasError('required')">
-    {{ 'device-profile.lwm2m.object-list-empty' | translate }}
-  </mat-error>
+  @if (lwm2mListFormGroup.get('objectsList').hasError('required')) {
+    <mat-error>
+      {{ 'device-profile.lwm2m.object-list-empty' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
 
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
index edc9e44bf8..acd00e3707 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
@@ -25,54 +25,71 @@
     </div>
   </div>
   <mat-divider></mat-divider>
-  <div *ngFor="let mappingConfig of mappingsConfigFormArray.controls; let $index = index;
-               last as isLast;"
-       [formGroup]="mappingConfig" class="mapping-list flex flex-row items-center justify-start gap-2">
-    <div class="tb-layout-fill flex flex-1 flex-row items-stretch justify-start gap-2">
-      <mat-form-field class="max-w-26% flex-full">
-        <mat-select formControlName="dataType" required>
-          <mat-option *ngFor="let dataType of dataTypes" [value]="dataType">
-            {{ dataTypesTranslationMap.get(dataType) | translate }}
-          </mat-option>
-        </mat-select>
-        <mat-error *ngIf="mappingConfig.get('dataType').hasError('required')">
-          {{ 'device-profile.snmp.data-type-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field class="max-w-37% flex-full">
-        <input matInput formControlName="key" required/>
-        <mat-error *ngIf="mappingConfig.get('key').hasError('required')">
-          {{ 'device-profile.snmp.data-key-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field class="max-w-37% flex-full">
-        <input matInput formControlName="oid" required/>
-        <mat-error *ngIf="mappingConfig.get('oid').hasError('required')">
-          {{ 'device-profile.snmp.oid-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="mappingConfig.get('oid').hasError('pattern')">
-          {{ 'device-profile.snmp.oid-pattern' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <button *ngIf="!disabled"
-              mat-icon-button color="primary"
+  @for (mappingConfig of mappingsConfigFormArray.controls; track mappingConfig; let isLast = $last) {
+    <div
+      [formGroup]="mappingConfig" class="mapping-list flex flex-row items-center justify-start gap-2">
+      <div class="tb-layout-fill flex flex-1 flex-row items-stretch justify-start gap-2">
+        <mat-form-field class="max-w-26% flex-full">
+          <mat-select formControlName="dataType" required>
+            @for (dataType of dataTypes; track dataType) {
+              <mat-option [value]="dataType">
+                {{ dataTypesTranslationMap.get(dataType) | translate }}
+              </mat-option>
+            }
+          </mat-select>
+          @if (mappingConfig.get('dataType').hasError('required')) {
+            <mat-error>
+              {{ 'device-profile.snmp.data-type-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field class="max-w-37% flex-full">
+          <input matInput formControlName="key" required/>
+          @if (mappingConfig.get('key').hasError('required')) {
+            <mat-error>
+              {{ 'device-profile.snmp.data-key-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field class="max-w-37% flex-full">
+          <input matInput formControlName="oid" required/>
+          @if (mappingConfig.get('oid').hasError('required')) {
+            <mat-error>
+              {{ 'device-profile.snmp.oid-required' | translate }}
+            </mat-error>
+          }
+          @if (mappingConfig.get('oid').hasError('pattern')) {
+            <mat-error>
+              {{ 'device-profile.snmp.oid-pattern' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+        @if (!disabled) {
+          <button
+            mat-icon-button color="primary"
+            type="button"
+            (click)="removeMappingConfig($index)"
+            matTooltip="{{ 'action.remove' | translate }}"
+            matTooltipPosition="above">
+            <mat-icon>close</mat-icon>
+          </button>
+        }
+      </div>
+    </div>
+  }
+  @if (!mappingsConfigFormArray.controls.length && !disabled) {
+    <div>
+      <span class="tb-prompt required required-text flex items-center justify-center" translate>device-profile.snmp.please-add-mapping-config</span>
+    </div>
+  }
+  @if (!disabled) {
+    <div>
+      <button mat-stroked-button color="primary"
               type="button"
-              (click)="removeMappingConfig($index)"
-              matTooltip="{{ 'action.remove' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>close</mat-icon>
+              (click)="addMappingConfig()">
+        <mat-icon class="button-icon">add_circle_outline</mat-icon>
+        {{ 'device-profile.snmp.add-mapping' | translate }}
       </button>
     </div>
-  </div>
-  <div *ngIf="!mappingsConfigFormArray.controls.length && !disabled">
-      <span class="tb-prompt required required-text flex items-center justify-center" translate>device-profile.snmp.please-add-mapping-config</span>
-  </div>
-  <div *ngIf="!disabled">
-    <button mat-stroked-button color="primary"
-            type="button"
-            (click)="addMappingConfig()">
-      <mat-icon class="button-icon">add_circle_outline</mat-icon>
-      {{ 'device-profile.snmp.add-mapping' | translate }}
-    </button>
-  </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html b/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html
index 18019f3532..1c462bb9b7 100644
--- a/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html
@@ -16,40 +16,46 @@
 
 -->
 <div class="flex flex-col">
-  <div class="tb-tenant-profile-queues"
-       *ngFor="let queuesControl of queuesFormArray.controls; trackBy: trackByQueue;
-       let $index = index; last as isLast;"
-       [class.pb-2]="!isLast">
-    <mat-expansion-panel class="flex-1" [expanded]="true">
-      <mat-expansion-panel-header>
-        <div class="flex flex-1 flex-row items-center justify-start">
-          <mat-panel-title>
-            {{ getTitle(queuesControl.value.name) }}
-          </mat-panel-title>
-          <span class="flex-1"></span>
-          <button *ngIf="!($index === 0) && !disabled" mat-icon-button style="min-width: 40px;"
-                  type="button"
-                  (click)="removeQueue($index)"
-                  matTooltip="{{ 'action.remove' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>delete</mat-icon>
-          </button>
-        </div>
-      </mat-expansion-panel-header>
-      <ng-template matExpansionPanelContent>
-        <tb-queue-form [formControl]="queuesControl" [newQueue]="newQueue"></tb-queue-form>
-      </ng-template>
-    </mat-expansion-panel>
-  </div>
-  <div *ngIf="!queuesFormArray.controls.length">
+  @for (queuesControl of queuesFormArray.controls; track trackByQueue($index, queuesControl); let isLast = $last) {
+    <div class="tb-tenant-profile-queues"
+         [class.pb-2]="!isLast">
+      <mat-expansion-panel class="flex-1" [expanded]="true">
+        <mat-expansion-panel-header>
+          <div class="flex flex-1 flex-row items-center justify-start">
+            <mat-panel-title>
+              {{ getTitle(queuesControl.value.name) }}
+            </mat-panel-title>
+            <span class="flex-1"></span>
+            @if (!($index === 0) && !disabled) {
+              <button mat-icon-button style="min-width: 40px;"
+                      type="button"
+                      (click)="removeQueue($index)"
+                      matTooltip="{{ 'action.remove' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>delete</mat-icon>
+              </button>
+            }
+          </div>
+        </mat-expansion-panel-header>
+        <ng-template matExpansionPanelContent>
+          <tb-queue-form [formControl]="queuesControl" [newQueue]="newQueue"></tb-queue-form>
+        </ng-template>
+      </mat-expansion-panel>
+    </div>
+  }
+  @if (!queuesFormArray.controls.length) {
+    <div>
       <span translate
-            class="tb-prompt flex items-center justify-center">tenant-profile.no-queue</span>
-  </div>
-  <div *ngIf="!disabled" style="padding-top: 16px;">
-    <button mat-raised-button color="primary"
-            type="button"
-            (click)="addQueue()">
-      <span translate>tenant-profile.add-queue</span>
-    </button>
-  </div>
+      class="tb-prompt flex items-center justify-center">tenant-profile.no-queue</span>
+    </div>
+  }
+  @if (!disabled) {
+    <div style="padding-top: 16px;">
+      <button mat-raised-button color="primary"
+              type="button"
+              (click)="addQueue()">
+        <span translate>tenant-profile.add-queue</span>
+      </button>
+    </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html
index 791b8c1096..7b639f134c 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html
@@ -26,53 +26,68 @@
          (keypress)="tenantProfileEnter($event)"
          [matAutocomplete]="tenantProfileAutocomplete"
          [class.!hidden]="showDetailsPageLink && disabled && selectTenantProfileFormGroup.get('tenantProfile').value">
-  <a *ngIf="showDetailsPageLink && selectTenantProfileFormGroup.get('tenantProfile').value && disabled" aria-label="Open tenant profile" [routerLink]=tenantProfileURL>
-    {{ displayTenantProfileFn(selectTenantProfileFormGroup.get('tenantProfile').value) }}
-  </a>
-  <button *ngIf="selectTenantProfileFormGroup.get('tenantProfile').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
-  <button *ngIf="selectTenantProfileFormGroup.get('tenantProfile').value?.id && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Edit"
-          matTooltip="{{ 'tenant-profile.edit' | translate }}"
-          matTooltipPosition="above"
-          (click)="editTenantProfile($event)">
-    <mat-icon class="material-icons">edit</mat-icon>
-  </button>
-  <button mat-button color="primary" matSuffix
-          (click)="createTenantProfile($event, '')"
-          *ngIf="!selectTenantProfileFormGroup.get('tenantProfile').value && !disabled">
-    <span style="white-space: nowrap">{{ 'notification.create-new' | translate }}</span>
-  </button>
+  @if (showDetailsPageLink && selectTenantProfileFormGroup.get('tenantProfile').value && disabled) {
+    <a aria-label="Open tenant profile" [routerLink]=tenantProfileURL>
+      {{ displayTenantProfileFn(selectTenantProfileFormGroup.get('tenantProfile').value) }}
+    </a>
+  }
+  @if (selectTenantProfileFormGroup.get('tenantProfile').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
+  @if (selectTenantProfileFormGroup.get('tenantProfile').value?.id && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Edit"
+      matTooltip="{{ 'tenant-profile.edit' | translate }}"
+      matTooltipPosition="above"
+      (click)="editTenantProfile($event)">
+      <mat-icon class="material-icons">edit</mat-icon>
+    </button>
+  }
+  @if (!selectTenantProfileFormGroup.get('tenantProfile').value && !disabled) {
+    <button mat-button color="primary" matSuffix
+            (click)="createTenantProfile($event, '')"
+            >
+      <span style="white-space: nowrap">{{ 'notification.create-new' | translate }}</span>
+    </button>
+  }
   <mat-autocomplete
     class="tb-autocomplete"
     #tenantProfileAutocomplete="matAutocomplete"
     [displayWith]="displayTenantProfileFn">
-    <mat-option *ngFor="let tenantProfile of filteredTenantProfiles | async" [value]="tenantProfile">
-      <span [innerHTML]="tenantProfile.name | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredTenantProfiles | async)?.length" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span translate>tenant-profile.no-tenant-profiles-found</span>
-        </div>
-        <ng-template #searchNotEmpty>
-          <span>
+    @for (tenantProfile of filteredTenantProfiles | async; track tenantProfile) {
+      <mat-option [value]="tenantProfile">
+        <span [innerHTML]="tenantProfile.name | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if (!(filteredTenantProfiles | async)?.length) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span translate>tenant-profile.no-tenant-profiles-found</span>
+            </div>
+          } @else {
+            <span>
               {{ translate.get('tenant-profile.no-tenant-profiles-matching',
-            {entity: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
+              {entity: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
+            </span>
+          }
+          <span>
+            <a translate (click)="createTenantProfile($event, searchText)">tenant-profile.create-new-tenant-profile</a>
           </span>
-        </ng-template>
-        <span>
-          <a translate (click)="createTenantProfile($event, searchText)">tenant-profile.create-new-tenant-profile</a>
-        </span>
-      </div>
-    </mat-option>
+        </div>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="selectTenantProfileFormGroup.get('tenantProfile').hasError('required')">
-    {{ 'tenant-profile.tenant-profile-required' | translate }}
-  </mat-error>
+  @if (selectTenantProfileFormGroup.get('tenantProfile').hasError('required')) {
+    <mat-error>
+      {{ 'tenant-profile.tenant-profile-required' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
index 7f86c1d259..19ef843762 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <tb-tenant-profile
       #tenantProfileComponent
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
index c230e469d0..ca553da0b2 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
@@ -15,48 +15,54 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
-  <button mat-raised-button color="primary"
-          [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'open')"
-          [class.!hidden]="isEdit || isDetailsPage">
-    {{'common.open-details-page' | translate }}
-  </button>
-  <button mat-raised-button color="primary"
-          [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'setDefault')"
-          [class.!hidden]="isEdit || entity?.default">
-    {{'tenant-profile.set-default' | translate }}
-  </button>
-  <button mat-raised-button color="primary"
-          [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'delete')"
-          [class.!hidden]="hideDelete() || isEdit">
-    {{'tenant-profile.delete' | translate }}
-  </button>
-  <div class="flex flex-row xs:flex-col">
-    <button mat-raised-button
-            ngxClipboard
-            (cbOnSuccess)="onTenantProfileIdCopied($event)"
-            [cbContent]="entity?.id?.id"
-            [class.!hidden]="isEdit">
-      <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
-      <span translate>tenant-profile.copyId</span>
+@if (!standalone) {
+  <div class="tb-details-buttons xs:flex xs:flex-col">
+    <button mat-raised-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'open')"
+            [class.!hidden]="isEdit || isDetailsPage">
+      {{'common.open-details-page' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'setDefault')"
+            [class.!hidden]="isEdit || entity?.default">
+      {{'tenant-profile.set-default' | translate }}
+    </button>
+    <button mat-raised-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'delete')"
+            [class.!hidden]="hideDelete() || isEdit">
+      {{'tenant-profile.delete' | translate }}
+    </button>
+    <div class="flex flex-row xs:flex-col">
+      <button mat-raised-button
+              ngxClipboard
+              (cbOnSuccess)="onTenantProfileIdCopied($event)"
+              [cbContent]="entity?.id?.id"
+              [class.!hidden]="isEdit">
+        <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
+        <span translate>tenant-profile.copyId</span>
+      </button>
+    </div>
   </div>
-</div>
+}
 <div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block" appearance="fill">
         <mat-label translate>tenant-profile.name</mat-label>
         <input matInput formControlName="name" required/>
-        <mat-error *ngIf="entityForm.get('name').hasError('required')">
-          {{ 'tenant-profile.name-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="entityForm.get('name').hasError('maxlength')">
-          {{ 'tenant-profile.name-max-length' | translate }}
-        </mat-error>
+        @if (entityForm.get('name').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.name-required' | translate }}
+          </mat-error>
+        }
+        @if (entityForm.get('name').hasError('maxlength')) {
+          <mat-error>
+            {{ 'tenant-profile.name-max-length' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
       <div class="flex flex-col">
         <mat-checkbox class="hinted-checkbox" formControlName="isolatedTbRuleEngine">
@@ -66,20 +72,22 @@
       </div>
       <div class="expansion-panel-block">
         <mat-accordion formGroupName="profileData" multi>
-          <mat-expansion-panel [expanded]="true" *ngIf="entityForm.get('isolatedTbRuleEngine').value">
-            <mat-expansion-panel-header>
-              <mat-panel-title>
-                {{'tenant-profile.queues-with-count' | translate:
+          @if (entityForm.get('isolatedTbRuleEngine').value) {
+            <mat-expansion-panel [expanded]="true">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  {{'tenant-profile.queues-with-count' | translate:
                   {count: entityForm.get('profileData').get('queueConfiguration').value ?
-                      entityForm.get('profileData').get('queueConfiguration').value.length : 0} }}
-              </mat-panel-title>
-            </mat-expansion-panel-header>
-            <ng-template matExpansionPanelContent>
-              <tb-tenant-profile-queues
-                formControlName="queueConfiguration"
-              ></tb-tenant-profile-queues>
-            </ng-template>
-          </mat-expansion-panel>
+                  entityForm.get('profileData').get('queueConfiguration').value.length : 0} }}
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <ng-template matExpansionPanelContent>
+                <tb-tenant-profile-queues
+                  formControlName="queueConfiguration"
+                ></tb-tenant-profile-queues>
+              </ng-template>
+            </mat-expansion-panel>
+          }
           <mat-expansion-panel [expanded]="true">
             <mat-expansion-panel-header>
               <mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
index 19bd852f0a..7100fce348 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
@@ -26,12 +26,16 @@
         <input matInput required min="0" step="1"
                formControlName="maxDevices"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxDevices').hasError('required')">
-          {{ 'tenant-profile.maximum-devices-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxDevices').hasError('min')">
-          {{ 'tenant-profile.maximum-devices-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxDevices').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-devices-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxDevices').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-devices-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -39,12 +43,16 @@
         <input matInput required min="0" step="1"
                formControlName="maxDashboards"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxDashboards').hasError('required')">
-          {{ 'tenant-profile.maximum-dashboards-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxDashboards').hasError('min')">
-          {{ 'tenant-profile.maximum-dashboards-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxDashboards').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-dashboards-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxDashboards').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-dashboards-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
@@ -54,12 +62,16 @@
         <input matInput required min="0" step="1"
                formControlName="maxAssets"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxAssets').hasError('required')">
-          {{ 'tenant-profile.maximum-assets-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxAssets').hasError('min')">
-          {{ 'tenant-profile.maximum-assets-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxAssets').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-assets-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxAssets').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-assets-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -67,12 +79,16 @@
         <input matInput required min="0" step="1"
                formControlName="maxUsers"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxUsers').hasError('required')">
-          {{ 'tenant-profile.maximum-users-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxUsers').hasError('min')">
-          {{ 'tenant-profile.maximum-users-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxUsers').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-users-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxUsers').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-users-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
@@ -89,12 +105,16 @@
             <input matInput required min="0" step="1"
                    formControlName="maxCustomers"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxCustomers').hasError('required')">
-              {{ 'tenant-profile.maximum-customers-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxCustomers').hasError('min')">
-              {{ 'tenant-profile.maximum-customers-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxCustomers').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.maximum-customers-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('maxCustomers').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.maximum-customers-range' | translate}}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
           <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -102,12 +122,16 @@
             <input matInput required min="0" step="1"
                    formControlName="maxRuleChains"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxRuleChains').hasError('required')">
-              {{ 'tenant-profile.maximum-rule-chains-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxRuleChains').hasError('min')">
-              {{ 'tenant-profile.maximum-rule-chains-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxRuleChains').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.maximum-rule-chains-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('maxRuleChains').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.maximum-rule-chains-range' | translate}}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
         </div>
@@ -117,12 +141,16 @@
             <input matInput required min="0" step="1"
                    formControlName="maxEdges"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxEdges').hasError('required')">
-              {{ 'tenant-profile.maximum-edges-required' | translate }}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxEdges').hasError('min')">
-              {{ 'tenant-profile.maximum-edges-range' | translate }}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxEdges').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.maximum-edges-required' | translate }}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('maxEdges').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.maximum-edges-range' | translate }}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
           <div class="flex-1"></div>
@@ -141,12 +169,16 @@
         <input matInput required min="0" step="1"
                formControlName="maxREExecutions"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxREExecutions').hasError('required')">
-          {{ 'tenant-profile.max-r-e-executions-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxREExecutions').hasError('min')">
-          {{ 'tenant-profile.max-r-e-executions-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxREExecutions').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.max-r-e-executions-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxREExecutions').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.max-r-e-executions-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -154,12 +186,16 @@
         <input matInput required min="0" step="1"
                formControlName="maxTransportMessages"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxTransportMessages').hasError('required')">
-          {{ 'tenant-profile.max-transport-messages-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxTransportMessages').hasError('min')">
-          {{ 'tenant-profile.max-transport-messages-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxTransportMessages').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.max-transport-messages-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxTransportMessages').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.max-transport-messages-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
@@ -176,12 +212,16 @@
             <input matInput required min="0" step="1"
                    formControlName="maxJSExecutions"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxJSExecutions').hasError('required')">
-              {{ 'tenant-profile.max-j-s-executions-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxJSExecutions').hasError('min')">
-              {{ 'tenant-profile.max-j-s-executions-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxJSExecutions').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.max-j-s-executions-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('maxJSExecutions').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.max-j-s-executions-range' | translate}}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
           <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -189,12 +229,16 @@
             <input matInput required min="0" step="1"
                    formControlName="maxTbelExecutions"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxTbelExecutions').hasError('required')">
-              {{ 'tenant-profile.max-tbel-executions-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxTbelExecutions').hasError('min')">
-              {{ 'tenant-profile.max-tbel-executions-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxTbelExecutions').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.max-tbel-executions-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('maxTbelExecutions').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.max-tbel-executions-range' | translate}}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
         </div>
@@ -204,12 +248,16 @@
             <input matInput required min="0" step="1"
                    formControlName="maxRuleNodeExecutionsPerMessage"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxRuleNodeExecutionsPerMessage').hasError('required')">
-              {{ 'tenant-profile.max-rule-node-executions-per-message-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxRuleNodeExecutionsPerMessage').hasError('min')">
-              {{ 'tenant-profile.max-rule-node-executions-per-message-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxRuleNodeExecutionsPerMessage').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.max-rule-node-executions-per-message-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('maxRuleNodeExecutionsPerMessage').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.max-rule-node-executions-per-message-range' | translate}}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
           <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -217,12 +265,16 @@
             <input matInput required min="0" step="1"
                    formControlName="maxTransportDataPoints"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxTransportDataPoints').hasError('required')">
-              {{ 'tenant-profile.max-transport-data-points-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxTransportDataPoints').hasError('min')">
-              {{ 'tenant-profile.max-transport-data-points-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxTransportDataPoints').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.max-transport-data-points-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('maxTransportDataPoints').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.max-transport-data-points-range' | translate}}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
         </div>
@@ -239,12 +291,16 @@
         <input matInput required min="0" step="1"
                formControlName="maxCalculatedFieldsPerEntity"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxCalculatedFieldsPerEntity').hasError('required')">
-          {{ 'tenant-profile.max-calculated-fields-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxCalculatedFieldsPerEntity').hasError('min')">
-          {{ 'tenant-profile.max-calculated-fields-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxCalculatedFieldsPerEntity').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.max-calculated-fields-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxCalculatedFieldsPerEntity').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.max-calculated-fields-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -252,12 +308,16 @@
         <input matInput required min="0" step="1"
                formControlName="maxDataPointsPerRollingArg"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxDataPointsPerRollingArg').hasError('required')">
-          {{ 'tenant-profile.max-data-points-per-rolling-arg-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxDataPointsPerRollingArg').hasError('min')">
-          {{ 'tenant-profile.max-data-points-per-rolling-arg-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxDataPointsPerRollingArg').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.max-data-points-per-rolling-arg-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxDataPointsPerRollingArg').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.max-data-points-per-rolling-arg-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
@@ -267,12 +327,16 @@
         <input matInput required min="0" step="1"
                formControlName="maxArgumentsPerCF"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxArgumentsPerCF').hasError('required')">
-          {{ 'tenant-profile.max-arguments-per-cf-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxArgumentsPerCF').hasError('min')">
-          {{ 'tenant-profile.max-arguments-per-cf-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxArgumentsPerCF').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.max-arguments-per-cf-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxArgumentsPerCF').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.max-arguments-per-cf-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
       <div class="flex-1"></div>
@@ -290,12 +354,16 @@
             <input matInput required min="0" step="1"
                    formControlName="maxStateSizeInKBytes"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxStateSizeInKBytes').hasError('required')">
-              {{ 'tenant-profile.max-state-size-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxStateSizeInKBytes').hasError('min')">
-              {{ 'tenant-profile.max-state-size-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxStateSizeInKBytes').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.max-state-size-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('maxStateSizeInKBytes').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.max-state-size-range' | translate}}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
           <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -303,12 +371,16 @@
             <input matInput required min="0" step="1"
                    formControlName="maxSingleValueArgumentSizeInKBytes"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxSingleValueArgumentSizeInKBytes').hasError('required')">
-              {{ 'tenant-profile.max-value-argument-size-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxSingleValueArgumentSizeInKBytes').hasError('min')">
-              {{ 'tenant-profile.max-value-argument-size-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxSingleValueArgumentSizeInKBytes').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.max-value-argument-size-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('maxSingleValueArgumentSizeInKBytes').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.max-value-argument-size-range' | translate}}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
         </div>
@@ -318,12 +390,16 @@
             <input matInput required min="1" step="1"
                    formControlName="maxRelationLevelPerCfArgument"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxRelationLevelPerCfArgument').hasError('required')">
-              {{ 'tenant-profile.max-related-level-per-argument-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxRelationLevelPerCfArgument').hasError('min')">
-              {{ 'tenant-profile.max-related-level-per-argument-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxRelationLevelPerCfArgument').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.max-related-level-per-argument-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('maxRelationLevelPerCfArgument').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.max-related-level-per-argument-range' | translate}}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
           <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -331,12 +407,16 @@
             <input matInput required min="0" step="1"
                    formControlName="minAllowedScheduledUpdateIntervalInSecForCF"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('minAllowedScheduledUpdateIntervalInSecForCF').hasError('required')">
-              {{ 'tenant-profile.min-allowed-scheduled-update-interval-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('minAllowedScheduledUpdateIntervalInSecForCF').hasError('min')">
-              {{ 'tenant-profile.min-allowed-scheduled-update-interval-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('minAllowedScheduledUpdateIntervalInSecForCF').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.min-allowed-scheduled-update-interval-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('minAllowedScheduledUpdateIntervalInSecForCF').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.min-allowed-scheduled-update-interval-range' | translate}}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
         </div>
@@ -346,12 +426,16 @@
             <input matInput required min="0" step="1"
                    formControlName="minAllowedAggregationIntervalInSecForCF"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('minAllowedAggregationIntervalInSecForCF').hasError('required')">
-              {{ 'tenant-profile.min-allowed-aggregation-interval-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('minAllowedAggregationIntervalInSecForCF').hasError('min')">
-              {{ 'tenant-profile.min-allowed-aggregation-interval-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('minAllowedAggregationIntervalInSecForCF').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.min-allowed-aggregation-interval-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('minAllowedAggregationIntervalInSecForCF').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.min-allowed-aggregation-interval-range' | translate}}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
           <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -359,12 +443,16 @@
             <input matInput required min="0" step="1"
                    formControlName="minAllowedDeduplicationIntervalInSecForCF"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('minAllowedDeduplicationIntervalInSecForCF').hasError('required')">
-              {{ 'tenant-profile.min-allowed-deduplication-interval-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('minAllowedDeduplicationIntervalInSecForCF').hasError('min')">
-              {{ 'tenant-profile.min-allowed-deduplication-interval-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('minAllowedDeduplicationIntervalInSecForCF').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.min-allowed-deduplication-interval-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('minAllowedDeduplicationIntervalInSecForCF').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.min-allowed-deduplication-interval-range' | translate}}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
         </div>
@@ -374,12 +462,16 @@
             <input matInput required min="0" step="1"
                    formControlName="intermediateAggregationIntervalInSecForCF"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('intermediateAggregationIntervalInSecForCF').hasError('required')">
-              {{ 'tenant-profile.intermediate-aggregation-interval-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('intermediateAggregationIntervalInSecForCF').hasError('min')">
-              {{ 'tenant-profile.intermediate-aggregation-interval-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('intermediateAggregationIntervalInSecForCF').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.intermediate-aggregation-interval-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('intermediateAggregationIntervalInSecForCF').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.intermediate-aggregation-interval-range' | translate}}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
           <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -387,12 +479,16 @@
             <input matInput required min="0" step="1"
                    formControlName="cfReevaluationCheckInterval"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('cfReevaluationCheckInterval').hasError('required')">
-              {{ 'tenant-profile.reevaluation-check-interval-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('cfReevaluationCheckInterval').hasError('min')">
-              {{ 'tenant-profile.reevaluation-check-interval-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('cfReevaluationCheckInterval').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.reevaluation-check-interval-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('cfReevaluationCheckInterval').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.reevaluation-check-interval-range' | translate}}
+              </mat-error>
+            }
             <mat-hint></mat-hint>
           </mat-form-field>
         </div>
@@ -402,12 +498,16 @@
             <input matInput required min="1" step="1"
                    formControlName="maxRelatedEntitiesToReturnPerCfArgument"
                    type="number">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxRelatedEntitiesToReturnPerCfArgument').hasError('required')">
-              {{ 'tenant-profile.relation-search-entity-limit-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxRelatedEntitiesToReturnPerCfArgument').hasError('min')">
-              {{ 'tenant-profile.relation-search-entity-limit-range' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxRelatedEntitiesToReturnPerCfArgument').hasError('required')) {
+              <mat-error>
+                {{ 'tenant-profile.relation-search-entity-limit-required' | translate}}
+              </mat-error>
+            }
+            @if (tenantProfileConfigurationForm.get('maxRelatedEntitiesToReturnPerCfArgument').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.relation-search-entity-limit-range' | translate}}
+              </mat-error>
+            }
             <mat-hint translate>tenant-profile.relation-search-entity-limit-hint</mat-hint>
           </mat-form-field>
           <div class="flex-1"></div>
@@ -426,12 +526,16 @@
         <input matInput required min="0" step="1"
                formControlName="maxDPStorageDays"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxDPStorageDays').hasError('required')">
-          {{ 'tenant-profile.max-d-p-storage-days-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxDPStorageDays').hasError('min')">
-          {{ 'tenant-profile.max-d-p-storage-days-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxDPStorageDays').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.max-d-p-storage-days-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxDPStorageDays').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.max-d-p-storage-days-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -439,12 +543,16 @@
         <input matInput required min="0" step="1"
                formControlName="alarmsTtlDays"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('alarmsTtlDays').hasError('required')">
-          {{ 'tenant-profile.alarms-ttl-days-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('alarmsTtlDays').hasError('min')">
-          {{ 'tenant-profile.alarms-ttl-days-days-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('alarmsTtlDays').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.alarms-ttl-days-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('alarmsTtlDays').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.alarms-ttl-days-days-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
@@ -454,12 +562,16 @@
         <input matInput required min="0" step="1"
                formControlName="defaultStorageTtlDays"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('defaultStorageTtlDays').hasError('required')">
-          {{ 'tenant-profile.default-storage-ttl-days-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('defaultStorageTtlDays').hasError('min')">
-          {{ 'tenant-profile.default-storage-ttl-days-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('defaultStorageTtlDays').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.default-storage-ttl-days-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('defaultStorageTtlDays').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.default-storage-ttl-days-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -467,12 +579,16 @@
         <input matInput required min="0" step="1"
                formControlName="rpcTtlDays"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('rpcTtlDays').hasError('required')">
-          {{ 'tenant-profile.rpc-ttl-days-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('rpcTtlDays').hasError('min')">
-          {{ 'tenant-profile.rpc-ttl-days-days-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('rpcTtlDays').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.rpc-ttl-days-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('rpcTtlDays').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.rpc-ttl-days-days-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
@@ -482,12 +598,16 @@
         <input matInput required min="0" step="1"
                formControlName="queueStatsTtlDays"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('queueStatsTtlDays').hasError('required')">
-          {{ 'tenant-profile.queue-stats-ttl-days-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('queueStatsTtlDays').hasError('min')">
-          {{ 'tenant-profile.queue-stats-ttl-days-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('queueStatsTtlDays').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.queue-stats-ttl-days-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('queueStatsTtlDays').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.queue-stats-ttl-days-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -495,12 +615,16 @@
         <input matInput required min="0" step="1"
                formControlName="ruleEngineExceptionsTtlDays"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('ruleEngineExceptionsTtlDays').hasError('required')">
-          {{ 'tenant-profile.rule-engine-exceptions-ttl-days-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('ruleEngineExceptionsTtlDays').hasError('min')">
-          {{ 'tenant-profile.rule-engine-exceptions-ttl-days-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('ruleEngineExceptionsTtlDays').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.rule-engine-exceptions-ttl-days-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('ruleEngineExceptionsTtlDays').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.rule-engine-exceptions-ttl-days-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
@@ -513,31 +637,41 @@
     <mat-slide-toggle class="slide-toggle-element flex-1" formControlName="smsEnabled">
       {{ 'tenant-profile.sms-enabled' | translate }}
     </mat-slide-toggle>
-    <mat-form-field *ngIf="tenantProfileConfigurationForm.get('smsEnabled').value" class="mat-block flex-1"
-                    appearance="fill" subscriptSizing="dynamic">
-      <mat-label translate>tenant-profile.max-sms</mat-label>
-      <input matInput required min="0" step="1"
-             formControlName="maxSms"
-             type="number">
-      <mat-error *ngIf="tenantProfileConfigurationForm.get('maxSms').hasError('required')">
-        {{ 'tenant-profile.max-sms-required' | translate}}
-      </mat-error>
-      <mat-error *ngIf="tenantProfileConfigurationForm.get('maxSms').hasError('min')">
-        {{ 'tenant-profile.max-sms-range' | translate}}
-      </mat-error>
-    </mat-form-field>
+    @if (tenantProfileConfigurationForm.get('smsEnabled').value) {
+      <mat-form-field class="mat-block flex-1"
+                      appearance="fill" subscriptSizing="dynamic">
+        <mat-label translate>tenant-profile.max-sms</mat-label>
+        <input matInput required min="0" step="1"
+               formControlName="maxSms"
+               type="number">
+        @if (tenantProfileConfigurationForm.get('maxSms').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.max-sms-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxSms').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.max-sms-range' | translate}}
+          </mat-error>
+        }
+      </mat-form-field>
+    }
     <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-emails</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxEmails"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxEmails').hasError('required')">
-          {{ 'tenant-profile.max-emails-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxEmails').hasError('min')">
-          {{ 'tenant-profile.max-emails-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxEmails').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.max-emails-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxEmails').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.max-emails-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -545,12 +679,16 @@
         <input matInput required min="0" step="1"
                formControlName="maxCreatedAlarms"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxCreatedAlarms').hasError('required')">
-          {{ 'tenant-profile.max-created-alarms-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxCreatedAlarms').hasError('min')">
-          {{ 'tenant-profile.max-created-alarms-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxCreatedAlarms').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.max-created-alarms-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxCreatedAlarms').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.max-created-alarms-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
@@ -560,12 +698,16 @@
         <input matInput required min="0" step="1"
                formControlName="alarmsReevaluationInterval"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('alarmsReevaluationInterval').hasError('required')">
-          {{ 'tenant-profile.alarms-reevaluation-interval-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('alarmsReevaluationInterval').hasError('min')">
-          {{ 'tenant-profile.alarms-reevaluation-interval-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('alarmsReevaluationInterval').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.alarms-reevaluation-interval-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('alarmsReevaluationInterval').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.alarms-reevaluation-interval-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
       <div class="flex-1"></div>
@@ -582,9 +724,11 @@
         <input matInput min="0" step="1"
                formControlName="maxDebugModeDurationMinutes"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxDebugModeDurationMinutes').hasError('min')">
-          {{ 'tenant-profile.maximum-debug-duration-min-range' | translate }}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxDebugModeDurationMinutes').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-debug-duration-min-range' | translate }}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
       <div class="flex-1"></div>
@@ -601,12 +745,16 @@
         <input matInput required min="0" step="1"
                formControlName="maxResourcesInBytes"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxResourcesInBytes').hasError('required')">
-          {{ 'tenant-profile.maximum-resources-sum-data-size-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxResourcesInBytes').hasError('min')">
-          {{ 'tenant-profile.maximum-resources-sum-data-size-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxResourcesInBytes').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-resources-sum-data-size-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxResourcesInBytes').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-resources-sum-data-size-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
@@ -614,12 +762,16 @@
         <input matInput required min="0" step="1"
                formControlName="maxOtaPackagesInBytes"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxOtaPackagesInBytes').hasError('required')">
-          {{ 'tenant-profile.maximum-ota-package-sum-data-size-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxOtaPackagesInBytes').hasError('min')">
-          {{ 'tenant-profile.maximum-ota-package-sum-data-size-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxOtaPackagesInBytes').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-ota-package-sum-data-size-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxOtaPackagesInBytes').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-ota-package-sum-data-size-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
@@ -629,12 +781,16 @@
         <input matInput required min="0" step="1"
                formControlName="maxResourceSize"
                type="number">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxResourceSize').hasError('required')">
-          {{ 'tenant-profile.maximum-resource-size-required' | translate}}
-        </mat-error>
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxResourceSize').hasError('min')">
-          {{ 'tenant-profile.maximum-resource-size-range' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxResourceSize').hasError('required')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-resource-size-required' | translate}}
+          </mat-error>
+        }
+        @if (tenantProfileConfigurationForm.get('maxResourceSize').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.maximum-resource-size-range' | translate}}
+          </mat-error>
+        }
         <mat-hint></mat-hint>
       </mat-form-field>
       <div class="flex-1"></div>
@@ -649,32 +805,40 @@
       <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-sessions-per-tenant</mat-label>
         <input matInput type="number" formControlName="maxWsSessionsPerTenant">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxWsSessionsPerTenant').hasError('min')">
-          {{ 'tenant-profile.too-small-value-zero' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxWsSessionsPerTenant').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.too-small-value-zero' | translate}}
+          </mat-error>
+        }
       </mat-form-field>
       <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-tenant</mat-label>
         <input matInput type="number" formControlName="maxWsSubscriptionsPerTenant">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxWsSubscriptionsPerTenant').hasError('min')">
-          {{ 'tenant-profile.too-small-value-zero' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxWsSubscriptionsPerTenant').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.too-small-value-zero' | translate}}
+          </mat-error>
+        }
       </mat-form-field>
     </div>
     <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-sessions-per-customer</mat-label>
         <input matInput type="number" formControlName="maxWsSessionsPerCustomer">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxWsSessionsPerCustomer').hasError('min')">
-          {{ 'tenant-profile.too-small-value-zero' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxWsSessionsPerCustomer').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.too-small-value-zero' | translate}}
+          </mat-error>
+        }
       </mat-form-field>
       <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-customer</mat-label>
         <input matInput type="number" formControlName="maxWsSubscriptionsPerCustomer">
-        <mat-error *ngIf="tenantProfileConfigurationForm.get('maxWsSubscriptionsPerCustomer').hasError('min')">
-          {{ 'tenant-profile.too-small-value-zero' | translate}}
-        </mat-error>
+        @if (tenantProfileConfigurationForm.get('maxWsSubscriptionsPerCustomer').hasError('min')) {
+          <mat-error>
+            {{ 'tenant-profile.too-small-value-zero' | translate}}
+          </mat-error>
+        }
       </mat-form-field>
     </div>
     <mat-expansion-panel class="configuration-panel">
@@ -688,41 +852,51 @@
           <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-sessions-per-public-user</mat-label>
             <input matInput type="number" formControlName="maxWsSessionsPerPublicUser">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxWsSessionsPerPublicUser').hasError('min')">
-              {{ 'tenant-profile.too-small-value-zero' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxWsSessionsPerPublicUser').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.too-small-value-zero' | translate}}
+              </mat-error>
+            }
           </mat-form-field>
           <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-public-user</mat-label>
             <input matInput type="number" formControlName="maxWsSubscriptionsPerPublicUser">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxWsSubscriptionsPerPublicUser').hasError('min')">
-              {{ 'tenant-profile.too-small-value-zero' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxWsSubscriptionsPerPublicUser').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.too-small-value-zero' | translate}}
+              </mat-error>
+            }
           </mat-form-field>
         </div>
         <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-sessions-per-regular-user</mat-label>
             <input matInput type="number" formControlName="maxWsSessionsPerRegularUser">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxWsSessionsPerRegularUser').hasError('min')">
-              {{ 'tenant-profile.too-small-value-zero' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxWsSessionsPerRegularUser').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.too-small-value-zero' | translate}}
+              </mat-error>
+            }
           </mat-form-field>
           <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-regular-user</mat-label>
             <input matInput type="number" formControlName="maxWsSubscriptionsPerRegularUser">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('maxWsSubscriptionsPerRegularUser').hasError('min')">
-              {{ 'tenant-profile.too-small-value-zero' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('maxWsSubscriptionsPerRegularUser').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.too-small-value-zero' | translate}}
+              </mat-error>
+            }
           </mat-form-field>
         </div>
         <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-queue-per-session</mat-label>
             <input matInput type="number" formControlName="wsMsgQueueLimitPerSession">
-            <mat-error *ngIf="tenantProfileConfigurationForm.get('wsMsgQueueLimitPerSession').hasError('min')">
-              {{ 'tenant-profile.too-small-value-one' | translate}}
-            </mat-error>
+            @if (tenantProfileConfigurationForm.get('wsMsgQueueLimitPerSession').hasError('min')) {
+              <mat-error>
+                {{ 'tenant-profile.too-small-value-one' | translate}}
+              </mat-error>
+            }
             <mat-hint>
               {{ 'tenant-profile.queue-size-is-limited-by-system-configuration' | translate}}
             </mat-hint>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
index 5d7fc9876f..370849422e 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
@@ -35,9 +35,11 @@
             cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
-    <button *ngIf="!data.readonly" mat-raised-button color="primary" (click)="save()"
-            [disabled]="editDetailsFormGroup.invalid || !editDetailsFormGroup.dirty">
-      {{ 'action.save' | translate }}
-    </button>
+    @if (!data.readonly) {
+      <button mat-raised-button color="primary" (click)="save()"
+              [disabled]="editDetailsFormGroup.invalid || !editDetailsFormGroup.dirty">
+        {{ 'action.save' | translate }}
+      </button>
+    }
   </div>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
index 617a8beaee..d24cc15a4b 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
@@ -16,51 +16,56 @@
 
 -->
 <section class="tb-rate-limits-form" [formGroup]="rateLimitsListFormGroup">
-  <div class="flex-1" [formGroup]="rateLimit" *ngFor="let rateLimit of rateLimitsFormArray.controls; let $index = index">
-    @if($index > 0) {
-      <div class="tb-rate-limits-operation" translate>tenant-profile.rate-limits.and-also-less-than</div>
-    }
-    <div class="flex flex-1 flex-row gap-2">
-      <mat-form-field hideRequiredMarker appearance="fill" class="mat-block flex-1" subscriptSizing="dynamic">
-        <mat-label translate>tenant-profile.rate-limits.number-of-messages</mat-label>
-        <input matInput placeholder="{{ 'tenant-profile.rate-limits.number-of-messages' | translate }}"
-               type="number" min="1" step="1" formControlName="value" required>
-        <mat-hint></mat-hint>
-        @if (rateLimit.get('value').hasError('required')) {
-          <mat-error translate>tenant-profile.rate-limits.number-of-messages-required</mat-error>
-        } @else if(rateLimit.get('value').hasError('min')) {
-          <mat-error translate>tenant-profile.rate-limits.number-of-messages-min</mat-error>
+  @for (rateLimit of rateLimitsFormArray.controls; track rateLimit) {
+    <div class="flex-1" [formGroup]="rateLimit">
+      @if($index > 0) {
+        <div class="tb-rate-limits-operation" translate>tenant-profile.rate-limits.and-also-less-than</div>
+      }
+      <div class="flex flex-1 flex-row gap-2">
+        <mat-form-field hideRequiredMarker appearance="fill" class="mat-block flex-1" subscriptSizing="dynamic">
+          <mat-label translate>tenant-profile.rate-limits.number-of-messages</mat-label>
+          <input matInput placeholder="{{ 'tenant-profile.rate-limits.number-of-messages' | translate }}"
+                 type="number" min="1" step="1" formControlName="value" required>
+          <mat-hint></mat-hint>
+          @if (rateLimit.get('value').hasError('required')) {
+            <mat-error translate>tenant-profile.rate-limits.number-of-messages-required</mat-error>
+          } @else if(rateLimit.get('value').hasError('min')) {
+            <mat-error translate>tenant-profile.rate-limits.number-of-messages-min</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field hideRequiredMarker appearance="fill" class="mat-block flex-1" subscriptSizing="dynamic">
+          <mat-label translate>tenant-profile.rate-limits.per-seconds</mat-label>
+          <input matInput placeholder="{{ 'tenant-profile.rate-limits.per-seconds' | translate }}"
+                 type="number" min="1" step="1" formControlName="time" required>
+          <mat-hint></mat-hint>
+          @if (rateLimit.get('time').hasError('required')) {
+            <mat-error translate>tenant-profile.rate-limits.per-seconds-required</mat-error>
+          } @else if (rateLimit.get('time').hasError('min')) {
+            <mat-error translate>tenant-profile.rate-limits.per-seconds-min</mat-error>
+          } @else if (rateLimit.get('time').hasError('duplicateTime')) {
+            <mat-error translate>tenant-profile.rate-limits.per-seconds-duplicate</mat-error>
+          }
+        </mat-form-field>
+        @if (!rateLimitsFormArray.disabled) {
+          <button mat-icon-button type="button" color="primary"
+                  class="tb-rate-limits-button"
+                  (click)="removeRateLimits($index)"
+                  [disabled]="disabled"
+                  [matTooltip]="'tenant-profile.rate-limits.remove-limit' | translate" matTooltipPosition="above">
+            <mat-icon>remove_circle_outline</mat-icon>
+          </button>
         }
-      </mat-form-field>
-      <mat-form-field hideRequiredMarker appearance="fill" class="mat-block flex-1" subscriptSizing="dynamic">
-        <mat-label translate>tenant-profile.rate-limits.per-seconds</mat-label>
-        <input matInput placeholder="{{ 'tenant-profile.rate-limits.per-seconds' | translate }}"
-               type="number" min="1" step="1" formControlName="time" required>
-        <mat-hint></mat-hint>
-        @if (rateLimit.get('time').hasError('required')) {
-          <mat-error translate>tenant-profile.rate-limits.per-seconds-required</mat-error>
-        } @else if (rateLimit.get('time').hasError('min')) {
-          <mat-error translate>tenant-profile.rate-limits.per-seconds-min</mat-error>
-        } @else if (rateLimit.get('time').hasError('duplicateTime')) {
-          <mat-error translate>tenant-profile.rate-limits.per-seconds-duplicate</mat-error>
-        }
-      </mat-form-field>
-      <button mat-icon-button type="button" color="primary"
-              class="tb-rate-limits-button"
-              *ngIf="!rateLimitsFormArray.disabled"
-              (click)="removeRateLimits($index)"
-              [disabled]="disabled"
-              [matTooltip]="'tenant-profile.rate-limits.remove-limit' | translate" matTooltipPosition="above">
-        <mat-icon>remove_circle_outline</mat-icon>
-      </button>
+      </div>
     </div>
-  </div>
-  <button mat-raised-button color="primary" *ngIf="!rateLimitsFormArray.disabled"
-          (click)="addRateLimits()"
-          [disabled]="disabled"
-          [matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above">
-    <span translate>tenant-profile.rate-limits.add-limit</span>
-  </button>
+  }
+  @if (!rateLimitsFormArray.disabled) {
+    <button mat-raised-button color="primary"
+            (click)="addRateLimits()"
+            [disabled]="disabled"
+            [matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above">
+      <span translate>tenant-profile.rate-limits.add-limit</span>
+    </button>
+  }
   <div class="tb-rate-limits-preview flex flex-1 flex-col gap-2" [class.tb-rate-limits-preview-short]="!disabled">
     <span translate>tenant-profile.rate-limits.preview</span>
     <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
index 39d97ae424..f0dd188aa6 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
@@ -24,10 +24,12 @@
       <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text>
     </div>
   </fieldset>
-  <button mat-icon-button color="primary" type="button" *ngIf="!disabled"
-          class="tb-rate-limits-button"
-          (click)="onClick($event)"
-          [matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above">
-    <mat-icon>add_circle_outline</mat-icon>
-  </button>
+  @if (!disabled) {
+    <button mat-icon-button color="primary" type="button"
+            class="tb-rate-limits-button"
+            (click)="onClick($event)"
+            [matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above">
+      <mat-icon>add_circle_outline</mat-icon>
+    </button>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/tenant-profile-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/tenant-profile-configuration.component.html
index a99101afa3..a72c51f430 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/tenant-profile-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/tenant-profile-configuration.component.html
@@ -16,12 +16,14 @@
 
 -->
 <div [formGroup]="tenantProfileConfigurationFormGroup">
-  <div [ngSwitch]="type">
-    <ng-template [ngSwitchCase]="tenantProfileType.DEFAULT">
-      <tb-default-tenant-profile-configuration
-        [required]="required"
-        formControlName="configuration">
-      </tb-default-tenant-profile-configuration>
-    </ng-template>
+  <div>
+    @switch (type) {
+      @case (tenantProfileType.DEFAULT) {
+        <tb-default-tenant-profile-configuration
+          [required]="required"
+          formControlName="configuration">
+        </tb-default-tenant-profile-configuration>
+      }
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html b/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
index 1dd2a79e27..de7b1de846 100644
--- a/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
+++ b/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
@@ -19,15 +19,21 @@
   <mat-form-field class="mat-block" appearance="fill">
     <mat-label translate>admin.queue-name</mat-label>
     <input matInput formControlName="name" required>
-    <mat-error *ngIf="queueFormGroup.get('name').hasError('required')">
-      {{ 'queue.name-required' | translate }}
-    </mat-error>
-    <mat-error *ngIf="queueFormGroup.get('name').hasError('unique')">
-      {{ 'queue.name-unique' | translate }}
-    </mat-error>
-    <mat-error *ngIf="queueFormGroup.get('name').hasError('pattern')">
-      {{ 'queue.name-pattern' | translate }}
-    </mat-error>
+    @if (queueFormGroup.get('name').hasError('required')) {
+      <mat-error>
+        {{ 'queue.name-required' | translate }}
+      </mat-error>
+    }
+    @if (queueFormGroup.get('name').hasError('unique')) {
+      <mat-error>
+        {{ 'queue.name-unique' | translate }}
+      </mat-error>
+    }
+    @if (queueFormGroup.get('name').hasError('pattern')) {
+      <mat-error>
+        {{ 'queue.name-pattern' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-accordion class="queue-strategy" [multi]="true">
     <mat-expansion-panel [expanded]="true">
@@ -41,30 +47,38 @@
           <div class="flex-1">
             <label class="group-label" translate>queue.submit-strategy</label>
             <mat-radio-group class="flex flex-1 flex-col" formControlName="type" required>
-              <mat-radio-button *ngFor="let strategy of submitStrategies" [value]="strategy">
-                {{ queueSubmitStrategyTypesMap.get(queueSubmitStrategyTypes[strategy]).label | translate }}
-                <mat-icon
-                  class="hint-icon"
-                  matTooltip="{{ queueSubmitStrategyTypesMap.get(queueSubmitStrategyTypes[strategy]).hint | translate }}"
-                  svgIcon="mdi:information-outline">
-                </mat-icon>
-              </mat-radio-button>
+              @for (strategy of submitStrategies; track strategy) {
+                <mat-radio-button [value]="strategy">
+                  {{ queueSubmitStrategyTypesMap.get(queueSubmitStrategyTypes[strategy]).label | translate }}
+                  <mat-icon
+                    class="hint-icon"
+                    matTooltip="{{ queueSubmitStrategyTypesMap.get(queueSubmitStrategyTypes[strategy]).hint | translate }}"
+                    svgIcon="mdi:information-outline">
+                  </mat-icon>
+                </mat-radio-button>
+              }
             </mat-radio-group>
           </div>
-          <div class="flex-1" *ngIf="hideBatchSize">
-            <label class="group-label" translate>queue.grouping-parameter</label>
-            <mat-form-field class="mat-block">
-              <mat-label translate>queue.batch-size</mat-label>
-              <input type="number" matInput formControlName="batchSize" required>
-              <mat-error *ngIf="queueFormGroup.get('submitStrategy.batchSize').hasError('required')">
-                {{ 'queue.batch-size-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="queueFormGroup.get('submitStrategy.batchSize').hasError('min') &&
-                   !queueFormGroup.get('submitStrategy.batchSize').hasError('required')">
-                {{ 'queue.batch-size-min-value' | translate }}
-              </mat-error>
-            </mat-form-field>
-          </div>
+          @if (hideBatchSize) {
+            <div class="flex-1">
+              <label class="group-label" translate>queue.grouping-parameter</label>
+              <mat-form-field class="mat-block">
+                <mat-label translate>queue.batch-size</mat-label>
+                <input type="number" matInput formControlName="batchSize" required>
+                @if (queueFormGroup.get('submitStrategy.batchSize').hasError('required')) {
+                  <mat-error>
+                    {{ 'queue.batch-size-required' | translate }}
+                  </mat-error>
+                }
+                @if (queueFormGroup.get('submitStrategy.batchSize').hasError('min') &&
+                  !queueFormGroup.get('submitStrategy.batchSize').hasError('required')) {
+                  <mat-error>
+                    {{ 'queue.batch-size-min-value' | translate }}
+                  </mat-error>
+                }
+              </mat-form-field>
+            </div>
+          }
         </div>
       </ng-template>
     </mat-expansion-panel>
@@ -78,8 +92,9 @@
         <div class="flex flex-1 flex-row gap-4 lt-md:flex-col" formGroupName="processingStrategy">
           <div class="flex-1">
             <label class="group-label" translate>queue.processing-strategy</label>
-              <mat-radio-group class="flex flex-1 flex-col" formControlName="type" required>
-                <mat-radio-button *ngFor="let strategy of processingStrategies" [value]="strategy">
+            <mat-radio-group class="flex flex-1 flex-col" formControlName="type" required>
+              @for (strategy of processingStrategies; track strategy) {
+                <mat-radio-button [value]="strategy">
                   {{ queueProcessingStrategyTypesMap.get(queueProcessingStrategyTypes[strategy]).label | translate }}
                   <mat-icon
                     class="hint-icon"
@@ -87,7 +102,8 @@
                     svgIcon="mdi:information-outline">
                   </mat-icon>
                 </mat-radio-button>
-              </mat-radio-group>
+              }
+            </mat-radio-group>
           </div>
           <div class="flex-1">
             <label class="group-label" translate>queue.retries-settings</label>
@@ -95,55 +111,73 @@
               <mat-label translate>queue.retries</mat-label>
               <input type="number" matInput formControlName="retries" required>
               <mat-hint></mat-hint>
-              <mat-error *ngIf="queueFormGroup.get('processingStrategy.retries').hasError('required')">
-                {{ 'queue.retries-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="queueFormGroup.get('processingStrategy.retries').hasError('min') &&
-                 !queueFormGroup.get('processingStrategy.retries').hasError('required')">
-                {{ 'queue.retries-min-value' | translate }}
-              </mat-error>
+              @if (queueFormGroup.get('processingStrategy.retries').hasError('required')) {
+                <mat-error>
+                  {{ 'queue.retries-required' | translate }}
+                </mat-error>
+              }
+              @if (queueFormGroup.get('processingStrategy.retries').hasError('min') &&
+                !queueFormGroup.get('processingStrategy.retries').hasError('required')) {
+                <mat-error>
+                  {{ 'queue.retries-min-value' | translate }}
+                </mat-error>
+              }
             </mat-form-field>
             <mat-form-field class="mat-block" subscriptSizing="dynamic">
               <mat-label translate>queue.failure-percentage</mat-label>
               <input type="number" matInput formControlName="failurePercentage" required>
               <mat-hint></mat-hint>
-              <mat-error *ngIf="queueFormGroup.get('processingStrategy.failurePercentage').hasError('required')">
-                {{ 'queue.failure-percentage-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="queueFormGroup.get('processingStrategy.failurePercentage').hasError('min') &&
-                 !queueFormGroup.get('processingStrategy.failurePercentage').hasError('required') &&
-                 !queueFormGroup.get('processingStrategy.failurePercentage').hasError('max')">
-                {{ 'queue.failure-percentage-min-value' | translate }}
-              </mat-error>
-              <mat-error *ngIf="queueFormGroup.get('processingStrategy.failurePercentage').hasError('max') &&
-                 !queueFormGroup.get('processingStrategy.failurePercentage').hasError('required') &&
-                 !queueFormGroup.get('processingStrategy.failurePercentage').hasError('min')">
-                {{ 'queue.failure-percentage-max-value' | translate }}
-              </mat-error>
+              @if (queueFormGroup.get('processingStrategy.failurePercentage').hasError('required')) {
+                <mat-error>
+                  {{ 'queue.failure-percentage-required' | translate }}
+                </mat-error>
+              }
+              @if (queueFormGroup.get('processingStrategy.failurePercentage').hasError('min') &&
+                !queueFormGroup.get('processingStrategy.failurePercentage').hasError('required') &&
+                !queueFormGroup.get('processingStrategy.failurePercentage').hasError('max')) {
+                <mat-error>
+                  {{ 'queue.failure-percentage-min-value' | translate }}
+                </mat-error>
+              }
+              @if (queueFormGroup.get('processingStrategy.failurePercentage').hasError('max') &&
+                !queueFormGroup.get('processingStrategy.failurePercentage').hasError('required') &&
+                !queueFormGroup.get('processingStrategy.failurePercentage').hasError('min')) {
+                <mat-error>
+                  {{ 'queue.failure-percentage-max-value' | translate }}
+                </mat-error>
+              }
             </mat-form-field>
             <mat-form-field class="mat-block" subscriptSizing="dynamic">
               <mat-label translate>queue.pause-between-retries</mat-label>
               <input type="number" matInput formControlName="pauseBetweenRetries" required>
               <mat-hint></mat-hint>
-              <mat-error *ngIf="queueFormGroup.get('processingStrategy.pauseBetweenRetries').hasError('required')">
-                {{ 'queue.pause-between-retries-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="queueFormGroup.get('processingStrategy.pauseBetweenRetries').hasError('min') &&
-                 !queueFormGroup.get('processingStrategy.pauseBetweenRetries').hasError('required')">
-                {{ 'queue.pause-between-retries-min-value' | translate }}
-              </mat-error>
+              @if (queueFormGroup.get('processingStrategy.pauseBetweenRetries').hasError('required')) {
+                <mat-error>
+                  {{ 'queue.pause-between-retries-required' | translate }}
+                </mat-error>
+              }
+              @if (queueFormGroup.get('processingStrategy.pauseBetweenRetries').hasError('min') &&
+                !queueFormGroup.get('processingStrategy.pauseBetweenRetries').hasError('required')) {
+                <mat-error>
+                  {{ 'queue.pause-between-retries-min-value' | translate }}
+                </mat-error>
+              }
             </mat-form-field>
             <mat-form-field class="mat-block" subscriptSizing="dynamic">
               <mat-label translate>queue.max-pause-between-retries</mat-label>
               <input type="number" matInput formControlName="maxPauseBetweenRetries" required>
               <mat-hint></mat-hint>
-              <mat-error *ngIf="queueFormGroup.get('processingStrategy.maxPauseBetweenRetries').hasError('required')">
-                {{ 'queue.max-pause-between-retries-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="queueFormGroup.get('processingStrategy.maxPauseBetweenRetries').hasError('min') &&
-                 !queueFormGroup.get('processingStrategy.maxPauseBetweenRetries').hasError('required')">
-                {{ 'queue.max-pause-between-retries-min-value' | translate }}
-              </mat-error>
+              @if (queueFormGroup.get('processingStrategy.maxPauseBetweenRetries').hasError('required')) {
+                <mat-error>
+                  {{ 'queue.max-pause-between-retries-required' | translate }}
+                </mat-error>
+              }
+              @if (queueFormGroup.get('processingStrategy.maxPauseBetweenRetries').hasError('min') &&
+                !queueFormGroup.get('processingStrategy.maxPauseBetweenRetries').hasError('required')) {
+                <mat-error>
+                  {{ 'queue.max-pause-between-retries-min-value' | translate }}
+                </mat-error>
+              }
             </mat-form-field>
           </div>
         </div>
@@ -163,24 +197,32 @@
               <mat-form-field class="mat-block flex-1">
                 <mat-label translate>queue.poll-interval</mat-label>
                 <input type="number" matInput formControlName="pollInterval" required>
-                <mat-error *ngIf="queueFormGroup.get('pollInterval').hasError('required')">
-                  {{ 'queue.poll-interval-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="queueFormGroup.get('pollInterval').hasError('min') &&
-                 !queueFormGroup.get('pollInterval').hasError('required')">
-                  {{ 'queue.poll-interval-min-value' | translate }}
-                </mat-error>
+                @if (queueFormGroup.get('pollInterval').hasError('required')) {
+                  <mat-error>
+                    {{ 'queue.poll-interval-required' | translate }}
+                  </mat-error>
+                }
+                @if (queueFormGroup.get('pollInterval').hasError('min') &&
+                  !queueFormGroup.get('pollInterval').hasError('required')) {
+                  <mat-error>
+                    {{ 'queue.poll-interval-min-value' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
               <mat-form-field class="mat-block flex-1">
                 <mat-label translate>queue.partitions</mat-label>
                 <input type="number" matInput formControlName="partitions" required>
-                <mat-error *ngIf="queueFormGroup.get('partitions').hasError('required')">
-                  {{ 'queue.partitions-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="queueFormGroup.get('partitions').hasError('min') &&
-                 !queueFormGroup.get('partitions').hasError('required')">
-                  {{ 'queue.partitions-min-value' | translate }}
-                </mat-error>
+                @if (queueFormGroup.get('partitions').hasError('required')) {
+                  <mat-error>
+                    {{ 'queue.partitions-required' | translate }}
+                  </mat-error>
+                }
+                @if (queueFormGroup.get('partitions').hasError('min') &&
+                  !queueFormGroup.get('partitions').hasError('required')) {
+                  <mat-error>
+                    {{ 'queue.partitions-min-value' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             </div>
           </div>
@@ -193,13 +235,17 @@
               <mat-form-field class="mat-block flex-1">
                 <mat-label translate>queue.processing-timeout</mat-label>
                 <input type="number" matInput formControlName="packProcessingTimeout" required>
-                <mat-error *ngIf="queueFormGroup.get('packProcessingTimeout').hasError('required')">
-                  {{ 'queue.pack-processing-timeout-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="queueFormGroup.get('packProcessingTimeout').hasError('min') &&
-                 !queueFormGroup.get('packProcessingTimeout').hasError('required')">
-                  {{ 'queue.pack-processing-timeout-min-value' | translate }}
-                </mat-error>
+                @if (queueFormGroup.get('packProcessingTimeout').hasError('required')) {
+                  <mat-error>
+                    {{ 'queue.pack-processing-timeout-required' | translate }}
+                  </mat-error>
+                }
+                @if (queueFormGroup.get('packProcessingTimeout').hasError('min') &&
+                  !queueFormGroup.get('packProcessingTimeout').hasError('required')) {
+                  <mat-error>
+                    {{ 'queue.pack-processing-timeout-min-value' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             </div>
           </div>
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
index 6b63c75a35..896adb0c46 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
       <tb-relation-type-autocomplete
@@ -35,7 +38,7 @@
         required="true">
       </tb-relation-type-autocomplete>
       <small>{{(direction === entitySearchDirection.FROM ?
-          'relation.to-entity' : 'relation.from-entity') | translate}}</small>
+      'relation.to-entity' : 'relation.from-entity') | translate}}</small>
       <tb-entity-list-select
         formControlName="targetEntityIds"
         [additionEntityTypes]="additionEntityTypes"
@@ -46,10 +49,12 @@
         [formControl]="additionalInfo"
         label="{{ 'relation.additional-info' | translate }}">
       </tb-json-object-edit>
-      <div class="tb-error-messages" *ngIf="submitted &&
-                                            additionalInfo.invalid" role="alert">
-        <div translate class="tb-error-message">relation.invalid-additional-info</div>
-      </div>
+      @if (submitted &&
+        additionalInfo.invalid) {
+        <div class="tb-error-messages" role="alert">
+          <div translate class="tb-error-message">relation.invalid-additional-info</div>
+        </div>
+      }
     </fieldset>
   </div>
   <div mat-dialog-actions class="flex flex-row">
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
index 99444c2d2f..71166057d5 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
@@ -18,40 +18,46 @@
 <div class="tb-form-panel no-border no-padding">
   <div class="tb-form-table" [formGroup]="relationFiltersFormGroup">
     <div class="tb-form-table-header">
-      <div *ngIf="enableNotOption" class="tb-form-table-header-cell flex-18"></div>
+      @if (enableNotOption) {
+        <div class="tb-form-table-header-cell flex-18"></div>
+      }
       <div class="tb-form-table-header-cell flex-50">{{ 'relation.relation-type' | translate }}</div>
       <div class="tb-form-table-header-cell flex-50">{{ 'entity.entity-types' | translate }}</div>
       <div class="tb-form-table-header-cell actions-header"></div>
     </div>
     <div class="tb-form-table-body" formArrayName="relationFilters">
-      <div class="tb-form-table-row align-start"
-           *ngFor="let relationFilterControl of relationFiltersFormArray.controls; let $index = index">
-        <mat-chip-listbox *ngIf="enableNotOption" class="flex-18 center-stretch" [formControl]="relationFilterControl.get('negate')">
-          <mat-chip-option color="primary" [value]="true">{{ 'relation.not' | translate }}</mat-chip-option>
-        </mat-chip-listbox>
-        <tb-relation-type-autocomplete subscriptSizing="dynamic"
-                                       class="flex-50" showLabel="false"
-                                       [additionalClasses]="['tb-inline-field']"
-                                       appearance="outline"
-                                       [formControl]="relationFilterControl.get('relationType')">
-        </tb-relation-type-autocomplete>
-        <tb-entity-type-list class="entity-type-list flex-50" subscriptSizing="dynamic" appearance="outline"
-                             [additionalClasses]="['tb-inline-field', 'tb-chips', 'flex']"
-                             filledInputPlaceholder="{{ 'entity.add-entity-type' | translate }}"
-                             [allowedEntityTypes]="allowedEntityTypes"
-                             [formControl]="relationFilterControl.get('entityTypes')">
-        </tb-entity-type-list>
-        <div class="tb-form-table-row-cell-buttons">
-          <button type="button"
-                  mat-icon-button
-                  (click)="removeFilter($index)"
-                  [disabled]="isLoading$ | async"
-                  matTooltip="{{ 'relation.remove-filter' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>delete</mat-icon>
-          </button>
+      @for (relationFilterControl of relationFiltersFormArray.controls; track relationFilterControl) {
+        <div class="tb-form-table-row align-start"
+             >
+          @if (enableNotOption) {
+            <mat-chip-listbox class="flex-18 center-stretch" [formControl]="relationFilterControl.get('negate')">
+              <mat-chip-option color="primary" [value]="true">{{ 'relation.not' | translate }}</mat-chip-option>
+            </mat-chip-listbox>
+          }
+          <tb-relation-type-autocomplete subscriptSizing="dynamic"
+                                         class="flex-50" showLabel="false"
+                                         [additionalClasses]="['tb-inline-field']"
+                                         appearance="outline"
+                                         [formControl]="relationFilterControl.get('relationType')">
+          </tb-relation-type-autocomplete>
+          <tb-entity-type-list class="entity-type-list flex-50" subscriptSizing="dynamic" appearance="outline"
+                               [additionalClasses]="['tb-inline-field', 'tb-chips', 'flex']"
+                               filledInputPlaceholder="{{ 'entity.add-entity-type' | translate }}"
+                               [allowedEntityTypes]="allowedEntityTypes"
+                               [formControl]="relationFilterControl.get('entityTypes')">
+          </tb-entity-type-list>
+          <div class="tb-form-table-row-cell-buttons">
+            <button type="button"
+                    mat-icon-button
+                    (click)="removeFilter($index)"
+                    [disabled]="isLoading$ | async"
+                    matTooltip="{{ 'relation.remove-filter' | translate }}"
+                    matTooltipPosition="above">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
         </div>
-      </div>
+      }
       <div [class.!hidden]="relationFiltersFormArray.length">
         <span class="tb-prompt flex items-center justify-center" translate>relation.any-relation</span>
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
index 5335f36ff4..3d6e96f3b6 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
@@ -27,9 +27,11 @@
             <mat-label translate>relation.direction</mat-label>
             <mat-select [ngModel]="direction"
                         (ngModelChange)="directionChanged($event)">
-              <mat-option *ngFor="let type of directionTypes" [value]="type">
-                {{ directionTypeTranslations.get(directions[type]) | translate }}
-              </mat-option>
+              @for (type of directionTypes; track type) {
+                <mat-option [value]="type">
+                  {{ directionTypeTranslations.get(directions[type]) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -87,7 +89,7 @@
     </mat-toolbar>
     <div class="table-container flex-1">
       <table mat-table [dataSource]="dataSource"
-                 matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
+             matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
           <mat-header-cell *matHeaderCellDef style="width: 30px;">
             <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
@@ -115,47 +117,55 @@
                 tooltipPosition="above"
                 icon="content_copy"
                 [style]="{padding: '4px', 'font-size': '16px', color: 'rgba(0,0,0,.87)'}"
-              >
+                >
               </tb-copy-button>
             </div>
           </mat-cell>
         </ng-container>
-        <ng-container *ngIf="direction === directions.FROM" matColumnDef="toEntityTypeName">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.to-entity-type' | translate }} </mat-header-cell>
-          <mat-cell *matCellDef="let relation">
-            {{ relation.toEntityTypeName }}
-          </mat-cell>
-        </ng-container>
-        <ng-container *ngIf="direction === directions.FROM" matColumnDef="toName">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.to-entity-name' | translate }} </mat-header-cell>
-          <mat-cell *matCellDef="let relation">
+        @if (direction === directions.FROM) {
+          <ng-container matColumnDef="toEntityTypeName">
+            <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.to-entity-type' | translate }} </mat-header-cell>
+            <mat-cell *matCellDef="let relation">
+              {{ relation.toEntityTypeName }}
+            </mat-cell>
+          </ng-container>
+        }
+        @if (direction === directions.FROM) {
+          <ng-container matColumnDef="toName">
+            <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.to-entity-name' | translate }} </mat-header-cell>
+            <mat-cell *matCellDef="let relation">
               @if(relation.entityURL){
                 <a class="link" [routerLink]="relation.entityURL">
-                 {{ relation.toName | customTranslate }}
+                  {{ relation.toName | customTranslate }}
                 </a>
               } @else {
                 {{ relation.toName | customTranslate }}
               }
-          </mat-cell>
-        </ng-container>
-        <ng-container *ngIf="direction === directions.TO" matColumnDef="fromEntityTypeName">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.from-entity-type' | translate }} </mat-header-cell>
-          <mat-cell *matCellDef="let relation">
-            {{ relation.fromEntityTypeName }}
-          </mat-cell>
-        </ng-container>
-        <ng-container *ngIf="direction === directions.TO" matColumnDef="fromName">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.from-entity-name' | translate }} </mat-header-cell>
-          <mat-cell *matCellDef="let relation">
-            @if(relation.entityURL){
-              <a class="link" [routerLink]="relation.entityURL">
+            </mat-cell>
+          </ng-container>
+        }
+        @if (direction === directions.TO) {
+          <ng-container matColumnDef="fromEntityTypeName">
+            <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.from-entity-type' | translate }} </mat-header-cell>
+            <mat-cell *matCellDef="let relation">
+              {{ relation.fromEntityTypeName }}
+            </mat-cell>
+          </ng-container>
+        }
+        @if (direction === directions.TO) {
+          <ng-container matColumnDef="fromName">
+            <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.from-entity-name' | translate }} </mat-header-cell>
+            <mat-cell *matCellDef="let relation">
+              @if(relation.entityURL){
+                <a class="link" [routerLink]="relation.entityURL">
+                  {{ relation.fromName | customTranslate }}
+                </a>
+              } @else {
                 {{ relation.fromName | customTranslate }}
-              </a>
-            } @else {
-              {{ relation.fromName | customTranslate }}
-            }
-          </mat-cell>
-        </ng-container>
+              }
+            </mat-cell>
+          </ng-container>
+        }
         <ng-container matColumnDef="actions" stickyEnd>
           <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
           </mat-header-cell>
@@ -179,16 +189,16 @@
         <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
         <mat-row class="mat-row-select"
                  [class.mat-selected]="dataSource.selection.isSelected(relation)"
-                 *matRowDef="let relation; columns: displayedColumns;" (click)="dataSource.selection.toggle(relation)"></mat-row>
+        *matRowDef="let relation; columns: displayedColumns;" (click)="dataSource.selection.toggle(relation)"></mat-row>
       </table>
       <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
-            class="no-data-found flex items-center justify-center" translate>{{ 'relation.no-relations-text' }}</span>
+      class="no-data-found flex items-center justify-center" translate>{{ 'relation.no-relations-text' }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
                    [pageSizeOptions]="[10, 20, 30]"
-                   [hidePageSize]="hidePageSize"></mat-paginator>
+    [hidePageSize]="hidePageSize"></mat-paginator>
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/resources/resources-dialog.component.html b/ui-ngx/src/app/modules/home/components/resources/resources-dialog.component.html
index fa7efc278a..a5757e7e58 100644
--- a/ui-ngx/src/app/modules/home/components/resources/resources-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/resources/resources-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <tb-resources-library #resourcesComponent
                           [standalone]="true"
diff --git a/ui-ngx/src/app/modules/home/components/router-tabs.component.html b/ui-ngx/src/app/modules/home/components/router-tabs.component.html
index 0c9668d848..c71256897d 100644
--- a/ui-ngx/src/app/modules/home/components/router-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/components/router-tabs.component.html
@@ -17,18 +17,24 @@
 -->
 <div class="flex flex-1 flex-col" style="width: 100%;">
   <div class="flex flex-row" style="width: 100%;">
-    <nav *ngIf="!routerOutlet?.activatedRouteData?.hideTabs && !hideCurrentTabs && (tabs$ | async).length > 1" mat-tab-nav-bar mat-stretch-tabs="false" class="tb-router-tabs flex-1" [tabPanel]="tabPanel">
-      <a *ngFor="let tab of tabs$ | async"
-         routerLink="{{tab.path}}"
-         replaceUrl="{{ replaceUrl }}"
-         routerLinkActive
-         #rla="routerLinkActive"
-         mat-tab-link
-         [active]="rla.isActive">
-        <tb-icon *ngIf="tab.icon !== null" class="tb-mat-18">{{tab.icon}}</tb-icon>
-        <span>{{tab.name | translate}}</span>
-      </a>
-    </nav>
+    @if (!routerOutlet?.activatedRouteData?.hideTabs && !hideCurrentTabs && (tabs$ | async).length > 1) {
+      <nav mat-tab-nav-bar mat-stretch-tabs="false" class="tb-router-tabs flex-1" [tabPanel]="tabPanel">
+        @for (tab of tabs$ | async; track tab) {
+          <a
+            routerLink="{{tab.path}}"
+            replaceUrl="{{ replaceUrl }}"
+            routerLinkActive
+            #rla="routerLinkActive"
+            mat-tab-link
+            [active]="rla.isActive">
+            @if (tab.icon !== null) {
+              <tb-icon class="tb-mat-18">{{tab.icon}}</tb-icon>
+            }
+            <span>{{tab.name | translate}}</span>
+          </a>
+        }
+      </nav>
+    }
     <tb-anchor #tabsHeaderComponent></tb-anchor>
   </div>
   <mat-tab-nav-panel #tabPanel class="tb-router-tabs-content flex flex-1 flex-col">
diff --git a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
index 19c65c67f2..c753c9cb11 100644
--- a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
@@ -24,41 +24,52 @@
          [required]="required"
          [matAutocomplete]="ruleChainAutocomplete"
          [class.!hidden]="disabled && selectRuleChainFormGroup.get('ruleChainId').value">
-  <a *ngIf="selectRuleChainFormGroup.get('ruleChainId').value && disabled" aria-label="Open device profile" [routerLink]=ruleChainURL>
-    {{ displayRuleChainFn(selectRuleChainFormGroup.get('ruleChainId').value) }}
-  </a>
-  <button *ngIf="selectRuleChainFormGroup.get('ruleChainId').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (selectRuleChainFormGroup.get('ruleChainId').value && disabled) {
+    <a aria-label="Open device profile" [routerLink]=ruleChainURL>
+      {{ displayRuleChainFn(selectRuleChainFormGroup.get('ruleChainId').value) }}
+    </a>
+  }
+  @if (selectRuleChainFormGroup.get('ruleChainId').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete class="tb-autocomplete"
                     #ruleChainAutocomplete="matAutocomplete"
                     [displayWith]="displayRuleChainFn">
-    <mat-option *ngFor="let ruleChain of filteredRuleChains | async" [value]="ruleChain">
-      <span [innerHTML]="ruleChain.name | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredRuleChains | async)?.length" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span translate>rulechain.no-rulechains-text</span>
-        </div>
-        <ng-template #searchNotEmpty>
-          <span>
+    @for (ruleChain of filteredRuleChains | async; track ruleChain) {
+      <mat-option [value]="ruleChain">
+        <span [innerHTML]="ruleChain.name | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if (!(filteredRuleChains | async)?.length) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span translate>rulechain.no-rulechains-text</span>
+            </div>
+          } @else {
+            <span>
               {{ translate.get('rulechain.no-rulechains-matching',
-            {entity: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
+              {entity: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
+            </span>
+          }
+          <span>
+            <a translate (click)="createDefaultRuleChain($event, searchText)">rulechain.create-new-rulechain</a>
           </span>
-        </ng-template>
-        <span>
-          <a translate (click)="createDefaultRuleChain($event, searchText)">rulechain.create-new-rulechain</a>
-        </span>
-      </div>
-    </mat-option>
+        </div>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="selectRuleChainFormGroup.get('ruleChainId').hasError('required')">
-    {{ 'rulechain.rulechain-required' | translate }}
-  </mat-error>
+  @if (selectRuleChainFormGroup.get('ruleChainId').hasError('required')) {
+    <mat-error>
+      {{ 'rulechain.rulechain-required' | translate }}
+    </mat-error>
+  }
   <mat-hint>
     <ng-content select="[tb-hint]"></ng-content>
   </mat-hint>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/advanced-processing-setting.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/advanced-processing-setting.component.html
index 9f51ca5189..5b403ff611 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/advanced-processing-setting.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/advanced-processing-setting.component.html
@@ -19,26 +19,36 @@
   <tb-example-hint
     [hintText]="'rule-node-config.save-time-series.advanced-settings-hint'"
     [popupHelpLink]="timeseries ? 'rulenode/save_timeseries_node_advanced' : 'rulenode/save_attributes_node_advanced'"
-  >
+    >
   </tb-example-hint>
-  <tb-advanced-processing-setting-row *ngIf="timeseries"
-    formControlName="timeseries"
-    title="{{ 'rule-node-config.save-time-series.time-series' | translate }}"
-  ></tb-advanced-processing-setting-row>
-  <tb-advanced-processing-setting-row *ngIf="attributes"
-    formControlName="attributes"
-    title="{{ 'rule-node-config.save-attribute.attributes' | translate }}"
-  ></tb-advanced-processing-setting-row>
-  <tb-advanced-processing-setting-row *ngIf="latest"
-    formControlName="latest"
-    title="{{ 'rule-node-config.save-time-series.latest' | translate }}"
-  ></tb-advanced-processing-setting-row>
-  <tb-advanced-processing-setting-row *ngIf="webSockets"
-    formControlName="webSockets"
-    title="{{ 'rule-node-config.save-time-series.web-sockets' | translate }}"
-  ></tb-advanced-processing-setting-row>
-  <tb-advanced-processing-setting-row *ngIf="calculatedFields"
-    formControlName="calculatedFields"
-    title="{{ 'rule-node-config.save-time-series.calculated-fields-and-alarm-rules' | translate }}"
-  ></tb-advanced-processing-setting-row>
+  @if (timeseries) {
+    <tb-advanced-processing-setting-row
+      formControlName="timeseries"
+      title="{{ 'rule-node-config.save-time-series.time-series' | translate }}"
+    ></tb-advanced-processing-setting-row>
+  }
+  @if (attributes) {
+    <tb-advanced-processing-setting-row
+      formControlName="attributes"
+      title="{{ 'rule-node-config.save-attribute.attributes' | translate }}"
+    ></tb-advanced-processing-setting-row>
+  }
+  @if (latest) {
+    <tb-advanced-processing-setting-row
+      formControlName="latest"
+      title="{{ 'rule-node-config.save-time-series.latest' | translate }}"
+    ></tb-advanced-processing-setting-row>
+  }
+  @if (webSockets) {
+    <tb-advanced-processing-setting-row
+      formControlName="webSockets"
+      title="{{ 'rule-node-config.save-time-series.web-sockets' | translate }}"
+    ></tb-advanced-processing-setting-row>
+  }
+  @if (calculatedFields) {
+    <tb-advanced-processing-setting-row
+      formControlName="calculatedFields"
+      title="{{ 'rule-node-config.save-time-series.calculated-fields-and-alarm-rules' | translate }}"
+    ></tb-advanced-processing-setting-row>
+  }
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/assign-customer-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/assign-customer-config.component.html
index b50241b5cd..2ac22c6284 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/assign-customer-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/assign-customer-config.component.html
@@ -20,10 +20,12 @@
     <mat-form-field class="mat-block" subscriptSizing="dynamic">
       <mat-label translate>rule-node-config.customer-name-pattern</mat-label>
       <input required matInput formControlName="customerNamePattern">
-      <mat-error *ngIf="assignCustomerConfigForm.get('customerNamePattern').hasError('required') ||
-                        assignCustomerConfigForm.get('customerNamePattern').hasError('pattern')">
-        {{ 'rule-node-config.customer-name-pattern-required' | translate }}
-      </mat-error>
+      @if (assignCustomerConfigForm.get('customerNamePattern').hasError('required') ||
+        assignCustomerConfigForm.get('customerNamePattern').hasError('pattern')) {
+        <mat-error>
+          {{ 'rule-node-config.customer-name-pattern-required' | translate }}
+        </mat-error>
+      }
       <mat-hint translate>rule-node-config.customer-name-pattern-hint</mat-hint>
     </mat-form-field>
     <div class="tb-form-row">
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/attributes-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/attributes-config.component.html
index ef4c5ee8c2..50444e3a87 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/attributes-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/attributes-config.component.html
@@ -67,9 +67,11 @@
         <mat-label>{{ 'rule-node-config.attributes-scope' | translate }}</mat-label>
         <mat-select required
                     class="tb-entity-type-select" matInput formControlName="scope">
-          <mat-option *ngFor="let scope of attributeScopes" [value]="scope">
-            {{ telemetryTypeTranslationsMap.get(scope) | translate }}
-          </mat-option>
+          @for (scope of attributeScopes; track scope) {
+            <mat-option [value]="scope">
+              {{ telemetryTypeTranslationsMap.get(scope) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <mat-form-field class="flex" subscriptSizing="dynamic">
@@ -98,25 +100,27 @@
       <div tb-hint-tooltip-icon="{{ (attributesConfigForm.get('updateAttributesOnlyOnValueChange').value
                                      ? 'rule-node-config.update-attributes-only-on-value-change-hint-enabled'
                                      : 'rule-node-config.update-attributes-only-on-value-change-hint') | translate }}"
-           class="tb-form-row no-border no-padding">
+        class="tb-form-row no-border no-padding">
         <mat-slide-toggle class="mat-slide" formControlName="updateAttributesOnlyOnValueChange">
           {{ 'rule-node-config.update-attributes-only-on-value-change' | translate }}
         </mat-slide-toggle>
       </div>
-      <div tb-hint-tooltip-icon="{{ 'rule-node-config.send-attributes-updated-notification-hint' | translate }}"
-           *ngIf="attributesConfigForm.get('scope').value !== attributeScopeMap.CLIENT_SCOPE"
-           class="tb-form-row no-border no-padding">
-        <mat-slide-toggle class="mat-slide" formControlName="sendAttributesUpdatedNotification">
-          {{ 'rule-node-config.send-attributes-updated-notification' | translate }}
-        </mat-slide-toggle>
-      </div>
-      <div tb-hint-tooltip-icon="{{ 'rule-node-config.notify-device-on-update-hint' | translate }}"
-           *ngIf="attributesConfigForm.get('scope').value === attributeScopeMap.SHARED_SCOPE"
-           class="tb-form-row no-border no-padding">
-        <mat-slide-toggle class="mat-slide" formControlName="notifyDevice">
-          {{ 'rule-node-config.notify-device' | translate }}
-        </mat-slide-toggle>
-      </div>
+      @if (attributesConfigForm.get('scope').value !== attributeScopeMap.CLIENT_SCOPE) {
+        <div tb-hint-tooltip-icon="{{ 'rule-node-config.send-attributes-updated-notification-hint' | translate }}"
+             class="tb-form-row no-border no-padding">
+          <mat-slide-toggle class="mat-slide" formControlName="sendAttributesUpdatedNotification">
+            {{ 'rule-node-config.send-attributes-updated-notification' | translate }}
+          </mat-slide-toggle>
+        </div>
+      }
+      @if (attributesConfigForm.get('scope').value === attributeScopeMap.SHARED_SCOPE) {
+        <div tb-hint-tooltip-icon="{{ 'rule-node-config.notify-device-on-update-hint' | translate }}"
+             class="tb-form-row no-border no-padding">
+          <mat-slide-toggle class="mat-slide" formControlName="notifyDevice">
+            {{ 'rule-node-config.notify-device' | translate }}
+          </mat-slide-toggle>
+        </div>
+      }
     </mat-expansion-panel>
   </section>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/attributes-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/action/attributes-config.component.ts
index ab43627104..5a3d03ee83 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/attributes-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/attributes-config.component.ts
@@ -41,7 +41,7 @@ import {
 export class AttributesConfigComponent extends RuleNodeConfigurationComponent {
 
   attributeScopeMap = AttributeScope;
-  attributeScopes = Object.keys(AttributeScope);
+  attributeScopes = Object.values(AttributeScope);
   telemetryTypeTranslationsMap = telemetryTypeTranslations;
 
   ProcessingType = ProcessingType;
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/clear-alarm-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/clear-alarm-config.component.html
index 328554136a..4248d39f6e 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/clear-alarm-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/clear-alarm-config.component.html
@@ -16,41 +16,47 @@
 
 -->
 <section [formGroup]="clearAlarmConfigForm" class="flex flex-col">
-  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>
-  <tb-js-func *ngIf="clearAlarmConfigForm.get('scriptLang').value === scriptLanguage.JS"
-              #jsFuncComponent
-              formControlName="alarmDetailsBuildJs"
-              functionName="Details"
-              [functionArgs]="['msg', 'metadata', 'msgType']"
-              helpId="rulenode/clear_alarm_node_script_fn"
-              noValidate="true">
-    <button toolbarSuffixButton
-            mat-icon-button
-            matTooltip="{{ testScriptLabel | translate }}"
-            matTooltipPosition="above"
-            class="tb-mat-32"
-            (click)="testScript()">
-      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
-    </button>
-  </tb-js-func>
-  <tb-js-func *ngIf="clearAlarmConfigForm.get('scriptLang').value === scriptLanguage.TBEL"
-              #tbelFuncComponent
-              formControlName="alarmDetailsBuildTbel"
-              functionName="Details"
-              [functionArgs]="['msg', 'metadata', 'msgType']"
-              [disableUndefinedCheck]="true"
-              [scriptLanguage]="scriptLanguage.TBEL"
-              helpId="rulenode/tbel/clear_alarm_node_script_fn"
-              noValidate="true">
-    <button toolbarSuffixButton
-            mat-icon-button
-            matTooltip="{{ testScriptLabel | translate }}"
-            matTooltipPosition="above"
-            class="tb-mat-32"
-            (click)="testScript()">
-      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
-    </button>
-  </tb-js-func>
+  @if (tbelEnabled) {
+    <tb-script-lang formControlName="scriptLang"></tb-script-lang>
+  }
+  @if (clearAlarmConfigForm.get('scriptLang').value === scriptLanguage.JS) {
+    <tb-js-func
+      #jsFuncComponent
+      formControlName="alarmDetailsBuildJs"
+      functionName="Details"
+      [functionArgs]="['msg', 'metadata', 'msgType']"
+      helpId="rulenode/clear_alarm_node_script_fn"
+      noValidate="true">
+      <button toolbarSuffixButton
+              mat-icon-button
+              matTooltip="{{ testScriptLabel | translate }}"
+              matTooltipPosition="above"
+              class="tb-mat-32"
+              (click)="testScript()">
+        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
+      </button>
+    </tb-js-func>
+  }
+  @if (clearAlarmConfigForm.get('scriptLang').value === scriptLanguage.TBEL) {
+    <tb-js-func
+      #tbelFuncComponent
+      formControlName="alarmDetailsBuildTbel"
+      functionName="Details"
+      [functionArgs]="['msg', 'metadata', 'msgType']"
+      [disableUndefinedCheck]="true"
+      [scriptLanguage]="scriptLanguage.TBEL"
+      helpId="rulenode/tbel/clear_alarm_node_script_fn"
+      noValidate="true">
+      <button toolbarSuffixButton
+              mat-icon-button
+              matTooltip="{{ testScriptLabel | translate }}"
+              matTooltipPosition="above"
+              class="tb-mat-32"
+              (click)="testScript()">
+        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
+      </button>
+    </tb-js-func>
+  }
   <div class="flex flex-row" style="padding-bottom: 16px;">
     <button mat-button mat-raised-button color="primary" (click)="testScript()">
       {{ testScriptLabel | translate }}
@@ -59,9 +65,11 @@
   <mat-form-field class="mat-block" subscriptSizing="dynamic">
     <mat-label translate>rule-node-config.alarm-type</mat-label>
     <input required matInput formControlName="alarmType">
-    <mat-error *ngIf="clearAlarmConfigForm.get('alarmType').hasError('required')">
-      {{ 'rule-node-config.alarm-type-required' | translate }}
-    </mat-error>
+    @if (clearAlarmConfigForm.get('alarmType').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.alarm-type-required' | translate }}
+      </mat-error>
+    }
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/create-alarm-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/create-alarm-config.component.html
index f5e933a6d5..eba427c385 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/create-alarm-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/create-alarm-config.component.html
@@ -19,110 +19,137 @@
   <mat-checkbox formControlName="useMessageAlarmData">
     {{ 'rule-node-config.use-message-alarm-data' | translate }}
   </mat-checkbox>
-  <mat-checkbox formControlName="overwriteAlarmDetails" *ngIf="createAlarmConfigForm.get('useMessageAlarmData').value === true">
-    {{ 'rule-node-config.overwrite-alarm-details' | translate }}
-  </mat-checkbox>
-  <section class="flex flex-col" *ngIf="createAlarmConfigForm.get('useMessageAlarmData').value === false ||
-                                    createAlarmConfigForm.get('overwriteAlarmDetails').value === true">
-    <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>
-    <tb-js-func *ngIf="createAlarmConfigForm.get('scriptLang').value === scriptLanguage.JS"
-                #jsFuncComponent
-                formControlName="alarmDetailsBuildJs"
-                functionName="Details"
-                [functionArgs]="['msg', 'metadata', 'msgType']"
-                helpId="rulenode/create_alarm_node_script_fn"
-                noValidate="true">
-      <button toolbarSuffixButton
-              mat-icon-button
-              matTooltip="{{ testScriptLabel | translate }}"
-              matTooltipPosition="above"
-              class="tb-mat-32"
-              (click)="testScript()">
-        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
-      </button>
-    </tb-js-func>
-    <tb-js-func *ngIf="createAlarmConfigForm.get('scriptLang').value === scriptLanguage.TBEL"
-                #tbelFuncComponent
-                formControlName="alarmDetailsBuildTbel"
-                functionName="Details"
-                [functionArgs]="['msg', 'metadata', 'msgType']"
-                [disableUndefinedCheck]="true"
-                [scriptLanguage]="scriptLanguage.TBEL"
-                helpId="rulenode/tbel/create_alarm_node_script_fn"
-                noValidate="true">
-      <button toolbarSuffixButton
-              mat-icon-button
-              matTooltip="{{ testScriptLabel | translate }}"
-              matTooltipPosition="above"
-              class="tb-mat-32"
-              (click)="testScript()">
-        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
-      </button>
-    </tb-js-func>
-    <div class="flex flex-row" style="padding-bottom: 16px;">
-      <button mat-button mat-raised-button color="primary" (click)="testScript()">
-        {{ testScriptLabel | translate }}
-      </button>
-    </div>
-  </section>
-  <section class="flex flex-col" *ngIf="createAlarmConfigForm.get('useMessageAlarmData').value === false">
-    <mat-form-field class="flex-1" subscriptSizing="dynamic">
-      <mat-label translate>rule-node-config.alarm-type</mat-label>
-      <input required matInput formControlName="alarmType">
-      <mat-error *ngIf="createAlarmConfigForm.get('alarmType').hasError('required')">
-        {{ 'rule-node-config.alarm-type-required' | translate }}
-      </mat-error>
-      <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
-    </mat-form-field>
-    <mat-checkbox formControlName="dynamicSeverity">
-      {{ 'rule-node-config.use-alarm-severity-pattern' | translate }}
-    </mat-checkbox>
-    <mat-form-field class="flex-1" *ngIf="!createAlarmConfigForm.get('dynamicSeverity').value">
-      <mat-label translate>rule-node-config.alarm-severity</mat-label>
-      <mat-select formControlName="severity" required>
-        <mat-option *ngFor="let severity of alarmSeverities" [value]="severity">
-          {{ alarmSeverityTranslationMap.get(severity) | translate }}
-        </mat-option>
-      </mat-select>
-      <mat-error *ngIf="createAlarmConfigForm.get('severity').hasError('required')">
-        {{ 'rule-node-config.alarm-severity-required' | translate }}
-      </mat-error>
-    </mat-form-field>
-    <mat-form-field class="flex-1" *ngIf="createAlarmConfigForm.get('dynamicSeverity').value" subscriptSizing="dynamic">
-      <mat-label translate>rule-node-config.alarm-severity-pattern</mat-label>
-      <input matInput formControlName="severity" required>
-      <mat-error *ngIf="createAlarmConfigForm.get('severity').hasError('required')">
-        {{ 'rule-node-config.alarm-severity-required' | translate }}
-      </mat-error>
-      <mat-hint [innerHTML]="'rule-node-config.alarm-severity-pattern-hint' | translate | safe: 'html'"></mat-hint>
-    </mat-form-field>
-    <mat-checkbox formControlName="propagate">
-      {{ 'rule-node-config.propagate' | translate }}
+  @if (createAlarmConfigForm.get('useMessageAlarmData').value === true) {
+    <mat-checkbox formControlName="overwriteAlarmDetails">
+      {{ 'rule-node-config.overwrite-alarm-details' | translate }}
     </mat-checkbox>
-    <section *ngIf="createAlarmConfigForm.get('propagate').value === true">
-      <mat-form-field floatLabel="always" class="mat-block" subscriptSizing="dynamic">
-        <mat-label translate>rule-node-config.relation-types-list</mat-label>
-        <mat-chip-grid #relationTypesChipList>
-          <mat-chip-row
-            *ngFor="let key of createAlarmConfigForm.get('relationTypes').value;"
-            (removed)="removeKey(key, 'relationTypes')">
-            {{key}}
-            <mat-icon matChipRemove>close</mat-icon>
-          </mat-chip-row>
-          <input matInput type="text" placeholder="{{'rule-node-config.relation-types-list' | translate}}"
-                 [matChipInputFor]="relationTypesChipList"
-                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                 (matChipInputTokenEnd)="addKey($event, 'relationTypes')"
-                 [matChipInputAddOnBlur]="true">
-        </mat-chip-grid>
-        <mat-hint translate>rule-node-config.relation-types-list-hint</mat-hint>
+  }
+  @if (createAlarmConfigForm.get('useMessageAlarmData').value === false ||
+    createAlarmConfigForm.get('overwriteAlarmDetails').value === true) {
+    <section class="flex flex-col">
+      @if (tbelEnabled) {
+        <tb-script-lang formControlName="scriptLang"></tb-script-lang>
+      }
+      @if (createAlarmConfigForm.get('scriptLang').value === scriptLanguage.JS) {
+        <tb-js-func
+          #jsFuncComponent
+          formControlName="alarmDetailsBuildJs"
+          functionName="Details"
+          [functionArgs]="['msg', 'metadata', 'msgType']"
+          helpId="rulenode/create_alarm_node_script_fn"
+          [noValidate]="true">
+          <button toolbarSuffixButton
+                  mat-icon-button
+                  matTooltip="{{ testScriptLabel | translate }}"
+                  matTooltipPosition="above"
+                  class="tb-mat-32"
+                  (click)="testScript()">
+            <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
+          </button>
+        </tb-js-func>
+      }
+      @if (createAlarmConfigForm.get('scriptLang').value === scriptLanguage.TBEL) {
+        <tb-js-func
+          #tbelFuncComponent
+          formControlName="alarmDetailsBuildTbel"
+          functionName="Details"
+          [functionArgs]="['msg', 'metadata', 'msgType']"
+          [disableUndefinedCheck]="true"
+          [scriptLanguage]="scriptLanguage.TBEL"
+          helpId="rulenode/tbel/create_alarm_node_script_fn"
+          [noValidate]="true">
+          <button toolbarSuffixButton
+                  mat-icon-button
+                  matTooltip="{{ testScriptLabel | translate }}"
+                  matTooltipPosition="above"
+                  class="tb-mat-32"
+                  (click)="testScript()">
+            <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
+          </button>
+        </tb-js-func>
+      }
+      <div class="flex flex-row" style="padding-bottom: 16px;">
+        <button mat-button mat-raised-button color="primary" (click)="testScript()">
+          {{ testScriptLabel | translate }}
+        </button>
+      </div>
+    </section>
+  }
+  @if (createAlarmConfigForm.get('useMessageAlarmData').value === false) {
+    <section class="flex flex-col">
+      <mat-form-field class="flex-1" subscriptSizing="dynamic">
+        <mat-label translate>rule-node-config.alarm-type</mat-label>
+        <input required matInput formControlName="alarmType">
+        @if (createAlarmConfigForm.get('alarmType').hasError('required')) {
+          <mat-error>
+            {{ 'rule-node-config.alarm-type-required' | translate }}
+          </mat-error>
+        }
+        <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
       </mat-form-field>
+      <mat-checkbox formControlName="dynamicSeverity">
+        {{ 'rule-node-config.use-alarm-severity-pattern' | translate }}
+      </mat-checkbox>
+      @if (!createAlarmConfigForm.get('dynamicSeverity').value) {
+        <mat-form-field class="flex-1">
+          <mat-label translate>rule-node-config.alarm-severity</mat-label>
+          <mat-select formControlName="severity" required>
+            @for (severity of alarmSeverities; track severity) {
+              <mat-option [value]="severity">
+                {{ alarmSeverityTranslationMap.get(severity) | translate }}
+              </mat-option>
+            }
+          </mat-select>
+          @if (createAlarmConfigForm.get('severity').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.alarm-severity-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+      }
+      @if (createAlarmConfigForm.get('dynamicSeverity').value) {
+        <mat-form-field class="flex-1" subscriptSizing="dynamic">
+          <mat-label translate>rule-node-config.alarm-severity-pattern</mat-label>
+          <input matInput formControlName="severity" required>
+          @if (createAlarmConfigForm.get('severity').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.alarm-severity-required' | translate }}
+            </mat-error>
+          }
+          <mat-hint [innerHTML]="'rule-node-config.alarm-severity-pattern-hint' | translate | safe: 'html'"></mat-hint>
+        </mat-form-field>
+      }
+      <mat-checkbox formControlName="propagate">
+        {{ 'rule-node-config.propagate' | translate }}
+      </mat-checkbox>
+      @if (createAlarmConfigForm.get('propagate').value === true) {
+        <section>
+          <mat-form-field floatLabel="always" class="mat-block" subscriptSizing="dynamic">
+            <mat-label translate>rule-node-config.relation-types-list</mat-label>
+            <mat-chip-grid #relationTypesChipList>
+              @for (key of createAlarmConfigForm.get('relationTypes').value; track key) {
+                <mat-chip-row
+                  (removed)="removeKey(key, 'relationTypes')">
+                  {{key}}
+                  <mat-icon matChipRemove>close</mat-icon>
+                </mat-chip-row>
+              }
+              <input matInput type="text" placeholder="{{'rule-node-config.relation-types-list' | translate}}"
+                     [matChipInputFor]="relationTypesChipList"
+                     [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                     (matChipInputTokenEnd)="addKey($event, 'relationTypes')"
+                     [matChipInputAddOnBlur]="true">
+            </mat-chip-grid>
+            <mat-hint translate>rule-node-config.relation-types-list-hint</mat-hint>
+          </mat-form-field>
+        </section>
+      }
+      <mat-checkbox formControlName="propagateToOwner">
+        {{ 'rule-node-config.propagate-to-owner' | translate }}
+      </mat-checkbox>
+      <mat-checkbox formControlName="propagateToTenant">
+        {{ 'rule-node-config.propagate-to-tenant' | translate }}
+      </mat-checkbox>
     </section>
-    <mat-checkbox formControlName="propagateToOwner">
-      {{ 'rule-node-config.propagate-to-owner' | translate }}
-    </mat-checkbox>
-    <mat-checkbox formControlName="propagateToTenant">
-      {{ 'rule-node-config.propagate-to-tenant' | translate }}
-    </mat-checkbox>
-  </section>
+  }
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/create-alarm-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/action/create-alarm-config.component.ts
index cd2122a8dd..06cf94b74d 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/create-alarm-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/create-alarm-config.component.ts
@@ -42,7 +42,7 @@ export class CreateAlarmConfigComponent extends RuleNodeConfigurationComponent {
   @ViewChild('jsFuncComponent', {static: false}) jsFuncComponent: JsFuncComponent;
   @ViewChild('tbelFuncComponent', {static: false}) tbelFuncComponent: JsFuncComponent;
 
-  alarmSeverities = Object.keys(AlarmSeverity);
+  alarmSeverities = Object.values(AlarmSeverity);
   alarmSeverityTranslationMap = alarmSeverityTranslations;
   createAlarmConfigForm: UntypedFormGroup;
 
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/create-relation-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/create-relation-config.component.html
index b7b72ef390..817ff84b53 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/create-relation-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/create-relation-config.component.html
@@ -22,9 +22,11 @@
       <mat-form-field class="mat-block" hideRequiredMarker>
         <mat-label translate>relation.direction</mat-label>
         <mat-select required matInput formControlName="direction">
-          <mat-option *ngFor="let type of directionTypes" [value]="type">
-            {{ directionTypeTranslations.get(type) | translate }}
-          </mat-option>
+          @for (type of directionTypes; track type) {
+            <mat-option [value]="type">
+              {{ directionTypeTranslations.get(type) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <tb-relation-type-autocomplete
@@ -45,36 +47,43 @@
         formControlName="entityType">
       </tb-entity-type-select>
 
-      <mat-form-field *ngIf="createRelationConfigForm.get('entityType').value &&
-                      createRelationConfigForm.get('entityType').value !== entityType.TENANT"
-                      class="mat-block flex-1">
-        <mat-label>{{ entityTypeNamePatternTranslation.get(createRelationConfigForm.get('entityType').value) | translate }}</mat-label>
-        <input required matInput formControlName="entityNamePattern">
-      </mat-form-field>
+      @if (createRelationConfigForm.get('entityType').value &&
+        createRelationConfigForm.get('entityType').value !== entityType.TENANT) {
+        <mat-form-field
+          class="mat-block flex-1">
+          <mat-label>{{ entityTypeNamePatternTranslation.get(createRelationConfigForm.get('entityType').value) | translate }}</mat-label>
+          <input required matInput formControlName="entityNamePattern">
+        </mat-form-field>
+      }
 
-      <mat-form-field *ngIf="createRelationConfigForm.get('entityType').value === entityType.DEVICE ||
-                           createRelationConfigForm.get('entityType').value === entityType.ASSET"
-                      class="mat-block flex-1">
-        <mat-label translate>rule-node-config.profile-name</mat-label>
-        <input matInput formControlName="entityTypePattern">
-      </mat-form-field>
+      @if (createRelationConfigForm.get('entityType').value === entityType.DEVICE ||
+        createRelationConfigForm.get('entityType').value === entityType.ASSET) {
+        <mat-form-field
+          class="mat-block flex-1">
+          <mat-label translate>rule-node-config.profile-name</mat-label>
+          <input matInput formControlName="entityTypePattern">
+        </mat-form-field>
+      }
     </div>
 
-    <tb-example-hint [hintText]="'rule-node-config.kv-map-pattern-hint'"
-                     *ngIf="createRelationConfigForm.get('entityType').value === entityType.CUSTOMER ||
-                     createRelationConfigForm.get('entityType').value === entityType.DEVICE ||
-                     createRelationConfigForm.get('entityType').value === entityType.ASSET"></tb-example-hint>
+    @if (createRelationConfigForm.get('entityType').value === entityType.CUSTOMER ||
+      createRelationConfigForm.get('entityType').value === entityType.DEVICE ||
+      createRelationConfigForm.get('entityType').value === entityType.ASSET) {
+      <tb-example-hint [hintText]="'rule-node-config.kv-map-pattern-hint'"
+      ></tb-example-hint>
+    }
 
-    <div tb-hint-tooltip-icon="{{ 'rule-node-config.create-entity-if-not-exists-hint' | translate }}"
-         *ngIf="createRelationConfigForm.get('entityType').value === entityType.CUSTOMER ||
-                  createRelationConfigForm.get('entityType').value === entityType.DEVICE ||
-                  createRelationConfigForm.get('entityType').value === entityType.ASSET"
-         style="margin-bottom: 18px"
-         class="tb-form-row no-border no-padding">
-      <mat-slide-toggle class="mat-slide" formControlName="createEntityIfNotExists">
-        {{ 'rule-node-config.create-entity-if-not-exists' | translate }}
-      </mat-slide-toggle>
-    </div>
+    @if (createRelationConfigForm.get('entityType').value === entityType.CUSTOMER ||
+      createRelationConfigForm.get('entityType').value === entityType.DEVICE ||
+      createRelationConfigForm.get('entityType').value === entityType.ASSET) {
+      <div tb-hint-tooltip-icon="{{ 'rule-node-config.create-entity-if-not-exists-hint' | translate }}"
+           style="margin-bottom: 18px"
+           class="tb-form-row no-border no-padding">
+        <mat-slide-toggle class="mat-slide" formControlName="createEntityIfNotExists">
+          {{ 'rule-node-config.create-entity-if-not-exists' | translate }}
+        </mat-slide-toggle>
+      </div>
+    }
   </div>
   <section class="tb-form-panel stroked no-padding">
     <mat-expansion-panel class="tb-settings">
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/create-relation-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/action/create-relation-config.component.ts
index 5d3e85e565..1939b4abbf 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/create-relation-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/create-relation-config.component.ts
@@ -28,7 +28,7 @@ import { EntityType } from '@app/shared/models/entity-type.models';
 })
 export class CreateRelationConfigComponent extends RuleNodeConfigurationComponent {
 
-  directionTypes = Object.keys(EntitySearchDirection);
+  directionTypes = Object.values(EntitySearchDirection);
   directionTypeTranslations  = new Map<EntitySearchDirection, string>(
     [
       [EntitySearchDirection.FROM, 'rule-node-config.search-direction-from'],
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/delete-attributes-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/delete-attributes-config.component.html
index 165510c657..cb0b89d1ed 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/delete-attributes-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/delete-attributes-config.component.html
@@ -24,9 +24,11 @@
         <mat-label>{{ 'rule-node-config.attributes-scope' | translate }}</mat-label>
         <mat-select required
                     class="tb-entity-type-select" matInput formControlName="scope">
-          <mat-option *ngFor="let scope of attributeScopes" [value]="scope">
-            {{ telemetryTypeTranslationsMap.get(scope) | translate }}
-          </mat-option>
+          @for (scope of attributeScopes; track scope) {
+            <mat-option [value]="scope">
+              {{ telemetryTypeTranslationsMap.get(scope) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <mat-form-field class="flex">
@@ -50,19 +52,22 @@
   <mat-form-field class="mat-block" subscriptSizing="dynamic">
     <mat-label>{{ 'rule-node-config.attributes-keys' | translate }}</mat-label>
     <mat-chip-grid formControlName="keys" #attributeChipList>
-      <mat-chip-row
-        *ngFor="let key of deleteAttributesConfigForm.get('keys').value;"
-        (removed)="removeKey(key)">
-        {{key}}
-        <mat-icon matChipRemove>close</mat-icon>
-      </mat-chip-row>
+      @for (key of deleteAttributesConfigForm.get('keys').value; track key) {
+        <mat-chip-row
+          (removed)="removeKey(key)">
+          {{key}}
+          <mat-icon matChipRemove>close</mat-icon>
+        </mat-chip-row>
+      }
       <input matInput type="text"
              [matChipInputFor]="attributeChipList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              (matChipInputTokenEnd)="addKey($event)"
              [matChipInputAddOnBlur]="true">
     </mat-chip-grid>
-    <mat-error *ngIf="deleteAttributesConfigForm.get('keys').hasError('required')">{{ 'rule-node-config.attributes-keys-required' | translate }}</mat-error>
+    @if (deleteAttributesConfigForm.get('keys').hasError('required')) {
+      <mat-error>{{ 'rule-node-config.attributes-keys-required' | translate }}</mat-error>
+    }
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
 
@@ -77,13 +82,14 @@
           {{ 'rule-node-config.send-attributes-deleted-notification' | translate }}
         </mat-slide-toggle>
       </div>
-      <div tb-hint-tooltip-icon="{{ 'rule-node-config.notify-device-on-delete-hint' | translate }}"
-           *ngIf="deleteAttributesConfigForm.get('scope').value === attributeScopeMap.SHARED_SCOPE"
-           class="tb-form-row no-border no-padding">
-        <mat-slide-toggle class="mat-slide" formControlName="notifyDevice">
-          {{ 'rule-node-config.notify-device' | translate }}
-        </mat-slide-toggle>
-      </div>
+      @if (deleteAttributesConfigForm.get('scope').value === attributeScopeMap.SHARED_SCOPE) {
+        <div tb-hint-tooltip-icon="{{ 'rule-node-config.notify-device-on-delete-hint' | translate }}"
+             class="tb-form-row no-border no-padding">
+          <mat-slide-toggle class="mat-slide" formControlName="notifyDevice">
+            {{ 'rule-node-config.notify-device' | translate }}
+          </mat-slide-toggle>
+        </div>
+      }
     </mat-expansion-panel>
   </section>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/delete-attributes-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/action/delete-attributes-config.component.ts
index 565b5e9dea..90818f9ceb 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/delete-attributes-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/delete-attributes-config.component.ts
@@ -33,7 +33,7 @@ export class DeleteAttributesConfigComponent extends RuleNodeConfigurationCompon
 
   deleteAttributesConfigForm: UntypedFormGroup;
   attributeScopeMap = AttributeScope;
-  attributeScopes = Object.keys(AttributeScope);
+  attributeScopes = Object.values(AttributeScope);
   telemetryTypeTranslationsMap = telemetryTypeTranslations;
   separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
 
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/delete-relation-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/delete-relation-config.component.html
index dd6c2fab93..7899e4773d 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/delete-relation-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/delete-relation-config.component.html
@@ -22,9 +22,11 @@
       <mat-form-field class="mat-block" hideRequiredMarker>
         <mat-label translate>relation.direction</mat-label>
         <mat-select required matInput formControlName="direction">
-          <mat-option *ngFor="let type of directionTypes" [value]="type">
-            {{ directionTypeTranslations.get(type) | translate }}
-          </mat-option>
+          @for (type of directionTypes; track type) {
+            <mat-option [value]="type">
+              {{ directionTypeTranslations.get(type) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <tb-relation-type-autocomplete
@@ -40,23 +42,29 @@
         {{ 'rule-node-config.delete-relation-with-specific-entity' | translate }}
       </mat-slide-toggle>
     </div>
-    <div *ngIf="deleteRelationConfigForm.get('deleteForSingleEntity').value">
-      <div class="flex flex-row gap-2.5">
-        <tb-entity-type-select
-          class="flex-1"
-          showLabel
-          required
-          [allowedEntityTypes]="allowedEntityTypes"
-          formControlName="entityType">
-        </tb-entity-type-select>
-        <mat-form-field *ngIf="deleteRelationConfigForm.get('entityType').value && deleteRelationConfigForm.get('entityType').value !== entityType.TENANT"
-                        class="mat-block flex-1">
-          <mat-label>{{ entityTypeNamePatternTranslation.get(deleteRelationConfigForm.get('entityType').value) | translate }}</mat-label>
-          <input required matInput formControlName="entityNamePattern">
-        </mat-form-field>
+    @if (deleteRelationConfigForm.get('deleteForSingleEntity').value) {
+      <div>
+        <div class="flex flex-row gap-2.5">
+          <tb-entity-type-select
+            class="flex-1"
+            showLabel
+            required
+            [allowedEntityTypes]="allowedEntityTypes"
+            formControlName="entityType">
+          </tb-entity-type-select>
+          @if (deleteRelationConfigForm.get('entityType').value && deleteRelationConfigForm.get('entityType').value !== entityType.TENANT) {
+            <mat-form-field
+              class="mat-block flex-1">
+              <mat-label>{{ entityTypeNamePatternTranslation.get(deleteRelationConfigForm.get('entityType').value) | translate }}</mat-label>
+              <input required matInput formControlName="entityNamePattern">
+            </mat-form-field>
+          }
+        </div>
+        @if (deleteRelationConfigForm.get('entityType').value && deleteRelationConfigForm.get('entityType').value !== entityType.TENANT) {
+          <tb-example-hint
+          [hintText]="'rule-node-config.kv-map-single-pattern-hint'"></tb-example-hint>
+        }
       </div>
-      <tb-example-hint *ngIf="deleteRelationConfigForm.get('entityType').value && deleteRelationConfigForm.get('entityType').value !== entityType.TENANT"
-                       [hintText]="'rule-node-config.kv-map-single-pattern-hint'"></tb-example-hint>
-    </div>
+    }
   </div>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/delete-relation-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/action/delete-relation-config.component.ts
index 606035bd08..d41def61d3 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/delete-relation-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/delete-relation-config.component.ts
@@ -28,7 +28,7 @@ import { RuleNodeConfiguration, RuleNodeConfigurationComponent } from '@app/shar
 })
 export class DeleteRelationConfigComponent extends RuleNodeConfigurationComponent {
 
-  directionTypes = Object.keys(EntitySearchDirection);
+  directionTypes = Object.values(EntitySearchDirection);
 
   directionTypeTranslations  = new Map<EntitySearchDirection, string>(
     [
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/device-state-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/device-state-config.component.html
index c2e9a00a6e..cb3d6d2b7e 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/device-state-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/device-state-config.component.html
@@ -16,12 +16,14 @@
 
 -->
 <section [formGroup]="deviceState">
-    <mat-form-field class="mat-block" subscriptSizing="dynamic">
-        <mat-label>{{ 'rule-node-config.select-device-connectivity-event' | translate }}</mat-label>
-        <mat-select formControlName="event">
-            <mat-option *ngFor="let eventOption of eventOptions" [value]="eventOption">
-                {{ messageTypeNames.get(eventOption) }}
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
+  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+    <mat-label>{{ 'rule-node-config.select-device-connectivity-event' | translate }}</mat-label>
+    <mat-select formControlName="event">
+      @for (eventOption of eventOptions; track eventOption) {
+        <mat-option [value]="eventOption">
+          {{ messageTypeNames.get(eventOption) }}
+        </mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/generator-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/generator-config.component.html
index 4463973874..cea850d0be 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/generator-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/generator-config.component.html
@@ -22,22 +22,30 @@
       <mat-form-field class="flex">
         <mat-label translate>rule-node-config.message-count</mat-label>
         <input required type="number" min="0" step="1" matInput formControlName="msgCount">
-        <mat-error *ngIf="generatorConfigForm.get('msgCount').hasError('required')">
-          {{ 'rule-node-config.message-count-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="generatorConfigForm.get('msgCount').hasError('min')">
-          {{ 'rule-node-config.min-message-count-message' | translate }}
-        </mat-error>
+        @if (generatorConfigForm.get('msgCount').hasError('required')) {
+          <mat-error>
+            {{ 'rule-node-config.message-count-required' | translate }}
+          </mat-error>
+        }
+        @if (generatorConfigForm.get('msgCount').hasError('min')) {
+          <mat-error>
+            {{ 'rule-node-config.min-message-count-message' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
       <mat-form-field class="flex">
         <mat-label translate>rule-node-config.generation-frequency-seconds</mat-label>
         <input required type="number" min="1" step="1" matInput formControlName="periodInSeconds">
-        <mat-error *ngIf="generatorConfigForm.get('periodInSeconds').hasError('required')">
-          {{ 'rule-node-config.generation-frequency-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="generatorConfigForm.get('periodInSeconds').hasError('min')">
-          {{ 'rule-node-config.min-generation-frequency-message' | translate }}
-        </mat-error>
+        @if (generatorConfigForm.get('periodInSeconds').hasError('required')) {
+          <mat-error>
+            {{ 'rule-node-config.generation-frequency-required' | translate }}
+          </mat-error>
+        }
+        @if (generatorConfigForm.get('periodInSeconds').hasError('min')) {
+          <mat-error>
+            {{ 'rule-node-config.min-generation-frequency-message' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
     </div>
   </div>
@@ -57,56 +65,62 @@
       <mat-expansion-panel-header>
         <mat-panel-title translate>rule-node-config.generator-function</mat-panel-title>
       </mat-expansion-panel-header>
-      <tb-js-func *ngIf="generatorConfigForm.get('scriptLang').value === scriptLanguage.JS"
-                  #jsFuncComponent
-                  formControlName="jsScript"
-                  functionName="Generate"
-                  [functionArgs]="['prevMsg', 'prevMetadata', 'prevMsgType']"
-                  helpId="rulenode/generator_node_script_fn"
-                  noValidate="true">
-        <tb-toggle-select toolbarPrefixButton formControlName="scriptLang" appearance="fill" *ngIf="tbelEnabled">
-          <tb-toggle-option [value]="scriptLanguage.TBEL">
-            {{ 'rule-node-config.script-lang-tbel' | translate }}
-          </tb-toggle-option>
-          <tb-toggle-option [value]="scriptLanguage.JS">
-            {{ 'rule-node-config.script-lang-js' | translate }}
-          </tb-toggle-option>
-        </tb-toggle-select>
-        <button toolbarSuffixButton
-                mat-icon-button
-                matTooltip="{{ testScriptLabel | translate }}"
-                matTooltipPosition="above"
-                class="tb-mat-32"
-                (click)="testScript()">
-          <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
-        </button>
-      </tb-js-func>
-      <tb-js-func *ngIf="generatorConfigForm.get('scriptLang').value === scriptLanguage.TBEL"
-                  #tbelFuncComponent
-                  formControlName="tbelScript"
-                  functionName="Generate"
-                  [functionArgs]="['prevMsg', 'prevMetadata', 'prevMsgType']"
-                  [disableUndefinedCheck]="true"
-                  [scriptLanguage]="scriptLanguage.TBEL"
-                  helpId="rulenode/tbel/generator_node_script_fn"
-                  noValidate="true">
-        <tb-toggle-select toolbarPrefixButton formControlName="scriptLang" appearance="fill">
-          <tb-toggle-option [value]="scriptLanguage.TBEL">
-            {{ 'rule-node-config.script-lang-tbel' | translate }}
-          </tb-toggle-option>
-          <tb-toggle-option [value]="scriptLanguage.JS">
-            {{ 'rule-node-config.script-lang-js' | translate }}
-          </tb-toggle-option>
-        </tb-toggle-select>
-        <button toolbarSuffixButton
-                mat-icon-button
-                matTooltip="{{ testScriptLabel | translate }}"
-                matTooltipPosition="above"
-                class="tb-mat-32"
-                (click)="testScript()">
-          <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
-        </button>
-      </tb-js-func>
+      @if (generatorConfigForm.get('scriptLang').value === scriptLanguage.JS) {
+        <tb-js-func
+          #jsFuncComponent
+          formControlName="jsScript"
+          functionName="Generate"
+          [functionArgs]="['prevMsg', 'prevMetadata', 'prevMsgType']"
+          helpId="rulenode/generator_node_script_fn"
+          noValidate="true">
+          @if (tbelEnabled) {
+            <tb-toggle-select toolbarPrefixButton formControlName="scriptLang" appearance="fill">
+              <tb-toggle-option [value]="scriptLanguage.TBEL">
+                {{ 'rule-node-config.script-lang-tbel' | translate }}
+              </tb-toggle-option>
+              <tb-toggle-option [value]="scriptLanguage.JS">
+                {{ 'rule-node-config.script-lang-js' | translate }}
+              </tb-toggle-option>
+            </tb-toggle-select>
+          }
+          <button toolbarSuffixButton
+                  mat-icon-button
+                  matTooltip="{{ testScriptLabel | translate }}"
+                  matTooltipPosition="above"
+                  class="tb-mat-32"
+                  (click)="testScript()">
+            <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
+          </button>
+        </tb-js-func>
+      }
+      @if (generatorConfigForm.get('scriptLang').value === scriptLanguage.TBEL) {
+        <tb-js-func
+          #tbelFuncComponent
+          formControlName="tbelScript"
+          functionName="Generate"
+          [functionArgs]="['prevMsg', 'prevMetadata', 'prevMsgType']"
+          [disableUndefinedCheck]="true"
+          [scriptLanguage]="scriptLanguage.TBEL"
+          helpId="rulenode/tbel/generator_node_script_fn"
+          noValidate="true">
+          <tb-toggle-select toolbarPrefixButton formControlName="scriptLang" appearance="fill">
+            <tb-toggle-option [value]="scriptLanguage.TBEL">
+              {{ 'rule-node-config.script-lang-tbel' | translate }}
+            </tb-toggle-option>
+            <tb-toggle-option [value]="scriptLanguage.JS">
+              {{ 'rule-node-config.script-lang-js' | translate }}
+            </tb-toggle-option>
+          </tb-toggle-select>
+          <button toolbarSuffixButton
+                  mat-icon-button
+                  matTooltip="{{ testScriptLabel | translate }}"
+                  matTooltipPosition="above"
+                  class="tb-mat-32"
+                  (click)="testScript()">
+            <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
+          </button>
+        </tb-js-func>
+      }
       <div class="flex flex-row" style="padding-bottom: 16px;">
         <button mat-button mat-raised-button color="primary" (click)="testScript()">
           {{ testScriptLabel | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.html
index a99d151e5b..5668ec4eda 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.html
@@ -23,16 +23,20 @@
         <mat-form-field class="mat-block max-w-50% flex-full">
           <mat-label>{{ 'rule-node-config.latitude-field-name' | translate }}</mat-label>
           <input matInput formControlName="latitudeKeyName" required>
-          <mat-error *ngIf="geoActionConfigForm.get('latitudeKeyName').hasError('required')">
-            {{ 'rule-node-config.latitude-field-name-required' | translate }}
-          </mat-error>
+          @if (geoActionConfigForm.get('latitudeKeyName').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.latitude-field-name-required' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <mat-form-field class="mat-block max-w-50% flex-full">
           <mat-label>{{ 'rule-node-config.longitude-field-name' | translate }}</mat-label>
           <input matInput formControlName="longitudeKeyName" required>
-          <mat-error *ngIf="geoActionConfigForm.get('longitudeKeyName').hasError('required')">
-            {{ 'rule-node-config.longitude-field-name-required' | translate }}
-          </mat-error>
+          @if (geoActionConfigForm.get('longitudeKeyName').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.longitude-field-name-required' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
       </div>
       <div class="tb-form-hint tb-primary-fill" translate>rule-node-config.coordinate-field-hint</div>
@@ -44,9 +48,11 @@
       <mat-form-field class="mat-block flex-1" hideRequiredMarker>
         <mat-label>{{ 'rule-node-config.perimeter-type' | translate }}</mat-label>
         <mat-select formControlName="perimeterType">
-          <mat-option *ngFor="let type of perimeterTypes" [value]="type">
-            {{ perimeterTypeTranslationMap.get(type) | translate }}
-          </mat-option>
+          @for (type of perimeterTypes; track type) {
+            <mat-option [value]="type">
+              {{ perimeterTypeTranslationMap.get(type) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <div tb-hint-tooltip-icon="{{ geoActionConfigForm.get('perimeterType').value === perimeterType.CIRCLE
@@ -63,134 +69,174 @@
           {{ 'rule-node-config.fetch-perimeter-info-from-metadata' | translate }}
         </mat-slide-toggle>
       </div>
-      <mat-form-field *ngIf="geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value" class="mat-block">
-        <mat-label>{{ 'rule-node-config.perimeter-key-name' | translate }}</mat-label>
-        <input matInput formControlName="perimeterKeyName" required>
-        <mat-error *ngIf="geoActionConfigForm.get('perimeterKeyName').hasError('required')">
-          {{ 'rule-node-config.perimeter-key-name-required' | translate }}
-        </mat-error>
-        <mat-hint>{{ 'rule-node-config.perimeter-key-name-hint' | translate }}</mat-hint>
-      </mat-form-field>
-      <div class="flex flex-col"
-           *ngIf="geoActionConfigForm.get('perimeterType').value === perimeterType.CIRCLE &&
-              !geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value">
-        <div class="flex flex-row gap-4">
-          <mat-form-field class="flex-1">
-            <mat-label>{{ 'rule-node-config.circle-center-latitude' | translate }}</mat-label>
-            <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>
-            <mat-error *ngIf="geoActionConfigForm.get('centerLatitude').hasError('required')">
-              {{ 'rule-node-config.circle-center-latitude-required' | translate }}
+      @if (geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value) {
+        <mat-form-field class="mat-block">
+          <mat-label>{{ 'rule-node-config.perimeter-key-name' | translate }}</mat-label>
+          <input matInput formControlName="perimeterKeyName" required>
+          @if (geoActionConfigForm.get('perimeterKeyName').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.perimeter-key-name-required' | translate }}
             </mat-error>
-          </mat-form-field>
-          <mat-form-field class="flex-1">
-            <mat-label>{{ 'rule-node-config.circle-center-longitude' | translate }}</mat-label>
-            <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>
-            <mat-error *ngIf="geoActionConfigForm.get('centerLongitude').hasError('required')">
-              {{ 'rule-node-config.circle-center-longitude-required' | translate }}
-            </mat-error>
-          </mat-form-field>
+          }
+          <mat-hint>{{ 'rule-node-config.perimeter-key-name-hint' | translate }}</mat-hint>
+        </mat-form-field>
+      }
+      @if (geoActionConfigForm.get('perimeterType').value === perimeterType.CIRCLE &&
+        !geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value) {
+        <div class="flex flex-col"
+             >
+          <div class="flex flex-row gap-4">
+            <mat-form-field class="flex-1">
+              <mat-label>{{ 'rule-node-config.circle-center-latitude' | translate }}</mat-label>
+              <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>
+              @if (geoActionConfigForm.get('centerLatitude').hasError('required')) {
+                <mat-error>
+                  {{ 'rule-node-config.circle-center-latitude-required' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="flex-1">
+              <mat-label>{{ 'rule-node-config.circle-center-longitude' | translate }}</mat-label>
+              <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>
+              @if (geoActionConfigForm.get('centerLongitude').hasError('required')) {
+                <mat-error>
+                  {{ 'rule-node-config.circle-center-longitude-required' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+          </div>
+          <div class="flex flex-row gap-4">
+            <mat-form-field class="flex-1">
+              <mat-label>{{ 'rule-node-config.range' | translate }}</mat-label>
+              <input type="number" min="0" step="0.1" matInput formControlName="range" required>
+              @if (geoActionConfigForm.get('range').hasError('required')) {
+                <mat-error>
+                  {{ 'rule-node-config.range-required' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="flex-1">
+              <mat-label>{{ 'rule-node-config.range-units' | translate }}</mat-label>
+              <mat-select formControlName="rangeUnit" required>
+                @for (type of rangeUnits; track type) {
+                  <mat-option [value]="type">
+                    {{ rangeUnitTranslationMap.get(type) | translate }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (geoActionConfigForm.get('rangeUnit').hasError('required')) {
+                <mat-error>
+                  {{ 'rule-node-config.range-units-required' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+          </div>
         </div>
-        <div class="flex flex-row gap-4">
-          <mat-form-field class="flex-1">
-            <mat-label>{{ 'rule-node-config.range' | translate }}</mat-label>
-            <input type="number" min="0" step="0.1" matInput formControlName="range" required>
-            <mat-error *ngIf="geoActionConfigForm.get('range').hasError('required')">
-              {{ 'rule-node-config.range-required' | translate }}
-            </mat-error>
-          </mat-form-field>
-          <mat-form-field class="flex-1">
-            <mat-label>{{ 'rule-node-config.range-units' | translate }}</mat-label>
-            <mat-select formControlName="rangeUnit" required>
-              <mat-option *ngFor="let type of rangeUnits" [value]="type">
-                {{ rangeUnitTranslationMap.get(type) | translate }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="geoActionConfigForm.get('rangeUnit').hasError('required')">
-              {{ 'rule-node-config.range-units-required' | translate }}
-            </mat-error>
+      }
+      @if (geoActionConfigForm.get('perimeterType').value === perimeterType.POLYGON &&
+        !geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value) {
+        <div class="flex flex-col">
+          <mat-form-field class="mat-block" subscriptSizing="dynamic">
+            <mat-label translate>rule-node-config.polygon-definition</mat-label>
+            <input matInput formControlName="polygonsDefinition" required>
+            <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
+                      color="primary"
+                      matTooltip="{{ 'rule-node-config.polygon-definition-hint' | translate }}">
+              help
+            </mat-icon>
+            <mat-hint></mat-hint>
+            @if (geoActionConfigForm.get('polygonsDefinition').hasError('required')) {
+              <mat-error>
+                {{ 'rule-node-config.polygon-definition-required' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
         </div>
-      </div>
-      <div class="flex flex-col" *ngIf="geoActionConfigForm.get('perimeterType').value === perimeterType.POLYGON &&
-                                 !geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value">
-        <mat-form-field class="mat-block" subscriptSizing="dynamic">
-          <mat-label translate>rule-node-config.polygon-definition</mat-label>
-          <input matInput formControlName="polygonsDefinition" required>
-          <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
-                    color="primary"
-                    matTooltip="{{ 'rule-node-config.polygon-definition-hint' | translate }}">
-            help
-          </mat-icon>
-          <mat-hint></mat-hint>
-          <mat-error *ngIf="geoActionConfigForm.get('polygonsDefinition').hasError('required')">
-            {{ 'rule-node-config.polygon-definition-required' | translate }}
-          </mat-error>
-        </mat-form-field>
-      </div>
+      }
     </section>
   </section>
   <section class="tb-form-panel stroked no-padding-bottom">
     <div class="flex flex-col items-stretch justify-between gt-sm:flex-row lt-md:gap-4">
       <div class="tb-form-panel-title">{{ 'rule-node-config.presence-monitoring-strategy' | translate }}</div>
       <tb-toggle-select class="fetch-to-data-toggle" formControlName="reportPresenceStatusOnEachMessage" appearance="fill" >
-        <tb-toggle-option *ngFor="let strategy of presenceMonitoringStrategyKeys" [value]="presenceMonitoringStrategies.get(strategy).value">
-          {{ presenceMonitoringStrategies.get(strategy).name | translate }}
-        </tb-toggle-option>
+        @for (strategy of presenceMonitoringStrategyKeys; track strategy) {
+          <tb-toggle-option [value]="presenceMonitoringStrategies.get(strategy).value">
+            {{ presenceMonitoringStrategies.get(strategy).name | translate }}
+          </tb-toggle-option>
+        }
       </tb-toggle-select>
     </div>
     <div class="tb-form-hint tb-primary-fill"> {{ geoActionConfigForm.get('reportPresenceStatusOnEachMessage').value === false ?
-        ('rule-node-config.presence-monitoring-strategy-on-first-message-hint' | translate) :
-        ('rule-node-config.presence-monitoring-strategy-on-each-message-hint' | translate) }}
+         ('rule-node-config.presence-monitoring-strategy-on-first-message-hint' | translate) :
+         ('rule-node-config.presence-monitoring-strategy-on-each-message-hint' | translate) }}
     </div>
     <section class="flex flex-col">
-      <div *ngIf="geoActionConfigForm.get('reportPresenceStatusOnEachMessage').value === false">
-        <div class="flex flex-col gt-sm:flex-row gt-sm:gap-2">
-          <mat-form-field class="mat-block flex-1">
-            <mat-label translate>rule-node-config.min-inside-duration</mat-label>
-            <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minInsideDuration" required>
-            <mat-error *ngIf="geoActionConfigForm.get('minInsideDuration').hasError('required')">
-              {{ 'rule-node-config.min-inside-duration-value-required' | translate }}
-            </mat-error>
-            <mat-error *ngIf="geoActionConfigForm.get('minInsideDuration').hasError('min')">
-              {{ 'rule-node-config.time-value-range' | translate }}
-            </mat-error>
-            <mat-error *ngIf="geoActionConfigForm.get('minInsideDuration').hasError('max')">
-              {{ 'rule-node-config.time-value-range' | translate }}
-            </mat-error>
-          </mat-form-field>
-          <mat-form-field class="mat-block flex-1">
-            <mat-label translate>rule-node-config.min-inside-duration-time-unit</mat-label>
-            <mat-select formControlName="minInsideDurationTimeUnit" required>
-              <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
-                {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="flex flex-col gt-sm:flex-row gt-sm:gap-2">
-          <mat-form-field class="mat-block flex-1">
-            <mat-label translate>rule-node-config.min-outside-duration</mat-label>
-            <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minOutsideDuration" required>
-            <mat-error *ngIf="geoActionConfigForm.get('minOutsideDuration').hasError('required')">
-              {{ 'rule-node-config.min-outside-duration-value-required' | translate }}
-            </mat-error>
-            <mat-error *ngIf="geoActionConfigForm.get('minOutsideDuration').hasError('min')">
-              {{ 'rule-node-config.time-value-range' | translate }}
-            </mat-error>
-            <mat-error *ngIf="geoActionConfigForm.get('minOutsideDuration').hasError('max')">
-              {{ 'rule-node-config.time-value-range' | translate }}
-            </mat-error>
-          </mat-form-field>
-          <mat-form-field class="mat-block flex-1">
-            <mat-label translate>rule-node-config.min-outside-duration-time-unit</mat-label>
-            <mat-select formControlName="minOutsideDurationTimeUnit" required>
-              <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
-                {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+      @if (geoActionConfigForm.get('reportPresenceStatusOnEachMessage').value === false) {
+        <div>
+          <div class="flex flex-col gt-sm:flex-row gt-sm:gap-2">
+            <mat-form-field class="mat-block flex-1">
+              <mat-label translate>rule-node-config.min-inside-duration</mat-label>
+              <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minInsideDuration" required>
+              @if (geoActionConfigForm.get('minInsideDuration').hasError('required')) {
+                <mat-error>
+                  {{ 'rule-node-config.min-inside-duration-value-required' | translate }}
+                </mat-error>
+              }
+              @if (geoActionConfigForm.get('minInsideDuration').hasError('min')) {
+                <mat-error>
+                  {{ 'rule-node-config.time-value-range' | translate }}
+                </mat-error>
+              }
+              @if (geoActionConfigForm.get('minInsideDuration').hasError('max')) {
+                <mat-error>
+                  {{ 'rule-node-config.time-value-range' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="mat-block flex-1">
+              <mat-label translate>rule-node-config.min-inside-duration-time-unit</mat-label>
+              <mat-select formControlName="minInsideDurationTimeUnit" required>
+                @for (timeUnit of timeUnits; track timeUnit) {
+                  <mat-option [value]="timeUnit">
+                    {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          </div>
+          <div class="flex flex-col gt-sm:flex-row gt-sm:gap-2">
+            <mat-form-field class="mat-block flex-1">
+              <mat-label translate>rule-node-config.min-outside-duration</mat-label>
+              <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minOutsideDuration" required>
+              @if (geoActionConfigForm.get('minOutsideDuration').hasError('required')) {
+                <mat-error>
+                  {{ 'rule-node-config.min-outside-duration-value-required' | translate }}
+                </mat-error>
+              }
+              @if (geoActionConfigForm.get('minOutsideDuration').hasError('min')) {
+                <mat-error>
+                  {{ 'rule-node-config.time-value-range' | translate }}
+                </mat-error>
+              }
+              @if (geoActionConfigForm.get('minOutsideDuration').hasError('max')) {
+                <mat-error>
+                  {{ 'rule-node-config.time-value-range' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="mat-block flex-1">
+              <mat-label translate>rule-node-config.min-outside-duration-time-unit</mat-label>
+              <mat-select formControlName="minOutsideDurationTimeUnit" required>
+                @for (timeUnit of timeUnits; track timeUnit) {
+                  <mat-option [value]="timeUnit">
+                    {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          </div>
         </div>
-      </div>
+      }
     </section>
   </section>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.ts
index b74efbe677..fe6bb80a97 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.ts
@@ -38,16 +38,16 @@ export class GpsGeoActionConfigComponent extends RuleNodeConfigurationComponent
   geoActionConfigForm: UntypedFormGroup;
 
   perimeterType = PerimeterType;
-  perimeterTypes = Object.keys(PerimeterType);
+  perimeterTypes = Object.values(PerimeterType);
   perimeterTypeTranslationMap = perimeterTypeTranslations;
 
-  rangeUnits = Object.keys(RangeUnit);
+  rangeUnits = Object.values(RangeUnit);
   rangeUnitTranslationMap = rangeUnitTranslations;
 
   presenceMonitoringStrategies = PresenceMonitoringStrategiesData;
   presenceMonitoringStrategyKeys = Array.from(this.presenceMonitoringStrategies.keys());
 
-  timeUnits = Object.keys(TimeUnit);
+  timeUnits = Object.values(TimeUnit);
   timeUnitsTranslationMap = timeUnitTranslations;
 
   public defaultPaddingEnable = true;
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/log-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/log-config.component.html
index 0d2aad6135..3998c9b42d 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/log-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/log-config.component.html
@@ -16,41 +16,47 @@
 
 -->
 <section [formGroup]="logConfigForm" class="flex flex-col">
-  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>
-  <tb-js-func *ngIf="logConfigForm.get('scriptLang').value === scriptLanguage.JS"
-              #jsFuncComponent
-              formControlName="jsScript"
-              functionName="ToString"
-              [functionArgs]="['msg', 'metadata', 'msgType']"
-              helpId="rulenode/log_node_script_fn"
-              noValidate="true">
-    <button toolbarSuffixButton
-            mat-icon-button
-            matTooltip="{{ testScriptLabel | translate }}"
-            matTooltipPosition="above"
-            class="tb-mat-32"
-            (click)="testScript()">
-      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
-    </button>
-  </tb-js-func>
-  <tb-js-func *ngIf="logConfigForm.get('scriptLang').value === scriptLanguage.TBEL"
-              #tbelFuncComponent
-              formControlName="tbelScript"
-              functionName="ToString"
-              [functionArgs]="['msg', 'metadata', 'msgType']"
-              [disableUndefinedCheck]="true"
-              [scriptLanguage]="scriptLanguage.TBEL"
-              helpId="rulenode/tbel/log_node_script_fn"
-              noValidate="true">
-    <button toolbarSuffixButton
-            mat-icon-button
-            matTooltip="{{ testScriptLabel | translate }}"
-            matTooltipPosition="above"
-            class="tb-mat-32"
-            (click)="testScript()">
-      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
-    </button>
-  </tb-js-func>
+  @if (tbelEnabled) {
+    <tb-script-lang formControlName="scriptLang"></tb-script-lang>
+  }
+  @if (logConfigForm.get('scriptLang').value === scriptLanguage.JS) {
+    <tb-js-func
+      #jsFuncComponent
+      formControlName="jsScript"
+      functionName="ToString"
+      [functionArgs]="['msg', 'metadata', 'msgType']"
+      helpId="rulenode/log_node_script_fn"
+      noValidate="true">
+      <button toolbarSuffixButton
+              mat-icon-button
+              matTooltip="{{ testScriptLabel | translate }}"
+              matTooltipPosition="above"
+              class="tb-mat-32"
+              (click)="testScript()">
+        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
+      </button>
+    </tb-js-func>
+  }
+  @if (logConfigForm.get('scriptLang').value === scriptLanguage.TBEL) {
+    <tb-js-func
+      #tbelFuncComponent
+      formControlName="tbelScript"
+      functionName="ToString"
+      [functionArgs]="['msg', 'metadata', 'msgType']"
+      [disableUndefinedCheck]="true"
+      [scriptLanguage]="scriptLanguage.TBEL"
+      helpId="rulenode/tbel/log_node_script_fn"
+      noValidate="true">
+      <button toolbarSuffixButton
+              mat-icon-button
+              matTooltip="{{ testScriptLabel | translate }}"
+              matTooltipPosition="above"
+              class="tb-mat-32"
+              (click)="testScript()">
+        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
+      </button>
+    </tb-js-func>
+  }
   <div class="flex flex-row">
     <button mat-button mat-raised-button color="primary" (click)="testScript()">
       {{ testScriptLabel | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/math-function-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/math-function-config.component.html
index cbc2463ddd..bd5fad7679 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/math-function-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/math-function-config.component.html
@@ -27,23 +27,27 @@
                              [function]="mathFunctionConfigForm.get('operation').value">
     </tb-arguments-map-config>
   </fieldset>
-  <fieldset *ngIf="mathFunctionConfigForm.get('operation').value === MathFunction.CUSTOM"
-            class="fields-group flex flex-col gap-2">
-    <legend class="group-title">{{'rule-node-config.custom-expression-field-input' | translate }} *</legend>
-    <mat-form-field class="mat-block no-margin-top flex-1" subscriptSizing="dynamic">
-      <input matInput formControlName="customFunction" required/>
-      <div  matSuffix
-            class="pr-2"
-            [tb-help-popup]="'math/math-methods_fn'"
-            tb-help-popup-placement="left"
-            [tb-help-popup-style]="{maxWidth: '970px'}">
-      </div>
-      <mat-error *ngIf="mathFunctionConfigForm.get('customFunction').hasError('required')" translate>
-        rule-node-config.custom-expression-field-input-required
-      </mat-error>
-      <mat-hint translate>rule-node-config.custom-expression-field-input-hint</mat-hint>
-    </mat-form-field>
-  </fieldset>
+  @if (mathFunctionConfigForm.get('operation').value === MathFunction.CUSTOM) {
+    <fieldset
+      class="fields-group flex flex-col gap-2">
+      <legend class="group-title">{{'rule-node-config.custom-expression-field-input' | translate }} *</legend>
+      <mat-form-field class="mat-block no-margin-top flex-1" subscriptSizing="dynamic">
+        <input matInput formControlName="customFunction" required/>
+        <div  matSuffix
+              class="pr-2"
+              [tb-help-popup]="'math/math-methods_fn'"
+              tb-help-popup-placement="left"
+              [tb-help-popup-style]="{maxWidth: '970px'}">
+        </div>
+        @if (mathFunctionConfigForm.get('customFunction').hasError('required')) {
+          <mat-error translate>
+            rule-node-config.custom-expression-field-input-required
+          </mat-error>
+        }
+        <mat-hint translate>rule-node-config.custom-expression-field-input-hint</mat-hint>
+      </mat-form-field>
+    </fieldset>
+  }
   <fieldset class="fields-group flex flex-col gap-2">
     <legend class="group-title" translate>rule-node-config.result-title</legend>
     <div formGroupName="result">
@@ -53,36 +57,46 @@
           <mat-select-trigger>
             {{ argumentTypeResultMap.get(mathFunctionConfigForm.get('result.type').value)?.name | translate }}
           </mat-select-trigger>
-          <mat-option *ngFor="let argument of argumentsResult" [value]="argument"
-                      style="border-bottom: 1px solid #eee;">
-            {{ argumentTypeResultMap.get(argument).name | translate }}
-            <small style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-              {{ argumentTypeResultMap.get(argument).description | translate }}
-            </small>
-          </mat-option>
+          @for (argument of argumentsResult; track argument) {
+            <mat-option [value]="argument"
+                        style="border-bottom: 1px solid #eee;">
+              {{ argumentTypeResultMap.get(argument).name | translate }}
+              <small style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                {{ argumentTypeResultMap.get(argument).description | translate }}
+              </small>
+            </mat-option>
+          }
         </mat-select>
-        <mat-error *ngIf="mathFunctionConfigForm.get('result.type').hasError('required')" translate>
-          rule-node-config.type-field-input-required
-        </mat-error>
+        @if (mathFunctionConfigForm.get('result.type').hasError('required')) {
+          <mat-error translate>
+            rule-node-config.type-field-input-required
+          </mat-error>
+        }
       </mat-form-field>
       <div class="xs:flex-col gt-xs:gap-4 flex flex-1 flex-row">
-        <mat-form-field class="mat-block flex-1" *ngIf="mathFunctionConfigForm.get('result').get('type').value === ArgumentTypeResult.ATTRIBUTE">
-          <mat-label translate>rule-node-config.attribute-scope-field-input</mat-label>
-          <mat-select required formControlName="attributeScope">
-            <mat-option *ngFor="let scope of attributeScopeResult" [value]="scope">
-              {{ attributeScopeMap.get(scope) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+        @if (mathFunctionConfigForm.get('result').get('type').value === ArgumentTypeResult.ATTRIBUTE) {
+          <mat-form-field class="mat-block flex-1">
+            <mat-label translate>rule-node-config.attribute-scope-field-input</mat-label>
+            <mat-select required formControlName="attributeScope">
+              @for (scope of attributeScopeResult; track scope) {
+                <mat-option [value]="scope">
+                  {{ attributeScopeMap.get(scope) | translate }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
         <mat-form-field floatLabel="always" class="mat-block flex-1">
           <mat-label translate>rule-node-config.key-field-input</mat-label>
           <input matInput formControlName="key" required/>
           <mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
                     color="primary"
-                    matTooltip="{{ 'rule-node-config.math-templatization-tooltip' | translate }}">help</mat-icon>
-          <mat-error *ngIf="mathFunctionConfigForm.get('result.key').hasError('required')" translate>
-            rule-node-config.key-field-input-required
-          </mat-error>
+          matTooltip="{{ 'rule-node-config.math-templatization-tooltip' | translate }}">help</mat-icon>
+          @if (mathFunctionConfigForm.get('result.key').hasError('required')) {
+            <mat-error translate>
+              rule-node-config.key-field-input-required
+            </mat-error>
+          }
         </mat-form-field>
       </div>
       <div class="xs:flex-col gt-xs:gap-4 flex flex-1 flex-row">
@@ -95,15 +109,17 @@
           <mat-hint [innerHTML]="'rule-node-config.number-floating-point-field-input-hint' | translate | safe: 'html'"></mat-hint>
         </mat-form-field>
       </div>
-      <div *ngIf="[ArgumentTypeResult.ATTRIBUTE, ArgumentTypeResult.TIME_SERIES].includes(mathFunctionConfigForm.get('result').get('type').value)"
-           class="xs:flex-col gt-xs:gap-4 flex flex-1 flex-row items-stretch justify-start" style="padding-top: 16px;">
-        <mat-checkbox formControlName="addToBody">
-          {{'rule-node-config.add-to-message-field-input' | translate }}
-        </mat-checkbox>
-        <mat-checkbox formControlName="addToMetadata">
-          {{'rule-node-config.add-to-metadata-field-input' | translate}}
-        </mat-checkbox>
-      </div>
+      @if ([ArgumentTypeResult.ATTRIBUTE, ArgumentTypeResult.TIME_SERIES].includes(mathFunctionConfigForm.get('result').get('type').value)) {
+        <div
+          class="xs:flex-col gt-xs:gap-4 flex flex-1 flex-row items-stretch justify-start" style="padding-top: 16px;">
+          <mat-checkbox formControlName="addToBody">
+            {{'rule-node-config.add-to-message-field-input' | translate }}
+          </mat-checkbox>
+          <mat-checkbox formControlName="addToMetadata">
+            {{'rule-node-config.add-to-metadata-field-input' | translate}}
+          </mat-checkbox>
+        </div>
+      }
     </div>
   </fieldset>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/msg-count-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/msg-count-config.component.html
index 980a370cb3..31010602c3 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/msg-count-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/msg-count-config.component.html
@@ -19,18 +19,24 @@
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.interval-seconds</mat-label>
     <input required type="number" min="1" step="1" matInput formControlName="interval">
-    <mat-error *ngIf="msgCountConfigForm.get('interval').hasError('required')">
-      {{ 'rule-node-config.interval-seconds-required' | translate }}
-    </mat-error>
-    <mat-error *ngIf="msgCountConfigForm.get('interval').hasError('min')">
-      {{ 'rule-node-config.min-interval-seconds-message' | translate }}
-    </mat-error>
+    @if (msgCountConfigForm.get('interval').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.interval-seconds-required' | translate }}
+      </mat-error>
+    }
+    @if (msgCountConfigForm.get('interval').hasError('min')) {
+      <mat-error>
+        {{ 'rule-node-config.min-interval-seconds-message' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.output-timeseries-key-prefix</mat-label>
     <input required matInput formControlName="telemetryPrefix">
-    <mat-error *ngIf="msgCountConfigForm.get('telemetryPrefix').hasError('required')">
-      {{ 'rule-node-config.output-timeseries-key-prefix-required' | translate }}
-    </mat-error>
+    @if (msgCountConfigForm.get('telemetryPrefix').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.output-timeseries-key-prefix-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/msg-delay-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/msg-delay-config.component.html
index 9610a0e82a..a7dc7b7b1b 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/msg-delay-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/msg-delay-config.component.html
@@ -20,38 +20,51 @@
     {{ 'rule-node-config.use-metadata-period-in-seconds-patterns' | translate }}
   </mat-checkbox>
   <div class="tb-hint" translate>rule-node-config.use-metadata-period-in-seconds-patterns-hint</div>
-  <mat-form-field *ngIf="msgDelayConfigForm.get('useMetadataPeriodInSecondsPatterns').value !== true; else periodInSecondsPattern"
-                  class="mat-block">
-    <mat-label translate>rule-node-config.period-seconds</mat-label>
-    <input required type="number" min="0" step="1" matInput formControlName="periodInSeconds">
-    <mat-error *ngIf="msgDelayConfigForm.get('periodInSeconds').hasError('required')">
-      {{ 'rule-node-config.period-seconds-required' | translate }}
-    </mat-error>
-    <mat-error *ngIf="msgDelayConfigForm.get('periodInSeconds').hasError('min')">
-      {{ 'rule-node-config.min-period-0-seconds-message' | translate }}
-    </mat-error>
-  </mat-form-field>
-  <ng-template #periodInSecondsPattern>
+  @if (msgDelayConfigForm.get('useMetadataPeriodInSecondsPatterns').value !== true) {
+    <mat-form-field
+      class="mat-block">
+      <mat-label translate>rule-node-config.period-seconds</mat-label>
+      <input required type="number" min="0" step="1" matInput formControlName="periodInSeconds">
+      @if (msgDelayConfigForm.get('periodInSeconds').hasError('required')) {
+        <mat-error>
+          {{ 'rule-node-config.period-seconds-required' | translate }}
+        </mat-error>
+      }
+      @if (msgDelayConfigForm.get('periodInSeconds').hasError('min')) {
+        <mat-error>
+          {{ 'rule-node-config.min-period-0-seconds-message' | translate }}
+        </mat-error>
+      }
+    </mat-form-field>
+  } @else {
     <mat-form-field class="mat-block" subscriptSizing="dynamic">
       <mat-label translate>rule-node-config.period-in-seconds-pattern</mat-label>
       <input required matInput formControlName="periodInSecondsPattern">
-      <mat-error *ngIf="msgDelayConfigForm.get('periodInSecondsPattern').hasError('required')">
-        {{ 'rule-node-config.period-in-seconds-pattern-required' | translate }}
-      </mat-error>
+      @if (msgDelayConfigForm.get('periodInSecondsPattern').hasError('required')) {
+        <mat-error>
+          {{ 'rule-node-config.period-in-seconds-pattern-required' | translate }}
+        </mat-error>
+      }
       <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
     </mat-form-field>
-  </ng-template>
+  }
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.max-pending-messages</mat-label>
     <input required type="number" min="1" max="100000" step="1" matInput formControlName="maxPendingMsgs">
-    <mat-error *ngIf="msgDelayConfigForm.get('maxPendingMsgs').hasError('required')">
-      {{ 'rule-node-config.max-pending-messages-required' | translate }}
-    </mat-error>
-    <mat-error *ngIf="msgDelayConfigForm.get('maxPendingMsgs').hasError('min')">
-      {{ 'rule-node-config.max-pending-messages-range' | translate }}
-    </mat-error>
-    <mat-error *ngIf="msgDelayConfigForm.get('maxPendingMsgs').hasError('max')">
-      {{ 'rule-node-config.max-pending-messages-range' | translate }}
-    </mat-error>
+    @if (msgDelayConfigForm.get('maxPendingMsgs').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.max-pending-messages-required' | translate }}
+      </mat-error>
+    }
+    @if (msgDelayConfigForm.get('maxPendingMsgs').hasError('min')) {
+      <mat-error>
+        {{ 'rule-node-config.max-pending-messages-range' | translate }}
+      </mat-error>
+    }
+    @if (msgDelayConfigForm.get('maxPendingMsgs').hasError('max')) {
+      <mat-error>
+        {{ 'rule-node-config.max-pending-messages-range' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-cloud-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-cloud-config.component.html
index a52e015a8b..5a39dae562 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-cloud-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-cloud-config.component.html
@@ -24,9 +24,11 @@
         <mat-label>{{ 'rule-node-config.attributes-scope' | translate }}</mat-label>
         <mat-select required
                     class="tb-entity-type-select" matInput formControlName="scope">
-          <mat-option *ngFor="let scope of attributeScopes" [value]="scope">
-            {{ telemetryTypeTranslationsMap.get(scope) | translate }}
-          </mat-option>
+          @for (scope of attributeScopes; track scope) {
+            <mat-option [value]="scope">
+              {{ telemetryTypeTranslationsMap.get(scope) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <mat-form-field class="flex">
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-cloud-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-cloud-config.component.ts
index a7a5542b98..fccc665210 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-cloud-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-cloud-config.component.ts
@@ -27,7 +27,7 @@ import { AttributeScope, telemetryTypeTranslations } from '@shared/models/teleme
 })
 export class PushToCloudConfigComponent extends RuleNodeConfigurationComponent {
 
-  attributeScopes = Object.keys(AttributeScope);
+  attributeScopes = Object.values(AttributeScope);
   telemetryTypeTranslationsMap = telemetryTypeTranslations;
 
   pushToCloudConfigForm: UntypedFormGroup;
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-edge-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-edge-config.component.html
index 128dbf5ef3..4f7f19bbbf 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-edge-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-edge-config.component.html
@@ -24,9 +24,11 @@
         <mat-label>{{ 'rule-node-config.attributes-scope' | translate }}</mat-label>
         <mat-select required
                     class="tb-entity-type-select" matInput formControlName="scope">
-          <mat-option *ngFor="let scope of attributeScopes" [value]="scope">
-            {{ telemetryTypeTranslationsMap.get(scope) | translate }}
-          </mat-option>
+          @for (scope of attributeScopes; track scope) {
+            <mat-option [value]="scope">
+              {{ telemetryTypeTranslationsMap.get(scope) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <mat-form-field class="flex">
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-edge-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-edge-config.component.ts
index 5192161cc8..872e7a1f46 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-edge-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/push-to-edge-config.component.ts
@@ -27,7 +27,7 @@ import { AttributeScope, telemetryTypeTranslations } from '@shared/models/teleme
 })
 export class PushToEdgeConfigComponent extends RuleNodeConfigurationComponent {
 
-  attributeScopes = Object.keys(AttributeScope);
+  attributeScopes = Object.values(AttributeScope);
   telemetryTypeTranslationsMap = telemetryTypeTranslations;
 
   pushToEdgeConfigForm: UntypedFormGroup;
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/rpc-request-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/rpc-request-config.component.html
index 7394f04eff..053668a773 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/rpc-request-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/rpc-request-config.component.html
@@ -19,11 +19,15 @@
   <mat-form-field class="mat-block flex-1">
     <mat-label translate>rule-node-config.timeout-sec</mat-label>
     <input type="number" min="0" step="1" matInput formControlName="timeoutInSeconds" required>
-    <mat-error *ngIf="rpcRequestConfigForm.get('timeoutInSeconds').hasError('required')">
-      {{ 'rule-node-config.timeout-required' | translate }}
-    </mat-error>
-    <mat-error *ngIf="rpcRequestConfigForm.get('timeoutInSeconds').hasError('min')">
-      {{ 'rule-node-config.min-timeout-message' | translate }}
-    </mat-error>
+    @if (rpcRequestConfigForm.get('timeoutInSeconds').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.timeout-required' | translate }}
+      </mat-error>
+    }
+    @if (rpcRequestConfigForm.get('timeoutInSeconds').hasError('min')) {
+      <mat-error>
+        {{ 'rule-node-config.min-timeout-message' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/save-to-custom-table-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/save-to-custom-table-config.component.html
index 86fe2c0c84..5302d2233b 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/save-to-custom-table-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/save-to-custom-table-config.component.html
@@ -27,10 +27,12 @@
               matTooltip="{{ 'rule-node-config.custom-table-hint' | translate }}">
       help
     </mat-icon>
-    <mat-error *ngIf="saveToCustomTableConfigForm.get('tableName').hasError('required') ||
-                      saveToCustomTableConfigForm.get('tableName').hasError('pattern')">
-      {{ 'rule-node-config.custom-table-name-required' | translate }}
-    </mat-error>
+    @if (saveToCustomTableConfigForm.get('tableName').hasError('required') ||
+      saveToCustomTableConfigForm.get('tableName').hasError('pattern')) {
+      <mat-error>
+        {{ 'rule-node-config.custom-table-name-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <tb-kv-map-config
     required
@@ -47,11 +49,15 @@
     <mat-label translate>rule-node-config.default-ttl</mat-label>
     <input type="number" min="0" step="1" matInput formControlName="defaultTtl" required>
     <mat-hint translate>rule-node-config.default-ttl-zero-hint</mat-hint>
-    <mat-error *ngIf="saveToCustomTableConfigForm.get('defaultTtl').hasError('min')">
-      {{ 'rule-node-config.min-default-ttl-message' | translate }}
-    </mat-error>
-    <mat-error *ngIf="saveToCustomTableConfigForm.get('defaultTtl').hasError('required')">
-      {{ 'rule-node-config.default-ttl-required' | translate }}
-    </mat-error>
+    @if (saveToCustomTableConfigForm.get('defaultTtl').hasError('min')) {
+      <mat-error>
+        {{ 'rule-node-config.min-default-ttl-message' | translate }}
+      </mat-error>
+    }
+    @if (saveToCustomTableConfigForm.get('defaultTtl').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.default-ttl-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/unassign-customer-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/unassign-customer-config.component.html
index e20dc783cc..91a0ff8dc9 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/unassign-customer-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/unassign-customer-config.component.html
@@ -25,15 +25,19 @@
           {{ 'rule-node-config.unassign-from-customer' | translate }}
         </mat-slide-toggle>
       </div>
-      <mat-form-field class="mat-block" subscriptSizing="dynamic" *ngIf="unassignCustomerConfigForm.get('unassignFromCustomer').value">
-        <mat-label translate>rule-node-config.customer-name-pattern</mat-label>
-        <input required matInput formControlName="customerNamePattern">
-        <mat-error *ngIf="unassignCustomerConfigForm.get('customerNamePattern').hasError('required') ||
-                        unassignCustomerConfigForm.get('customerNamePattern').hasError('pattern')">
-          {{ 'rule-node-config.customer-name-pattern-required' | translate }}
-        </mat-error>
-        <mat-hint translate>rule-node-config.customer-name-pattern-hint</mat-hint>
-      </mat-form-field>
+      @if (unassignCustomerConfigForm.get('unassignFromCustomer').value) {
+        <mat-form-field class="mat-block" subscriptSizing="dynamic">
+          <mat-label translate>rule-node-config.customer-name-pattern</mat-label>
+          <input required matInput formControlName="customerNamePattern">
+          @if (unassignCustomerConfigForm.get('customerNamePattern').hasError('required') ||
+            unassignCustomerConfigForm.get('customerNamePattern').hasError('pattern')) {
+            <mat-error>
+              {{ 'rule-node-config.customer-name-pattern-required' | translate }}
+            </mat-error>
+          }
+          <mat-hint translate>rule-node-config.customer-name-pattern-hint</mat-hint>
+        </mat-form-field>
+      }
     </div>
   </div>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.html
index 9250c5b544..ee56981b6a 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.html
@@ -23,101 +23,131 @@
               [formGroup]="argumentsFormGroup"
               (cdkDropListDropped)="onDrop($event)"
               [cdkDropListDisabled]="disabled">
-      <mat-list-item *ngFor="let argumentControl of argumentsFormArray.controls; let $index = index"
-                     formArrayName="arguments"
-                     cdkDrag class="tb-argument tb-draggable"
-                     [cdkDragDisabled]="disabled"
-                     style="height: 100%">
-        <div class="flex flex-1 flex-row items-center justify-start">
-          <button *ngIf="!disabled" mat-icon-button color="primary"
-                  cdkDragHandle
-                  class="tb-drag-handle handle"
-                  style="min-width: 40px; margin: 0"
-                  matTooltip="{{ 'action.drag' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>drag_handle</mat-icon>
-          </button>
-          <div class="flex flex-1 flex-row items-center justify-start gap-4">
-            <span *ngIf="displayArgumentName"
-                  style="padding: 0 10px; min-width: 20px;">{{argumentControl.get('name').value}}.</span>
-            <div class="flex flex-1 flex-col">
-              <mat-form-field class="mat-block">
-                <mat-label translate>rule-node-config.argument-source-field-input</mat-label>
-                <mat-select [formControl]="argumentControl.get('type')" required>
-                  <mat-select-trigger>
-                    {{ argumentTypeMap.get(argumentControl.get('type').value)?.name | translate }}
-                  </mat-select-trigger>
-                  <mat-option *ngFor="let argument of arguments" [value]="argument"
-                              style="border-bottom: 1px solid #eee;">
-                    {{ argumentTypeMap.get(argument).name | translate }}
-                    <small style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-                      {{ argumentTypeMap.get(argument).description |  translate }}
-                    </small>
-                  </mat-option>
-                </mat-select>
-                <mat-error *ngIf="argumentControl.get('type').hasError('required')" translate>
-                  rule-node-config.argument-source-field-input-required
-                </mat-error>
-              </mat-form-field>
-              <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-                <mat-form-field floatLabel="always" class="mat-block gt-xs:max-w-50% gt-xs:flex-full"
-                                *ngIf="argumentControl.get('type').value && argumentControl.get('type').value !== ArgumentType.CONSTANT">
-                  <mat-label translate>rule-node-config.argument-key-field-input</mat-label>
-                  <input [formControl]="argumentControl.get('key')" matInput required/>
-                  <mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
-                            color="primary"
-                            matTooltip="{{ 'rule-node-config.math-templatization-tooltip' | translate }}">
-                    help
-                  </mat-icon>
-                  <mat-error *ngIf="argumentControl.get('key').hasError('required')" translate>
-                    rule-node-config.argument-key-field-input-required
-                  </mat-error>
-                </mat-form-field>
-                <mat-form-field floatLabel="always" class="mat-block flex-1"
-                                *ngIf="argumentControl.get('type').value === ArgumentType.CONSTANT">
-                  <mat-label translate>rule-node-config.constant-value-field-input</mat-label>
-                  <input [formControl]="argumentControl.get('key')"
-                         matInput
-                         required
-                         step="1" min="0"
-                         type="number"/>
-                  <mat-error *ngIf="argumentControl.get('key').hasError('required')" translate>
-                    rule-node-config.constant-value-field-input-required
-                  </mat-error>
-                </mat-form-field>
-                <mat-form-field *ngIf="argumentControl.get('type').value && argumentControl.get('type').value !== ArgumentType.CONSTANT"
-                                floatLabel="always" class="mat-block gt-xs:max-w-50% gt-xs:flex-full">
-                  <mat-label translate>rule-node-config.default-value-field-input</mat-label>
-                  <input [formControl]="argumentControl.get('defaultValue')" matInput step="1" type="number"/>
+      @for (argumentControl of argumentsFormArray.controls; track argumentControl) {
+        <mat-list-item
+          formArrayName="arguments"
+          cdkDrag class="tb-argument tb-draggable"
+          [cdkDragDisabled]="disabled"
+          style="height: 100%">
+          <div class="flex flex-1 flex-row items-center justify-start">
+            @if (!disabled) {
+              <button mat-icon-button color="primary"
+                      cdkDragHandle
+                      class="tb-drag-handle handle"
+                      style="min-width: 40px; margin: 0"
+                      matTooltip="{{ 'action.drag' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>drag_handle</mat-icon>
+              </button>
+            }
+            <div class="flex flex-1 flex-row items-center justify-start gap-4">
+              @if (displayArgumentName) {
+                <span
+                style="padding: 0 10px; min-width: 20px;">{{argumentControl.get('name').value}}.</span>
+              }
+              <div class="flex flex-1 flex-col">
+                <mat-form-field class="mat-block">
+                  <mat-label translate>rule-node-config.argument-source-field-input</mat-label>
+                  <mat-select [formControl]="argumentControl.get('type')" required>
+                    <mat-select-trigger>
+                      {{ argumentTypeMap.get(argumentControl.get('type').value)?.name | translate }}
+                    </mat-select-trigger>
+                    @for (argument of arguments; track argument) {
+                      <mat-option [value]="argument"
+                                  style="border-bottom: 1px solid #eee;">
+                        {{ argumentTypeMap.get(argument).name | translate }}
+                        <small style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                          {{ argumentTypeMap.get(argument).description |  translate }}
+                        </small>
+                      </mat-option>
+                    }
+                  </mat-select>
+                  @if (argumentControl.get('type').hasError('required')) {
+                    <mat-error translate>
+                      rule-node-config.argument-source-field-input-required
+                    </mat-error>
+                  }
                 </mat-form-field>
+                <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+                  @if (argumentControl.get('type').value && argumentControl.get('type').value !== ArgumentType.CONSTANT) {
+                    <mat-form-field floatLabel="always" class="mat-block gt-xs:max-w-50% gt-xs:flex-full"
+                                    >
+                      <mat-label translate>rule-node-config.argument-key-field-input</mat-label>
+                      <input [formControl]="argumentControl.get('key')" matInput required/>
+                      <mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
+                                color="primary"
+                                matTooltip="{{ 'rule-node-config.math-templatization-tooltip' | translate }}">
+                        help
+                      </mat-icon>
+                      @if (argumentControl.get('key').hasError('required')) {
+                        <mat-error translate>
+                          rule-node-config.argument-key-field-input-required
+                        </mat-error>
+                      }
+                    </mat-form-field>
+                  }
+                  @if (argumentControl.get('type').value === ArgumentType.CONSTANT) {
+                    <mat-form-field floatLabel="always" class="mat-block flex-1"
+                                    >
+                      <mat-label translate>rule-node-config.constant-value-field-input</mat-label>
+                      <input [formControl]="argumentControl.get('key')"
+                             matInput
+                             required
+                             step="1" min="0"
+                             type="number"/>
+                      @if (argumentControl.get('key').hasError('required')) {
+                        <mat-error translate>
+                          rule-node-config.constant-value-field-input-required
+                        </mat-error>
+                      }
+                    </mat-form-field>
+                  }
+                  @if (argumentControl.get('type').value && argumentControl.get('type').value !== ArgumentType.CONSTANT) {
+                    <mat-form-field
+                      floatLabel="always" class="mat-block gt-xs:max-w-50% gt-xs:flex-full">
+                      <mat-label translate>rule-node-config.default-value-field-input</mat-label>
+                      <input [formControl]="argumentControl.get('defaultValue')" matInput step="1" type="number"/>
+                    </mat-form-field>
+                  }
+                </div>
+                @if (argumentControl.get('type').value === ArgumentType.ATTRIBUTE) {
+                  <mat-form-field class="mat-block">
+                    <mat-label translate>rule-node-config.attribute-scope-field-input</mat-label>
+                    <mat-select required [formControl]="argumentControl.get('attributeScope')">
+                      @for (scope of attributeScope; track scope) {
+                        <mat-option [value]="scope">
+                          {{ attributeScopeMap.get(scope) | translate }}
+                        </mat-option>
+                      }
+                    </mat-select>
+                    @if (argumentControl.get('attributeScope').hasError('required')) {
+                      <mat-error translate>
+                        rule-node-config.attribute-scope-field-input-required
+                      </mat-error>
+                    }
+                  </mat-form-field>
+                }
               </div>
-              <mat-form-field *ngIf="argumentControl.get('type').value === ArgumentType.ATTRIBUTE" class="mat-block">
-                <mat-label translate>rule-node-config.attribute-scope-field-input</mat-label>
-                <mat-select required [formControl]="argumentControl.get('attributeScope')">
-                  <mat-option *ngFor="let scope of attributeScope" [value]="scope">
-                    {{ attributeScopeMap.get(scope) | translate }}
-                  </mat-option>
-                </mat-select>
-                <mat-error *ngIf="argumentControl.get('attributeScope').hasError('required')" translate>
-                  rule-node-config.attribute-scope-field-input-required
-                </mat-error>
-              </mat-form-field>
+              @if (!disabled) {
+                <button mat-icon-button color="primary" style="min-width: 40px;"
+                        (click)="removeArgument($index)"
+                        matTooltip="{{ 'action.remove' | translate }}"
+                        matTooltipPosition="above">
+                  <mat-icon>close</mat-icon>
+                </button>
+              }
             </div>
-            <button *ngIf="!disabled" mat-icon-button color="primary" style="min-width: 40px;"
-                    (click)="removeArgument($index)"
-                    matTooltip="{{ 'action.remove' | translate }}"
-                    matTooltipPosition="above">
-              <mat-icon>close</mat-icon>
-            </button>
           </div>
-        </div>
-      </mat-list-item>
+        </mat-list-item>
+      }
     </mat-list>
   </div>
-  <div *ngIf="!argumentsFormArray.length">
+  @if (!argumentsFormArray.length) {
+    <div>
       <span translate
-            class="tb-prompt flex items-center justify-center">rule-node-config.no-arguments-prompt</span>
-  </div>
+      class="tb-prompt flex items-center justify-center">rule-node-config.no-arguments-prompt</span>
+    </div>
+  }
   <button mat-button mat-raised-button color="primary"
           [disabled]="argumentsFormArray.length >= maxArgs"
           (click)="addArgument()"
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/credentials-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/credentials-config.component.html
index 5829984bc0..dd5579b230 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/credentials-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/credentials-config.component.html
@@ -27,35 +27,44 @@
       <mat-form-field class="mat-block" subscriptSizing="dynamic">
         <mat-label translate>rule-node-config.credentials-type</mat-label>
         <mat-select formControlName="type" required>
-          <mat-option *ngFor="let credentialsType of allCredentialsTypes" [value]="credentialsType"
-                      [disabled]="credentialsType === 'cert.PEM' && disableCertPemCredentials">
-            {{ credentialsTypeTranslationsMap.get(credentialsType) | translate }}
-          </mat-option>
+          @for (credentialsType of allCredentialsTypes; track credentialsType) {
+            <mat-option [value]="credentialsType"
+                        [disabled]="credentialsType === 'cert.PEM' && disableCertPemCredentials">
+              {{ credentialsTypeTranslationsMap.get(credentialsType) | translate }}
+            </mat-option>
+          }
         </mat-select>
-        <mat-error *ngIf="credentialsConfigFormGroup.get('type').hasError('required')">
-          {{ 'rule-node-config.credentials-type-required' | translate }}
-        </mat-error>
+        @if (credentialsConfigFormGroup.get('type').hasError('required')) {
+          <mat-error>
+            {{ 'rule-node-config.credentials-type-required' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
       @if (credentialsConfigFormGroup.get('type').value !== 'anonymous') {
-        <section class="flex flex-col" [ngSwitch]="credentialsConfigFormGroup.get('type').value">
-          <ng-template ngSwitchCase="basic">
-            <mat-form-field class="mat-block">
-              <mat-label translate>rule-node-config.username</mat-label>
-              <input required matInput formControlName="username">
-              <mat-error *ngIf="credentialsConfigFormGroup.get('username').hasError('required')">
-                {{ 'rule-node-config.username-required' | translate }}
-              </mat-error>
-            </mat-form-field>
-            <mat-form-field class="mat-block">
-              <mat-label translate>rule-node-config.password</mat-label>
-              <input type="password" [required]="passwordFieldRequired" matInput formControlName="password" autocomplete="new-password">
-              <tb-toggle-password matSuffix></tb-toggle-password>
-              <mat-error *ngIf="credentialsConfigFormGroup.get('password').hasError('required')">
-                {{ 'rule-node-config.password-required' | translate }}
-              </mat-error>
-            </mat-form-field>
-          </ng-template>
-          <ng-template ngSwitchCase="cert.PEM">
+        <section class="flex flex-col">
+        @switch (credentialsConfigFormGroup.get('type').value) {
+            @case("basic") {
+              <mat-form-field class="mat-block">
+                <mat-label translate>rule-node-config.username</mat-label>
+                <input required matInput formControlName="username">
+                @if (credentialsConfigFormGroup.get('username').hasError('required')) {
+                  <mat-error>
+                    {{ 'rule-node-config.username-required' | translate }}
+                  </mat-error>
+                }
+              </mat-form-field>
+              <mat-form-field class="mat-block">
+                <mat-label translate>rule-node-config.password</mat-label>
+                <input type="password" [required]="passwordFieldRequired" matInput formControlName="password" autocomplete="new-password">
+                <tb-toggle-password matSuffix></tb-toggle-password>
+                @if (credentialsConfigFormGroup.get('password').hasError('required')) {
+                  <mat-error>
+                    {{ 'rule-node-config.password-required' | translate }}
+                  </mat-error>
+                }
+              </mat-form-field>
+            }
+          @case("cert.PEM") {
             <div class="tb-form-hint tb-primary-fill mb-4">{{ 'rule-node-config.credentials-pem-hint' | translate }}</div>
             <tb-file-input formControlName="caCert"
                            inputId="caCertSelect"
@@ -87,9 +96,10 @@
               <input type="password" matInput formControlName="password" autocomplete="new-password">
               <tb-toggle-password matSuffix></tb-toggle-password>
             </mat-form-field>
-          </ng-template>
+          }
+        }
         </section>
-      }
+        }
     </ng-template>
   </mat-expansion-panel>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.html
index 4ff77e6457..380668f9fd 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.html
@@ -20,9 +20,11 @@
     <mat-form-field class="mat-block max-w-50% flex-full" subscriptSizing="dynamic" style="min-width: 100px;" hideRequiredMarker>
       <mat-label translate>relation.direction</mat-label>
       <mat-select required formControlName="direction">
-        <mat-option *ngFor="let type of directionTypes" [value]="type">
-          {{ directionTypeTranslations.get(type) | translate }} <span translate>rule-node-config.relations-query-config-direction-suffix</span>
-        </mat-option>
+        @for (type of directionTypes; track type) {
+          <mat-option [value]="type">
+            {{ directionTypeTranslations.get(type) | translate }} <span translate>rule-node-config.relations-query-config-direction-suffix</span>
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
     <mat-form-field floatLabel="always" class="mat-block max-w-50% flex-full">
@@ -34,21 +36,26 @@
              min="1"
              placeholder="{{ 'rule-node-config.unlimited-level' | translate }}"
              formControlName="maxLevel">
-      <mat-error *ngIf="deviceRelationsQueryFormGroup.get('maxLevel').hasError('min')">
-        {{ 'rule-node-config.max-relation-level-error' | translate }}
-      </mat-error>
-      <mat-error *ngIf="deviceRelationsQueryFormGroup.get('maxLevel').invalid">
-        {{ 'rule-node-config.max-relation-level-invalid' | translate }}
-      </mat-error>
+      @if (deviceRelationsQueryFormGroup.get('maxLevel').hasError('min')) {
+        <mat-error>
+          {{ 'rule-node-config.max-relation-level-error' | translate }}
+        </mat-error>
+      }
+      @if (deviceRelationsQueryFormGroup.get('maxLevel').invalid) {
+        <mat-error>
+          {{ 'rule-node-config.max-relation-level-invalid' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
   </div>
-  <div tb-hint-tooltip-icon="{{ 'rule-node-config.last-level-device-relation-tooltip' | translate }}"
-       *ngIf="deviceRelationsQueryFormGroup.get('maxLevel').value > 1"
-       class="tb-form-row no-border no-padding last-level-slide-toggle">
-    <mat-slide-toggle class="mat-slide" formControlName="fetchLastLevelOnly">
-      {{ 'alias.last-level-relation' | translate }}
-    </mat-slide-toggle>
-  </div>
+  @if (deviceRelationsQueryFormGroup.get('maxLevel').value > 1) {
+    <div tb-hint-tooltip-icon="{{ 'rule-node-config.last-level-device-relation-tooltip' | translate }}"
+         class="tb-form-row no-border no-padding last-level-slide-toggle">
+      <mat-slide-toggle class="mat-slide" formControlName="fetchLastLevelOnly">
+        {{ 'alias.last-level-relation' | translate }}
+      </mat-slide-toggle>
+    </div>
+  }
   <tb-relation-type-autocomplete
     class="flex-1"
     formControlName="relationType">
@@ -61,6 +68,6 @@
     [filledInputPlaceholder]="'rule-node-config.add-device-profile' | translate"
     formControlName="deviceTypes">
     <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" color="primary"
-              matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.device-profile' | translate } }}">help</mat-icon>
+    matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.device-profile' | translate } }}">help</mat-icon>
   </tb-entity-subtype-list>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/example-hint.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/example-hint.component.html
index a54fa0d8b9..c332677027 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/example-hint.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/example-hint.component.html
@@ -18,12 +18,14 @@
 <div [hidden]="!hintText" class="tb-form-hint tb-primary-fill flex justify-between gap-5">
   <div [innerHTML]=" hintText | translate | safe: 'html'"
        [style.text-align]="textAlign"
-       class="w-full"></div>
-  <div *ngIf="popupHelpLink" class="flex shrink-0" tb-help-popup="{{ popupHelpLink }}"
-       hintMode
-       tb-help-popup-placement="right"
-       trigger-style="letter-spacing:0.25px; font-size:12px"
-       [tb-help-popup-style]="{maxWidth: '820px'}"
-       trigger-text="{{ 'rule-node-config.key-val.see-examples' | translate }}">
-  </div>
+  class="w-full"></div>
+  @if (popupHelpLink) {
+    <div class="flex shrink-0" tb-help-popup="{{ popupHelpLink }}"
+         hintMode
+         tb-help-popup-placement="right"
+         trigger-style="letter-spacing:0.25px; font-size:12px"
+         [tb-help-popup-style]="{maxWidth: '820px'}"
+         trigger-text="{{ 'rule-node-config.key-val.see-examples' | translate }}">
+    </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config-old.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config-old.component.html
index dd1aa1c997..3e75dc69ec 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config-old.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config-old.component.html
@@ -29,20 +29,25 @@
   <div class="body">
     @for (keyValControl of keyValsFormArray().controls; track $index) {
       <div class="row flex flex-row items-center justify-start gap-2"
-           formArrayName="keyVals">
+           formArrayName="keyVals"
+           >
         <mat-form-field class="cell mat-block flex-1">
           <input [formControl]="keyValControl.get('key')" matInput required
                  placeholder="{{ keyText | translate }}"/>
-          <mat-error *ngIf="keyValControl.get('key').hasError('required')">
-            {{ keyRequiredText | translate }}
-          </mat-error>
+          @if (keyValControl.get('key').hasError('required')) {
+            <mat-error>
+              {{ keyRequiredText | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <mat-form-field class="cell mat-block flex-1">
           <input [formControl]="keyValControl.get('value')" matInput required
                  placeholder="{{ valText | translate }}"/>
-          <mat-error *ngIf="keyValControl.get('value').hasError('required')">
-            {{ valRequiredText | translate }}
-          </mat-error>
+          @if (keyValControl.get('value').hasError('required')) {
+            <mat-error>
+              {{ valRequiredText | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <button mat-icon-button color="primary"
                 [class.!hidden]="disabled"
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config.component.html
index 1395d16b47..d7dc9b6bb3 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config.component.html
@@ -18,19 +18,25 @@
 <section [formGroup]="kvListFormGroup" class="tb-form-panel stroked">
   <div class="tb-form-row no-padding no-border space-between">
     <div class="tb-form-panel-title">{{ labelText }}</div>
-    <div class="tb-form-panel-hint tb-error" translate *ngIf="kvListFormGroup.hasError('kvMapRequired')">
-      {{ requiredText }}
-    </div>
-    <div class="tb-form-panel-hint tb-error" translate *ngIf="kvListFormGroup.hasError('required')">
-      rule-node-config.map-fields-required
-    </div>
-    <div class="tb-form-panel-hint tb-error" translate *ngIf="kvListFormGroup.hasError('uniqueKeyValuePair')">
-      {{ 'rule-node-config.key-val.unique-key-value-pair-error' | translate:
-            {
-              valText: valText,
-              keyText: keyText
-            } }}
-    </div>
+    @if (kvListFormGroup.hasError('kvMapRequired')) {
+      <div class="tb-form-panel-hint tb-error" translate>
+        {{ requiredText }}
+      </div>
+    }
+    @if (kvListFormGroup.hasError('required')) {
+      <div class="tb-form-panel-hint tb-error" translate>
+        rule-node-config.map-fields-required
+      </div>
+    }
+    @if (kvListFormGroup.hasError('uniqueKeyValuePair')) {
+      <div class="tb-form-panel-hint tb-error" translate>
+        {{ 'rule-node-config.key-val.unique-key-value-pair-error' | translate:
+        {
+        valText: valText,
+        keyText: keyText
+        } }}
+      </div>
+    }
   </div>
   <div class="tb-form-panel no-border no-padding">
     <div class="tb-form-table">
@@ -40,26 +46,28 @@
         <div class="tb-form-table-header-cell actions-header"></div>
       </div>
       <div class="tb-form-table-body">
-        <div class="tb-form-table-row"
-             *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index;">
-          <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">
-            <input [placeholder]="keyText+'*'" [formControl]="keyValControl.get('key')" matInput/>
-          </mat-form-field>
-          <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">
-            <input [placeholder]="valText+'*'" [formControl]="keyValControl.get('value')" matInput/>
-          </mat-form-field>
-          <div class="tb-form-table-row-cell-buttons">
-            <button [class.tb-hidden]="keyValsFormArray().controls.length === 1"
-                    type="button"
-                    mat-icon-button
-                    (click)="removeKeyVal($index)"
-                    [disabled]="disabled"
-                    matTooltip="{{ 'rule-node-config.key-val.remove-mapping-entry' | translate }}"
-                    matTooltipPosition="above">
-              <mat-icon>delete</mat-icon>
-            </button>
+        @for (keyValControl of keyValsFormArray().controls; track keyValControl) {
+          <div class="tb-form-table-row"
+               >
+            <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">
+              <input [placeholder]="keyText+'*'" [formControl]="keyValControl.get('key')" matInput/>
+            </mat-form-field>
+            <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">
+              <input [placeholder]="valText+'*'" [formControl]="keyValControl.get('value')" matInput/>
+            </mat-form-field>
+            <div class="tb-form-table-row-cell-buttons">
+              <button [class.tb-hidden]="keyValsFormArray().controls.length === 1"
+                      type="button"
+                      mat-icon-button
+                      (click)="removeKeyVal($index)"
+                      [disabled]="disabled"
+                      matTooltip="{{ 'rule-node-config.key-val.remove-mapping-entry' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
           </div>
-        </div>
+        }
       </div>
     </div>
   </div>
@@ -68,5 +76,7 @@
       {{ 'rule-node-config.key-val.add-mapping-entry' | translate }}
     </button>
   </div>
-  <tb-example-hint [hintText]="hintText" [popupHelpLink]="popupHelpLink" *ngIf="popupHelpLink || hintText"></tb-example-hint>
+  @if (popupHelpLink || hintText) {
+    <tb-example-hint [hintText]="hintText" [popupHelpLink]="popupHelpLink"></tb-example-hint>
+  }
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/math-function-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/math-function-autocomplete.component.html
index c342149422..8dfbbaf1d6 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/math-function-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/math-function-autocomplete.component.html
@@ -23,21 +23,27 @@
          #operationInput matInput
          formControlName="operation"
          [matAutocomplete]="auto">
-  <button *ngIf="mathFunctionForm.get('operation').value"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (mathFunctionForm.get('operation').value) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete #auto="matAutocomplete" class="tb-autocomplete" [displayWith]="mathFunctionDisplayFn">
-    <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
-      <span [innerHTML]="option.value + ' | ' + option.name | highlight:searchText"></span>
-      <small style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-        {{ option.description }}
-      </small>
-    </mat-option>
-    <mat-option *ngIf="!(filteredOptions | async)?.length" [value]="null">
-      <span translate>rule-node-config.no-option-found</span>
-    </mat-option>
+    @for (option of filteredOptions | async; track option) {
+      <mat-option [value]="option.value">
+        <span [innerHTML]="option.value + ' | ' + option.name | highlight:searchText"></span>
+        <small style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+          {{ option.description }}
+        </small>
+      </mat-option>
+    }
+    @if (!(filteredOptions | async)?.length) {
+      <mat-option [value]="null">
+        <span translate>rule-node-config.no-option-found</span>
+      </mat-option>
+    }
   </mat-autocomplete>
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.html
index 7ad685d8e2..dbd1ab1e29 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.html
@@ -16,15 +16,18 @@
 
 -->
 <mat-form-field [formGroup]="messageTypeConfigForm" style="width: 100%;">
-  <mat-label *ngIf="label">{{ label }}</mat-label>
+  @if (label) {
+    <mat-label>{{ label }}</mat-label>
+  }
   <mat-chip-grid #chipList [required]="required">
-    <mat-chip-row
-      *ngFor="let messageType of messageTypes"
-      [removable]="true"
-      (removed)="remove(messageType)">
-      {{messageType.name}}
-      <mat-icon matChipRemove>close</mat-icon>
-    </mat-chip-row>
+    @for (messageType of messageTypes; track messageType) {
+      <mat-chip-row
+        [removable]="true"
+        (removed)="remove(messageType)">
+        {{messageType.name}}
+        <mat-icon matChipRemove>close</mat-icon>
+      </mat-chip-row>
+    }
     <input matInput type="text" placeholder="{{ placeholder | translate }}"
            #messageTypeInput
            (focusin)="onFocus()"
@@ -41,31 +44,38 @@
                     class="tb-autocomplete"
                     (optionSelected)="selected($event)"
                     [displayWith]="displayMessageTypeFn">
-    <mat-option *ngFor="let messageType of filteredMessageTypes | async" [value]="messageType">
-      <span [innerHTML]="messageType.name | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="(filteredMessageTypes | async)?.length === 0" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span translate>rule-node-config.no-message-types-found</span>
+    @for (messageType of filteredMessageTypes | async; track messageType) {
+      <mat-option [value]="messageType">
+        <span [innerHTML]="messageType.name | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if ((filteredMessageTypes | async)?.length === 0) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span translate>rule-node-config.no-message-types-found</span>
+            </div>
+          } @else {
+            <span>
+              {{ 'rule-node-config.no-message-type-matching' | translate :
+              {messageType: truncate.transform(searchText, true, 6, &apos;...&apos;)}
+              }}
+            </span>
+          }
+          <span>
+            <a translate (click)="createMessageType($event, searchText)">rule-node-config.create-new-message-type</a>
+          </span>
         </div>
-        <ng-template #searchNotEmpty>
-                <span>
-                  {{ 'rule-node-config.no-message-type-matching' | translate :
-                  {messageType: truncate.transform(searchText, true, 6, &apos;...&apos;)}
-                  }}
-                </span>
-        </ng-template>
-        <span>
-          <a translate (click)="createMessageType($event, searchText)">rule-node-config.create-new-message-type</a>
-        </span>
-      </div>
-    </mat-option>
+      </mat-option>
+    }
   </mat-autocomplete>
   <mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
             color="primary"
-            matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.message-type' | translate } }}">help</mat-icon>
-  <mat-error *ngIf="chipList.errorState">
-    {{ 'rule-node-config.select-message-types-required' | translate }}
-  </mat-error>
+  matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.message-type' | translate } }}">help</mat-icon>
+  @if (chipList.errorState) {
+    <mat-error>
+      {{ 'rule-node-config.select-message-types-required' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/msg-metadata-chip.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/msg-metadata-chip.component.html
index 9e7aba378f..14dfd216f5 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/msg-metadata-chip.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/msg-metadata-chip.component.html
@@ -18,9 +18,11 @@
 <div [formGroup]="chipControlGroup" class="tb-form-row space-between">
   <div class="fixed-title-width">{{ labelText }}</div>
   <mat-chip-listbox formControlName="chipControl">
-    <mat-chip-option *ngFor="let option of selectOptions"
-                     selectable="{{ chipControlGroup.get('chipControl').value !== option.value }}"
-                     color="primary"
-                     [value]="option.value">{{ option.name }}</mat-chip-option>
+    @for (option of selectOptions; track option) {
+      <mat-chip-option
+        selectable="{{ chipControlGroup.get('chipControl').value !== option.value }}"
+        color="primary"
+      [value]="option.value">{{ option.name }}</mat-chip-option>
+    }
   </mat-chip-listbox>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/output-message-type-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/output-message-type-autocomplete.component.html
index 412f8af911..138d45700b 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/output-message-type-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/output-message-type-autocomplete.component.html
@@ -19,32 +19,39 @@
   <mat-form-field class="flex" subscriptSizing="{{ subscriptSizing }}" hideRequiredMarker>
     <mat-label>{{'rule-node-config.output-message-type' | translate}}</mat-label>
     <mat-select formControlName="messageTypeAlias">
-      <mat-option *ngFor="let msgType of messageTypes" [value]="msgType">
-        {{msgType.name}}
-      </mat-option>
+      @for (msgType of messageTypes; track msgType) {
+        <mat-option [value]="msgType">
+          {{msgType.name}}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <mat-form-field class="flex" subscriptSizing="{{ subscriptSizing }}" [hideRequiredMarker]="messageTypeFormGroup.get('messageType').disabled">
     <mat-label>{{'rule-node-config.message-type-value' | translate}}</mat-label>
     <input matInput type="text" formControlName="messageType">
-    <button type="button"
-            matSuffix
-            mat-icon-button
-            aria-label="Copy"
-            *ngIf="messageTypeFormGroup.get('messageType').value"
-            ngxClipboard
-            [cbContent]="messageTypeFormGroup.get('messageType').value"
-            matTooltip="{{ 'rule-node-config.copy-message-type' | translate }}">
-      <mat-icon aria-hidden="false"
-                aria-label="help-icon">content_copy
-      </mat-icon>
-    </button>
-    <mat-error *ngIf="messageTypeFormGroup.get('messageType').hasError('required')">
-      {{ 'rule-node-config.message-type-value-required' | translate }}
-    </mat-error>
-    <mat-error *ngIf="messageTypeFormGroup.get('messageType').hasError('maxlength')">
-      {{ 'rule-node-config.message-type-value-max-length' | translate }}
-    </mat-error>
+    @if (messageTypeFormGroup.get('messageType').value) {
+      <button type="button"
+              matSuffix
+              mat-icon-button
+              aria-label="Copy"
+              ngxClipboard
+              [cbContent]="messageTypeFormGroup.get('messageType').value"
+              matTooltip="{{ 'rule-node-config.copy-message-type' | translate }}">
+        <mat-icon aria-hidden="false"
+                  aria-label="help-icon">content_copy
+        </mat-icon>
+      </button>
+    }
+    @if (messageTypeFormGroup.get('messageType').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.message-type-value-required' | translate }}
+      </mat-error>
+    }
+    @if (messageTypeFormGroup.get('messageType').hasError('maxlength')) {
+      <mat-error>
+        {{ 'rule-node-config.message-type-value-max-length' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
 </section>
 
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config-old.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config-old.component.html
index bab5638bd6..e6fbcdc3df 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config-old.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config-old.component.html
@@ -23,9 +23,11 @@
     <mat-form-field class="mat-block" style="min-width: 100px;">
       <mat-label translate>relation.direction</mat-label>
       <mat-select required matInput formControlName="direction">
-        <mat-option *ngFor="let type of directionTypes" [value]="type">
-          {{ directionTypeTranslations.get(type) | translate }}
-        </mat-option>
+        @for (type of directionTypes; track type) {
+          <mat-option [value]="type">
+            {{ directionTypeTranslations.get(type) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
     <mat-form-field floatLabel="always" class="mat-block flex-1">
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config-old.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config-old.component.ts
index 83ed4a435f..b0adb57e2a 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config-old.component.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config-old.component.ts
@@ -49,7 +49,7 @@ export class RelationsQueryConfigOldComponent extends PageComponent implements C
     this.requiredValue = coerceBooleanProperty(value);
   }
 
-  directionTypes = Object.keys(EntitySearchDirection);
+  directionTypes = Object.values(EntitySearchDirection);
   directionTypeTranslations = entitySearchDirectionTranslations;
 
   relationsQueryFormGroup: FormGroup;
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config.component.html
index 936a9cde9d..5f8754c723 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config.component.html
@@ -22,9 +22,11 @@
       <mat-form-field class="mat-block max-w-50% flex-full" style="min-width: 100px;" hideRequiredMarker>
         <mat-label translate>relation.direction</mat-label>
         <mat-select required formControlName="direction">
-          <mat-option *ngFor="let type of directionTypes" [value]="type">
-            {{ directionTypeTranslations.get(type) | translate }} <span translate>rule-node-config.relations-query-config-direction-suffix</span>
-          </mat-option>
+          @for (type of directionTypes; track type) {
+            <mat-option [value]="type">
+              {{ directionTypeTranslations.get(type) | translate }} <span translate>rule-node-config.relations-query-config-direction-suffix</span>
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <mat-form-field floatLabel="always" class="mat-block max-w-50% flex-full">
@@ -36,21 +38,26 @@
                inputmode="numeric"
                placeholder="{{ 'rule-node-config.unlimited-level' | translate }}"
                formControlName="maxLevel">
-        <mat-error *ngIf="relationsQueryFormGroup.get('maxLevel').hasError('min')">
-          {{ 'rule-node-config.max-relation-level-error' | translate }}
-        </mat-error>
-        <mat-error *ngIf="relationsQueryFormGroup.get('maxLevel').invalid">
-          {{ 'rule-node-config.max-relation-level-invalid' | translate }}
-        </mat-error>
+        @if (relationsQueryFormGroup.get('maxLevel').hasError('min')) {
+          <mat-error>
+            {{ 'rule-node-config.max-relation-level-error' | translate }}
+          </mat-error>
+        }
+        @if (relationsQueryFormGroup.get('maxLevel').invalid) {
+          <mat-error>
+            {{ 'rule-node-config.max-relation-level-invalid' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
     </div>
-    <div tb-hint-tooltip-icon="{{ 'rule-node-config.last-level-relation-tooltip' | translate }}"
-         *ngIf="relationsQueryFormGroup.get('maxLevel').value > 1"
-         class="tb-form-row no-border no-padding last-level-slide-toggle">
-      <mat-slide-toggle class="mat-slide" formControlName="fetchLastLevelOnly">
-        {{ 'alias.last-level-relation' | translate }}
-      </mat-slide-toggle>
-    </div>
+    @if (relationsQueryFormGroup.get('maxLevel').value > 1) {
+      <div tb-hint-tooltip-icon="{{ 'rule-node-config.last-level-relation-tooltip' | translate }}"
+           class="tb-form-row no-border no-padding last-level-slide-toggle">
+        <mat-slide-toggle class="mat-slide" formControlName="fetchLastLevelOnly">
+          {{ 'alias.last-level-relation' | translate }}
+        </mat-slide-toggle>
+      </div>
+    }
   </section>
   <section [formGroup]="relationsQueryFormGroup" class="tb-form-panel stroked">
     <div class="tb-form-panel-title" translate>relation.relation-filters</div>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.html
index 9665fff5ce..3d93ab0b11 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.html
@@ -17,7 +17,7 @@
 -->
 <div class="tb-form-panel no-padding no-border" [formGroup]="attributeControlGroup">
   <tb-example-hint [hintText]="'rule-node-config.kv-map-pattern-hint'"
-                   [popupHelpLink]="popupHelpLink"></tb-example-hint>
+  [popupHelpLink]="popupHelpLink"></tb-example-hint>
   <tb-string-items-list subscriptSizing="dynamic" class="mat-block" editable
                         (focusout)="onTouched()"
                         [placeholder]="'rule-node-config.add-attribute-key' | translate"
@@ -42,18 +42,19 @@
                         [label]="'rule-node-config.latest-telemetry' | translate" formControlName="latestTsKeyNames">
     <ng-container matSuffix *ngTemplateOutlet="helpIcon"></ng-container>
   </tb-string-items-list>
-  <div tb-hint-tooltip-icon="{{ 'rule-node-config.fetch-latest-telemetry-with-timestamp-tooltip' | translate:
+  @if (attributeControlGroup.get('latestTsKeyNames').value?.length > 0) {
+<div tb-hint-tooltip-icon="{{ 'rule-node-config.fetch-latest-telemetry-with-timestamp-tooltip' | translate:
                          { latestTsKeyName:  attributeControlGroup.get('latestTsKeyNames').value[0]} }}"
-       *ngIf="attributeControlGroup.get('latestTsKeyNames').value?.length > 0"
-       class="tb-form-row no-border no-padding">
-    <mat-slide-toggle class="mat-slide" formControlName="getLatestValueWithTs">
-      {{ 'rule-node-config.fetch-latest-telemetry-with-timestamp' | translate }}
-    </mat-slide-toggle>
-  </div>
+      class="tb-form-row no-border no-padding">
+      <mat-slide-toggle class="mat-slide" formControlName="getLatestValueWithTs">
+        {{ 'rule-node-config.fetch-latest-telemetry-with-timestamp' | translate }}
+      </mat-slide-toggle>
+    </div>
+  }
 </div>
 
 <ng-template #helpIcon>
   <mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
             color="primary"
-            matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.field-name' | translate } }}">help</mat-icon>
+  matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.field-name' | translate } }}">help</mat-icon>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/sv-map-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/sv-map-config.component.html
index b8d804bfea..dddbcac29e 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/sv-map-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/sv-map-config.component.html
@@ -18,12 +18,16 @@
 <section [formGroup]="svListFormGroup" class="tb-form-panel stroked">
   <div class="tb-form-row no-padding no-border space-between">
     <div class="tb-form-panel-title">{{ labelText }}</div>
-    <div class="tb-form-panel-hint tb-error" translate *ngIf="svListFormGroup.hasError('required')">
-      rule-node-config.map-fields-required
-    </div>
-    <div class="tb-form-panel-hint tb-error" translate *ngIf="svListFormGroup.hasError('svMapRequired')">
-      {{ requiredText }}
-    </div>
+    @if (svListFormGroup.hasError('required')) {
+      <div class="tb-form-panel-hint tb-error" translate>
+        rule-node-config.map-fields-required
+      </div>
+    }
+    @if (svListFormGroup.hasError('svMapRequired')) {
+      <div class="tb-form-panel-hint tb-error" translate>
+        {{ requiredText }}
+      </div>
+    }
   </div>
   <div class="tb-form-panel no-border no-padding">
     <div class="tb-form-table">
@@ -33,30 +37,34 @@
         <div class="tb-form-table-header-cell actions-header"></div>
       </div>
       <div class="tb-form-table-body">
-        <div class="tb-form-table-row"
-             *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index;">
-          <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">
-            <mat-select [placeholder]="selectText" [formControl]="keyValControl.get('key')" required>
-              <mat-option *ngFor="let option of filterSelectOptions(keyValControl)" [value]="option.value">
-                {{option.name}}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-          <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">
-            <input [placeholder]="valText" [formControl]="keyValControl.get('value')" matInput/>
-          </mat-form-field>
-          <div class="tb-form-table-row-cell-buttons">
-            <button [class.tb-hidden]="keyValsFormArray().controls.length === 1"
-                    type="button"
-                    mat-icon-button
-                    (click)="removeKeyVal($index)"
-                    [disabled]="isLoading$ | async"
-                    matTooltip="{{ 'rule-node-config.key-val.remove-mapping-entry' | translate }}"
-                    matTooltipPosition="above">
-              <mat-icon>delete</mat-icon>
-            </button>
+        @for (keyValControl of keyValsFormArray().controls; track keyValControl) {
+          <div class="tb-form-table-row"
+               >
+            <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">
+              <mat-select [placeholder]="selectText" [formControl]="keyValControl.get('key')" required>
+                @for (option of filterSelectOptions(keyValControl); track option) {
+                  <mat-option [value]="option.value">
+                    {{option.name}}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">
+              <input [placeholder]="valText" [formControl]="keyValControl.get('value')" matInput/>
+            </mat-form-field>
+            <div class="tb-form-table-row-cell-buttons">
+              <button [class.tb-hidden]="keyValsFormArray().controls.length === 1"
+                      type="button"
+                      mat-icon-button
+                      (click)="removeKeyVal($index)"
+                      [disabled]="isLoading$ | async"
+                      matTooltip="{{ 'rule-node-config.key-val.remove-mapping-entry' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
           </div>
-        </div>
+        }
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/calculate-delta-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/enrichment/calculate-delta-config.component.html
index e39b97a19d..dcc5fee728 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/calculate-delta-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/enrichment/calculate-delta-config.component.html
@@ -20,29 +20,37 @@
     <mat-form-field class="mat-block flex-1">
       <mat-label>{{ 'rule-node-config.input-value-key' | translate }}</mat-label>
       <input matInput formControlName="inputValueKey">
-      <mat-error *ngIf="calculateDeltaConfigForm.get('inputValueKey').hasError('required') ||
-      calculateDeltaConfigForm.get('inputValueKey').hasError('pattern')">
-        {{ 'rule-node-config.input-value-key-required' | translate }}
-      </mat-error>
+      @if (calculateDeltaConfigForm.get('inputValueKey').hasError('required') ||
+        calculateDeltaConfigForm.get('inputValueKey').hasError('pattern')) {
+        <mat-error>
+          {{ 'rule-node-config.input-value-key-required' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
     <mat-form-field class="mat-block flex-1">
       <mat-label>{{ 'rule-node-config.output-value-key' | translate }}</mat-label>
       <input matInput formControlName="outputValueKey">
-      <mat-error *ngIf="calculateDeltaConfigForm.get('outputValueKey').hasError('required') ||
-      calculateDeltaConfigForm.get('outputValueKey').hasError('pattern')">
-        {{ 'rule-node-config.output-value-key-required' | translate }}
-      </mat-error>
+      @if (calculateDeltaConfigForm.get('outputValueKey').hasError('required') ||
+        calculateDeltaConfigForm.get('outputValueKey').hasError('pattern')) {
+        <mat-error>
+          {{ 'rule-node-config.output-value-key-required' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
   </div>
   <mat-form-field class="mat-block flex-1">
     <mat-label>{{ 'rule-node-config.number-of-digits-after-floating-point' | translate }}</mat-label>
     <input type="number" min="0" max="15" step="1" matInput formControlName="round">
-    <mat-error *ngIf="calculateDeltaConfigForm.get('round').hasError('min')">
-      {{ 'rule-node-config.number-of-digits-after-floating-point-range' | translate }}
-    </mat-error>
-    <mat-error *ngIf="calculateDeltaConfigForm.get('round').hasError('max')">
-      {{ 'rule-node-config.number-of-digits-after-floating-point-range' | translate }}
-    </mat-error>
+    @if (calculateDeltaConfigForm.get('round').hasError('min')) {
+      <mat-error>
+        {{ 'rule-node-config.number-of-digits-after-floating-point-range' | translate }}
+      </mat-error>
+    }
+    @if (calculateDeltaConfigForm.get('round').hasError('max')) {
+      <mat-error>
+        {{ 'rule-node-config.number-of-digits-after-floating-point-range' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <div class="tb-form-panel no-padding no-border">
     <div tb-hint-tooltip-icon="{{ 'rule-node-config.failure-if-delta-negative-tooltip' | translate }}"
@@ -54,7 +62,7 @@
     <div tb-hint-tooltip-icon="{{ 'rule-node-config.use-caching-tooltip' | translate :
                        { inputValueKey: calculateDeltaConfigForm.get('inputValueKey').valid ?
                                 calculateDeltaConfigForm.get('inputValueKey').value : 'rule-node-config.input-value-key' | translate } }}"
-         class="tb-form-row same-padding">
+      class="tb-form-row same-padding">
       <mat-slide-toggle class="mat-slide margin" formControlName="useCache">
         {{ 'rule-node-config.use-caching' | translate }}
       </mat-slide-toggle>
@@ -64,26 +72,30 @@
                            { periodValueKey: (calculateDeltaConfigForm.get('periodValueKey').valid &&
                            calculateDeltaConfigForm.get('addPeriodBetweenMsgs').value) ? calculateDeltaConfigForm.get('periodValueKey').value :
                            'periodInMs' } }}"
-           class="tb-form-row no-border no-padding">
+        class="tb-form-row no-border no-padding">
         <mat-slide-toggle class="mat-slide" formControlName="addPeriodBetweenMsgs">
           {{ 'rule-node-config.add-time-difference-between-readings' | translate:
           { inputValueKey: calculateDeltaConfigForm.get('inputValueKey').valid ?
-                     calculateDeltaConfigForm.get('inputValueKey').value : 'rule-node-config.input-value-key' | translate } }}
+          calculateDeltaConfigForm.get('inputValueKey').value : 'rule-node-config.input-value-key' | translate } }}
         </mat-slide-toggle>
       </div>
-      <mat-form-field class="mat-block" *ngIf="calculateDeltaConfigForm.get('addPeriodBetweenMsgs').value">
-        <mat-label>{{ 'rule-node-config.period-value-key' | translate }}</mat-label>
-        <input required matInput formControlName="periodValueKey">
-        <mat-error *ngIf="calculateDeltaConfigForm.get('periodValueKey').hasError('required')">
-          {{ 'rule-node-config.period-value-key-required' | translate }}
-        </mat-error>
-      </mat-form-field>
+      @if (calculateDeltaConfigForm.get('addPeriodBetweenMsgs').value) {
+        <mat-form-field class="mat-block">
+          <mat-label>{{ 'rule-node-config.period-value-key' | translate }}</mat-label>
+          <input required matInput formControlName="periodValueKey">
+          @if (calculateDeltaConfigForm.get('periodValueKey').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.period-value-key-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+      }
     </div>
     <div tb-hint-tooltip-icon="{{ calculateDeltaConfigForm.get('addPeriodBetweenMsgs').value ? ('rule-node-config.exclude-zero-deltas-time-difference-hint'  | translate :{
             outputValueKey: calculateDeltaConfigForm.get('outputValueKey').valid ? calculateDeltaConfigForm.get('outputValueKey').value : 'rule-node-config.output-value-key' | translate,
             periodValueKey: calculateDeltaConfigForm.get('periodValueKey').valid ? calculateDeltaConfigForm.get('periodValueKey').value : 'rule-node-config.period-value-key' | translate
             }) : ('rule-node-config.exclude-zero-deltas-hint' | translate :{ outputValueKey: calculateDeltaConfigForm.get('outputValueKey').valid ? calculateDeltaConfigForm.get('outputValueKey').value : 'rule-node-config.output-value-key' | translate }) }}"
-         class="tb-form-row same-padding">
+      class="tb-form-row same-padding">
       <mat-slide-toggle class="mat-slide margin" formControlName="excludeZeroDeltas">
         {{ 'rule-node-config.exclude-zero-deltas' | translate }}
       </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/customer-attributes-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/enrichment/customer-attributes-config.component.html
index e32b62a92e..e26979cce6 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/customer-attributes-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/enrichment/customer-attributes-config.component.html
@@ -20,9 +20,11 @@
   <div class="flex flex-1 items-center justify-center">
     <div class="fetch-to-data-toggle">
       <tb-toggle-select class="fetch-to-data-toggle" formControlName="dataToFetch" appearance="fill">
-        <tb-toggle-option *ngFor="let data of fetchToData" [value]="data.value">
-          {{ data.name }}
-        </tb-toggle-option>
+        @for (data of fetchToData; track data) {
+          <tb-toggle-option [value]="data.value">
+            {{ data.name }}
+          </tb-toggle-option>
+        }
       </tb-toggle-select>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/get-telemetry-from-database-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/enrichment/get-telemetry-from-database-config.component.html
index d28aa22624..89e8a0090e 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/get-telemetry-from-database-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/enrichment/get-telemetry-from-database-config.component.html
@@ -26,7 +26,7 @@
          tb-help-popup-placement="right"
          trigger-style="letter-spacing:0.25px; font-size:12px"
          [tb-help-popup-style]="{maxWidth: '820px'}"
-         trigger-text="{{ 'rule-node-config.key-val.see-examples' | translate }}"></div>
+    trigger-text="{{ 'rule-node-config.key-val.see-examples' | translate }}"></div>
     <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" color="primary"
               matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.timeseries-key' | translate } }}">help
     </mat-icon>
@@ -39,144 +39,180 @@
         {{ 'rule-node-config.use-metadata-dynamic-interval' | translate }}
       </mat-slide-toggle>
     </div>
-    <div formGroupName="interval" class="flex flex-col"
-         *ngIf="getTelemetryFromDatabaseConfigForm.get('useMetadataIntervalPatterns').value === false; else intervalPattern">
-      <div class="flex flex-col gap-0 gt-sm:flex-row gt-sm:gap-4">
-        <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full">
-          <mat-label>{{ 'rule-node-config.interval-start' | translate }}</mat-label>
-          <input type="number" step="1" min="1" max="2147483647" matInput formControlName="startInterval" required>
-          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('interval.startInterval').hasError('required')">
-            {{ 'rule-node-config.start-interval-value-required' | translate }}
-          </mat-error>
-          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('interval.startInterval').hasError('min')">
-            {{ 'rule-node-config.time-value-range' | translate }}
-          </mat-error>
-          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('interval.startInterval').hasError('max')">
-            {{ 'rule-node-config.time-value-range' | translate }}
-          </mat-error>
-        </mat-form-field>
-        <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full" hideRequiredMarker>
-          <mat-label>{{ 'rule-node-config.time-unit' | translate }}</mat-label>
-          <mat-select formControlName="startIntervalTimeUnit" required>
-            <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
-              {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div class="flex flex-col gap-0 gt-sm:flex-row gt-sm:gap-4">
-        <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full">
-          <mat-label>{{ 'rule-node-config.interval-end' | translate }}</mat-label>
-          <input type="number" step="1" min="1" max="2147483647" matInput formControlName="endInterval" required>
-          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('interval.endInterval').hasError('required')">
-            {{ 'rule-node-config.end-interval-value-required' | translate }}
-          </mat-error>
-          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('interval.endInterval').hasError('min')">
-            {{ 'rule-node-config.time-value-range' | translate }}
-          </mat-error>
-          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('interval.endInterval').hasError('max')">
-            {{ 'rule-node-config.time-value-range' | translate }}
-          </mat-error>
-        </mat-form-field>
-        <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full" hideRequiredMarker>
-          <mat-label>{{ 'rule-node-config.time-unit' | translate }}</mat-label>
-          <mat-select formControlName="endIntervalTimeUnit" required>
-            <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
-              {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div class="description-block tb-primary-fill" [class.error]="getTelemetryFromDatabaseConfigForm.get('interval').invalid">
-        <mat-icon class="description-icon">error_outline</mat-icon>
-        <div class="description-text">
-          <ng-container *ngIf="getTelemetryFromDatabaseConfigForm.get('interval').valid; else invalidText">
-            {{ 'rule-node-config.fetch-timeseries-from-to' | translate:
-            {
+    @if (getTelemetryFromDatabaseConfigForm.get('useMetadataIntervalPatterns').value === false) {
+      <div formGroupName="interval" class="flex flex-col"
+           >
+        <div class="flex flex-col gap-0 gt-sm:flex-row gt-sm:gap-4">
+          <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full">
+            <mat-label>{{ 'rule-node-config.interval-start' | translate }}</mat-label>
+            <input type="number" step="1" min="1" max="2147483647" matInput formControlName="startInterval" required>
+            @if (getTelemetryFromDatabaseConfigForm.get('interval.startInterval').hasError('required')) {
+              <mat-error>
+                {{ 'rule-node-config.start-interval-value-required' | translate }}
+              </mat-error>
+            }
+            @if (getTelemetryFromDatabaseConfigForm.get('interval.startInterval').hasError('min')) {
+              <mat-error>
+                {{ 'rule-node-config.time-value-range' | translate }}
+              </mat-error>
+            }
+            @if (getTelemetryFromDatabaseConfigForm.get('interval.startInterval').hasError('max')) {
+              <mat-error>
+                {{ 'rule-node-config.time-value-range' | translate }}
+              </mat-error>
+            }
+          </mat-form-field>
+          <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full" hideRequiredMarker>
+            <mat-label>{{ 'rule-node-config.time-unit' | translate }}</mat-label>
+            <mat-select formControlName="startIntervalTimeUnit" required>
+              @for (timeUnit of timeUnits; track timeUnit) {
+                <mat-option [value]="timeUnit">
+                  {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="flex flex-col gap-0 gt-sm:flex-row gt-sm:gap-4">
+          <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full">
+            <mat-label>{{ 'rule-node-config.interval-end' | translate }}</mat-label>
+            <input type="number" step="1" min="1" max="2147483647" matInput formControlName="endInterval" required>
+            @if (getTelemetryFromDatabaseConfigForm.get('interval.endInterval').hasError('required')) {
+              <mat-error>
+                {{ 'rule-node-config.end-interval-value-required' | translate }}
+              </mat-error>
+            }
+            @if (getTelemetryFromDatabaseConfigForm.get('interval.endInterval').hasError('min')) {
+              <mat-error>
+                {{ 'rule-node-config.time-value-range' | translate }}
+              </mat-error>
+            }
+            @if (getTelemetryFromDatabaseConfigForm.get('interval.endInterval').hasError('max')) {
+              <mat-error>
+                {{ 'rule-node-config.time-value-range' | translate }}
+              </mat-error>
+            }
+          </mat-form-field>
+          <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full" hideRequiredMarker>
+            <mat-label>{{ 'rule-node-config.time-unit' | translate }}</mat-label>
+            <mat-select formControlName="endIntervalTimeUnit" required>
+              @for (timeUnit of timeUnits; track timeUnit) {
+                <mat-option [value]="timeUnit">
+                  {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="description-block tb-primary-fill" [class.error]="getTelemetryFromDatabaseConfigForm.get('interval').invalid">
+          <mat-icon class="description-icon">error_outline</mat-icon>
+          <div class="description-text">
+            @if (getTelemetryFromDatabaseConfigForm.get('interval').valid) {
+              {{ 'rule-node-config.fetch-timeseries-from-to' | translate:
+              {
               startInterval: getTelemetryFromDatabaseConfigForm.get('interval.startInterval').value,
               endInterval: getTelemetryFromDatabaseConfigForm.get('interval.endInterval').value,
               startIntervalTimeUnit: getTelemetryFromDatabaseConfigForm.get('interval.startIntervalTimeUnit').value.toLowerCase(),
               endIntervalTimeUnit: getTelemetryFromDatabaseConfigForm.get('interval.endIntervalTimeUnit').value.toLowerCase()
-            } }}
-          </ng-container>
-          <ng-template #invalidText>
-            {{ "rule-node-config.fetch-timeseries-from-to-invalid" | translate }}
-          </ng-template>
+              } }}
+            } @else {
+              {{ "rule-node-config.fetch-timeseries-from-to-invalid" | translate }}
+            }
+          </div>
         </div>
       </div>
-    </div>
-    <ng-template #intervalPattern>
+    } @else {
       <div class="input-block flex flex-col">
         <mat-form-field class="mat-block flex-1">
           <mat-label>{{ 'rule-node-config.start-interval' | translate }}</mat-label>
           <input matInput formControlName="startIntervalPattern" required>
-          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('startIntervalPattern').hasError('required') ||
-            getTelemetryFromDatabaseConfigForm.get('startIntervalPattern').hasError('pattern')">
-            {{ 'rule-node-config.start-interval-required' | translate }}
-          </mat-error>
+          @if (getTelemetryFromDatabaseConfigForm.get('startIntervalPattern').hasError('required') ||
+            getTelemetryFromDatabaseConfigForm.get('startIntervalPattern').hasError('pattern')) {
+            <mat-error>
+              {{ 'rule-node-config.start-interval-required' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <mat-form-field class="mat-block flex-1">
           <mat-label>{{ 'rule-node-config.end-interval' | translate }}</mat-label>
           <input matInput formControlName="endIntervalPattern" required>
-          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('endIntervalPattern').hasError('required') ||
-          getTelemetryFromDatabaseConfigForm.get('endIntervalPattern').hasError('pattern')">
-            {{ 'rule-node-config.end-interval-required' | translate }}
-          </mat-error>
+          @if (getTelemetryFromDatabaseConfigForm.get('endIntervalPattern').hasError('required') ||
+            getTelemetryFromDatabaseConfigForm.get('endIntervalPattern').hasError('pattern')) {
+            <mat-error>
+              {{ 'rule-node-config.end-interval-required' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <tb-example-hint [hintText]="'rule-node-config.metadata-dynamic-interval-hint'"
                          popupHelpLink="rulenode/originator_telemetry_node_fields_templatization">
         </tb-example-hint>
       </div>
-    </ng-template>
+    }
   </div>
   <div class="tb-form-panel stroked">
     <div class="tb-form-panel-title" translate>rule-node-config.fetch-strategy</div>
     <div class="tb-form-panel no-border no-padding item-center">
       <div class="fetch-mod-toggle">
         <tb-toggle-select formControlName="fetchMode" appearance="fill">
-          <tb-toggle-option *ngFor="let data of headerOptions" [value]="data.value">
-            {{ data.name }}
-          </tb-toggle-option>
+          @for (data of headerOptions; track data) {
+            <tb-toggle-option [value]="data.value">
+              {{ data.name }}
+            </tb-toggle-option>
+          }
         </tb-toggle-select>
       </div>
       <div class="tb-form-hint tb-primary-fill hint-container">
         {{ deduplicationStrategiesHintTranslations.get(getTelemetryFromDatabaseConfigForm.get('fetchMode').value) | translate }}
       </div>
     </div>
-    <div *ngIf="getTelemetryFromDatabaseConfigForm.get('fetchMode').value === fetchMode.ALL">
-      <mat-form-field class="mat-block" hideRequiredMarker
-                      [subscriptSizing]="defaultPaddingEnable() ? 'fixed' : 'dynamic'">
-        <mat-label>{{ 'aggregation.function' | translate }}</mat-label>
-        <mat-select formControlName="aggregation" required>
-          <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
-            {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <div *ngIf="getTelemetryFromDatabaseConfigForm.get('aggregation').value === aggregationTypes.NONE">
-        <mat-form-field class="mat-block" hideRequiredMarker>
-          <mat-label> {{ "rule-node-config.order-by-timestamp" | translate }} </mat-label>
-          <mat-select formControlName="orderBy" required>
-            <mat-option *ngFor="let order of samplingOrders" [value]="order">
-              {{ samplingOrdersTranslate.get(order) | translate }}
-            </mat-option>
+    @if (getTelemetryFromDatabaseConfigForm.get('fetchMode').value === fetchMode.ALL) {
+      <div>
+        <mat-form-field class="mat-block" hideRequiredMarker
+                        [subscriptSizing]="defaultPaddingEnable() ? 'fixed' : 'dynamic'">
+          <mat-label>{{ 'aggregation.function' | translate }}</mat-label>
+          <mat-select formControlName="aggregation" required>
+            @for (aggregation of aggregations; track aggregation) {
+              <mat-option [value]="aggregation">
+                {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
-        <mat-form-field class="mat-block">
-          <mat-label>{{ "rule-node-config.limit" | translate }}</mat-label>
-          <input type="number" min="2" max="1000" step="1" matInput formControlName="limit" required>
-          <mat-hint>{{ "rule-node-config.limit-hint" | translate }}</mat-hint>
-          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('limit').hasError('required')">
-            {{ 'rule-node-config.limit-required' | translate }}
-          </mat-error>
-          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('limit').hasError('min')">
-            {{ 'rule-node-config.limit-range' | translate }}
-          </mat-error>
-          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('limit').hasError('max')">
-            {{ 'rule-node-config.limit-range' | translate }}
-          </mat-error>
-        </mat-form-field>
+        @if (getTelemetryFromDatabaseConfigForm.get('aggregation').value === aggregationTypes.NONE) {
+          <div>
+            <mat-form-field class="mat-block" hideRequiredMarker>
+              <mat-label> {{ "rule-node-config.order-by-timestamp" | translate }} </mat-label>
+              <mat-select formControlName="orderBy" required>
+                @for (order of samplingOrders; track order) {
+                  <mat-option [value]="order">
+                    {{ samplingOrdersTranslate.get(order) | translate }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field class="mat-block">
+              <mat-label>{{ "rule-node-config.limit" | translate }}</mat-label>
+              <input type="number" min="2" max="1000" step="1" matInput formControlName="limit" required>
+              <mat-hint>{{ "rule-node-config.limit-hint" | translate }}</mat-hint>
+              @if (getTelemetryFromDatabaseConfigForm.get('limit').hasError('required')) {
+                <mat-error>
+                  {{ 'rule-node-config.limit-required' | translate }}
+                </mat-error>
+              }
+              @if (getTelemetryFromDatabaseConfigForm.get('limit').hasError('min')) {
+                <mat-error>
+                  {{ 'rule-node-config.limit-range' | translate }}
+                </mat-error>
+              }
+              @if (getTelemetryFromDatabaseConfigForm.get('limit').hasError('max')) {
+                <mat-error>
+                  {{ 'rule-node-config.limit-range' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+          </div>
+        }
       </div>
-    </div>
+    }
   </div>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/related-attributes-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/enrichment/related-attributes-config.component.html
index cdce036bbb..d80674e7fb 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/related-attributes-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/enrichment/related-attributes-config.component.html
@@ -23,9 +23,11 @@
   <div class="tb-form-panel stroked">
     <div class="tb-form-panel-title" translate>rule-node-config.data-to-fetch</div>
     <tb-toggle-select formControlName="dataToFetch" appearance="fill">
-      <tb-toggle-option *ngFor="let data of fetchToData" [value]="data.value">
-        {{ data.name }}
-      </tb-toggle-option>
+      @for (data of fetchToData; track data) {
+        <tb-toggle-option [value]="data.value">
+          {{ data.name }}
+        </tb-toggle-option>
+      }
     </tb-toggle-select>
     <tb-kv-map-config
       [hidden]="relatedAttributesConfigForm.get('dataToFetch').value === DataToFetch.FIELDS"
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/tenant-attributes-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/enrichment/tenant-attributes-config.component.html
index f29c9f906f..49b0451d63 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/tenant-attributes-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/enrichment/tenant-attributes-config.component.html
@@ -20,9 +20,11 @@
   <div class="flex flex-1 items-center justify-center">
     <div class="fetch-to-data-toggle">
       <tb-toggle-select class="fetch-to-data-toggle" formControlName="dataToFetch" appearance="fill">
-        <tb-toggle-option *ngFor="let data of fetchToData" [value]="data.value">
-          {{ data.name }}
-        </tb-toggle-option>
+        @for (data of fetchToData; track data) {
+          <tb-toggle-option [value]="data.value">
+            {{ data.name }}
+          </tb-toggle-option>
+        }
       </tb-toggle-select>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.html
index 73605e0767..7167b68132 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.html
@@ -50,25 +50,35 @@
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <mat-label translate>rule-node-config.ai.system-prompt</mat-label>
           <textarea matInput rows="4" formControlName="systemPrompt"></textarea>
-          <mat-error *ngIf="aiConfigForm.get('systemPrompt').hasError('maxlength')">
-            {{ 'rule-node-config.ai.system-prompt-max-length' | translate }}
-          </mat-error>
-          <mat-error *ngIf="aiConfigForm.get('systemPrompt').hasError('pattern')">
-            {{ 'rule-node-config.ai.system-prompt-blank' | translate }}
-          </mat-error>
+          @if (aiConfigForm.get('systemPrompt').hasError('maxlength')) {
+            <mat-error>
+              {{ 'rule-node-config.ai.system-prompt-max-length' | translate }}
+            </mat-error>
+          }
+          @if (aiConfigForm.get('systemPrompt').hasError('pattern')) {
+            <mat-error>
+              {{ 'rule-node-config.ai.system-prompt-blank' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <mat-label translate>rule-node-config.ai.user-prompt</mat-label>
           <textarea required matInput rows="4" formControlName="userPrompt"></textarea>
-          <mat-error *ngIf="aiConfigForm.get('userPrompt').hasError('required')">
-            {{ 'rule-node-config.ai.user-prompt-required' | translate }}
-          </mat-error>
-          <mat-error *ngIf="aiConfigForm.get('userPrompt').hasError('maxlength')">
-            {{ 'rule-node-config.ai.user-prompt-max-length' | translate }}
-          </mat-error>
-          <mat-error *ngIf="aiConfigForm.get('userPrompt').hasError('pattern')">
-            {{ 'rule-node-config.ai.user-prompt-blank' | translate }}
-          </mat-error>
+          @if (aiConfigForm.get('userPrompt').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.ai.user-prompt-required' | translate }}
+            </mat-error>
+          }
+          @if (aiConfigForm.get('userPrompt').hasError('maxlength')) {
+            <mat-error>
+              {{ 'rule-node-config.ai.user-prompt-max-length' | translate }}
+            </mat-error>
+          }
+          @if (aiConfigForm.get('userPrompt').hasError('pattern')) {
+            <mat-error>
+              {{ 'rule-node-config.ai.user-prompt-blank' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <tb-entity-list
           class="flex-1"
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/azure-iot-hub-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/azure-iot-hub-config.component.html
index 3096b20823..44bcd95f90 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/azure-iot-hub-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/azure-iot-hub-config.component.html
@@ -19,24 +19,30 @@
   <mat-form-field class="mat-block" subscriptSizing="dynamic">
     <mat-label translate>rule-node-config.topic</mat-label>
     <input required matInput formControlName="topicPattern">
-    <mat-error *ngIf="azureIotHubConfigForm.get('topicPattern').hasError('required')">
-      {{ 'rule-node-config.topic-required' | translate }}
-    </mat-error>
+    @if (azureIotHubConfigForm.get('topicPattern').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.topic-required' | translate }}
+      </mat-error>
+    }
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.hostname</mat-label>
     <input required matInput formControlName="host">
-    <mat-error *ngIf="azureIotHubConfigForm.get('host').hasError('required')">
-      {{ 'rule-node-config.hostname-required' | translate }}
-    </mat-error>
+    @if (azureIotHubConfigForm.get('host').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.hostname-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.device-id</mat-label>
     <input required matInput formControlName="clientId" autocomplete="new-clientId">
-    <mat-error *ngIf="azureIotHubConfigForm.get('clientId').hasError('required')">
-      {{ 'rule-node-config.device-id-required' | translate }}
-    </mat-error>
+    @if (azureIotHubConfigForm.get('clientId').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.device-id-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <tb-mqtt-version-select formControlName="protocolVersion" subscriptSizing="fixed"
                           [excludeVersions]="[MqttVersion.MQTT_3_1, MqttVersion.MQTT_5]">
@@ -53,71 +59,78 @@
         <mat-form-field class="mat-block">
           <mat-label translate>rule-node-config.credentials-type</mat-label>
           <mat-select formControlName="type" required>
-            <mat-option *ngFor="let credentialsType of allAzureIotHubCredentialsTypes" [value]="credentialsType">
-              {{ azureIotHubCredentialsTypeTranslationsMap.get(credentialsType) | translate }}
-            </mat-option>
+            @for (credentialsType of allAzureIotHubCredentialsTypes; track credentialsType) {
+              <mat-option [value]="credentialsType">
+                {{ azureIotHubCredentialsTypeTranslationsMap.get(credentialsType) | translate }}
+              </mat-option>
+            }
           </mat-select>
-          <mat-error *ngIf="azureIotHubConfigForm.get('credentials.type').hasError('required')">
-            {{ 'rule-node-config.credentials-type-required' | translate }}
-          </mat-error>
+          @if (azureIotHubConfigForm.get('credentials.type').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.credentials-type-required' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
-        <section class="flex flex-col" [ngSwitch]="azureIotHubConfigForm.get('credentials.type').value">
-          <ng-template ngSwitchCase="anonymous">
-          </ng-template>
-          <ng-template ngSwitchCase="sas">
-            <mat-form-field class="mat-block">
-              <mat-label translate>rule-node-config.sas-key</mat-label>
-              <input type="password" required matInput formControlName="sasKey" autocomplete="new-password">
-              <tb-toggle-password matSuffix></tb-toggle-password>
-              <mat-error *ngIf="azureIotHubConfigForm.get('credentials.sasKey').hasError('required')">
-                {{ 'rule-node-config.sas-key-required' | translate }}
-              </mat-error>
-            </mat-form-field>
-            <tb-file-input formControlName="caCert"
-                           inputId="caCertSelect"
-                           [existingFileName]="azureIotHubConfigForm.get('credentials.caCertFileName').value"
-                           (fileNameChanged)="azureIotHubConfigForm.get('credentials.caCertFileName').setValue($event)"
-                           label="{{'rule-node-config.azure-ca-cert' | translate}}"
-                           noFileText="rule-node-config.no-file"
-                           dropLabel="{{'rule-node-config.drop-file' | translate}}">
-            </tb-file-input>
-          </ng-template>
-          <ng-template ngSwitchCase="cert.PEM">
-            <tb-file-input formControlName="caCert"
-                           inputId="caCertSelect"
-                           [existingFileName]="azureIotHubConfigForm.get('credentials.caCertFileName').value"
-                           (fileNameChanged)="azureIotHubConfigForm.get('credentials.caCertFileName').setValue($event)"
-                           label="{{'rule-node-config.azure-ca-cert' | translate}}"
-                           noFileText="rule-node-config.no-file"
-                           dropLabel="{{'rule-node-config.drop-file' | translate}}">
-            </tb-file-input>
-            <tb-file-input formControlName="cert"
-                           inputId="CertSelect"
-                           [existingFileName]="azureIotHubConfigForm.get('credentials.certFileName').value"
-                           (fileNameChanged)="azureIotHubConfigForm.get('credentials.certFileName').setValue($event)"
-                           required
-                           requiredAsError
-                           label="{{'rule-node-config.cert' | translate}}"
-                           noFileText="rule-node-config.no-file"
-                           dropLabel="{{'rule-node-config.drop-file' | translate}}">
-            </tb-file-input>
-            <tb-file-input style="padding-bottom: 8px;"
-                           formControlName="privateKey"
-                           inputId="privateKeySelect"
-                           [existingFileName]="azureIotHubConfigForm.get('credentials.privateKeyFileName').value"
-                           (fileNameChanged)="azureIotHubConfigForm.get('credentials.privateKeyFileName').setValue($event)"
-                           required
-                           requiredAsError
-                           label="{{'rule-node-config.private-key' | translate}}"
-                           noFileText="rule-node-config.no-file"
-                           dropLabel="{{'rule-node-config.drop-file' | translate}}">
-            </tb-file-input>
-            <mat-form-field class="mat-block">
-              <mat-label translate>rule-node-config.private-key-password</mat-label>
-              <input type="password" matInput formControlName="password" autocomplete="new-password">
-              <tb-toggle-password matSuffix></tb-toggle-password>
-            </mat-form-field>
-          </ng-template>
+        <section class="flex flex-col">
+          @switch (azureIotHubConfigForm.get('credentials.type').value) {
+            @case ('anonymous') {}
+            @case ('sas') {
+              <mat-form-field class="mat-block">
+                <mat-label translate>rule-node-config.sas-key</mat-label>
+                <input type="password" required matInput formControlName="sasKey" autocomplete="new-password">
+                <tb-toggle-password matSuffix></tb-toggle-password>
+                @if (azureIotHubConfigForm.get('credentials.sasKey').hasError('required')) {
+                  <mat-error>
+                    {{ 'rule-node-config.sas-key-required' | translate }}
+                  </mat-error>
+                }
+              </mat-form-field>
+              <tb-file-input formControlName="caCert"
+                             inputId="caCertSelect"
+                             [existingFileName]="azureIotHubConfigForm.get('credentials.caCertFileName').value"
+                             (fileNameChanged)="azureIotHubConfigForm.get('credentials.caCertFileName').setValue($event)"
+                             label="{{'rule-node-config.azure-ca-cert' | translate}}"
+                             noFileText="rule-node-config.no-file"
+                             dropLabel="{{'rule-node-config.drop-file' | translate}}">
+              </tb-file-input>
+            }
+            @case ('cert.PEM') {
+              <tb-file-input formControlName="caCert"
+                             inputId="caCertSelect"
+                             [existingFileName]="azureIotHubConfigForm.get('credentials.caCertFileName').value"
+                             (fileNameChanged)="azureIotHubConfigForm.get('credentials.caCertFileName').setValue($event)"
+                             label="{{'rule-node-config.azure-ca-cert' | translate}}"
+                             noFileText="rule-node-config.no-file"
+                             dropLabel="{{'rule-node-config.drop-file' | translate}}">
+              </tb-file-input>
+              <tb-file-input formControlName="cert"
+                             inputId="CertSelect"
+                             [existingFileName]="azureIotHubConfigForm.get('credentials.certFileName').value"
+                             (fileNameChanged)="azureIotHubConfigForm.get('credentials.certFileName').setValue($event)"
+                             required
+                             requiredAsError
+                             label="{{'rule-node-config.cert' | translate}}"
+                             noFileText="rule-node-config.no-file"
+                             dropLabel="{{'rule-node-config.drop-file' | translate}}">
+              </tb-file-input>
+              <tb-file-input style="padding-bottom: 8px;"
+                             formControlName="privateKey"
+                             inputId="privateKeySelect"
+                             [existingFileName]="azureIotHubConfigForm.get('credentials.privateKeyFileName').value"
+                             (fileNameChanged)="azureIotHubConfigForm.get('credentials.privateKeyFileName').setValue($event)"
+                             required
+                             requiredAsError
+                             label="{{'rule-node-config.private-key' | translate}}"
+                             noFileText="rule-node-config.no-file"
+                             dropLabel="{{'rule-node-config.drop-file' | translate}}">
+              </tb-file-input>
+              <mat-form-field class="mat-block">
+                <mat-label translate>rule-node-config.private-key-password</mat-label>
+                <input type="password" matInput formControlName="password" autocomplete="new-password">
+                <tb-toggle-password matSuffix></tb-toggle-password>
+              </mat-form-field>
+            }
+          }
         </section>
       </section>
     </mat-expansion-panel>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/kafka-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/kafka-config.component.html
index 965a0ca8b8..ffbc99fe57 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/kafka-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/kafka-config.component.html
@@ -19,9 +19,11 @@
   <mat-form-field class="mat-block" subscriptSizing="dynamic">
     <mat-label translate>rule-node-config.topic-pattern</mat-label>
     <input required matInput formControlName="topicPattern">
-    <mat-error *ngIf="kafkaConfigForm.get('topicPattern').hasError('required')">
-      {{ 'rule-node-config.topic-pattern-required' | translate }}
-    </mat-error>
+    @if (kafkaConfigForm.get('topicPattern').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.topic-pattern-required' | translate }}
+      </mat-error>
+    }
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
   <mat-form-field class="mat-block" subscriptSizing="dynamic">
@@ -33,44 +35,56 @@
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.bootstrap-servers</mat-label>
     <input required matInput formControlName="bootstrapServers">
-    <mat-error *ngIf="kafkaConfigForm.get('bootstrapServers').hasError('required')">
-      {{ 'rule-node-config.bootstrap-servers-required' | translate }}
-    </mat-error>
+    @if (kafkaConfigForm.get('bootstrapServers').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.bootstrap-servers-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.retries</mat-label>
     <input type="number" step="1" min="0" matInput formControlName="retries">
-    <mat-error *ngIf="kafkaConfigForm.get('retries').hasError('min')">
-      {{ 'rule-node-config.min-retries-message' | translate }}
-    </mat-error>
+    @if (kafkaConfigForm.get('retries').hasError('min')) {
+      <mat-error>
+        {{ 'rule-node-config.min-retries-message' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.batch-size-bytes</mat-label>
     <input type="number" step="1" min="0" matInput formControlName="batchSize">
-    <mat-error *ngIf="kafkaConfigForm.get('batchSize').hasError('min')">
-      {{ 'rule-node-config.min-batch-size-bytes-message' | translate }}
-    </mat-error>
+    @if (kafkaConfigForm.get('batchSize').hasError('min')) {
+      <mat-error>
+        {{ 'rule-node-config.min-batch-size-bytes-message' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.linger-ms</mat-label>
     <input type="number" step="1" min="0" matInput formControlName="linger">
-    <mat-error *ngIf="kafkaConfigForm.get('linger').hasError('min')">
-      {{ 'rule-node-config.min-linger-ms-message' | translate }}
-    </mat-error>
+    @if (kafkaConfigForm.get('linger').hasError('min')) {
+      <mat-error>
+        {{ 'rule-node-config.min-linger-ms-message' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.buffer-memory-bytes</mat-label>
     <input type="number" step="1" min="0" matInput formControlName="bufferMemory">
-    <mat-error *ngIf="kafkaConfigForm.get('bufferMemory').hasError('min')">
-      {{ 'rule-node-config.min-buffer-memory-bytes-message' | translate }}
-    </mat-error>
+    @if (kafkaConfigForm.get('bufferMemory').hasError('min')) {
+      <mat-error>
+        {{ 'rule-node-config.min-buffer-memory-bytes-message' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.acks</mat-label>
     <mat-select formControlName="acks" required>
-      <mat-option *ngFor="let ackValue of ackValues" [value]="ackValue">
-        {{ ackValue }}
-      </mat-option>
+      @for (ackValue of ackValues; track ackValue) {
+        <mat-option [value]="ackValue">
+          {{ ackValue }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <label translate class="tb-title">rule-node-config.other-properties</label>
@@ -86,12 +100,16 @@
     {{ 'rule-node-config.add-metadata-key-values-as-kafka-headers' | translate }}
   </mat-checkbox>
   <div class="tb-hint" translate>rule-node-config.add-metadata-key-values-as-kafka-headers-hint</div>
-  <mat-form-field class="mat-block flex-1" *ngIf="kafkaConfigForm.get('addMetadataKeyValuesAsKafkaHeaders').value">
-    <mat-label translate>rule-node-config.charset-encoding</mat-label>
-    <mat-select formControlName="kafkaHeadersCharset" required>
-      <mat-option *ngFor="let charset of ToByteStandartCharsetTypesValues" [value]="charset">
-        {{ ToByteStandartCharsetTypeTranslationMap.get(charset) | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
+  @if (kafkaConfigForm.get('addMetadataKeyValuesAsKafkaHeaders').value) {
+    <mat-form-field class="mat-block flex-1">
+      <mat-label translate>rule-node-config.charset-encoding</mat-label>
+      <mat-select formControlName="kafkaHeadersCharset" required>
+        @for (charset of ToByteStandartCharsetTypesValues; track charset) {
+          <mat-option [value]="charset">
+            {{ ToByteStandartCharsetTypeTranslationMap.get(charset) | translate }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  }
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/lambda-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/lambda-config.component.html
index 1839464bbe..fba6b87d72 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/lambda-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/lambda-config.component.html
@@ -27,9 +27,11 @@
       <mat-form-field class="mat-block">
         <mat-label>{{'rule-node-config.function-name' | translate}}</mat-label>
         <input required matInput formControlName="functionName">
-        <mat-error *ngIf="lambdaConfigForm.get('functionName').hasError('required')">
-          {{'rule-node-config.function-name-required' | translate}}
-        </mat-error>
+        @if (lambdaConfigForm.get('functionName').hasError('required')) {
+          <mat-error>
+            {{'rule-node-config.function-name-required' | translate}}
+          </mat-error>
+        }
       </mat-form-field>
       <mat-form-field class="mat-block">
         <mat-label>{{'rule-node-config.qualifier' | translate}}</mat-label>
@@ -48,23 +50,29 @@
         <mat-form-field class="mat-block">
           <mat-label translate>rule-node-config.aws-access-key-id</mat-label>
           <input required matInput formControlName="accessKey">
-          <mat-error *ngIf="lambdaConfigForm.get('accessKey').hasError('required')">
-            {{ 'rule-node-config.aws-access-key-id-required' | translate }}
-          </mat-error>
+          @if (lambdaConfigForm.get('accessKey').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.aws-access-key-id-required' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <mat-form-field class="mat-block">
           <mat-label translate>rule-node-config.aws-secret-access-key</mat-label>
           <input required matInput formControlName="secretKey">
-          <mat-error *ngIf="lambdaConfigForm.get('secretKey').hasError('required')">
-            {{ 'rule-node-config.aws-secret-access-key-required' | translate }}
-          </mat-error>
+          @if (lambdaConfigForm.get('secretKey').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.aws-secret-access-key-required' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <mat-form-field class="mat-block">
           <mat-label translate>rule-node-config.aws-region</mat-label>
           <input required matInput formControlName="region">
-          <mat-error *ngIf="lambdaConfigForm.get('region').hasError('required')">
-            {{ 'rule-node-config.aws-region-required' | translate }}
-          </mat-error>
+          @if (lambdaConfigForm.get('region').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.aws-region-required' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
       </div>
     </mat-expansion-panel>
@@ -79,28 +87,36 @@
           <mat-form-field class="flex">
             <mat-label translate>rule-node-config.connection-timeout</mat-label>
             <input type="number" required min="0" matInput formControlName="connectionTimeout">
-            <mat-error *ngIf="lambdaConfigForm.get('connectionTimeout').hasError('required')">
-              {{ 'rule-node-config.connection-timeout-required' | translate }}
-            </mat-error>
-            <mat-error *ngIf="lambdaConfigForm.get('connectionTimeout').hasError('min')">
-              {{ 'rule-node-config.connection-timeout-min' | translate }}
-            </mat-error>
+            @if (lambdaConfigForm.get('connectionTimeout').hasError('required')) {
+              <mat-error>
+                {{ 'rule-node-config.connection-timeout-required' | translate }}
+              </mat-error>
+            }
+            @if (lambdaConfigForm.get('connectionTimeout').hasError('min')) {
+              <mat-error>
+                {{ 'rule-node-config.connection-timeout-min' | translate }}
+              </mat-error>
+            }
             <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
                       color="primary"
-                      matTooltip="{{ 'rule-node-config.connection-timeout-hint' | translate }}">help</mat-icon>
+            matTooltip="{{ 'rule-node-config.connection-timeout-hint' | translate }}">help</mat-icon>
           </mat-form-field>
           <mat-form-field class="flex">
             <mat-label translate>rule-node-config.request-timeout</mat-label>
             <input type="number" required min="0" matInput formControlName="requestTimeout">
-            <mat-error *ngIf="lambdaConfigForm.get('requestTimeout').hasError('required')">
-              {{ 'rule-node-config.request-timeout-required' | translate }}
-            </mat-error>
-            <mat-error *ngIf="lambdaConfigForm.get('requestTimeout').hasError('min')">
-              {{ 'rule-node-config.request-timeout-min' | translate }}
-            </mat-error>
+            @if (lambdaConfigForm.get('requestTimeout').hasError('required')) {
+              <mat-error>
+                {{ 'rule-node-config.request-timeout-required' | translate }}
+              </mat-error>
+            }
+            @if (lambdaConfigForm.get('requestTimeout').hasError('min')) {
+              <mat-error>
+                {{ 'rule-node-config.request-timeout-min' | translate }}
+              </mat-error>
+            }
             <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
                       color="primary"
-                      matTooltip="{{ 'rule-node-config.request-timeout-hint' | translate }}">help</mat-icon>
+            matTooltip="{{ 'rule-node-config.request-timeout-hint' | translate }}">help</mat-icon>
           </mat-form-field>
         </div>
         <div tb-hint-tooltip-icon="{{ 'rule-node-config.tell-failure-aws-lambda-hint' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/mqtt-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/mqtt-config.component.html
index c8e4e60ea4..e756cdb961 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/mqtt-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/mqtt-config.component.html
@@ -19,44 +19,60 @@
   <mat-form-field class="mat-block" subscriptSizing="dynamic">
     <mat-label translate>rule-node-config.topic-pattern</mat-label>
     <input required matInput formControlName="topicPattern">
-    <mat-error *ngIf="mqttConfigForm.get('topicPattern').hasError('required')">
-      {{ 'rule-node-config.topic-pattern-required' | translate }}
-    </mat-error>
+    @if (mqttConfigForm.get('topicPattern').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.topic-pattern-required' | translate }}
+      </mat-error>
+    }
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
   <div class="flex flex-1 flex-col gt-sm:flex-row gt-sm:gap-2">
     <mat-form-field class="mat-block gt-sm:max-w-60% gt-sm:flex-full">
       <mat-label translate>rule-node-config.host</mat-label>
       <input required matInput formControlName="host">
-      <mat-error *ngIf="mqttConfigForm.get('host').hasError('required')">
-        {{ 'rule-node-config.host-required' | translate }}
-      </mat-error>
+      @if (mqttConfigForm.get('host').hasError('required')) {
+        <mat-error>
+          {{ 'rule-node-config.host-required' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
     <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full">
       <mat-label translate>rule-node-config.port</mat-label>
       <input required type="number" step="1" min="1" max="65535" matInput formControlName="port">
-      <mat-error *ngIf="mqttConfigForm.get('port').hasError('required')">
-        {{ 'rule-node-config.port-required' | translate }}
-      </mat-error>
-      <mat-error *ngIf="mqttConfigForm.get('port').hasError('min')">
-        {{ 'rule-node-config.port-range' | translate }}
-      </mat-error>
-      <mat-error *ngIf="mqttConfigForm.get('port').hasError('max')">
-        {{ 'rule-node-config.port-range' | translate }}
-      </mat-error>
+      @if (mqttConfigForm.get('port').hasError('required')) {
+        <mat-error>
+          {{ 'rule-node-config.port-required' | translate }}
+        </mat-error>
+      }
+      @if (mqttConfigForm.get('port').hasError('min')) {
+        <mat-error>
+          {{ 'rule-node-config.port-range' | translate }}
+        </mat-error>
+      }
+      @if (mqttConfigForm.get('port').hasError('max')) {
+        <mat-error>
+          {{ 'rule-node-config.port-range' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
     <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full">
       <mat-label translate>rule-node-config.connect-timeout</mat-label>
       <input required type="number" step="1" min="1" max="200" matInput formControlName="connectTimeoutSec">
-      <mat-error *ngIf="mqttConfigForm.get('connectTimeoutSec').hasError('required')">
-        {{ 'rule-node-config.connect-timeout-required' | translate }}
-      </mat-error>
-      <mat-error *ngIf="mqttConfigForm.get('connectTimeoutSec').hasError('min')">
-        {{ 'rule-node-config.connect-timeout-range' | translate }}
-      </mat-error>
-      <mat-error *ngIf="mqttConfigForm.get('connectTimeoutSec').hasError('max')">
-        {{ 'rule-node-config.connect-timeout-range' | translate }}
-      </mat-error>
+      @if (mqttConfigForm.get('connectTimeoutSec').hasError('required')) {
+        <mat-error>
+          {{ 'rule-node-config.connect-timeout-required' | translate }}
+        </mat-error>
+      }
+      @if (mqttConfigForm.get('connectTimeoutSec').hasError('min')) {
+        <mat-error>
+          {{ 'rule-node-config.connect-timeout-range' | translate }}
+        </mat-error>
+      }
+      @if (mqttConfigForm.get('connectTimeoutSec').hasError('max')) {
+        <mat-error>
+          {{ 'rule-node-config.connect-timeout-range' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
   </div>
   <mat-form-field class="mat-block" subscriptSizing="dynamic">
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/pubsub-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/pubsub-config.component.html
index 1e485288e0..68245324ba 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/pubsub-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/pubsub-config.component.html
@@ -19,16 +19,20 @@
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.gcp-project-id</mat-label>
     <input required matInput formControlName="projectId">
-    <mat-error *ngIf="pubSubConfigForm.get('projectId').hasError('required')">
-      {{ 'rule-node-config.gcp-project-id-required' | translate }}
-    </mat-error>
+    @if (pubSubConfigForm.get('projectId').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.gcp-project-id-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.pubsub-topic-name</mat-label>
     <input required matInput formControlName="topicName">
-    <mat-error *ngIf="pubSubConfigForm.get('topicName').hasError('required')">
-      {{ 'rule-node-config.pubsub-topic-name-required' | translate }}
-    </mat-error>
+    @if (pubSubConfigForm.get('topicName').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.pubsub-topic-name-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <tb-file-input style="padding-bottom: 24px;"
                  formControlName="serviceAccountKey"
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/rabbit-mq-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/rabbit-mq-config.component.html
index ff4c4e71e7..19f06ef77d 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/rabbit-mq-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/rabbit-mq-config.component.html
@@ -27,31 +27,41 @@
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.message-properties</mat-label>
     <mat-select formControlName="messageProperties">
-      <mat-option *ngFor="let property of messageProperties" [value]="property">
-        {{ property }}
-      </mat-option>
+      @for (property of messageProperties; track property) {
+        <mat-option [value]="property">
+          {{ property }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
     <mat-form-field class="mat-block gt-sm:max-w-60% gt-sm:flex-full">
       <mat-label translate>rule-node-config.host</mat-label>
       <input required matInput formControlName="host">
-      <mat-error *ngIf="rabbitMqConfigForm.get('host').hasError('required')">
-        {{ 'rule-node-config.host-required' | translate }}
-      </mat-error>
+      @if (rabbitMqConfigForm.get('host').hasError('required')) {
+        <mat-error>
+          {{ 'rule-node-config.host-required' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
     <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full">
       <mat-label translate>rule-node-config.port</mat-label>
       <input required type="number" step="1" min="1" max="65535" matInput formControlName="port">
-      <mat-error *ngIf="rabbitMqConfigForm.get('port').hasError('required')">
-        {{ 'rule-node-config.port-required' | translate }}
-      </mat-error>
-      <mat-error *ngIf="rabbitMqConfigForm.get('port').hasError('min')">
-        {{ 'rule-node-config.port-range' | translate }}
-      </mat-error>
-      <mat-error *ngIf="rabbitMqConfigForm.get('port').hasError('max')">
-        {{ 'rule-node-config.port-range' | translate }}
-      </mat-error>
+      @if (rabbitMqConfigForm.get('port').hasError('required')) {
+        <mat-error>
+          {{ 'rule-node-config.port-required' | translate }}
+        </mat-error>
+      }
+      @if (rabbitMqConfigForm.get('port').hasError('min')) {
+        <mat-error>
+          {{ 'rule-node-config.port-range' | translate }}
+        </mat-error>
+      }
+      @if (rabbitMqConfigForm.get('port').hasError('max')) {
+        <mat-error>
+          {{ 'rule-node-config.port-range' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
   </div>
   <mat-form-field class="mat-block">
@@ -73,16 +83,20 @@
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.connection-timeout-ms</mat-label>
     <input type="number" step="1" min="0" matInput formControlName="connectionTimeout">
-    <mat-error *ngIf="rabbitMqConfigForm.get('connectionTimeout').hasError('min')">
-      {{ 'rule-node-config.min-connection-timeout-ms-message' | translate }}
-    </mat-error>
+    @if (rabbitMqConfigForm.get('connectionTimeout').hasError('min')) {
+      <mat-error>
+        {{ 'rule-node-config.min-connection-timeout-ms-message' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.handshake-timeout-ms</mat-label>
     <input type="number" step="1" min="0" matInput formControlName="handshakeTimeout">
-    <mat-error *ngIf="rabbitMqConfigForm.get('handshakeTimeout').hasError('min')">
-      {{ 'rule-node-config.min-handshake-timeout-ms-message' | translate }}
-    </mat-error>
+    @if (rabbitMqConfigForm.get('handshakeTimeout').hasError('min')) {
+      <mat-error>
+        {{ 'rule-node-config.min-handshake-timeout-ms-message' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <label translate class="tb-title">rule-node-config.client-properties</label>
   <tb-kv-map-config-old
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/rest-api-call-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/rest-api-call-config.component.html
index b2fdb3a14c..3b2a6a1cb6 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/rest-api-call-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/rest-api-call-config.component.html
@@ -21,9 +21,11 @@
     <mat-form-field class="mat-block" subscriptSizing="dynamic">
       <mat-label translate>rule-node-config.url</mat-label>
       <input required matInput formControlName="restEndpointUrlPattern">
-      <mat-error *ngIf="restApiCallConfigForm.get('restEndpointUrlPattern').hasError('required')">
+      @if (restApiCallConfigForm.get('restEndpointUrlPattern').hasError('required')) {
+      <mat-error>
         {{ 'rule-node-config.endpoint-url-pattern-required' | translate }}
       </mat-error>
+    }
       <mat-hint translate>rule-node-config.url-hint</mat-hint>
     </mat-form-field>
     <mat-expansion-panel class="tb-settings tb-form-panel stroked no-gap" [expanded]="isQueryParamsExpanded">
@@ -46,9 +48,11 @@
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.request-method</mat-label>
     <mat-select formControlName="requestMethod">
-      <mat-option *ngFor="let requestType of httpRequestTypes" [value]="requestType">
-        {{ requestType }}
-      </mat-option>
+      @for (requestType of httpRequestTypes; track requestType) {
+        <mat-option [value]="requestType">
+          {{ requestType }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <div class="tb-form-panel stroked">
@@ -80,42 +84,51 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="enableProxy">
             {{ 'rule-node-config.enable-proxy' | translate }}
           </mat-slide-toggle>
-          <div *ngIf="restApiCallConfigForm.get('enableProxy').value" class="flex flex-col gap-4">
-            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="useSystemProxyProperties">
-              {{ 'rule-node-config.use-system-proxy-properties' | translate }}
-            </mat-slide-toggle>
-            <div *ngIf="!restApiCallConfigForm.get('useSystemProxyProperties').value">
-              <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
-                <mat-form-field class="md-block gt-sm:max-w-50% gt-sm:flex-full">
-                  <mat-label translate>rule-node-config.proxy-host</mat-label>
-                  <input matInput required formControlName="proxyHost">
-                  <mat-error *ngIf="restApiCallConfigForm.get('proxyHost').hasError('required')">
-                    {{ 'rule-node-config.proxy-host-required' | translate }}
-                  </mat-error>
-                </mat-form-field>
-                <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full">
-                  <mat-label translate>rule-node-config.proxy-port</mat-label>
-                  <input matInput required formControlName="proxyPort" type="number" step="1">
-                  <mat-error *ngIf="restApiCallConfigForm.get('proxyPort').hasError('required')">
-                    {{ 'rule-node-config.proxy-port-required' | translate }}
-                  </mat-error>
-                  <mat-error
-                    *ngIf="restApiCallConfigForm.get('proxyPort').hasError('min') || restApiCallConfigForm.get('proxyPort').hasError('max')">
-                    {{ 'rule-node-config.proxy-port-range' | translate }}
-                  </mat-error>
-                </mat-form-field>
-              </div>
-              <mat-form-field class="mat-block">
-                <mat-label translate>rule-node-config.proxy-user</mat-label>
-                <input matInput formControlName="proxyUser">
-              </mat-form-field>
-              <mat-form-field class="mat-block">
-                <mat-label translate>rule-node-config.proxy-password</mat-label>
-                <input matInput type="password" formControlName="proxyPassword">
-                <tb-toggle-password matSuffix></tb-toggle-password>
-              </mat-form-field>
+          @if (restApiCallConfigForm.get('enableProxy').value) {
+            <div class="flex flex-col gap-4">
+              <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="useSystemProxyProperties">
+                {{ 'rule-node-config.use-system-proxy-properties' | translate }}
+              </mat-slide-toggle>
+              @if (!restApiCallConfigForm.get('useSystemProxyProperties').value) {
+                <div>
+                  <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
+                    <mat-form-field class="md-block gt-sm:max-w-50% gt-sm:flex-full">
+                      <mat-label translate>rule-node-config.proxy-host</mat-label>
+                      <input matInput required formControlName="proxyHost">
+                      @if (restApiCallConfigForm.get('proxyHost').hasError('required')) {
+                        <mat-error>
+                          {{ 'rule-node-config.proxy-host-required' | translate }}
+                        </mat-error>
+                      }
+                    </mat-form-field>
+                    <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full">
+                      <mat-label translate>rule-node-config.proxy-port</mat-label>
+                      <input matInput required formControlName="proxyPort" type="number" step="1">
+                      @if (restApiCallConfigForm.get('proxyPort').hasError('required')) {
+                        <mat-error>
+                          {{ 'rule-node-config.proxy-port-required' | translate }}
+                        </mat-error>
+                      }
+                      @if (restApiCallConfigForm.get('proxyPort').hasError('min') || restApiCallConfigForm.get('proxyPort').hasError('max')) {
+                        <mat-error>
+                          {{ 'rule-node-config.proxy-port-range' | translate }}
+                        </mat-error>
+                      }
+                    </mat-form-field>
+                  </div>
+                  <mat-form-field class="mat-block">
+                    <mat-label translate>rule-node-config.proxy-user</mat-label>
+                    <input matInput formControlName="proxyUser">
+                  </mat-form-field>
+                  <mat-form-field class="mat-block">
+                    <mat-label translate>rule-node-config.proxy-password</mat-label>
+                    <input matInput type="password" formControlName="proxyPassword">
+                    <tb-toggle-password matSuffix></tb-toggle-password>
+                  </mat-form-field>
+                </div>
+              }
             </div>
-          </div>
+          }
         </div>
         <div class="tb-form-row">
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="parseToPlainText">
@@ -133,28 +146,31 @@
           <mat-label translate>rule-node-config.read-timeout</mat-label>
           <input type="text" min="0" [max]="IntLimit" inputmode="numeric" pattern="[0-9]*" matInput formControlName="readTimeoutMs">
           <mat-hint translate>rule-node-config.read-timeout-hint</mat-hint>
-          <mat-error
-            *ngIf="restApiCallConfigForm.get('readTimeoutMs').hasError('max')">
-            {{ 'rule-node-config.int-range' | translate }}
-          </mat-error>
+          @if (restApiCallConfigForm.get('readTimeoutMs').hasError('max')) {
+            <mat-error>
+              {{ 'rule-node-config.int-range' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <mat-form-field class="mat-block" subscriptSizing="dynamic">
           <mat-label translate>rule-node-config.max-parallel-requests-count</mat-label>
           <input type="text" min="0" [max]="IntLimit" inputmode="numeric" pattern="[0-9]*" matInput formControlName="maxParallelRequestsCount">
           <mat-hint translate>rule-node-config.max-parallel-requests-count-hint</mat-hint>
-          <mat-error
-            *ngIf="restApiCallConfigForm.get('maxParallelRequestsCount').hasError('max')">
-            {{ 'rule-node-config.int-range' | translate }}
-          </mat-error>
+          @if (restApiCallConfigForm.get('maxParallelRequestsCount').hasError('max')) {
+            <mat-error>
+              {{ 'rule-node-config.int-range' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <mat-form-field class="mat-block" subscriptSizing="dynamic">
           <mat-label translate>rule-node-config.max-response-size</mat-label>
           <input type="text" min="1" [max]="MemoryBufferSizeInKbLimit" inputmode="numeric" pattern="[0-9]*" matInput formControlName="maxInMemoryBufferSizeInKb">
           <mat-hint translate>rule-node-config.max-response-size-hint</mat-hint>
-          <mat-error
-            *ngIf="restApiCallConfigForm.get('maxInMemoryBufferSizeInKb').hasError('min') || restApiCallConfigForm.get('maxInMemoryBufferSizeInKb').hasError('max')">
-            {{ 'rule-node-config.memory-buffer-size-range' | translate: { max: MemoryBufferSizeInKbLimit } }}
-          </mat-error>
+          @if (restApiCallConfigForm.get('maxInMemoryBufferSizeInKb').hasError('min') || restApiCallConfigForm.get('maxInMemoryBufferSizeInKb').hasError('max')) {
+            <mat-error>
+              {{ 'rule-node-config.memory-buffer-size-range' | translate: { max: MemoryBufferSizeInKbLimit } }}
+            </mat-error>
+          }
         </mat-form-field>
       </ng-template>
     </mat-expansion-panel>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/send-email-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/send-email-config.component.html
index 98e2c2f686..295de6912a 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/send-email-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/send-email-config.component.html
@@ -19,98 +19,126 @@
   <mat-checkbox formControlName="useSystemSmtpSettings">
     {{ 'rule-node-config.use-system-smtp-settings' | translate }}
   </mat-checkbox>
-  <section class="flex flex-col" *ngIf="sendEmailConfigForm.get('useSystemSmtpSettings').value === false">
-    <mat-form-field class="mat-block">
-      <mat-label translate>rule-node-config.smtp-protocol</mat-label>
-      <mat-select formControlName="smtpProtocol">
-        <mat-option *ngFor="let smtpProtocol of smtpProtocols" [value]="smtpProtocol">
-          {{ smtpProtocol.toUpperCase() }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-    <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
-      <mat-form-field class="mat-block gt-sm:max-w-60% gt-sm:flex-full">
-        <mat-label translate>rule-node-config.smtp-host</mat-label>
-        <input required matInput formControlName="smtpHost">
-        <mat-error *ngIf="sendEmailConfigForm.get('smtpHost').hasError('required')">
-          {{ 'rule-node-config.smtp-host-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full">
-        <mat-label translate>rule-node-config.smtp-port</mat-label>
-        <input required type="number" step="1" min="1" max="65535" matInput formControlName="smtpPort">
-        <mat-error *ngIf="sendEmailConfigForm.get('smtpPort').hasError('required')">
-          {{ 'rule-node-config.smtp-port-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="sendEmailConfigForm.get('smtpPort').hasError('min')">
-          {{ 'rule-node-config.smtp-port-range' | translate }}
-        </mat-error>
-        <mat-error *ngIf="sendEmailConfigForm.get('smtpPort').hasError('max')">
-          {{ 'rule-node-config.smtp-port-range' | translate }}
-        </mat-error>
+  @if (sendEmailConfigForm.get('useSystemSmtpSettings').value === false) {
+    <section class="flex flex-col">
+      <mat-form-field class="mat-block">
+        <mat-label translate>rule-node-config.smtp-protocol</mat-label>
+        <mat-select formControlName="smtpProtocol">
+          @for (smtpProtocol of smtpProtocols; track smtpProtocol) {
+            <mat-option [value]="smtpProtocol">
+              {{ smtpProtocol.toUpperCase() }}
+            </mat-option>
+          }
+        </mat-select>
       </mat-form-field>
-    </div>
-    <mat-form-field class="mat-block">
-      <mat-label translate>rule-node-config.timeout-msec</mat-label>
-      <input required type="number" step="1" min="0" matInput formControlName="timeout">
-      <mat-error *ngIf="sendEmailConfigForm.get('timeout').hasError('required')">
-        {{ 'rule-node-config.timeout-required' | translate }}
-      </mat-error>
-      <mat-error *ngIf="sendEmailConfigForm.get('timeout').hasError('min')">
-        {{ 'rule-node-config.min-timeout-msec-message' | translate }}
-      </mat-error>
-    </mat-form-field>
-    <mat-checkbox formControlName="enableTls">
-      {{ 'rule-node-config.enable-tls' | translate }}
-    </mat-checkbox>
-    <mat-form-field class="mat-block" *ngIf="sendEmailConfigForm.get('enableTls').value === true">
-      <mat-label translate>rule-node-config.tls-version</mat-label>
-      <mat-select formControlName="tlsVersion">
-        <mat-option *ngFor="let tlsVersion of tlsVersions" [value]="tlsVersion">
-          {{ tlsVersion }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-    <tb-checkbox formControlName="enableProxy">
-      {{ 'rule-node-config.enable-proxy' | translate }}
-    </tb-checkbox>
-    <div *ngIf="sendEmailConfigForm.get('enableProxy').value">
       <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
         <mat-form-field class="mat-block gt-sm:max-w-60% gt-sm:flex-full">
-          <mat-label translate>rule-node-config.proxy-host</mat-label>
-          <input matInput required formControlName="proxyHost">
-          <mat-error *ngIf="sendEmailConfigForm.get('proxyHost').hasError('required')">
-            {{ 'rule-node-config.proxy-host-required' | translate }}
-          </mat-error>
+          <mat-label translate>rule-node-config.smtp-host</mat-label>
+          <input required matInput formControlName="smtpHost">
+          @if (sendEmailConfigForm.get('smtpHost').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.smtp-host-required' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full">
-          <mat-label translate>rule-node-config.proxy-port</mat-label>
-          <input matInput required formControlName="proxyPort" type="number" step="1" min="1" max="65535">
-          <mat-error *ngIf="sendEmailConfigForm.get('proxyPort').hasError('required')">
-            {{ 'rule-node-config.proxy-port-required' | translate }}
-          </mat-error>
-          <mat-error *ngIf="sendEmailConfigForm.get('proxyPort').hasError('min') || sendEmailConfigForm.get('proxyPort').hasError('max')">
-            {{ 'rule-node-config.proxy-port-range' | translate }}
-          </mat-error>
+          <mat-label translate>rule-node-config.smtp-port</mat-label>
+          <input required type="number" step="1" min="1" max="65535" matInput formControlName="smtpPort">
+          @if (sendEmailConfigForm.get('smtpPort').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.smtp-port-required' | translate }}
+            </mat-error>
+          }
+          @if (sendEmailConfigForm.get('smtpPort').hasError('min')) {
+            <mat-error>
+              {{ 'rule-node-config.smtp-port-range' | translate }}
+            </mat-error>
+          }
+          @if (sendEmailConfigForm.get('smtpPort').hasError('max')) {
+            <mat-error>
+              {{ 'rule-node-config.smtp-port-range' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
       </div>
       <mat-form-field class="mat-block">
-        <mat-label translate>rule-node-config.proxy-user</mat-label>
-        <input matInput formControlName="proxyUser">
+        <mat-label translate>rule-node-config.timeout-msec</mat-label>
+        <input required type="number" step="1" min="0" matInput formControlName="timeout">
+        @if (sendEmailConfigForm.get('timeout').hasError('required')) {
+          <mat-error>
+            {{ 'rule-node-config.timeout-required' | translate }}
+          </mat-error>
+        }
+        @if (sendEmailConfigForm.get('timeout').hasError('min')) {
+          <mat-error>
+            {{ 'rule-node-config.min-timeout-msec-message' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
-      <mat-form-field class="mat-block">
-        <mat-label translate>rule-node-config.proxy-password</mat-label>
-        <input matInput formControlName="proxyPassword">
+      <mat-checkbox formControlName="enableTls">
+        {{ 'rule-node-config.enable-tls' | translate }}
+      </mat-checkbox>
+      @if (sendEmailConfigForm.get('enableTls').value === true) {
+        <mat-form-field class="mat-block">
+          <mat-label translate>rule-node-config.tls-version</mat-label>
+          <mat-select formControlName="tlsVersion">
+            @for (tlsVersion of tlsVersions; track tlsVersion) {
+              <mat-option [value]="tlsVersion">
+                {{ tlsVersion }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
+      <tb-checkbox formControlName="enableProxy">
+        {{ 'rule-node-config.enable-proxy' | translate }}
+      </tb-checkbox>
+      @if (sendEmailConfigForm.get('enableProxy').value) {
+        <div>
+          <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
+            <mat-form-field class="mat-block gt-sm:max-w-60% gt-sm:flex-full">
+              <mat-label translate>rule-node-config.proxy-host</mat-label>
+              <input matInput required formControlName="proxyHost">
+              @if (sendEmailConfigForm.get('proxyHost').hasError('required')) {
+                <mat-error>
+                  {{ 'rule-node-config.proxy-host-required' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full">
+              <mat-label translate>rule-node-config.proxy-port</mat-label>
+              <input matInput required formControlName="proxyPort" type="number" step="1" min="1" max="65535">
+              @if (sendEmailConfigForm.get('proxyPort').hasError('required')) {
+                <mat-error>
+                  {{ 'rule-node-config.proxy-port-required' | translate }}
+                </mat-error>
+              }
+              @if (sendEmailConfigForm.get('proxyPort').hasError('min') || sendEmailConfigForm.get('proxyPort').hasError('max')) {
+                <mat-error>
+                  {{ 'rule-node-config.proxy-port-range' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+          </div>
+          <mat-form-field class="mat-block">
+            <mat-label translate>rule-node-config.proxy-user</mat-label>
+            <input matInput formControlName="proxyUser">
+          </mat-form-field>
+          <mat-form-field class="mat-block">
+            <mat-label translate>rule-node-config.proxy-password</mat-label>
+            <input matInput formControlName="proxyPassword">
+          </mat-form-field>
+        </div>
+      }
+      <mat-form-field class="mat-block" floatLabel="always">
+        <mat-label translate>rule-node-config.username</mat-label>
+        <input matInput placeholder="{{ 'rule-node-config.enter-username' | translate }}" formControlName="username">
+      </mat-form-field>
+      <mat-form-field class="mat-block" floatLabel="always">
+        <mat-label translate>rule-node-config.password</mat-label>
+        <input matInput type="password" placeholder="{{ 'rule-node-config.enter-password' | translate }}" formControlName="password" autocomplete="new-password">
+        <tb-toggle-password matSuffix></tb-toggle-password>
       </mat-form-field>
-    </div>
-    <mat-form-field class="mat-block" floatLabel="always">
-      <mat-label translate>rule-node-config.username</mat-label>
-      <input matInput placeholder="{{ 'rule-node-config.enter-username' | translate }}" formControlName="username">
-    </mat-form-field>
-    <mat-form-field class="mat-block" floatLabel="always">
-      <mat-label translate>rule-node-config.password</mat-label>
-      <input matInput type="password" placeholder="{{ 'rule-node-config.enter-password' | translate }}" formControlName="password" autocomplete="new-password">
-      <tb-toggle-password matSuffix></tb-toggle-password>
-    </mat-form-field>
-  </section>
+    </section>
+  }
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/send-sms-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/send-sms-config.component.html
index 1f6762c082..ff9a77a3f5 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/send-sms-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/send-sms-config.component.html
@@ -19,25 +19,30 @@
   <mat-form-field class="mat-block" subscriptSizing="dynamic">
     <mat-label translate>rule-node-config.numbers-to-template</mat-label>
     <input required matInput formControlName="numbersToTemplate">
-    <mat-error *ngIf="sendSmsConfigForm.get('numbersToTemplate').hasError('required')">
-      {{ 'rule-node-config.numbers-to-template-required' | translate }}
-    </mat-error>
+    @if (sendSmsConfigForm.get('numbersToTemplate').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.numbers-to-template-required' | translate }}
+      </mat-error>
+    }
     <mat-hint [innerHTML]="'rule-node-config.numbers-to-template-hint' | translate | safe: 'html'"></mat-hint>
   </mat-form-field>
   <mat-form-field class="mat-block" subscriptSizing="dynamic">
     <mat-label translate>rule-node-config.sms-message-template</mat-label>
     <textarea required matInput formControlName="smsMessageTemplate" rows="6"></textarea>
-    <mat-error *ngIf="sendSmsConfigForm.get('smsMessageTemplate').hasError('required')">
-      {{ 'rule-node-config.sms-message-template-required' | translate }}
-    </mat-error>
+    @if (sendSmsConfigForm.get('smsMessageTemplate').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.sms-message-template-required' | translate }}
+      </mat-error>
+    }
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
   <mat-checkbox formControlName="useSystemSmsSettings">
     {{ 'rule-node-config.use-system-sms-settings' | translate }}
   </mat-checkbox>
-  <tb-sms-provider-configuration
-    *ngIf="sendSmsConfigForm.get('useSystemSmsSettings').value === false"
-    formControlName="smsProviderConfiguration"
-    required>
-  </tb-sms-provider-configuration>
+  @if (sendSmsConfigForm.get('useSystemSmsSettings').value === false) {
+    <tb-sms-provider-configuration
+      formControlName="smsProviderConfiguration"
+      required>
+    </tb-sms-provider-configuration>
+  }
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/slack-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/slack-config.component.html
index 2cf15b05e7..9ef122ad9e 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/slack-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/slack-config.component.html
@@ -19,26 +19,34 @@
   <mat-form-field class="mat-block flex-1">
     <mat-label translate>rule-node-config.message-template</mat-label>
     <input required matInput formControlName="messageTemplate">
-    <mat-error *ngIf="slackConfigForm.get('messageTemplate').hasError('required')">
-      {{ 'rule-node-config.message-template-required' | translate }}
-    </mat-error>
+    @if (slackConfigForm.get('messageTemplate').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.message-template-required' | translate }}
+      </mat-error>
+    }
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
   <mat-checkbox formControlName="useSystemSettings">
     {{ 'rule-node-config.use-system-slack-settings' | translate }}
   </mat-checkbox>
-  <mat-form-field *ngIf="!slackConfigForm.get('useSystemSettings').value" class="mat-block">
-    <mat-label translate>rule-node-config.slack-api-token</mat-label>
-    <input required matInput formControlName="botToken">
-    <mat-error *ngIf="slackConfigForm.get('botToken').hasError('required')">
-      {{ 'rule-node-config.slack-api-token-required' | translate }}
-    </mat-error>
-  </mat-form-field>
+  @if (!slackConfigForm.get('useSystemSettings').value) {
+    <mat-form-field class="mat-block">
+      <mat-label translate>rule-node-config.slack-api-token</mat-label>
+      <input required matInput formControlName="botToken">
+      @if (slackConfigForm.get('botToken').hasError('required')) {
+        <mat-error>
+          {{ 'rule-node-config.slack-api-token-required' | translate }}
+        </mat-error>
+      }
+    </mat-form-field>
+  }
   <label class="tb-title">{{ 'notification.slack-chanel-type' | translate }}</label>
   <mat-radio-group formControlName="conversationType">
-    <mat-radio-button *ngFor="let slackChanelType of slackChanelTypes" [value]="slackChanelType">
-      {{ slackChanelTypesTranslateMap.get(slackChanelType) | translate }}
-    </mat-radio-button>
+    @for (slackChanelType of slackChanelTypes; track slackChanelType) {
+      <mat-radio-button [value]="slackChanelType">
+        {{ slackChanelTypesTranslateMap.get(slackChanelType) | translate }}
+      </mat-radio-button>
+    }
   </mat-radio-group>
   <tb-slack-conversation-autocomplete
     formControlName="conversation"
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/sns-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/sns-config.component.html
index 0a704b8602..6113beb9d0 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/sns-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/sns-config.component.html
@@ -19,30 +19,38 @@
   <mat-form-field class="mat-block" subscriptSizing="dynamic">
     <mat-label translate>rule-node-config.topic-arn-pattern</mat-label>
     <input required matInput formControlName="topicArnPattern">
-    <mat-error *ngIf="snsConfigForm.get('topicArnPattern').hasError('required')">
-      {{ 'rule-node-config.topic-arn-pattern-required' | translate }}
-    </mat-error>
+    @if (snsConfigForm.get('topicArnPattern').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.topic-arn-pattern-required' | translate }}
+      </mat-error>
+    }
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.aws-access-key-id</mat-label>
     <input required matInput formControlName="accessKeyId">
-    <mat-error *ngIf="snsConfigForm.get('accessKeyId').hasError('required')">
-      {{ 'rule-node-config.aws-access-key-id-required' | translate }}
-    </mat-error>
+    @if (snsConfigForm.get('accessKeyId').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.aws-access-key-id-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.aws-secret-access-key</mat-label>
     <input required matInput formControlName="secretAccessKey">
-    <mat-error *ngIf="snsConfigForm.get('secretAccessKey').hasError('required')">
-      {{ 'rule-node-config.aws-secret-access-key-required' | translate }}
-    </mat-error>
+    @if (snsConfigForm.get('secretAccessKey').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.aws-secret-access-key-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.aws-region</mat-label>
     <input required matInput formControlName="region">
-    <mat-error *ngIf="snsConfigForm.get('region').hasError('required')">
-      {{ 'rule-node-config.aws-region-required' | translate }}
-    </mat-error>
+    @if (snsConfigForm.get('region').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.aws-region-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/sqs-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/sqs-config.component.html
index 8e3de40601..0e07578f19 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/sqs-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/sqs-config.component.html
@@ -19,29 +19,39 @@
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.queue-type</mat-label>
     <mat-select formControlName="queueType" required>
-      <mat-option *ngFor="let type of sqsQueueTypes" [value]="type">
-        {{ sqsQueueTypeTranslationsMap.get(type) | translate }}
-      </mat-option>
+      @for (type of sqsQueueTypes; track type) {
+        <mat-option [value]="type">
+          {{ sqsQueueTypeTranslationsMap.get(type) | translate }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <mat-form-field class="mat-block" subscriptSizing="dynamic">
     <mat-label translate>rule-node-config.queue-url-pattern</mat-label>
     <input required matInput formControlName="queueUrlPattern">
-    <mat-error *ngIf="sqsConfigForm.get('queueUrlPattern').hasError('required')">
-      {{ 'rule-node-config.queue-url-pattern-required' | translate }}
-    </mat-error>
+    @if (sqsConfigForm.get('queueUrlPattern').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.queue-url-pattern-required' | translate }}
+      </mat-error>
+    }
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
-  <mat-form-field *ngIf="sqsConfigForm.get('queueType').value === sqsQueueType.STANDARD" class="mat-block">
-    <mat-label translate>rule-node-config.delay-seconds</mat-label>
-    <input required type="number" min="0" max="900" step="1" matInput formControlName="delaySeconds">
-    <mat-error *ngIf="sqsConfigForm.get('delaySeconds').hasError('min')">
-      {{ 'rule-node-config.min-delay-seconds-message' | translate }}
-    </mat-error>
-    <mat-error *ngIf="sqsConfigForm.get('delaySeconds').hasError('max')">
-      {{ 'rule-node-config.max-delay-seconds-message' | translate }}
-    </mat-error>
-  </mat-form-field>
+  @if (sqsConfigForm.get('queueType').value === sqsQueueType.STANDARD) {
+    <mat-form-field class="mat-block">
+      <mat-label translate>rule-node-config.delay-seconds</mat-label>
+      <input required type="number" min="0" max="900" step="1" matInput formControlName="delaySeconds">
+      @if (sqsConfigForm.get('delaySeconds').hasError('min')) {
+        <mat-error>
+          {{ 'rule-node-config.min-delay-seconds-message' | translate }}
+        </mat-error>
+      }
+      @if (sqsConfigForm.get('delaySeconds').hasError('max')) {
+        <mat-error>
+          {{ 'rule-node-config.max-delay-seconds-message' | translate }}
+        </mat-error>
+      }
+    </mat-form-field>
+  }
   <label translate class="tb-title">rule-node-config.message-attributes</label>
   <div class="tb-hint" [innerHTML]="'rule-node-config.message-attributes-hint' | translate | safe: 'html'"></div>
   <tb-kv-map-config-old
@@ -55,22 +65,28 @@
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.aws-access-key-id</mat-label>
     <input required matInput formControlName="accessKeyId">
-    <mat-error *ngIf="sqsConfigForm.get('accessKeyId').hasError('required')">
-      {{ 'rule-node-config.aws-access-key-id-required' | translate }}
-    </mat-error>
+    @if (sqsConfigForm.get('accessKeyId').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.aws-access-key-id-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.aws-secret-access-key</mat-label>
     <input required matInput formControlName="secretAccessKey">
-    <mat-error *ngIf="sqsConfigForm.get('secretAccessKey').hasError('required')">
-      {{ 'rule-node-config.aws-secret-access-key-required' | translate }}
-    </mat-error>
+    @if (sqsConfigForm.get('secretAccessKey').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.aws-secret-access-key-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>rule-node-config.aws-region</mat-label>
     <input required matInput formControlName="region">
-    <mat-error *ngIf="sqsConfigForm.get('region').hasError('required')">
-      {{ 'rule-node-config.aws-region-required' | translate }}
-    </mat-error>
+    @if (sqsConfigForm.get('region').hasError('required')) {
+      <mat-error>
+        {{ 'rule-node-config.aws-region-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/sqs-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/external/sqs-config.component.ts
index ee6cfac5da..7e5f93de67 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/sqs-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/sqs-config.component.ts
@@ -30,7 +30,7 @@ export class SqsConfigComponent extends RuleNodeConfigurationComponent {
   sqsConfigForm: UntypedFormGroup;
 
   sqsQueueType = SqsQueueType;
-  sqsQueueTypes = Object.keys(SqsQueueType);
+  sqsQueueTypes = Object.values(SqsQueueType);
   sqsQueueTypeTranslationsMap = sqsQueueTypeTranslations;
 
   constructor(private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/filter/check-relation-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/filter/check-relation-config.component.html
index 07a1d1068a..3e2773037d 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/filter/check-relation-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/filter/check-relation-config.component.html
@@ -21,9 +21,11 @@
     <mat-form-field class="mat-block" hideRequiredMarker>
       <mat-label>{{ 'relation.direction' | translate }}</mat-label>
       <mat-select formControlName="direction" required>
-        <mat-option *ngFor="let direction of entitySearchDirection" [value]="direction">
-          {{ entitySearchDirectionTranslationsMap.get(direction) | translate }} <span translate>rule-node-config.relations-query-config-direction-suffix</span>
-        </mat-option>
+        @for (direction of entitySearchDirection; track direction) {
+          <mat-option [value]="direction">
+            {{ entitySearchDirectionTranslationsMap.get(direction) | translate }} <span translate>rule-node-config.relations-query-config-direction-suffix</span>
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
     <tb-relation-type-autocomplete
@@ -36,20 +38,23 @@
         {{ 'rule-node-config.check-relation-to-specific-entity' | translate }}
       </mat-slide-toggle>
     </div>
-    <div *ngIf="checkRelationConfigForm.get('checkForSingleEntity').value" class="same-width-component-row">
-      <tb-entity-type-select
-        style="min-width: 100px; flex: 1;"
-        showLabel
-        required
-        formControlName="entityType">
-      </tb-entity-type-select>
-      <tb-entity-autocomplete
-        class="flex-1"
-        required
-        *ngIf="checkRelationConfigForm.get('entityType').value"
-        [entityType]="checkRelationConfigForm.get('entityType').value"
-        formControlName="entityId">
-      </tb-entity-autocomplete>
-    </div>
+    @if (checkRelationConfigForm.get('checkForSingleEntity').value) {
+      <div class="same-width-component-row">
+        <tb-entity-type-select
+          style="min-width: 100px; flex: 1;"
+          showLabel
+          required
+          formControlName="entityType">
+        </tb-entity-type-select>
+        @if (checkRelationConfigForm.get('entityType').value) {
+          <tb-entity-autocomplete
+            class="flex-1"
+            required
+            [entityType]="checkRelationConfigForm.get('entityType').value"
+            formControlName="entityId">
+          </tb-entity-autocomplete>
+        }
+      </div>
+    }
   </div>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/filter/gps-geo-filter-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/filter/gps-geo-filter-config.component.html
index ec2a5ba89a..aee5db1a19 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/filter/gps-geo-filter-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/filter/gps-geo-filter-config.component.html
@@ -23,19 +23,23 @@
         <mat-form-field class="mat-block max-w-50% flex-full">
           <mat-label>{{ 'rule-node-config.latitude-field-name' | translate }}</mat-label>
           <input matInput formControlName="latitudeKeyName" required>
-          <mat-error *ngIf="geoFilterConfigForm.get('latitudeKeyName').hasError('required')">
-            {{ 'rule-node-config.latitude-field-name-required' | translate }}
-          </mat-error>
+          @if (geoFilterConfigForm.get('latitudeKeyName').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.latitude-field-name-required' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <mat-form-field class="mat-block max-w-50% flex-full">
           <mat-label>{{ 'rule-node-config.longitude-field-name' | translate }}</mat-label>
           <input matInput formControlName="longitudeKeyName" required>
-          <mat-error *ngIf="geoFilterConfigForm.get('longitudeKeyName').hasError('required')">
-            {{ 'rule-node-config.longitude-field-name-required' | translate }}
-          </mat-error>
+          @if (geoFilterConfigForm.get('longitudeKeyName').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.longitude-field-name-required' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
       </div>
-    <div class="tb-form-hint tb-primary-fill" translate>rule-node-config.coordinate-field-hint</div>
+      <div class="tb-form-hint tb-primary-fill" translate>rule-node-config.coordinate-field-hint</div>
     </section>
   </section>
   <section class="tb-form-panel stroked" [class.no-padding-bottom]="!defaultPaddingEnable">
@@ -44,13 +48,15 @@
       <mat-form-field class="mat-block flex-1" hideRequiredMarker>
         <mat-label>{{ 'rule-node-config.perimeter-type' | translate }}</mat-label>
         <mat-select formControlName="perimeterType">
-          <mat-option *ngFor="let type of perimeterTypes" [value]="type">
-            {{ perimeterTypeTranslationMap.get(type) | translate }}
-          </mat-option>
+          @for (type of perimeterTypes; track type) {
+            <mat-option [value]="type">
+              {{ perimeterTypeTranslationMap.get(type) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <div tb-hint-tooltip-icon="{{ geoFilterConfigForm.get('perimeterType').value === perimeterType.CIRCLE
-        ? ('rule-node-config.fetch-circle-parameter-info-from-metadata-hint'
+           ? ('rule-node-config.fetch-circle-parameter-info-from-metadata-hint'
             | translate : { perimeterKeyName: geoFilterConfigForm.get('perimeterKeyName').valid
                               ? geoFilterConfigForm.get('perimeterKeyName').value
                               : 'ss_perimeter'})
@@ -58,69 +64,89 @@
             | translate : { perimeterKeyName: geoFilterConfigForm.get('perimeterKeyName').valid
                               ? geoFilterConfigForm.get('perimeterKeyName').value
                               : 'ss_perimeter'}) }}"
-           class="tb-form-row no-border no-padding slide-toggle">
+        class="tb-form-row no-border no-padding slide-toggle">
         <mat-slide-toggle class="mat-slide" formControlName="fetchPerimeterInfoFromMessageMetadata">
           {{ 'rule-node-config.fetch-perimeter-info-from-metadata' | translate }}
         </mat-slide-toggle>
       </div>
-      <mat-form-field *ngIf="geoFilterConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value" class="mat-block">
-        <mat-label>{{ 'rule-node-config.perimeter-key-name' | translate }}</mat-label>
-        <input matInput formControlName="perimeterKeyName" required>
-        <mat-error *ngIf="geoFilterConfigForm.get('perimeterKeyName').hasError('required')">
-          {{ 'rule-node-config.perimeter-key-name-required' | translate }}
-        </mat-error>
-        <mat-hint>{{ 'rule-node-config.perimeter-key-name-hint' | translate }}</mat-hint>
-      </mat-form-field>
-      <div class="flex flex-col"
-           *ngIf="geoFilterConfigForm.get('perimeterType').value === perimeterType.CIRCLE &&
-                    !geoFilterConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value">
-        <div class="flex flex-row gap-4">
-          <mat-form-field class="flex-1">
-            <mat-label>{{ 'rule-node-config.circle-center-latitude' | translate }}</mat-label>
-            <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>
-            <mat-error *ngIf="geoFilterConfigForm.get('centerLatitude').hasError('required')">
-              {{ 'rule-node-config.circle-center-latitude-required' | translate }}
+      @if (geoFilterConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value) {
+        <mat-form-field class="mat-block">
+          <mat-label>{{ 'rule-node-config.perimeter-key-name' | translate }}</mat-label>
+          <input matInput formControlName="perimeterKeyName" required>
+          @if (geoFilterConfigForm.get('perimeterKeyName').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.perimeter-key-name-required' | translate }}
             </mat-error>
-          </mat-form-field>
-          <mat-form-field class="flex-1">
-            <mat-label>{{ 'rule-node-config.circle-center-longitude' | translate }}</mat-label>
-            <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>
-            <mat-error *ngIf="geoFilterConfigForm.get('centerLongitude').hasError('required')">
-              {{ 'rule-node-config.circle-center-longitude-required' | translate }}
-            </mat-error>
-          </mat-form-field>
+          }
+          <mat-hint>{{ 'rule-node-config.perimeter-key-name-hint' | translate }}</mat-hint>
+        </mat-form-field>
+      }
+      @if (geoFilterConfigForm.get('perimeterType').value === perimeterType.CIRCLE &&
+        !geoFilterConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value) {
+        <div class="flex flex-col"
+             >
+          <div class="flex flex-row gap-4">
+            <mat-form-field class="flex-1">
+              <mat-label>{{ 'rule-node-config.circle-center-latitude' | translate }}</mat-label>
+              <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>
+              @if (geoFilterConfigForm.get('centerLatitude').hasError('required')) {
+                <mat-error>
+                  {{ 'rule-node-config.circle-center-latitude-required' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="flex-1">
+              <mat-label>{{ 'rule-node-config.circle-center-longitude' | translate }}</mat-label>
+              <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>
+              @if (geoFilterConfigForm.get('centerLongitude').hasError('required')) {
+                <mat-error>
+                  {{ 'rule-node-config.circle-center-longitude-required' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+          </div>
+          <div class="flex flex-row gap-4">
+            <mat-form-field class="flex-1">
+              <mat-label>{{ 'rule-node-config.range' | translate }}</mat-label>
+              <input type="number" min="0" step="0.1" matInput formControlName="range" required>
+              @if (geoFilterConfigForm.get('range').hasError('required')) {
+                <mat-error>
+                  {{ 'rule-node-config.range-required' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="flex-1">
+              <mat-label>{{ 'rule-node-config.range-units' | translate }}</mat-label>
+              <mat-select formControlName="rangeUnit" required>
+                @for (type of rangeUnits; track type) {
+                  <mat-option [value]="type">
+                    {{ rangeUnitTranslationMap.get(type) | translate }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (geoFilterConfigForm.get('rangeUnit').hasError('required')) {
+                <mat-error>
+                  {{ 'rule-node-config.range-units-required' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+          </div>
         </div>
-        <div class="flex flex-row gap-4">
-          <mat-form-field class="flex-1">
-            <mat-label>{{ 'rule-node-config.range' | translate }}</mat-label>
-            <input type="number" min="0" step="0.1" matInput formControlName="range" required>
-            <mat-error *ngIf="geoFilterConfigForm.get('range').hasError('required')">
-              {{ 'rule-node-config.range-required' | translate }}
+      }
+      @if (geoFilterConfigForm.get('perimeterType').value === perimeterType.POLYGON &&
+        !geoFilterConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value) {
+        <mat-form-field class="mat-block" subscriptSizing="dynamic"
+                        >
+          <mat-label>{{ 'rule-node-config.polygon-definition' | translate }}</mat-label>
+          <input matInput formControlName="polygonsDefinition" required>
+          <mat-hint>{{ 'rule-node-config.polygon-definition-hint' | translate }}</mat-hint>
+          @if (geoFilterConfigForm.get('polygonsDefinition').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.polygon-definition-required' | translate }}
             </mat-error>
-          </mat-form-field>
-          <mat-form-field class="flex-1">
-            <mat-label>{{ 'rule-node-config.range-units' | translate }}</mat-label>
-            <mat-select formControlName="rangeUnit" required>
-              <mat-option *ngFor="let type of rangeUnits" [value]="type">
-                {{ rangeUnitTranslationMap.get(type) | translate }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="geoFilterConfigForm.get('rangeUnit').hasError('required')">
-              {{ 'rule-node-config.range-units-required' | translate }}
-            </mat-error>
-          </mat-form-field>
-        </div>
-      </div>
-      <mat-form-field class="mat-block" subscriptSizing="dynamic"
-                      *ngIf="geoFilterConfigForm.get('perimeterType').value === perimeterType.POLYGON &&
-                         !geoFilterConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value">
-        <mat-label>{{ 'rule-node-config.polygon-definition' | translate }}</mat-label>
-        <input matInput formControlName="polygonsDefinition" required>
-        <mat-hint>{{ 'rule-node-config.polygon-definition-hint' | translate }}</mat-hint>
-        <mat-error *ngIf="geoFilterConfigForm.get('polygonsDefinition').hasError('required')">
-          {{ 'rule-node-config.polygon-definition-required' | translate }}
-        </mat-error>
-      </mat-form-field>
+          }
+        </mat-form-field>
+      }
     </section>
   </section>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/filter/script-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/filter/script-config.component.html
index bc0ce9bfcb..4146e478ea 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/filter/script-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/filter/script-config.component.html
@@ -16,41 +16,47 @@
 
 -->
 <section [formGroup]="scriptConfigForm">
-  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>
-  <tb-js-func *ngIf="scriptConfigForm.get('scriptLang').value === scriptLanguage.JS"
-              #jsFuncComponent
-              formControlName="jsScript"
-              functionName="Filter"
-              [functionArgs]="['msg', 'metadata', 'msgType']"
-              helpId="rulenode/filter_node_script_fn"
-              noValidate="true">
-    <button toolbarSuffixButton
-            mat-icon-button
-            matTooltip="{{ testScriptLabel | translate }}"
-            matTooltipPosition="above"
-            class="tb-mat-32"
-            (click)="testScript()">
-      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
-    </button>
-  </tb-js-func>
-  <tb-js-func *ngIf="scriptConfigForm.get('scriptLang').value === scriptLanguage.TBEL"
-              #tbelFuncComponent
-              formControlName="tbelScript"
-              functionName="Filter"
-              [functionArgs]="['msg', 'metadata', 'msgType']"
-              [disableUndefinedCheck]="true"
-              [scriptLanguage]="scriptLanguage.TBEL"
-              helpId="rulenode/tbel/filter_node_script_fn"
-              noValidate="true">
-    <button toolbarSuffixButton
-            mat-icon-button
-            matTooltip="{{ testScriptLabel | translate }}"
-            matTooltipPosition="above"
-            class="tb-mat-32"
-            (click)="testScript()">
-      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
-    </button>
-  </tb-js-func>
+  @if (tbelEnabled) {
+    <tb-script-lang formControlName="scriptLang"></tb-script-lang>
+  }
+  @if (scriptConfigForm.get('scriptLang').value === scriptLanguage.JS) {
+    <tb-js-func
+      #jsFuncComponent
+      formControlName="jsScript"
+      functionName="Filter"
+      [functionArgs]="['msg', 'metadata', 'msgType']"
+      helpId="rulenode/filter_node_script_fn"
+      noValidate="true">
+      <button toolbarSuffixButton
+              mat-icon-button
+              matTooltip="{{ testScriptLabel | translate }}"
+              matTooltipPosition="above"
+              class="tb-mat-32"
+              (click)="testScript()">
+        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
+      </button>
+    </tb-js-func>
+  }
+  @if (scriptConfigForm.get('scriptLang').value === scriptLanguage.TBEL) {
+    <tb-js-func
+      #tbelFuncComponent
+      formControlName="tbelScript"
+      functionName="Filter"
+      [functionArgs]="['msg', 'metadata', 'msgType']"
+      [disableUndefinedCheck]="true"
+      [scriptLanguage]="scriptLanguage.TBEL"
+      helpId="rulenode/tbel/filter_node_script_fn"
+      noValidate="true">
+      <button toolbarSuffixButton
+              mat-icon-button
+              matTooltip="{{ testScriptLabel | translate }}"
+              matTooltipPosition="above"
+              class="tb-mat-32"
+              (click)="testScript()">
+        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
+      </button>
+    </tb-js-func>
+  }
   <button mat-button mat-raised-button color="primary" (click)="testScript()">
     {{ testScriptLabel | translate }}
   </button>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/filter/switch-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/filter/switch-config.component.html
index 28ff15604e..42b8f371a9 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/filter/switch-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/filter/switch-config.component.html
@@ -16,41 +16,47 @@
 
 -->
 <section [formGroup]="switchConfigForm">
-  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>
-  <tb-js-func *ngIf="switchConfigForm.get('scriptLang').value === scriptLanguage.JS"
-              #jsFuncComponent
-              formControlName="jsScript"
-              functionName="Switch"
-              [functionArgs]="['msg', 'metadata', 'msgType']"
-              helpId="rulenode/switch_node_script_fn"
-              noValidate="true">
-    <button toolbarSuffixButton
-            mat-icon-button
-            matTooltip="{{ testScriptLabel | translate }}"
-            matTooltipPosition="above"
-            class="tb-mat-32"
-            (click)="testScript()">
-      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
-    </button>
-  </tb-js-func>
-  <tb-js-func *ngIf="switchConfigForm.get('scriptLang').value === scriptLanguage.TBEL"
-              #tbelFuncComponent
-              formControlName="tbelScript"
-              functionName="Switch"
-              [functionArgs]="['msg', 'metadata', 'msgType']"
-              [disableUndefinedCheck]="true"
-              [scriptLanguage]="scriptLanguage.TBEL"
-              helpId="rulenode/tbel/switch_node_script_fn"
-              noValidate="true">
-    <button toolbarSuffixButton
-            mat-icon-button
-            matTooltip="{{ testScriptLabel | translate }}"
-            matTooltipPosition="above"
-            class="tb-mat-32"
-            (click)="testScript()">
-      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
-    </button>
-  </tb-js-func>
+  @if (tbelEnabled) {
+    <tb-script-lang formControlName="scriptLang"></tb-script-lang>
+  }
+  @if (switchConfigForm.get('scriptLang').value === scriptLanguage.JS) {
+    <tb-js-func
+      #jsFuncComponent
+      formControlName="jsScript"
+      functionName="Switch"
+      [functionArgs]="['msg', 'metadata', 'msgType']"
+      helpId="rulenode/switch_node_script_fn"
+      noValidate="true">
+      <button toolbarSuffixButton
+              mat-icon-button
+              matTooltip="{{ testScriptLabel | translate }}"
+              matTooltipPosition="above"
+              class="tb-mat-32"
+              (click)="testScript()">
+        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
+      </button>
+    </tb-js-func>
+  }
+  @if (switchConfigForm.get('scriptLang').value === scriptLanguage.TBEL) {
+    <tb-js-func
+      #tbelFuncComponent
+      formControlName="tbelScript"
+      functionName="Switch"
+      [functionArgs]="['msg', 'metadata', 'msgType']"
+      [disableUndefinedCheck]="true"
+      [scriptLanguage]="scriptLanguage.TBEL"
+      helpId="rulenode/tbel/switch_node_script_fn"
+      noValidate="true">
+      <button toolbarSuffixButton
+              mat-icon-button
+              matTooltip="{{ testScriptLabel | translate }}"
+              matTooltipPosition="above"
+              class="tb-mat-32"
+              (click)="testScript()">
+        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
+      </button>
+    </tb-js-func>
+  }
   <button mat-button mat-raised-button color="primary" (click)="testScript()">
     {{ testScriptLabel | translate }}
   </button>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/rule-node-config.models.ts b/ui-ngx/src/app/modules/home/components/rule-node/rule-node-config.models.ts
index f326e7e9ce..7a2bec7e33 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/rule-node-config.models.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-node/rule-node-config.models.ts
@@ -827,7 +827,7 @@ export enum AttributeScopeResult {
   SERVER_SCOPE = 'SERVER_SCOPE'
 }
 
-export const AttributeScopeMap = new Map<AttributeScope, string>([
+export const AttributeScopeMap = new Map<AttributeScope | AttributeScopeResult, string>([
   [AttributeScope.SHARED_SCOPE, 'rule-node-config.shared-scope'],
   [AttributeScope.SERVER_SCOPE, 'rule-node-config.server-scope'],
   [AttributeScope.CLIENT_SCOPE, 'rule-node-config.client-scope']
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/transformation/change-originator-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/transformation/change-originator-config.component.html
index aecafa4164..22d58fb9fc 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/transformation/change-originator-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/transformation/change-originator-config.component.html
@@ -20,47 +20,56 @@
     <mat-label translate>rule-node-config.new-originator</mat-label>
     <mat-select formControlName="originatorSource" required>
       <mat-select-trigger>
-        <span *ngIf="originatorSourceTranslationMap.get(changeOriginatorConfigForm.get('originatorSource').value)">
-          {{ originatorSourceTranslationMap.get(changeOriginatorConfigForm.get('originatorSource').value) | translate }}
-        </span>
+        @if (originatorSourceTranslationMap.get(changeOriginatorConfigForm.get('originatorSource').value)) {
+          <span>
+            {{ originatorSourceTranslationMap.get(changeOriginatorConfigForm.get('originatorSource').value) | translate }}
+          </span>
+        }
       </mat-select-trigger>
-      <mat-option *ngFor="let source of originatorSources" [value]="source">
-        <span matListItemTitle>
-          {{ originatorSourceTranslationMap.get(source) | translate }}
-        </span>
-        <br>
-        <small matListItemMeta style="color: inherit">
-          {{ originatorSourceDescTranslationMap.get(source) | translate }}
-        </small>
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-  <div class="tb-form-panel stroked no-padding-bottom"
-        *ngIf="changeOriginatorConfigForm.get('originatorSource').value === originatorSource.ENTITY">
-    <tb-example-hint [hintText]="'rule-node-config.entity-name-pattern-hint'"
-                      popupHelpLink="rulenode/change_originator_node_fields_templatization">
-    </tb-example-hint>
-    <div class="tb-form-row no-border no-padding tb-standard-fields">
-      <tb-entity-type-select
-        showLabel
+      @for (source of originatorSources; track source) {
+        <mat-option [value]="source">
+          <span matListItemTitle>
+            {{ originatorSourceTranslationMap.get(source) | translate }}
+          </span>
+          <br>
+            <small matListItemMeta style="color: inherit">
+              {{ originatorSourceDescTranslationMap.get(source) | translate }}
+            </small>
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    @if (changeOriginatorConfigForm.get('originatorSource').value === originatorSource.ENTITY) {
+      <div class="tb-form-panel stroked no-padding-bottom"
+           >
+        <tb-example-hint [hintText]="'rule-node-config.entity-name-pattern-hint'"
+                         popupHelpLink="rulenode/change_originator_node_fields_templatization">
+        </tb-example-hint>
+        <div class="tb-form-row no-border no-padding tb-standard-fields">
+          <tb-entity-type-select
+            showLabel
+            required
+            [allowedEntityTypes] = "allowedEntityTypes"
+            formControlName="entityType"
+            class="mat-mdc-form-field flex">
+          </tb-entity-type-select>
+          <mat-form-field class="flex">
+            <mat-label translate>rule-node-config.entity-name-pattern</mat-label>
+            <input required matInput formControlName="entityNamePattern">
+            @if (changeOriginatorConfigForm.get('entityNamePattern').hasError('required') ||
+              changeOriginatorConfigForm.get('entityNamePattern').hasError('pattern')) {
+              <mat-error>
+                {{ 'rule-node-config.entity-name-pattern-required' | translate }}
+              </mat-error>
+            }
+          </mat-form-field>
+        </div>
+      </div>
+    }
+    @if (changeOriginatorConfigForm.get('originatorSource').value === originatorSource.RELATED) {
+      <tb-relations-query-config
         required
-        [allowedEntityTypes] = "allowedEntityTypes"
-        formControlName="entityType"
-        class="mat-mdc-form-field flex">
-      </tb-entity-type-select>
-      <mat-form-field class="flex">
-        <mat-label translate>rule-node-config.entity-name-pattern</mat-label>
-        <input required matInput formControlName="entityNamePattern">
-        <mat-error *ngIf="changeOriginatorConfigForm.get('entityNamePattern').hasError('required') ||
-                          changeOriginatorConfigForm.get('entityNamePattern').hasError('pattern')">
-          {{ 'rule-node-config.entity-name-pattern-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-    </div>
-  </div>
-  <tb-relations-query-config
-    required
-    *ngIf="changeOriginatorConfigForm.get('originatorSource').value === originatorSource.RELATED"
-    formControlName="relationsQuery">
-  </tb-relations-query-config>
-</section>
+        formControlName="relationsQuery">
+      </tb-relations-query-config>
+    }
+  </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.html
index 001c0aadac..63abc20253 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.html
@@ -19,41 +19,55 @@
   <mat-form-field class="mat-block">
     <mat-label>{{'rule-node-config.interval' | translate}}</mat-label>
     <input type='number' required matInput formControlName="interval">
-    <mat-error *ngIf="deduplicationConfigForm.get('interval').hasError('required')">
-      {{'rule-node-config.interval-required' | translate}}
-    </mat-error>
-    <mat-error *ngIf="deduplicationConfigForm.get('interval').hasError('min')">
-      {{'rule-node-config.interval-min-error' | translate}}
-    </mat-error>
+    @if (deduplicationConfigForm.get('interval').hasError('required')) {
+      <mat-error>
+        {{'rule-node-config.interval-required' | translate}}
+      </mat-error>
+    }
+    @if (deduplicationConfigForm.get('interval').hasError('min')) {
+      <mat-error>
+        {{'rule-node-config.interval-min-error' | translate}}
+      </mat-error>
+    }
     <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
               color="primary"
-              matTooltip="{{ 'rule-node-config.interval-hint' | translate }}">help</mat-icon>
+    matTooltip="{{ 'rule-node-config.interval-hint' | translate }}">help</mat-icon>
   </mat-form-field>
   <div class="tb-form-panel no-padding no-border">
     <div class="tb-form-panel stroked">
       <div class="tb-form-panel-title  tb-required" translate>rule-node-config.strategy</div>
       <tb-toggle-select class="fetch-to-data-toggle" formControlName="strategy" appearance="fill">
-        <tb-toggle-option *ngFor="let strategy of deduplicationStrategies" [value]="strategy">
-          {{ deduplicationStrategiesTranslations.get(strategy) | translate }}
-        </tb-toggle-option>
+        @for (strategy of deduplicationStrategies; track strategy) {
+          <tb-toggle-option [value]="strategy">
+            {{ deduplicationStrategiesTranslations.get(strategy) | translate }}
+          </tb-toggle-option>
+        }
       </tb-toggle-select>
-      <tb-example-hint [hintText]="'rule-node-config.strategy-all-hint'"
-                       *ngIf="deduplicationConfigForm.get('strategy').value === 'ALL'">
-      </tb-example-hint>
-      <tb-example-hint [hintText]="'rule-node-config.strategy-first-hint'"
-                        textAlign="'center'"
-                       *ngIf="deduplicationConfigForm.get('strategy').value === 'FIRST'">
-      </tb-example-hint>
-      <tb-example-hint [hintText]="'rule-node-config.strategy-last-hint'"
-                        textAlign="'center'"
-                       *ngIf="deduplicationConfigForm.get('strategy').value === 'LAST'">
-      </tb-example-hint>
-      <div *ngIf="deduplicationConfigForm.get('strategy').value === deduplicationStrategie.ALL">
-        <tb-output-message-type-autocomplete
-          required
-          formControlName="outMsgType">
-        </tb-output-message-type-autocomplete>
-      </div>
+      @if (deduplicationConfigForm.get('strategy').value === 'ALL') {
+        <tb-example-hint [hintText]="'rule-node-config.strategy-all-hint'"
+                         >
+        </tb-example-hint>
+      }
+      @if (deduplicationConfigForm.get('strategy').value === 'FIRST') {
+        <tb-example-hint [hintText]="'rule-node-config.strategy-first-hint'"
+                         textAlign="'center'"
+                         >
+        </tb-example-hint>
+      }
+      @if (deduplicationConfigForm.get('strategy').value === 'LAST') {
+        <tb-example-hint [hintText]="'rule-node-config.strategy-last-hint'"
+                         textAlign="'center'"
+                         >
+        </tb-example-hint>
+      }
+      @if (deduplicationConfigForm.get('strategy').value === deduplicationStrategie.ALL) {
+        <div>
+          <tb-output-message-type-autocomplete
+            required
+            formControlName="outMsgType">
+          </tb-output-message-type-autocomplete>
+        </div>
+      }
     </div>
     <section class="tb-form-panel stroked">
       <mat-expansion-panel class="tb-settings">
@@ -64,34 +78,46 @@
           <mat-form-field class="flex">
             <mat-label>{{'rule-node-config.max-pending-msgs' | translate}}</mat-label>
             <input type = 'number' required matInput formControlName="maxPendingMsgs">
-            <mat-error *ngIf="deduplicationConfigForm.get('maxPendingMsgs').hasError('required')">
-              {{'rule-node-config.max-pending-msgs-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="deduplicationConfigForm.get('maxPendingMsgs').hasError('max')">
-              {{'rule-node-config.max-pending-msgs-max-error' | translate}}
-            </mat-error>
-            <mat-error *ngIf="deduplicationConfigForm.get('maxPendingMsgs').hasError('min')">
-              {{'rule-node-config.max-pending-msgs-min-error' | translate}}
-            </mat-error>
+            @if (deduplicationConfigForm.get('maxPendingMsgs').hasError('required')) {
+              <mat-error>
+                {{'rule-node-config.max-pending-msgs-required' | translate}}
+              </mat-error>
+            }
+            @if (deduplicationConfigForm.get('maxPendingMsgs').hasError('max')) {
+              <mat-error>
+                {{'rule-node-config.max-pending-msgs-max-error' | translate}}
+              </mat-error>
+            }
+            @if (deduplicationConfigForm.get('maxPendingMsgs').hasError('min')) {
+              <mat-error>
+                {{'rule-node-config.max-pending-msgs-min-error' | translate}}
+              </mat-error>
+            }
             <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
                       color="primary"
-                      matTooltip="{{ 'rule-node-config.max-pending-msgs-hint' | translate }}">help</mat-icon>
+            matTooltip="{{ 'rule-node-config.max-pending-msgs-hint' | translate }}">help</mat-icon>
           </mat-form-field>
           <mat-form-field class="flex">
             <mat-label>{{'rule-node-config.max-retries' | translate}}</mat-label>
             <input type = 'number' required matInput formControlName="maxRetries">
-            <mat-error *ngIf="deduplicationConfigForm.get('maxRetries').hasError('required')">
-              {{'rule-node-config.max-retries-required' | translate}}
-            </mat-error>
-            <mat-error *ngIf="deduplicationConfigForm.get('maxRetries').hasError('max')">
-              {{'rule-node-config.max-retries-max-error' | translate}}
-            </mat-error>
-            <mat-error *ngIf="deduplicationConfigForm.get('maxRetries').hasError('min')">
-              {{'rule-node-config.max-retries-min-error' | translate}}
-            </mat-error>
+            @if (deduplicationConfigForm.get('maxRetries').hasError('required')) {
+              <mat-error>
+                {{'rule-node-config.max-retries-required' | translate}}
+              </mat-error>
+            }
+            @if (deduplicationConfigForm.get('maxRetries').hasError('max')) {
+              <mat-error>
+                {{'rule-node-config.max-retries-max-error' | translate}}
+              </mat-error>
+            }
+            @if (deduplicationConfigForm.get('maxRetries').hasError('min')) {
+              <mat-error>
+                {{'rule-node-config.max-retries-min-error' | translate}}
+              </mat-error>
+            }
             <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
                       color="primary"
-                      matTooltip="{{ 'rule-node-config.max-retries-hint' | translate }}">help</mat-icon>
+            matTooltip="{{ 'rule-node-config.max-retries-hint' | translate }}">help</mat-icon>
           </mat-form-field>
         </div>
       </mat-expansion-panel>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.ts
index 77c95515d3..1efcc0351a 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.ts
@@ -31,7 +31,7 @@ export class DeduplicationConfigComponent extends RuleNodeConfigurationComponent
 
   deduplicationConfigForm: FormGroup;
   deduplicationStrategie = FetchMode;
-  deduplicationStrategies = Object.keys(this.deduplicationStrategie);
+  deduplicationStrategies = Object.values(this.deduplicationStrategie);
   deduplicationStrategiesTranslations = deduplicationStrategiesTranslations;
 
   constructor(private fb: FormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/transformation/node-json-path-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/transformation/node-json-path-config.component.html
index f2d4cc6e5f..673a8b74ad 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/transformation/node-json-path-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/transformation/node-json-path-config.component.html
@@ -20,6 +20,8 @@
     <mat-label>{{ 'rule-node-config.json-path-expression' | translate }}</mat-label>
     <input matInput formControlName="jsonPath" required/>
     <mat-hint>{{ 'rule-node-config.json-path-expression-hint' | translate }}</mat-hint>
-    <mat-error *ngIf="jsonPathConfigForm.get('jsonPath').hasError('required')">{{ 'rule-node-config.json-path-expression-required' | translate }}</mat-error>
+    @if (jsonPathConfigForm.get('jsonPath').hasError('required')) {
+      <mat-error>{{ 'rule-node-config.json-path-expression-required' | translate }}</mat-error>
+    }
   </mat-form-field>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/transformation/rename-keys-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/transformation/rename-keys-config.component.html
index 89ce705ea9..8aeab13cd9 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/transformation/rename-keys-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/transformation/rename-keys-config.component.html
@@ -20,9 +20,11 @@
   <div class="fx-centered">
     <div class="fetch-to-data-toggle">
       <tb-toggle-select class="fetch-to-data-toggle" formControlName="renameIn" appearance="fill">
-        <tb-toggle-option *ngFor="let data of renameIn" [value]="data.value">
-          {{ data.name }}
-        </tb-toggle-option>
+        @for (data of renameIn; track data) {
+          <tb-toggle-option [value]="data.value">
+            {{ data.name }}
+          </tb-toggle-option>
+        }
       </tb-toggle-select>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/transformation/script-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/transformation/script-config.component.html
index 7b39ba131d..8d73d4c0ff 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/transformation/script-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/transformation/script-config.component.html
@@ -16,41 +16,47 @@
 
 -->
 <section [formGroup]="scriptConfigForm">
-  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>
-  <tb-js-func *ngIf="scriptConfigForm.get('scriptLang').value === scriptLanguage.JS"
-              #jsFuncComponent
-              formControlName="jsScript"
-              functionName="Transform"
-              helpId="rulenode/transformation_node_script_fn"
-              [functionArgs]="['msg', 'metadata', 'msgType']"
-              noValidate="true">
-    <button toolbarSuffixButton
-            mat-icon-button
-            matTooltip="{{ testScriptLabel | translate }}"
-            matTooltipPosition="above"
-            class="tb-mat-32"
-            (click)="testScript()">
-      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
-    </button>
-  </tb-js-func>
-  <tb-js-func *ngIf="scriptConfigForm.get('scriptLang').value === scriptLanguage.TBEL"
-              #tbelFuncComponent
-              formControlName="tbelScript"
-              functionName="Transform"
-              helpId="rulenode/tbel/transformation_node_script_fn"
-              [functionArgs]="['msg', 'metadata', 'msgType']"
-              [disableUndefinedCheck]="true"
-              [scriptLanguage]="scriptLanguage.TBEL"
-              noValidate="true">
-    <button toolbarSuffixButton
-            mat-icon-button
-            matTooltip="{{ testScriptLabel | translate }}"
-            matTooltipPosition="above"
-            class="tb-mat-32"
-            (click)="testScript()">
-      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
-    </button>
-  </tb-js-func>
+  @if (tbelEnabled) {
+    <tb-script-lang formControlName="scriptLang"></tb-script-lang>
+  }
+  @if (scriptConfigForm.get('scriptLang').value === scriptLanguage.JS) {
+    <tb-js-func
+      #jsFuncComponent
+      formControlName="jsScript"
+      functionName="Transform"
+      helpId="rulenode/transformation_node_script_fn"
+      [functionArgs]="['msg', 'metadata', 'msgType']"
+      noValidate="true">
+      <button toolbarSuffixButton
+              mat-icon-button
+              matTooltip="{{ testScriptLabel | translate }}"
+              matTooltipPosition="above"
+              class="tb-mat-32"
+              (click)="testScript()">
+        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
+      </button>
+    </tb-js-func>
+  }
+  @if (scriptConfigForm.get('scriptLang').value === scriptLanguage.TBEL) {
+    <tb-js-func
+      #tbelFuncComponent
+      formControlName="tbelScript"
+      functionName="Transform"
+      helpId="rulenode/tbel/transformation_node_script_fn"
+      [functionArgs]="['msg', 'metadata', 'msgType']"
+      [disableUndefinedCheck]="true"
+      [scriptLanguage]="scriptLanguage.TBEL"
+      noValidate="true">
+      <button toolbarSuffixButton
+              mat-icon-button
+              matTooltip="{{ testScriptLabel | translate }}"
+              matTooltipPosition="above"
+              class="tb-mat-32"
+              (click)="testScript()">
+        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
+      </button>
+    </tb-js-func>
+  }
   <div>
     <button mat-button mat-raised-button color="primary" (click)="testScript()">
       {{ testScriptLabel | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/transformation/to-email-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/transformation/to-email-config.component.html
index 8a9f57f564..f2d8e253ec 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/transformation/to-email-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/transformation/to-email-config.component.html
@@ -28,17 +28,19 @@
         <mat-hint align="end">
           <div class="input-bottom-double-hint">
             <div class="see-example"
-                hintMode
-                tb-help-popup="{{'rulenode/to_email_node_fields_templatization'}}"
-                tb-help-popup-placement="right"
-                trigger-style="letter-spacing:0.25px; font-size:12px;"
-                [tb-help-popup-style]="{maxWidth: '820px'}"
-                trigger-text="{{ 'rule-node-config.key-val.see-examples' | translate }}"></div>
+                 hintMode
+                 tb-help-popup="{{'rulenode/to_email_node_fields_templatization'}}"
+                 tb-help-popup-placement="right"
+                 trigger-style="letter-spacing:0.25px; font-size:12px;"
+                 [tb-help-popup-style]="{maxWidth: '820px'}"
+            trigger-text="{{ 'rule-node-config.key-val.see-examples' | translate }}"></div>
           </div>
         </mat-hint>
-        <mat-error *ngIf="toEmailConfigForm.get('fromTemplate').hasError('required')">
-          {{ 'rule-node-config.from-template-required' | translate }}
-        </mat-error>
+        @if (toEmailConfigForm.get('fromTemplate').hasError('required')) {
+          <mat-error>
+            {{ 'rule-node-config.from-template-required' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
     </div>
   </div>
@@ -46,7 +48,7 @@
     <div class="tb-form-panel no-padding no-border">
       <div class="tb-form-panel-title" translate>rule-node-config.recipients</div>
       <tb-example-hint [hintText]="'rule-node-config.recipients-block-main-hint'"
-                        popupHelpLink="rulenode/to_email_node_fields_templatization">
+                       popupHelpLink="rulenode/to_email_node_fields_templatization">
       </tb-example-hint>
     </div>
     <div class="tb-form-row no-border no-padding tb-standard-fields">
@@ -57,10 +59,12 @@
                   class="tb-enable-vertical-resize"
                   formControlName="toTemplate"
                   cdkTextareaAutosize
-                  cdkAutosizeMinRows="1"></textarea>
-        <mat-error *ngIf="toEmailConfigForm.get('toTemplate').hasError('required')">
-          {{ 'rule-node-config.to-template-required' | translate }}
-        </mat-error>
+        cdkAutosizeMinRows="1"></textarea>
+        @if (toEmailConfigForm.get('toTemplate').hasError('required')) {
+          <mat-error>
+            {{ 'rule-node-config.to-template-required' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
       <mat-form-field class="flex">
         <mat-label translate>rule-node-config.cc-template</mat-label>
@@ -68,7 +72,7 @@
                   formControlName="ccTemplate"
                   class="tb-enable-vertical-resize"
                   cdkTextareaAutosize
-                  cdkAutosizeMinRows="1"></textarea>
+        cdkAutosizeMinRows="1"></textarea>
       </mat-form-field>
       <mat-form-field class="flex">
         <mat-label translate>rule-node-config.bcc-template</mat-label>
@@ -76,14 +80,14 @@
                   formControlName="bccTemplate"
                   class="tb-enable-vertical-resize"
                   cdkTextareaAutosize
-                  cdkAutosizeMinRows="1"></textarea>
+        cdkAutosizeMinRows="1"></textarea>
       </mat-form-field>
     </div>
   </div>
   <div class="tb-form-panel stroked">
     <div class="tb-form-panel-title" translate>rule-node-config.message-subject-and-content</div>
     <tb-example-hint [hintText]="'rule-node-config.kv-map-pattern-hint'"
-                      popupHelpLink="rulenode/to_email_node_fields_templatization">
+                     popupHelpLink="rulenode/to_email_node_fields_templatization">
     </tb-example-hint>
     <section>
       <mat-form-field class="mat-block">
@@ -93,47 +97,57 @@
                   formControlName="subjectTemplate"
                   class="tb-enable-vertical-resize"
                   cdkTextareaAutosize
-                  cdkAutosizeMinRows="1"></textarea>
-        <mat-error *ngIf="toEmailConfigForm.get('subjectTemplate').hasError('required')">
-          {{ 'rule-node-config.subject-template-required' | translate }}
-        </mat-error>
+        cdkAutosizeMinRows="1"></textarea>
+        @if (toEmailConfigForm.get('subjectTemplate').hasError('required')) {
+          <mat-error>
+            {{ 'rule-node-config.subject-template-required' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
       <mat-form-field class="mat-block">
         <mat-label translate>rule-node-config.mail-body-type</mat-label>
         <mat-select formControlName="mailBodyType">
           <mat-select-trigger>
-            <span *ngIf="toEmailConfigForm.get('mailBodyType').value">
-              {{ getBodyTypeName() | translate }}
-            </span>
+            @if (toEmailConfigForm.get('mailBodyType').value) {
+              <span>
+                {{ getBodyTypeName() | translate }}
+              </span>
+            }
           </mat-select-trigger>
-          <mat-option *ngFor="let type of mailBodyTypes" [value]="type.value">
-            <span matListItemTitle>
-              {{ type.name | translate }}
-            </span>
-            <br>
-            <small matListItemMeta style="color: inherit">
-              {{ type.description | translate }}
-            </small>
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field class="mat-block" *ngIf="toEmailConfigForm.get('mailBodyType').value === 'dynamic'">
-        <mat-label translate>rule-node-config.body-type-template</mat-label>
-        <input required matInput formControlName="isHtmlTemplate">
-        <mat-hint translate>rule-node-config.mail-body-types.after-template-evaluation-hint</mat-hint>
-      </mat-form-field>
-      <mat-form-field class="mat-block">
-        <mat-label translate>rule-node-config.body-template</mat-label>
-        <textarea required
-                  matInput
-                  formControlName="bodyTemplate"
-                  class="tb-enable-vertical-resize"
-                  cdkTextareaAutosize
-                  cdkAutosizeMinRows="2"></textarea>
-        <mat-error *ngIf="toEmailConfigForm.get('bodyTemplate').hasError('required')">
-          {{ 'rule-node-config.body-template-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-    </section>
-  </div>
-</section>
+          @for (type of mailBodyTypes; track type) {
+            <mat-option [value]="type.value">
+              <span matListItemTitle>
+                {{ type.name | translate }}
+              </span>
+              <br>
+                <small matListItemMeta style="color: inherit">
+                  {{ type.description | translate }}
+                </small>
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        @if (toEmailConfigForm.get('mailBodyType').value === 'dynamic') {
+          <mat-form-field class="mat-block">
+            <mat-label translate>rule-node-config.body-type-template</mat-label>
+            <input required matInput formControlName="isHtmlTemplate">
+            <mat-hint translate>rule-node-config.mail-body-types.after-template-evaluation-hint</mat-hint>
+          </mat-form-field>
+        }
+        <mat-form-field class="mat-block">
+          <mat-label translate>rule-node-config.body-template</mat-label>
+          <textarea required
+                    matInput
+                    formControlName="bodyTemplate"
+                    class="tb-enable-vertical-resize"
+                    cdkTextareaAutosize
+          cdkAutosizeMinRows="2"></textarea>
+          @if (toEmailConfigForm.get('bodyTemplate').hasError('required')) {
+            <mat-error>
+              {{ 'rule-node-config.body-template-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+      </section>
+    </div>
+  </section>
diff --git a/ui-ngx/src/app/modules/home/components/sms/aws-sns-provider-configuration.component.html b/ui-ngx/src/app/modules/home/components/sms/aws-sns-provider-configuration.component.html
index 3beaa93ed1..fea9dafc09 100644
--- a/ui-ngx/src/app/modules/home/components/sms/aws-sns-provider-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/sms/aws-sns-provider-configuration.component.html
@@ -19,23 +19,29 @@
   <mat-form-field class="mat-block">
     <mat-label translate>admin.aws-access-key-id</mat-label>
     <input required matInput formControlName="accessKeyId">
-    <mat-error *ngIf="awsSnsProviderConfigurationFormGroup.get('accessKeyId').hasError('required')">
-      {{ 'admin.aws-access-key-id-required' | translate }}
-    </mat-error>
+    @if (awsSnsProviderConfigurationFormGroup.get('accessKeyId').hasError('required')) {
+      <mat-error>
+        {{ 'admin.aws-access-key-id-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>admin.aws-secret-access-key</mat-label>
     <input required type="password" matInput formControlName="secretAccessKey" autocomplete="new-password">
     <tb-toggle-password matSuffix></tb-toggle-password>
-    <mat-error *ngIf="awsSnsProviderConfigurationFormGroup.get('secretAccessKey').hasError('required')">
-      {{ 'admin.aws-secret-access-key-required' | translate }}
-    </mat-error>
+    @if (awsSnsProviderConfigurationFormGroup.get('secretAccessKey').hasError('required')) {
+      <mat-error>
+        {{ 'admin.aws-secret-access-key-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>admin.aws-region</mat-label>
     <input required matInput formControlName="region">
-    <mat-error *ngIf="awsSnsProviderConfigurationFormGroup.get('region').hasError('required')">
-      {{ 'admin.aws-region-required' | translate }}
-    </mat-error>
+    @if (awsSnsProviderConfigurationFormGroup.get('region').hasError('required')) {
+      <mat-error>
+        {{ 'admin.aws-region-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html b/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
index bc1e9430c7..08545e3a9b 100644
--- a/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
@@ -20,41 +20,51 @@
     <mat-form-field class="mat-block lt-sm:flex-full gt-xs:max-w-25% gt-xs:flex-full">
       <mat-label translate>admin.smpp-provider.smpp-version</mat-label>
       <mat-select formControlName="protocolVersion">
-        <mat-option *ngFor="let smppVersion of smppVersions" [value]="smppVersion.value">
-          {{smppVersion.value}}
-        </mat-option>
+        @for (smppVersion of smppVersions; track smppVersion) {
+          <mat-option [value]="smppVersion.value">
+            {{smppVersion.value}}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
     <mat-form-field class="mat-block flex-1">
       <mat-label translate>admin.smpp-provider.smpp-host</mat-label>
       <input required matInput formControlName="host">
-      <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('host').hasError('required')">
-        {{'admin.smpp-provider.smpp-host-required' | translate}}
-      </mat-error>
+      @if (smppSmsProviderConfigurationFormGroup.get('host').hasError('required')) {
+        <mat-error>
+          {{'admin.smpp-provider.smpp-host-required' | translate}}
+        </mat-error>
+      }
     </mat-form-field>
     <mat-form-field class="mat-block lt-sm:flex-full gt-xs:max-w-25% gt-xs:flex-full">
       <mat-label translate>admin.smpp-provider.smpp-port</mat-label>
       <input required matInput type="number" formControlName="port">
-      <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('port').hasError('required')">
-        {{'admin.smpp-provider.smpp-port-required' | translate}}
-      </mat-error>
+      @if (smppSmsProviderConfigurationFormGroup.get('port').hasError('required')) {
+        <mat-error>
+          {{'admin.smpp-provider.smpp-port-required' | translate}}
+        </mat-error>
+      }
     </mat-form-field>
   </div>
   <div class="flex flex-row flex-wrap gap-1.5">
     <mat-form-field class="mat-block flex-1">
       <mat-label translate>admin.smpp-provider.system-id</mat-label>
       <input required matInput formControlName="systemId">
-      <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('systemId').hasError('required')">
-        {{'admin.smpp-provider.system-id-required' | translate}}
-      </mat-error>
+      @if (smppSmsProviderConfigurationFormGroup.get('systemId').hasError('required')) {
+        <mat-error>
+          {{'admin.smpp-provider.system-id-required' | translate}}
+        </mat-error>
+      }
     </mat-form-field>
     <mat-form-field class="mat-block flex-1">
       <mat-label translate>admin.smpp-provider.password</mat-label>
       <input required matInput type="password" autocomplete="new-password" formControlName="password">
       <tb-toggle-password matSuffix></tb-toggle-password>
-      <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('password').hasError('required')">
-        {{'admin.smpp-provider.password-required' | translate}}
-      </mat-error>
+      @if (smppSmsProviderConfigurationFormGroup.get('password').hasError('required')) {
+        <mat-error>
+          {{'admin.smpp-provider.password-required' | translate}}
+        </mat-error>
+      }
     </mat-form-field>
   </div>
   <mat-accordion multi>
@@ -72,9 +82,11 @@
         <mat-form-field class="mat-block">
           <mat-label translate>admin.smpp-provider.bind-type</mat-label>
           <mat-select formControlName="bindType">
-            <mat-option *ngFor="let bindType of bindTypes" [value]="bindType">
-              {{bindTypesTranslation.get(bindType) | translate}}
-            </mat-option>
+            @for (bindType of bindTypes; track bindType) {
+              <mat-option [value]="bindType">
+                {{bindTypesTranslation.get(bindType) | translate}}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field class="mat-block">
@@ -97,17 +109,21 @@
         <mat-form-field class="mat-block">
           <mat-label translate>admin.smpp-provider.source-ton</mat-label>
           <mat-select formControlName="sourceTon">
-            <mat-option *ngFor="let sourceTon of typeOfNumber" [value]="typeOfNumberMap.get(sourceTon).value">
-              {{typeOfNumberMap.get(sourceTon).name | translate}}
-            </mat-option>
+            @for (sourceTon of typeOfNumber; track sourceTon) {
+              <mat-option [value]="typeOfNumberMap.get(sourceTon).value">
+                {{typeOfNumberMap.get(sourceTon).name | translate}}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field class="mat-block">
           <mat-label translate>admin.smpp-provider.source-npi</mat-label>
           <mat-select formControlName="sourceNpi">
-            <mat-option *ngFor="let sourceNpi of numberingPlanIdentification" [value]="numberingPlanIdentificationMap.get(sourceNpi).value">
-              {{numberingPlanIdentificationMap.get(sourceNpi).name | translate}}
-            </mat-option>
+            @for (sourceNpi of numberingPlanIdentification; track sourceNpi) {
+              <mat-option [value]="numberingPlanIdentificationMap.get(sourceNpi).value">
+                {{numberingPlanIdentificationMap.get(sourceNpi).name | translate}}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </ng-template>
@@ -122,17 +138,21 @@
         <mat-form-field class="mat-block">
           <mat-label translate>admin.smpp-provider.destination-ton</mat-label>
           <mat-select formControlName="destinationTon">
-            <mat-option *ngFor="let destinationTon of typeOfNumber" [value]="typeOfNumberMap.get(destinationTon).value">
-              {{typeOfNumberMap.get(destinationTon).name | translate}}
-            </mat-option>
+            @for (destinationTon of typeOfNumber; track destinationTon) {
+              <mat-option [value]="typeOfNumberMap.get(destinationTon).value">
+                {{typeOfNumberMap.get(destinationTon).name | translate}}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field class="mat-block">
           <mat-label translate>admin.smpp-provider.destination-npi</mat-label>
           <mat-select formControlName="destinationNpi">
-            <mat-option *ngFor="let destinationNpi of numberingPlanIdentification" [value]="numberingPlanIdentificationMap.get(destinationNpi).value">
-              {{numberingPlanIdentificationMap.get(destinationNpi).name | translate}}
-            </mat-option>
+            @for (destinationNpi of numberingPlanIdentification; track destinationNpi) {
+              <mat-option [value]="numberingPlanIdentificationMap.get(destinationNpi).value">
+                {{numberingPlanIdentificationMap.get(destinationNpi).name | translate}}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </ng-template>
@@ -151,9 +171,11 @@
         <mat-form-field class="mat-block">
           <mat-label translate>admin.smpp-provider.coding-scheme</mat-label>
           <mat-select formControlName="codingScheme">
-            <mat-option *ngFor="let codingScheme of codingSchemes" [value]="codingSchemesMap.get(codingScheme).value">
-              {{codingSchemesMap.get(codingScheme).name | translate}}
-            </mat-option>
+            @for (codingScheme of codingSchemes; track codingScheme) {
+              <mat-option [value]="codingSchemesMap.get(codingScheme).value">
+                {{codingSchemesMap.get(codingScheme).name | translate}}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.ts b/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.ts
index 35111be91b..4a4341364b 100644
--- a/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.ts
+++ b/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.ts
@@ -68,16 +68,16 @@ export class SmppSmsProviderConfigurationComponent  implements ControlValueAcces
 
   smppVersions = smppVersions;
 
-  bindTypes = Object.keys(BindTypes);
+  bindTypes = Object.values(BindTypes);
   bindTypesTranslation = bindTypesTranslationMap;
 
-  typeOfNumber = Object.keys(TypeOfNumber);
+  typeOfNumber = Object.values(TypeOfNumber);
   typeOfNumberMap = typeOfNumberMap;
 
-  numberingPlanIdentification = Object.keys(NumberingPlanIdentification);
+  numberingPlanIdentification = Object.values(NumberingPlanIdentification);
   numberingPlanIdentificationMap = numberingPlanIdentificationMap;
 
-  codingSchemes = Object.keys(CodingSchemes);
+  codingSchemes = Object.values(CodingSchemes);
   codingSchemesMap = codingSchemesMap;
 
   private propagateChange = (v: any) => { };
diff --git a/ui-ngx/src/app/modules/home/components/sms/sms-provider-configuration.component.html b/ui-ngx/src/app/modules/home/components/sms/sms-provider-configuration.component.html
index 544f8866f0..620748406e 100644
--- a/ui-ngx/src/app/modules/home/components/sms/sms-provider-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/sms/sms-provider-configuration.component.html
@@ -19,32 +19,38 @@
   <mat-form-field class="mat-block">
     <mat-label translate>admin.sms-provider-type</mat-label>
     <mat-select formControlName="type" [required]="required">
-      <mat-option *ngFor="let type of smsProviderTypes" [value]="type">
-        {{smsProviderTypeTranslations.get(type) | translate}}
-      </mat-option>
+      @for (type of smsProviderTypes; track type) {
+        <mat-option [value]="type">
+          {{smsProviderTypeTranslations.get(type) | translate}}
+        </mat-option>
+      }
     </mat-select>
-    <mat-error *ngIf="smsProviderConfigurationFormGroup.get('type').hasError('required')">
-      {{ 'admin.sms-provider-type-required' | translate }}
-    </mat-error>
+    @if (smsProviderConfigurationFormGroup.get('type').hasError('required')) {
+      <mat-error>
+        {{ 'admin.sms-provider-type-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
-  <div [ngSwitch]="smsProviderConfigurationFormGroup.get('type').value">
-    <ng-template [ngSwitchCase]="smsProviderType.AWS_SNS">
-      <tb-aws-sns-provider-configuration
-        [required]="required"
-        formControlName="configuration">
-      </tb-aws-sns-provider-configuration>
-    </ng-template>
-    <ng-template [ngSwitchCase]="smsProviderType.TWILIO">
-      <tb-twilio-sms-provider-configuration
-        [required]="required"
-        formControlName="configuration">
-      </tb-twilio-sms-provider-configuration>
-    </ng-template>
-    <ng-template [ngSwitchCase]="smsProviderType.SMPP">
-      <tb-smpp-sms-provider-configuration
-        [required]="required"
-        formControlName="configuration">
-      </tb-smpp-sms-provider-configuration>
-    </ng-template>
+  <div>
+    @switch (smsProviderConfigurationFormGroup.get('type').value) {
+      @case (smsProviderType.AWS_SNS) {
+        <tb-aws-sns-provider-configuration
+          [required]="required"
+          formControlName="configuration">
+        </tb-aws-sns-provider-configuration>
+      }
+      @case (smsProviderType.TWILIO) {
+        <tb-twilio-sms-provider-configuration
+          [required]="required"
+          formControlName="configuration">
+        </tb-twilio-sms-provider-configuration>
+      }
+      @case (smsProviderType.SMPP) {
+        <tb-smpp-sms-provider-configuration
+          [required]="required"
+          formControlName="configuration">
+        </tb-smpp-sms-provider-configuration>
+      }
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/sms/sms-provider-configuration.component.ts b/ui-ngx/src/app/modules/home/components/sms/sms-provider-configuration.component.ts
index adb477d8fb..86f07cfaaf 100644
--- a/ui-ngx/src/app/modules/home/components/sms/sms-provider-configuration.component.ts
+++ b/ui-ngx/src/app/modules/home/components/sms/sms-provider-configuration.component.ts
@@ -47,7 +47,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 export class SmsProviderConfigurationComponent implements ControlValueAccessor, OnInit {
 
   smsProviderType = SmsProviderType;
-  smsProviderTypes = Object.keys(SmsProviderType);
+  smsProviderTypes = Object.values(SmsProviderType);
   smsProviderTypeTranslations = smsProviderTypeTranslationMap;
 
   smsProviderConfigurationFormGroup: UntypedFormGroup;
diff --git a/ui-ngx/src/app/modules/home/components/sms/twilio-sms-provider-configuration.component.html b/ui-ngx/src/app/modules/home/components/sms/twilio-sms-provider-configuration.component.html
index 99d64302ec..f3c1261ab6 100644
--- a/ui-ngx/src/app/modules/home/components/sms/twilio-sms-provider-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/sms/twilio-sms-provider-configuration.component.html
@@ -19,27 +19,35 @@
   <mat-form-field class="mat-block" subscriptSizing="dynamic">
     <mat-label translate>admin.number-from</mat-label>
     <input type="tel" required [pattern]="phoneNumberPatternTwilio" matInput formControlName="numberFrom">
-    <mat-error *ngIf="twilioSmsProviderConfigurationFormGroup.get('numberFrom').hasError('required')">
-      {{ 'admin.number-from-required' | translate }}
-    </mat-error>
-    <mat-error *ngIf="twilioSmsProviderConfigurationFormGroup.get('numberFrom').hasError('pattern')">
-      {{ 'admin.phone-number-pattern-twilio' | translate }}
-    </mat-error>
+    @if (twilioSmsProviderConfigurationFormGroup.get('numberFrom').hasError('required')) {
+      <mat-error>
+        {{ 'admin.number-from-required' | translate }}
+      </mat-error>
+    }
+    @if (twilioSmsProviderConfigurationFormGroup.get('numberFrom').hasError('pattern')) {
+      <mat-error>
+        {{ 'admin.phone-number-pattern-twilio' | translate }}
+      </mat-error>
+    }
     <mat-hint innerHTML="{{ 'admin.phone-number-hint-twilio' | translate }}"></mat-hint>
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>admin.twilio-account-sid</mat-label>
     <input required matInput formControlName="accountSid">
-    <mat-error *ngIf="twilioSmsProviderConfigurationFormGroup.get('accountSid').hasError('required')">
-      {{ 'admin.twilio-account-sid-required' | translate }}
-    </mat-error>
+    @if (twilioSmsProviderConfigurationFormGroup.get('accountSid').hasError('required')) {
+      <mat-error>
+        {{ 'admin.twilio-account-sid-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>admin.twilio-account-token</mat-label>
     <input required type="password" autocomplete="new-password" matInput formControlName="accountToken">
     <tb-toggle-password matSuffix></tb-toggle-password>
-    <mat-error *ngIf="twilioSmsProviderConfigurationFormGroup.get('accountToken').hasError('required')">
-      {{ 'admin.twilio-account-token-required' | translate }}
-    </mat-error>
+    @if (twilioSmsProviderConfigurationFormGroup.get('accountToken').hasError('required')) {
+      <mat-error>
+        {{ 'admin.twilio-account-token-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
index 548a7b79c3..00d1f9f782 100644
--- a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
@@ -24,81 +24,92 @@
       <span class="flex-1"></span>
       <div tb-help="autoCommitSettings"></div>
     </mat-card-header>
-    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-    </mat-progress-bar>
-    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+    @if (isLoading$ | async) {
+      <mat-progress-bar color="warn" mode="indeterminate">
+      </mat-progress-bar>
+    }
+    @if (!(isLoading$ | async)) {
+      <div style="height: 4px;"></div>
+    }
     <mat-card-content style="padding-top: 16px;">
       <form [formGroup]="autoCommitSettingsForm" #formDirective="ngForm" (ngSubmit)="save()">
         <fieldset class="fields-group" [disabled]="(isLoading$ | async) || (isReadOnly | async)">
           <legend class="group-title" translate>admin.auto-commit-entities</legend>
           <div class="flex flex-col">
-            <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
-               let $index = index; last as isLast;"
-                 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)">
-                <mat-expansion-panel-header>
-                  <div class="flex flex-1 flex-row items-center justify-start">
-                    <mat-panel-title  class="basis-auto">
-                      <div class="flex flex-1 flex-row items-center justify-start">
-                        <div [innerHTML]="entityTypeText(entityTypeFormGroup)"></div>
-                      </div>
-                    </mat-panel-title>
-                    <span class="flex-1"></span>
-                    <button mat-icon-button style="min-width: 40px;"
-                            type="button"
-                            (click)="removeEntityType($index)"
-                            matTooltip="{{ 'action.remove' | translate }}"
-                            matTooltipPosition="above">
-                      <mat-icon>delete</mat-icon>
-                    </button>
-                  </div>
-                </mat-expansion-panel-header>
-                <ng-template matExpansionPanelContent>
-                  <div class="entity-type-config-content flex flex-col gap-2">
-                    <mat-divider></mat-divider>
-                    <div class="flex flex-col gt-lg:flex-row gt-lg:gap-4">
-                      <div class="flex flex-row gap-4 xs:flex-col xs:gap-0">
-                        <tb-entity-type-select
-                          showLabel
-                          appearance="outline"
-                          formControlName="entityType"
-                          required
-                          [filterAllowedEntityTypes]="false"
-                          [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
-                        </tb-entity-type-select>
-                        <div formGroupName="config">
-                          <tb-branch-autocomplete
+            @for (entityTypeFormGroup of entityTypesFormGroupArray(); track trackByEntityType($index, 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)">
+                  <mat-expansion-panel-header>
+                    <div class="flex flex-1 flex-row items-center justify-start">
+                      <mat-panel-title  class="basis-auto">
+                        <div class="flex flex-1 flex-row items-center justify-start">
+                          <div [innerHTML]="entityTypeText(entityTypeFormGroup)"></div>
+                        </div>
+                      </mat-panel-title>
+                      <span class="flex-1"></span>
+                      <button mat-icon-button style="min-width: 40px;"
+                              type="button"
+                              (click)="removeEntityType($index)"
+                              matTooltip="{{ 'action.remove' | translate }}"
+                              matTooltipPosition="above">
+                        <mat-icon>delete</mat-icon>
+                      </button>
+                    </div>
+                  </mat-expansion-panel-header>
+                  <ng-template matExpansionPanelContent>
+                    <div class="entity-type-config-content flex flex-col gap-2">
+                      <mat-divider></mat-divider>
+                      <div class="flex flex-col gt-lg:flex-row gt-lg:gap-4">
+                        <div class="flex flex-row gap-4 xs:flex-col xs:gap-0">
+                          <tb-entity-type-select
+                            showLabel
                             appearance="outline"
-                            emptyPlaceholder="{{ 'version-control.default' | translate }}"
-                            [selectDefaultBranch]="false"
-                            formControlName="branch">
-                          </tb-branch-autocomplete>
+                            formControlName="entityType"
+                            required
+                            [filterAllowedEntityTypes]="false"
+                            [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
+                          </tb-entity-type-select>
+                          <div formGroupName="config">
+                            <tb-branch-autocomplete
+                              appearance="outline"
+                              emptyPlaceholder="{{ 'version-control.default' | translate }}"
+                              [selectDefaultBranch]="false"
+                              formControlName="branch">
+                            </tb-branch-autocomplete>
+                          </div>
+                        </div>
+                        <div class="flex flex-1 flex-col gt-xs:flex-row items-start gt-xs:items-center justify-start gap-1 gt-xs:gap-4"
+                             formGroupName="config">
+                          @if (entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE) {
+                            <mat-checkbox formControlName="saveCredentials">
+                              {{ 'version-control.export-credentials' | translate }}
+                            </mat-checkbox>
+                          }
+                          <mat-checkbox formControlName="saveAttributes">
+                            {{ 'version-control.export-attributes' | translate }}
+                          </mat-checkbox>
+                          <mat-checkbox formControlName="saveRelations">
+                            {{ 'version-control.export-relations' | translate }}
+                          </mat-checkbox>
+                          @if (typesWithCalculatedFields.has(entityTypeFormGroup.get('entityType').value)) {
+                            <mat-checkbox formControlName="saveCalculatedFields">
+                              {{ 'version-control.export-calculated-fields' | translate }}
+                            </mat-checkbox>
+                          }
                         </div>
-                      </div>
-                      <div class="flex flex-1 flex-col gt-xs:flex-row items-start gt-xs:items-center justify-start gap-1 gt-xs:gap-4"
-                           formGroupName="config">
-                        <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
-                          {{ 'version-control.export-credentials' | translate }}
-                        </mat-checkbox>
-                        <mat-checkbox formControlName="saveAttributes">
-                          {{ 'version-control.export-attributes' | translate }}
-                        </mat-checkbox>
-                        <mat-checkbox formControlName="saveRelations">
-                          {{ 'version-control.export-relations' | translate }}
-                        </mat-checkbox>
-                        <mat-checkbox *ngIf="typesWithCalculatedFields.has(entityTypeFormGroup.get('entityType').value)" formControlName="saveCalculatedFields">
-                          {{ 'version-control.export-calculated-fields' | translate }}
-                        </mat-checkbox>
                       </div>
                     </div>
-                  </div>
-                </ng-template>
-              </mat-expansion-panel>
-            </div>
-            <div *ngIf="!entityTypesFormGroupArray().length">
-              <span translate
-                    class="tb-prompt flex items-center justify-center">admin.no-auto-commit-entities-prompt</span>
-            </div>
+                  </ng-template>
+                </mat-expansion-panel>
+              </div>
+            }
+            @if (!entityTypesFormGroupArray().length) {
+              <div>
+                <span translate
+                class="tb-prompt flex items-center justify-center">admin.no-auto-commit-entities-prompt</span>
+              </div>
+            }
             <div style="padding-top: 16px;"  class="flex flex-row">
               <button mat-raised-button color="primary"
                       type="button"
@@ -116,7 +127,9 @@
             </div>
           </div>
         </fieldset>
-        <div class="tb-hint" *ngIf="isReadOnly | async" translate>version-control.auto-commit-settings-read-only-hint</div>
+        @if (isReadOnly | async) {
+          <div class="tb-hint" translate>version-control.auto-commit-settings-read-only-hint</div>
+        }
         <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch xs:justify-end">
           <button mat-raised-button color="warn" type="button" [class.!hidden]="!settings"
                   [disabled]="(isLoading$ | async) || (isReadOnly | async)" (click)="delete(formDirective)">
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
index 941a2e42c1..4ae0715981 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
@@ -18,54 +18,62 @@
 <section class="entity-version-diff-view flex flex-col" [class.content-ready]="contentReady"
          tb-fullscreen [fullscreen]="isFullscreen" (fullscreenChanged)="onFullscreenChanged($event)"
          [style]="isFullscreen || !contentReady ? {} : {height: preferredDiffHeight}">
-  <mat-toolbar *ngIf="contentReady">
-    <h2>{{ 'version-control.diff-entity-with-version' | translate: {versionName} }}</h2>
-    <span class="flex-1"></span>
-    <button mat-icon-button
-            matTooltip="{{'version-control.previous-difference' | translate}}"
-            matTooltipPosition="below"
-            [disabled]="!hasPrevious"
-            (click)="prevDifference($event)">
-      <mat-icon>arrow_upward</mat-icon>
-    </button>
-    <button mat-icon-button
-            matTooltip="{{'version-control.next-difference' | translate}}"
-            matTooltipPosition="below"
-            [disabled]="!hasNext"
-            (click)="nextDifference($event)">
-      <mat-icon>arrow_downward</mat-icon>
-    </button>
-    <mat-divider vertical></mat-divider>
-    <span class="diff-count">{{ 'version-control.differences' | translate : {count: diffCount} }}</span>
-    <mat-divider vertical></mat-divider>
-    <button mat-stroked-button color="primary"
-            #restoreVersionButton
-            style="min-width: 150px"
-            [disabled]="(isLoading$ | async)"
-            (click)="toggleRestoreEntityVersion($event, restoreVersionButton)">
-      <mat-icon>restore</mat-icon>
-      {{'version-control.restore-version' | translate }}
-    </button>
-    <button mat-icon-button
-            matTooltip="{{(isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
-            matTooltipPosition="below"
-            (click)="isFullscreen = !isFullscreen">
-      <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
-    </button>
-  </mat-toolbar>
-  <div class="flex flex-row" *ngIf="contentReady">
-    <div class="version-title flex-1">{{ 'version-control.current' | translate }}</div>
-    <div style="width: 58px;"></div>
-    <div class="version-title flex-1">{{ versionIdContent() }}</div>
-  </div>
-  <mat-spinner *ngIf="!contentReady" mode="indeterminate" diameter="80"></mat-spinner>
+  @if (contentReady) {
+    <mat-toolbar>
+      <h2>{{ 'version-control.diff-entity-with-version' | translate: {versionName} }}</h2>
+      <span class="flex-1"></span>
+      <button mat-icon-button
+              matTooltip="{{'version-control.previous-difference' | translate}}"
+              matTooltipPosition="below"
+              [disabled]="!hasPrevious"
+              (click)="prevDifference($event)">
+        <mat-icon>arrow_upward</mat-icon>
+      </button>
+      <button mat-icon-button
+              matTooltip="{{'version-control.next-difference' | translate}}"
+              matTooltipPosition="below"
+              [disabled]="!hasNext"
+              (click)="nextDifference($event)">
+        <mat-icon>arrow_downward</mat-icon>
+      </button>
+      <mat-divider vertical></mat-divider>
+      <span class="diff-count">{{ 'version-control.differences' | translate : {count: diffCount} }}</span>
+      <mat-divider vertical></mat-divider>
+      <button mat-stroked-button color="primary"
+              #restoreVersionButton
+              style="min-width: 150px"
+              [disabled]="(isLoading$ | async)"
+              (click)="toggleRestoreEntityVersion($event, restoreVersionButton)">
+        <mat-icon>restore</mat-icon>
+        {{'version-control.restore-version' | translate }}
+      </button>
+      <button mat-icon-button
+              matTooltip="{{(isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
+              matTooltipPosition="below"
+              (click)="isFullscreen = !isFullscreen">
+        <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+      </button>
+    </mat-toolbar>
+  }
+  @if (contentReady) {
+    <div class="flex flex-row">
+      <div class="version-title flex-1">{{ 'version-control.current' | translate }}</div>
+      <div style="width: 58px;"></div>
+      <div class="version-title flex-1">{{ versionIdContent() }}</div>
+    </div>
+  }
+  @if (!contentReady) {
+    <mat-spinner mode="indeterminate" diameter="80"></mat-spinner>
+  }
   <div [class.!hidden]="!contentReady" class="diff-viewer flex-1" #diffViewer></div>
-  <div class="bottom-panel flex items-center justify-end gap-2" *ngIf="contentReady">
-    <button mat-button color="primary"
-            type="button"
-            [disabled]="(isLoading$ | async)"
-            (click)="close()" cdkFocusInitial>
-      {{ 'action.close' | translate }}
-    </button>
-  </div>
+  @if (contentReady) {
+    <div class="bottom-panel flex items-center justify-end gap-2">
+      <button mat-button color="primary"
+              type="button"
+              [disabled]="(isLoading$ | async)"
+              (click)="close()" cdkFocusInitial>
+        {{ 'action.close' | translate }}
+      </button>
+    </div>
+  }
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
index 829c1414db..32a39a713e 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
@@ -34,13 +34,15 @@
         <span class="flex-1"></span>
         <div class="flex flex-row items-center justify-center xs:flex-col xs:items-end xs:justify-center"
              [class.xs:flex-col-reverse]="!singleEntityMode">
-          <button *ngIf="singleEntityMode" mat-stroked-button color="primary"
-                  #createVersionButton
-                  [disabled]="(isLoading$ | async) || (isReadOnly | async)"
-                  (click)="toggleCreateVersion($event, createVersionButton)">
-            <mat-icon>update</mat-icon>
-            {{'version-control.create-version' | translate }}
-          </button>
+          @if (singleEntityMode) {
+            <button mat-stroked-button color="primary"
+                    #createVersionButton
+                    [disabled]="(isLoading$ | async) || (isReadOnly | async)"
+                    (click)="toggleCreateVersion($event, createVersionButton)">
+              <mat-icon>update</mat-icon>
+              {{'version-control.create-version' | translate }}
+            </button>
+          }
           <div class="flex flex-row">
             <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
                     matTooltip="{{ 'action.refresh' | translate }}"
@@ -55,14 +57,16 @@
               <mat-icon>search</mat-icon>
             </button>
           </div>
-          <button *ngIf="!singleEntityMode" mat-flat-button color="primary"
-                  class="gt-xs:ml-3"
-                  #complexCreateVersionButton
-                  [disabled]="(isLoading$ | async) || (isReadOnly | async)"
-                  (click)="toggleComplexCreateVersion($event, complexCreateVersionButton)">
-            <mat-icon>update</mat-icon>
-            {{'version-control.create-entities-version' | translate }}
-          </button>
+          @if (!singleEntityMode) {
+            <button mat-flat-button color="primary"
+                    class="gt-xs:ml-3"
+                    #complexCreateVersionButton
+                    [disabled]="(isLoading$ | async) || (isReadOnly | async)"
+                    (click)="toggleComplexCreateVersion($event, complexCreateVersionButton)">
+              <mat-icon>update</mat-icon>
+              {{'version-control.create-entities-version' | translate }}
+            </button>
+          }
         </div>
       </div>
     </mat-toolbar>
@@ -129,31 +133,37 @@
         </ng-container>
         <ng-container matColumnDef="actions" stickyEnd>
           <mat-header-cell *matHeaderCellDef [class.min-w-20]="singleEntityMode" [class.max-w-20]="singleEntityMode" [class.w-20]="singleEntityMode"
-                                             [class.min-w-10]="!singleEntityMode" [class.max-w-10]="!singleEntityMode" [class.w-10]="!singleEntityMode">
+                           [class.min-w-10]="!singleEntityMode" [class.max-w-10]="!singleEntityMode" [class.w-10]="!singleEntityMode">
           </mat-header-cell>
           <mat-cell *matCellDef="let entityVersion">
             <div class="flex flex-1 flex-row items-stretch justify-end">
-              <button *ngIf="singleEntityMode" mat-icon-button [disabled]="isLoading$ | async"
-                      matTooltip="{{ 'version-control.compare-with-current' | translate }}"
-                      matTooltipPosition="above"
-                      #diffVersionButton
-                      (click)="toggleShowVersionDiff($event, diffVersionButton, entityVersion)">
-                <mat-icon>difference</mat-icon>
-              </button>
-              <button *ngIf="singleEntityMode" mat-icon-button [disabled]="isLoading$ | async"
-                      matTooltip="{{ 'version-control.restore-version' | translate }}"
-                      matTooltipPosition="above"
-                      #restoreVersionButton
-                      (click)="toggleRestoreEntityVersion($event, restoreVersionButton, entityVersion)">
-                <mat-icon>restore</mat-icon>
-              </button>
-              <button *ngIf="!singleEntityMode" mat-icon-button [disabled]="isLoading$ | async"
-                      matTooltip="{{ 'version-control.restore-version' | translate }}"
-                      matTooltipPosition="above"
-                      #restoreEntitiesVersionButton
-                      (click)="toggleRestoreEntitiesVersion($event, restoreEntitiesVersionButton, entityVersion)">
-                <mat-icon>restore</mat-icon>
-              </button>
+              @if (singleEntityMode) {
+                <button mat-icon-button [disabled]="isLoading$ | async"
+                        matTooltip="{{ 'version-control.compare-with-current' | translate }}"
+                        matTooltipPosition="above"
+                        #diffVersionButton
+                        (click)="toggleShowVersionDiff($event, diffVersionButton, entityVersion)">
+                  <mat-icon>difference</mat-icon>
+                </button>
+              }
+              @if (singleEntityMode) {
+                <button mat-icon-button [disabled]="isLoading$ | async"
+                        matTooltip="{{ 'version-control.restore-version' | translate }}"
+                        matTooltipPosition="above"
+                        #restoreVersionButton
+                        (click)="toggleRestoreEntityVersion($event, restoreVersionButton, entityVersion)">
+                  <mat-icon>restore</mat-icon>
+                </button>
+              }
+              @if (!singleEntityMode) {
+                <button mat-icon-button [disabled]="isLoading$ | async"
+                        matTooltip="{{ 'version-control.restore-version' | translate }}"
+                        matTooltipPosition="above"
+                        #restoreEntitiesVersionButton
+                        (click)="toggleRestoreEntitiesVersion($event, restoreEntitiesVersionButton, entityVersion)">
+                  <mat-icon>restore</mat-icon>
+                </button>
+              }
             </div>
           </mat-cell>
         </ng-container>
@@ -162,12 +172,12 @@
       </table>
       <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
             class="no-data-found flex items-center justify-center" translate>{{
-        singleEntityMode
-          ? 'version-control.no-entity-versions-text'
-          : 'version-control.no-versions-text'
-        }}</span>
+            singleEntityMode
+            ? 'version-control.no-entity-versions-text'
+            : 'version-control.no-versions-text'
+      }}</span>
       <span [class.!hidden]="!dataSource.dataLoading"
-            class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
+      class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"
@@ -175,6 +185,6 @@
                    [pageSize]="pageLink.pageSize"
                    [pageSizeOptions]="[10, 20, 30]"
                    [hidePageSize]="hidePageSize"
-                   showFirstLastButtons></mat-paginator>
+    showFirstLastButtons></mat-paginator>
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/vc/version-control.component.html b/ui-ngx/src/app/modules/home/components/vc/version-control.component.html
index e02052c2b1..4a71456920 100644
--- a/ui-ngx/src/app/modules/home/components/vc/version-control.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/version-control.component.html
@@ -15,13 +15,14 @@
     limitations under the License.
 
 -->
-<tb-repository-settings #repositorySettingsComponent
-                        [detailsMode]="detailsMode"
-                        hideLoadingBar
-                        [popoverComponent]="popoverComponent"
-                        *ngIf="!(hasRepository$ | async); else versionsTable">
-</tb-repository-settings>
-<ng-template #versionsTable>
+@if (!(hasRepository$ | async)) {
+  <tb-repository-settings #repositorySettingsComponent
+                          [detailsMode]="detailsMode"
+                          hideLoadingBar
+                          [popoverComponent]="popoverComponent"
+                          >
+  </tb-repository-settings>
+} @else {
   <tb-entity-versions-table [singleEntityMode]="singleEntityMode"
                             [popoverComponent]="popoverComponent"
                             [onBeforeCreateVersion]="onBeforeCreateVersion"
@@ -29,5 +30,5 @@
                             [entityId]="entityId"
                             [entityName]="entityName"
                             [externalEntityId]="externalEntityId"
-                            (versionRestored)="versionRestored.emit()"></tb-entity-versions-table>
-</ng-template>
+  (versionRestored)="versionRestored.emit()"></tb-entity-versions-table>
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
index 7df9a4893f..8b0ca22543 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content style="position: relative; height: 500px;">
     <tb-manage-widget-actions
       [callbacks]="data.callbacks"
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
index 4ff90e43aa..1fc69be0a6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
@@ -25,9 +25,13 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
+  @if ((isLoading$ | async) === false) {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
       <div class="tb-form-panel no-padding no-border">
@@ -35,57 +39,66 @@
           <div class="fixed-title-width">{{'widget-config.action-source' | translate}}*</div>
           <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select required formControlName="actionSourceId" placeholder="{{ 'widget-config.select-action-source' | translate }}">
-              <mat-option *ngFor="let actionSourceItem of data.actionsData.actionSources | keyvalue" [value]="actionSourceItem.key">
-                {{ actionSourceName(actionSourceItem.value) }}
-              </mat-option>
+              @for (actionSourceItem of data.actionsData.actionSources | keyvalue; track actionSourceItem) {
+                <mat-option [value]="actionSourceItem.key">
+                  {{ actionSourceName(actionSourceItem.value) }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="'widget-config.action-source-required' | translate"
-                      *ngIf="widgetActionFormGroup.get('actionSourceId').hasError('required')
-                       && widgetActionFormGroup.get('actionSourceId').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
-          </mat-form-field>
-        </div>
-        <div class="tb-form-row" *ngIf="widgetActionFormGroup.get('actionSourceId').value === 'cellClick'">
-          <div class="fixed-title-width">{{'widget-config.column-index' | translate}}*</div>
-          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-            <mat-select #columnIndexSelect formControlName="columnIndex" placeholder="{{ columnIndexPlaceholderText }}">
-              <mat-option *ngFor="let column of configuredColumns; let $index = index"
-                          [value]="$index"
-                          [disabled]="usedCellClickColumns.includes($index)">
-                {{ getCellClickColumnInfo($index, column) | customTranslate }}
-              </mat-option>
-            </mat-select>
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="'widget-config.column-index-required' | translate"
-                      *ngIf="widgetActionFormGroup.get('columnIndex').hasError('required') &&
-                             widgetActionFormGroup.get('columnIndex').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
+            @if (widgetActionFormGroup.get('actionSourceId').hasError('required')
+              && widgetActionFormGroup.get('actionSourceId').touched) {
+              <mat-icon matSuffix
+                        matTooltipPosition="above"
+                        matTooltipClass="tb-error-tooltip"
+                        [matTooltip]="'widget-config.action-source-required' | translate"
+                        class="tb-error">
+                warning
+              </mat-icon>
+            }
           </mat-form-field>
         </div>
+        @if (widgetActionFormGroup.get('actionSourceId').value === 'cellClick') {
+          <div class="tb-form-row">
+            <div class="fixed-title-width">{{'widget-config.column-index' | translate}}*</div>
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+              <mat-select #columnIndexSelect formControlName="columnIndex" placeholder="{{ columnIndexPlaceholderText }}">
+                @for (column of configuredColumns; track column) {
+                  <mat-option
+                    [value]="$index"
+                    [disabled]="usedCellClickColumns.includes($index)">
+                    {{ getCellClickColumnInfo($index, column) | customTranslate }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (widgetActionFormGroup.get('columnIndex').hasError('required') &&
+                widgetActionFormGroup.get('columnIndex').touched) {
+                <mat-icon matSuffix
+                          matTooltipPosition="above"
+                          matTooltipClass="tb-error-tooltip"
+                          [matTooltip]="'widget-config.column-index-required' | translate"
+                          class="tb-error">
+                  warning
+                </mat-icon>
+              }
+            </mat-form-field>
+          </div>
+        }
         <div class="tb-form-row">
           <div class="fixed-title-width">{{'widget-config.action-name' | translate}}*</div>
           <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <input required matInput formControlName="name" placeholder="{{ 'widget-config.set' | translate }}">
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
+            @if (widgetActionFormGroup.get('name').invalid
+              && (widgetActionFormGroup.get('name').touched || widgetActionFormGroup.get('name').hasError('actionNameNotUnique'))) {
+              <mat-icon matSuffix
+                        matTooltipPosition="above"
+                        matTooltipClass="tb-error-tooltip"
                       [matTooltip]="(widgetActionFormGroup.get('name').hasError('required')
                                      ? 'widget-config.action-name-required'
                                      : 'widget-config.action-name-not-unique') | translate"
-                      *ngIf="widgetActionFormGroup.get('name').invalid
-                       && (widgetActionFormGroup.get('name').touched || widgetActionFormGroup.get('name').hasError('actionNameNotUnique'))"
-                      class="tb-error">
-              warning
-            </mat-icon>
+                class="tb-error">
+                warning
+              </mat-icon>
+            }
           </mat-form-field>
         </div>
         @if (widgetActionFormGroup.get('actionSourceId').value === 'headerButton') {
@@ -95,9 +108,11 @@
               <div class="fixed-title-width" translate>widget-config.header-button.button-type</div>
               <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
                 <mat-select required formControlName="buttonType" placeholder="{{ 'widget-config.set' | translate }}">
-                  <mat-option *ngFor="let button of widgetHeaderActionButtonTypes" [value]="button">
-                    {{ widgetHeaderActionButtonTypeTranslationMap.get(widgetHeaderActionButtonType[button]) | translate }}
-                  </mat-option>
+                  @for (button of widgetHeaderActionButtonTypes; track button) {
+                    <mat-option [value]="button">
+                      {{ widgetHeaderActionButtonTypeTranslationMap.get(widgetHeaderActionButtonType[button]) | translate }}
+                    </mat-option>
+                  }
                 </mat-select>
               </mat-form-field>
             </div>
@@ -156,35 +171,37 @@
           </div>
         }
 
-        <div class="tb-form-panel stroked tb-slide-toggle" *ngIf="displayShowWidgetActionForm()">
-          <mat-expansion-panel class="tb-settings" [expanded]="widgetActionFormGroup.get('useShowWidgetActionFunction').value"
-                               [disabled]="!widgetActionFormGroup.get('useShowWidgetActionFunction').value">
-            <mat-expansion-panel-header class="flex flex-row flex-wrap">
-              <mat-panel-title>
-                <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useShowWidgetActionFunction" (click)="$event.stopPropagation()">
-                  {{ 'widget-config.show-hide-action-using-function' | translate }}
-                </mat-slide-toggle>
-              </mat-panel-title>
-            </mat-expansion-panel-header>
-            <ng-template matExpansionPanelContent>
-              <tb-js-func formControlName="showWidgetActionFunction"
-                          functionTitle="{{ 'widget-config.show-action-function' | translate }}"
-                          withModules
-                          [helpId]="getWidgetActionFunctionHelpId()"
-                          [functionArgs]="['widgetContext', 'data']"
-                          [globalVariables]="functionScopeVariables"
-                          [validationArgs]="[]"
-                          [resultType]="'boolean'"
-                          [editorCompleter]="customActionEditorCompleter"
-              ></tb-js-func>
-            </ng-template>
-          </mat-expansion-panel>
-        </div>
+        @if (displayShowWidgetActionForm()) {
+          <div class="tb-form-panel stroked tb-slide-toggle">
+            <mat-expansion-panel class="tb-settings" [expanded]="widgetActionFormGroup.get('useShowWidgetActionFunction').value"
+                                 [disabled]="!widgetActionFormGroup.get('useShowWidgetActionFunction').value">
+              <mat-expansion-panel-header class="flex flex-row flex-wrap">
+                <mat-panel-title>
+                  <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useShowWidgetActionFunction" (click)="$event.stopPropagation()">
+                    {{ 'widget-config.show-hide-action-using-function' | translate }}
+                  </mat-slide-toggle>
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <ng-template matExpansionPanelContent>
+                <tb-js-func formControlName="showWidgetActionFunction"
+                            functionTitle="{{ 'widget-config.show-action-function' | translate }}"
+                            withModules
+                            [helpId]="getWidgetActionFunctionHelpId()"
+                            [functionArgs]="['widgetContext', 'data']"
+                            [globalVariables]="functionScopeVariables"
+                            [validationArgs]="[]"
+                            [resultType]="'boolean'"
+                            [editorCompleter]="customActionEditorCompleter"
+                ></tb-js-func>
+              </ng-template>
+            </mat-expansion-panel>
+          </div>
+        }
         <tb-widget-action
-            formControlName="widgetAction"
-            [callbacks]="data.callbacks"
-            [widgetType]="data.widgetType"
-            [additionalWidgetActionTypes]="data.additionalWidgetActionTypes">
+          formControlName="widgetAction"
+          [callbacks]="data.callbacks"
+          [widgetType]="data.widgetType"
+          [additionalWidgetActionTypes]="data.additionalWidgetActionTypes">
         </tb-widget-action>
       </div>
     </fieldset>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html
index 5bab97a12d..454082ff54 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html
@@ -16,14 +16,15 @@
 
 -->
 <ng-container [formGroup]="actionButtonWidgetConfigForm">
-  <tb-datasources
-    *ngIf="!widgetEditMode"
-    [configMode]="basicMode"
-    hideDatasourceLabel
-    hideDataKeys
-    forceSingleDatasource
-    formControlName="datasources">
-  </tb-datasources>
+  @if (!widgetEditMode) {
+    <tb-datasources
+      [configMode]="basicMode"
+      hideDatasourceLabel
+      hideDataKeys
+      forceSingleDatasource
+      formControlName="datasources">
+    </tb-datasources>
+  }
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.action-button.behavior</div>
     <div class="tb-form-row">
@@ -44,7 +45,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="activatedState"></tb-get-value-action-settings>
+      formControlName="activatedState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
@@ -55,7 +56,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="disabledState"></tb-get-value-action-settings>
+      formControlName="disabledState"></tb-get-value-action-settings>
     </div>
   </div>
   <div class="tb-form-panel">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
index 51ebab7a92..71edff2c83 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
@@ -30,7 +30,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="initialState"></tb-get-value-action-settings>
+      formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}" translate>widgets.power-button.power-on</div>
@@ -39,7 +39,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="onUpdateState"></tb-set-value-action-settings>
+      formControlName="onUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}" translate>widgets.power-button.power-off</div>
@@ -48,7 +48,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="offUpdateState"></tb-set-value-action-settings>
+      formControlName="offUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
@@ -59,7 +59,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="disabledState"></tb-get-value-action-settings>
+      formControlName="disabledState"></tb-get-value-action-settings>
     </div>
   </div>
   <div class="tb-form-panel">
@@ -70,12 +70,14 @@
                                       'lt-sm': 1,
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.power-button.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of powerButtonLayouts"
-                                    [value]="layout"
-                                    [image]="powerButtonLayoutImageMap.get(layout)">
-        {{ powerButtonLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.power-button.layout' | translate }}" formControlName="layout">
+      @for (layout of powerButtonLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="powerButtonLayoutImageMap.get(layout)">
+          {{ powerButtonLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html
index f748c13f81..fd4790749c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html
@@ -16,14 +16,15 @@
 
 -->
 <ng-container [formGroup]="segmentedButtonWidgetConfigForm">
-  <tb-datasources
-    *ngIf="!widgetEditMode"
-    [configMode]="basicMode"
-    hideDatasourceLabel
-    hideDataKeys
-    forceSingleDatasource
-    formControlName="datasources">
-  </tb-datasources>
+  @if (!widgetEditMode) {
+    <tb-datasources
+      [configMode]="basicMode"
+      hideDatasourceLabel
+      hideDataKeys
+      forceSingleDatasource
+      formControlName="datasources">
+    </tb-datasources>
+  }
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.action-button.behavior</div>
     <div class="tb-form-row">
@@ -37,7 +38,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="initialState"></tb-get-value-action-settings>
+      formControlName="initialState"></tb-get-value-action-settings>
     </div>
 
     <div class="tb-form-row">
@@ -68,7 +69,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="disabledState"></tb-get-value-action-settings>
+      formControlName="disabledState"></tb-get-value-action-settings>
     </div>
   </div>
   <div class="tb-form-panel" formGroupName="appearance">
@@ -80,12 +81,14 @@
                                     breakpoints: {
                                       'lt-sm': 1
                                     }}"
-                           label="{{ 'widgets.segmented-button.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of segmentedButtonLayouts"
-                                    [value]="layout"
-                                    [image]="segmentedButtonLayoutImageMap.get(layout)">
-        {{ segmentedButtonLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.segmented-button.layout' | translate }}" formControlName="layout">
+      @for (layout of segmentedButtonLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="segmentedButtonLayoutImageMap.get(layout)">
+          {{ segmentedButtonLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="autoScale">
@@ -224,16 +227,18 @@
             </mat-panel-title>
           </mat-expansion-panel-header>
           <ng-template matExpansionPanelContent>
-            <div class="tb-form-row space-between" *ngFor="let state of widgetButtonToggleStates">
-              <div>{{ widgetButtonToggleStatesTranslationsMap.get(state) | translate }}</div>
-              <tb-widget-button-toggle-custom-style
-                [value]="true"
-                [state]="state"
-                [appearance]="segmentedButtonWidgetConfigForm.get('appearance').value"
-                [autoScale]="true"
-                [formControlName]="state">
-              </tb-widget-button-toggle-custom-style>
-            </div>
+            @for (state of widgetButtonToggleStates; track state) {
+              <div class="tb-form-row space-between">
+                <div>{{ widgetButtonToggleStatesTranslationsMap.get(state) | translate }}</div>
+                <tb-widget-button-toggle-custom-style
+                  [value]="true"
+                  [state]="state"
+                  [appearance]="segmentedButtonWidgetConfigForm.get('appearance').value"
+                  [autoScale]="true"
+                  [formControlName]="state">
+                </tb-widget-button-toggle-custom-style>
+              </div>
+            }
           </ng-template>
         </mat-expansion-panel>
       </div>
@@ -265,16 +270,18 @@
             </mat-panel-title>
           </mat-expansion-panel-header>
           <ng-template matExpansionPanelContent>
-            <div class="tb-form-row space-between" *ngFor="let state of widgetButtonToggleStates">
-              <div>{{ widgetButtonToggleStatesTranslationsMap.get(state) | translate }}</div>
-              <tb-widget-button-toggle-custom-style
-                [value]="false"
-                [state]="state"
-                [appearance]="segmentedButtonWidgetConfigForm.get('appearance').value"
-                [autoScale]="true"
-                [formControlName]="state">
-              </tb-widget-button-toggle-custom-style>
-            </div>
+            @for (state of widgetButtonToggleStates; track state) {
+              <div class="tb-form-row space-between">
+                <div>{{ widgetButtonToggleStatesTranslationsMap.get(state) | translate }}</div>
+                <tb-widget-button-toggle-custom-style
+                  [value]="false"
+                  [state]="state"
+                  [appearance]="segmentedButtonWidgetConfigForm.get('appearance').value"
+                  [autoScale]="true"
+                  [formControlName]="state">
+                </tb-widget-button-toggle-custom-style>
+              </div>
+            }
           </ng-template>
         </mat-expansion-panel>
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
index 8b29fe82aa..25e9bd78da 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
@@ -28,17 +28,23 @@
       <div class="tb-form-table-header-cell tb-arrow-header" translate>widgets.aggregated-value-card.arrow</div>
       <div class="tb-form-table-header-cell tb-actions-header"></div>
     </div>
-    <div *ngIf="keysFormArray().controls.length; else noKeys" class="tb-form-table-body">
-      <div *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
-        <tb-aggregated-data-key-row class="flex-1"
-                         [formControl]="keyControl"
-                         [index]="$index"
-                         [datasourceType]="datasourceType"
-                         [keyName]="keyName"
-                         (keyRemoved)="removeKey($index)">
-        </tb-aggregated-data-key-row>
+    @if (keysFormArray().controls.length) {
+      <div class="tb-form-table-body">
+        @for (keyControl of keysFormArray().controls; track trackByKey($index, keyControl)) {
+          <div>
+            <tb-aggregated-data-key-row class="flex-1"
+                                        [formControl]="keyControl"
+                                        [index]="$index"
+                                        [datasourceType]="datasourceType"
+                                        [keyName]="keyName"
+                                        (keyRemoved)="removeKey($index)">
+            </tb-aggregated-data-key-row>
+          </div>
+        }
       </div>
-    </div>
+    } @else {
+      <span class="tb-prompt flex items-center justify-center">{{ 'widgets.aggregated-value-card.no-values' | translate }}</span>
+    }
   </div>
   <div>
     <button type="button" mat-stroked-button color="primary" (click)="addKey()">
@@ -46,6 +52,3 @@
     </button>
   </div>
 </div>
-<ng-template #noKeys>
-  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.aggregated-value-card.no-values' | translate }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
index 90cb150339..e4daba1f6d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
@@ -16,10 +16,12 @@
 
 -->
 <ng-container [formGroup]="labelValueCardWidgetConfigForm">
-  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
-                              [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-                              formControlName="timewindowConfig">
-  </tb-timewindow-config-panel>
+  @if (displayTimewindowConfig) {
+    <tb-timewindow-config-panel
+      [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+      formControlName="timewindowConfig">
+    </tb-timewindow-config-panel>
+  }
   <tb-datasources
     [configMode]="basicMode"
     hideDatasourceLabel
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html
index babdecc8ce..23bd465308 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html
@@ -15,101 +15,107 @@
     limitations under the License.
 
 -->
-<ng-container *ngIf="mobileAppQrCodeWidgetConfigForm" [formGroup]="mobileAppQrCodeWidgetConfigForm">
-  <div class="tb-form-panel no-border no-padding">
-    <div class="tb-form-row no-border no-padding-bottom">
-      <mat-slide-toggle class="mat-slide" formControlName="useSystemSettings" (click)="$event.stopPropagation()">
-        {{ 'admin.mobile-app.use-system-settings' | translate }}
-      </mat-slide-toggle>
-    </div>
-  </div>
-  <div class="tb-form-panel no-border no-padding" *ngIf="!mobileAppQrCodeWidgetConfigForm.get('useSystemSettings').value">
-    <div class="tb-form-panel">
-      <div class="tb-form-panel-title" translate>widget-config.appearance</div>
-      <div class="tb-form-hint tb-primary-fill">{{ 'widgets.mobile-app-qr-code.configuration-hint' | translate }}</div>
-      <div class="tb-form-row space-between no-padding-bottom column-xs">
-        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="badgeEnabled"
-                          (click)="$event.stopPropagation()">
-          {{ 'admin.mobile-app.badges' | translate }}
-        </mat-slide-toggle>
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <mat-select formControlName="badgePosition" appearance="outline" subscriptSizing="dynamic">
-            <mat-option *ngFor="let badgePosition of badgePositionTranslationsMap | keyvalue" [value]="badgePosition.key">
-              {{ badgePosition.value | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div class="tb-form-row space-between no-padding-bottom column-xs">
-        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="qrCodeLabelEnabled" (click)="$event.stopPropagation()">
-          {{ 'admin.mobile-app.label' | translate }}
+@if (mobileAppQrCodeWidgetConfigForm) {
+  <ng-container [formGroup]="mobileAppQrCodeWidgetConfigForm">
+    <div class="tb-form-panel no-border no-padding">
+      <div class="tb-form-row no-border no-padding-bottom">
+        <mat-slide-toggle class="mat-slide" formControlName="useSystemSettings" (click)="$event.stopPropagation()">
+          {{ 'admin.mobile-app.use-system-settings' | translate }}
         </mat-slide-toggle>
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="qrCodeLabel" placeholder="{{'admin.mobile-app.set' | translate}}">
-        </mat-form-field>
       </div>
-      <div class="tb-form-row column-xs">
-        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
-          {{ 'widgets.liquid-level-card.title' | translate }}
-        </mat-slide-toggle>
-        <div class="tb-flex row flex-start align-center">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-          <tb-font-settings formControlName="titleFont"
-                            [previewText]="mobileAppQrCodeWidgetConfigForm.get('title').value">
-          </tb-font-settings>
-          <tb-color-input asBoxInput colorClearButton formControlName="titleColor">
-          </tb-color-input>
+    </div>
+    @if (!mobileAppQrCodeWidgetConfigForm.get('useSystemSettings').value) {
+      <div class="tb-form-panel no-border no-padding">
+        <div class="tb-form-panel">
+          <div class="tb-form-panel-title" translate>widget-config.appearance</div>
+          <div class="tb-form-hint tb-primary-fill">{{ 'widgets.mobile-app-qr-code.configuration-hint' | translate }}</div>
+          <div class="tb-form-row space-between no-padding-bottom column-xs">
+            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="badgeEnabled"
+                              (click)="$event.stopPropagation()">
+              {{ 'admin.mobile-app.badges' | translate }}
+            </mat-slide-toggle>
+            <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+              <mat-select formControlName="badgePosition" appearance="outline" subscriptSizing="dynamic">
+                @for (badgePosition of badgePositionTranslationsMap | keyvalue; track badgePosition) {
+                  <mat-option [value]="badgePosition.key">
+                    {{ badgePosition.value | translate }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          </div>
+          <div class="tb-form-row space-between no-padding-bottom column-xs">
+            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="qrCodeLabelEnabled" (click)="$event.stopPropagation()">
+              {{ 'admin.mobile-app.label' | translate }}
+            </mat-slide-toggle>
+            <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+              <input matInput formControlName="qrCodeLabel" placeholder="{{'admin.mobile-app.set' | translate}}">
+            </mat-form-field>
+          </div>
+          <div class="tb-form-row column-xs">
+            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
+              {{ 'widgets.liquid-level-card.title' | translate }}
+            </mat-slide-toggle>
+            <div class="tb-flex row flex-start align-center">
+              <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+                <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+              </mat-form-field>
+              <tb-font-settings formControlName="titleFont"
+                                [previewText]="mobileAppQrCodeWidgetConfigForm.get('title').value">
+              </tb-font-settings>
+              <tb-color-input asBoxInput colorClearButton formControlName="titleColor">
+              </tb-color-input>
+            </div>
+          </div>
+          <div class="tb-form-row column-xs">
+            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitleIcon">
+              {{ 'widgets.liquid-level-card.icon' | translate }}
+            </mat-slide-toggle>
+            <div class="tb-flex row flex-end align-center">
+              <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+                <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
+              </mat-form-field>
+              <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
+              <tb-material-icon-select asBoxInput
+                                       iconClearButton
+                                       [color]="mobileAppQrCodeWidgetConfigForm.get('iconColor').value"
+                                       formControlName="titleIcon">
+              </tb-material-icon-select>
+              <tb-color-input asBoxInput colorClearButton formControlName="iconColor">
+              </tb-color-input>
+            </div>
+          </div>
         </div>
-      </div>
-      <div class="tb-form-row column-xs">
-        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitleIcon">
-          {{ 'widgets.liquid-level-card.icon' | translate }}
-        </mat-slide-toggle>
-        <div class="tb-flex row flex-end align-center">
-          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
-            <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-          <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
-          <tb-material-icon-select asBoxInput
-                                   iconClearButton
-                                   [color]="mobileAppQrCodeWidgetConfigForm.get('iconColor').value"
-                                   formControlName="titleIcon">
-          </tb-material-icon-select>
-          <tb-color-input asBoxInput colorClearButton formControlName="iconColor">
-          </tb-color-input>
+        <div class="tb-form-panel">
+          <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
+          <div class="tb-form-row space-between">
+            <div>{{ 'widgets.background.background' | translate }}</div>
+            <tb-background-settings formControlName="background">
+            </tb-background-settings>
+          </div>
+          <div class="tb-form-row space-between">
+            <div translate>widget-config.show-card-buttons</div>
+            <mat-chip-listbox multiple formControlName="cardButtons">
+              <mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option>
+            </mat-chip-listbox>
+          </div>
+          <div class="tb-form-row space-between">
+            <div>{{ 'widget-config.card-border-radius' | translate }}</div>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+              <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
+            </mat-form-field>
+          </div>
+          <div class="tb-form-row space-between">
+            <div>{{ 'widget-config.card-padding' | translate }}</div>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+              <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+            </mat-form-field>
+          </div>
         </div>
+        <tb-widget-actions-panel
+          formControlName="actions">
+        </tb-widget-actions-panel>
       </div>
-    </div>
-    <div class="tb-form-panel">
-      <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
-      <div class="tb-form-row space-between">
-        <div>{{ 'widgets.background.background' | translate }}</div>
-        <tb-background-settings formControlName="background">
-        </tb-background-settings>
-      </div>
-      <div class="tb-form-row space-between">
-        <div translate>widget-config.show-card-buttons</div>
-        <mat-chip-listbox multiple formControlName="cardButtons">
-          <mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option>
-        </mat-chip-listbox>
-      </div>
-      <div class="tb-form-row space-between">
-        <div>{{ 'widget-config.card-border-radius' | translate }}</div>
-        <mat-form-field appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
-      </div>
-      <div class="tb-form-row space-between">
-        <div>{{ 'widget-config.card-padding' | translate }}</div>
-        <mat-form-field appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
-      </div>
-    </div>
-    <tb-widget-actions-panel
-      formControlName="actions">
-    </tb-widget-actions-panel>
-  </div>
-</ng-container>
+    }
+  </ng-container>
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
index 120ccf6457..756b7443c3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
@@ -16,10 +16,12 @@
 
 -->
 <ng-container [formGroup]="progressBarWidgetConfigForm">
-  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
-                              [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-                              formControlName="timewindowConfig">
-  </tb-timewindow-config-panel>
+  @if (displayTimewindowConfig) {
+    <tb-timewindow-config-panel
+      [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+      formControlName="timewindowConfig">
+    </tb-timewindow-config-panel>
+  }
   <tb-datasources
     [configMode]="basicMode"
     hideDataKeyLabel
@@ -35,12 +37,14 @@
                                     breakpoints: {
                                       'lt-sm': 1
                                     }}"
-                           label="{{ 'widgets.progress-bar.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of progressBarLayouts"
-                                    [value]="layout"
-                                    [image]="progressBarLayoutImageMap.get(layout)">
-        {{ progressBarLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.progress-bar.layout' | translate }}" formControlName="layout">
+      @for (layout of progressBarLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="progressBarLayoutImageMap.get(layout)">
+          {{ progressBarLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="autoScale">
@@ -126,20 +130,22 @@
         </mat-form-field>
       </div>
     </div>
-    <div *ngIf="progressBarWidgetConfigForm.get('layout').value === progressBarLayout.default" class="tb-form-row space-between">
-      <mat-slide-toggle class="mat-slide" formControlName="showTicks">
-        {{ 'widgets.progress-bar.range-ticks' | translate }}
-      </mat-slide-toggle>
-      <div class="flex flex-row items-center justify-start gap-2">
-        <tb-font-settings formControlName="ticksFont"
-                          previewText="100">
-        </tb-font-settings>
-        <tb-color-input asBoxInput
-                        colorClearButton
-                        formControlName="ticksColor">
-        </tb-color-input>
+    @if (progressBarWidgetConfigForm.get('layout').value === progressBarLayout.default) {
+      <div class="tb-form-row space-between">
+        <mat-slide-toggle class="mat-slide" formControlName="showTicks">
+          {{ 'widgets.progress-bar.range-ticks' | translate }}
+        </mat-slide-toggle>
+        <div class="flex flex-row items-center justify-start gap-2">
+          <tb-font-settings formControlName="ticksFont"
+                            previewText="100">
+          </tb-font-settings>
+          <tb-color-input asBoxInput
+                          colorClearButton
+                          formControlName="ticksColor">
+          </tb-color-input>
+        </div>
       </div>
-    </div>
+    }
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.progress-bar.bar</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html
index 1e28c9eb85..9e0f15d1f5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html
@@ -16,10 +16,12 @@
 
 -->
 <ng-container [formGroup]="simpleCardWidgetConfigForm">
-  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
-    [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-    formControlName="timewindowConfig">
-  </tb-timewindow-config-panel>
+  @if (displayTimewindowConfig) {
+    <tb-timewindow-config-panel
+      [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+      formControlName="timewindowConfig">
+    </tb-timewindow-config-panel>
+  }
   <tb-datasources
     [configMode]="basicMode"
     hideDataKeyLabel
@@ -32,15 +34,15 @@
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.simple-card.label</div>
-      <tb-string-pattern-autocomplete class="flex-1" 
+      <tb-string-pattern-autocomplete class="flex-1"
                                       appearance="outline"
-                                      brackets="curly" 
+                                      brackets="curly"
                                       subscriptSizing="dynamic"
                                       predefinedValuesButton="true"
                                       [predefinedValues]="predefinedValues"
                                       placeholderText="{{ 'widget-config.set' | translate }}"
                                       formControlName="label"
-        ></tb-string-pattern-autocomplete>
+      ></tb-string-pattern-autocomplete>
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.simple-card.label-position</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
index 9a4a6196c8..90bbca8421 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
@@ -16,10 +16,12 @@
 
 -->
 <ng-container [formGroup]="valueCardWidgetConfigForm">
-  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
-                              [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-                              formControlName="timewindowConfig">
-  </tb-timewindow-config-panel>
+  @if (displayTimewindowConfig) {
+    <tb-timewindow-config-panel
+      [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+      formControlName="timewindowConfig">
+    </tb-timewindow-config-panel>
+  }
   <tb-datasources
     [configMode]="basicMode"
     hideDatasourceLabel
@@ -36,12 +38,14 @@
                                     breakpoints: {
                                       'lt-md': horizontal ? 1 : 2
                                     }}"
-                           label="{{ 'widgets.value-card.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of valueCardLayouts"
-                            [value]="layout"
-                            [image]="valueCardLayoutImageMap.get(layout)">
-        {{ valueCardLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.value-card.layout' | translate }}" formControlName="layout">
+      @for (layout of valueCardLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="valueCardLayoutImageMap.get(layout)">
+          {{ valueCardLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="autoScale">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
index c7943ec0a7..2ec1b80253 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
@@ -34,12 +34,14 @@
                                     breakpoints: {
                                       'lt-sm': 1
                                     }}"
-                           label="{{ 'widgets.value-chart-card.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of valueChartCardLayouts"
-                                    [value]="layout"
-                                    [image]="valueChartCardLayoutImageMap.get(layout)">
-        {{ valueChartCardLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.value-chart-card.layout' | translate }}" formControlName="layout">
+      @for (layout of valueChartCardLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="valueChartCardLayoutImageMap.get(layout)">
+          {{ valueChartCardLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="autoScale">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
index 1aa4c2be3d..f927340691 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
@@ -99,7 +99,7 @@
       </mat-slide-toggle>
     </div>
     <tb-time-series-chart-grid-settings
-        formControlName="grid">
+      formControlName="grid">
     </tb-time-series-chart-grid-settings>
   </div>
   <div class="tb-form-panel">
@@ -167,41 +167,41 @@
       </mat-form-field>
     </div>
     <tb-chart-fill-settings
-        formControlName="barBackgroundSettings"
-        titleText="widgets.chart.background"
-        fillNoneTitle="widgets.chart.fill-type-solid">
+      formControlName="barBackgroundSettings"
+      titleText="widgets.chart.background"
+      fillNoneTitle="widgets.chart.fill-type-solid">
     </tb-chart-fill-settings>
     <tb-time-series-no-aggregation-bar-width-settings
-        stroked
-        formControlName="noAggregationBarWidthSettings">
+      stroked
+      formControlName="noAggregationBarWidthSettings">
     </tb-time-series-no-aggregation-bar-width-settings>
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.y-axis</div>
     <tb-time-series-chart-axis-settings
-        formControlName="yAxis"
-        [aliasController]="aliasController"
-        [dataKeyCallbacks]="callbacks"
-        [datasource]="datasource"
-        axisType="yAxis"
-        hideUnits
-        hideDecimals>
+      formControlName="yAxis"
+      [aliasController]="aliasController"
+      [dataKeyCallbacks]="callbacks"
+      [datasource]="datasource"
+      axisType="yAxis"
+      hideUnits
+      hideDecimals>
     </tb-time-series-chart-axis-settings>
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.x-axis</div>
     <tb-time-series-chart-axis-settings
-        formControlName="xAxis"
-        axisType="xAxis">
+      formControlName="xAxis"
+      axisType="xAxis">
     </tb-time-series-chart-axis-settings>
   </div>
   <tb-time-series-chart-thresholds-panel
-      formControlName="thresholds"
-      [aliasController]="aliasController"
-      [dataKeyCallbacks]="callbacks"
-      [datasource]="datasource"
-      [widgetConfig]="widgetConfig?.config"
-      hideYAxis>
+    formControlName="thresholds"
+    [aliasController]="aliasController"
+    [dataKeyCallbacks]="callbacks"
+    [datasource]="datasource"
+    [widgetConfig]="widgetConfig?.config"
+    hideYAxis>
   </tb-time-series-chart-thresholds-panel>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetConfigForm.get('showLegend').value" [disabled]="!barChartWidgetConfigForm.get('showLegend').value">
@@ -217,9 +217,11 @@
           <div>{{ 'legend.position' | translate }}</div>
           <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="legendPosition">
-              <mat-option *ngFor="let pos of legendPositions" [value]="pos">
-                {{ legendPositionTranslationMap.get(pos) | translate }}
-              </mat-option>
+              @for (pos of legendPositions; track pos) {
+                <mat-option [value]="pos">
+                  {{ legendPositionTranslationMap.get(pos) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -280,7 +282,7 @@
           </mat-slide-toggle>
           <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
             <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
-                                   formControlName="tooltipDateFormat"></tb-date-format-select>
+            formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [initialPreviewStyle]="{ color: barChartWidgetConfigForm.get('tooltipDateColor').value }"
                               [previewText]="tooltipDatePreviewFn">
@@ -316,7 +318,7 @@
     </mat-expansion-panel>
   </div>
   <tb-chart-animation-settings
-      formControlName="animation">
+    formControlName="animation">
   </tb-chart-animation-settings>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html
index 4515802dfa..7bac268c2b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html
@@ -22,16 +22,19 @@
     <div class="tb-form-table-header-cell tb-label-header" translate>datakey.label</div>
     <div class="tb-form-table-header-cell tb-color-header" translate>datakey.color</div>
   </div>
-  <div *ngIf="keysFormArray().controls.length; else noKeys" class="tb-form-table-body">
-    <div *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
-      <tb-comparison-key-row
-          class="flex-1"
-          [datasourceType]="datasourceType"
-          [formControl]="keyControl">
-      </tb-comparison-key-row>
+  @if (keysFormArray().controls.length) {
+    <div class="tb-form-table-body">
+      @for (keyControl of keysFormArray().controls; track trackByKey($index, keyControl)) {
+        <div>
+          <tb-comparison-key-row
+            class="flex-1"
+            [datasourceType]="datasourceType"
+            [formControl]="keyControl">
+          </tb-comparison-key-row>
+        </div>
+      }
     </div>
-  </div>
+  } @else {
+    <span class="tb-prompt flex items-center justify-center">{{ 'widgets.chart.no-series' | translate }}</span>
+  }
 </div>
-<ng-template #noKeys>
-  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.chart.no-series' | translate }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
index b0f108ba58..f03c43286b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
@@ -16,32 +16,34 @@
 
 -->
 <ng-container [formGroup]="latestChartWidgetConfigForm">
-  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
-                              [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-                              formControlName="timewindowConfig">
-  </tb-timewindow-config-panel>
+  @if (displayTimewindowConfig) {
+    <tb-timewindow-config-panel
+      [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+      formControlName="timewindowConfig">
+    </tb-timewindow-config-panel>
+  }
   <tb-datasources
-      [configMode]="basicMode"
-      hideDatasourceLabel
-      hideDataKeys
-      forceSingleDatasource
-      formControlName="datasources">
+    [configMode]="basicMode"
+    hideDatasourceLabel
+    hideDataKeys
+    forceSingleDatasource
+    formControlName="datasources">
   </tb-datasources>
   <tb-data-keys-panel
-      panelTitle="{{ 'widgets.chart.series' | translate }}"
-      addKeyTitle="{{ 'widgets.chart.add-series' | translate }}"
-      keySettingsTitle="{{ 'widgets.chart.series-settings' | translate }}"
-      removeKeyTitle="{{ 'widgets.chart.remove-series' | translate }}"
-      noKeysText="{{ 'widgets.chart.no-series' | translate }}"
-      requiredKeysText="{{ 'widgets.chart.no-series-error' | translate }}"
-      hideUnits
-      hideDecimals
-      hideDataKeyUnits
-      hideDataKeyDecimals
-      [datasourceType]="datasource?.type"
-      [deviceId]="datasource?.deviceId"
-      [entityAliasId]="datasource?.entityAliasId"
-      formControlName="series">
+    panelTitle="{{ 'widgets.chart.series' | translate }}"
+    addKeyTitle="{{ 'widgets.chart.add-series' | translate }}"
+    keySettingsTitle="{{ 'widgets.chart.series-settings' | translate }}"
+    removeKeyTitle="{{ 'widgets.chart.remove-series' | translate }}"
+    noKeysText="{{ 'widgets.chart.no-series' | translate }}"
+    requiredKeysText="{{ 'widgets.chart.no-series-error' | translate }}"
+    hideUnits
+    hideDecimals
+    hideDataKeyUnits
+    hideDataKeyDecimals
+    [datasourceType]="datasource?.type"
+    [deviceId]="datasource?.deviceId"
+    [entityAliasId]="datasource?.entityAliasId"
+    formControlName="series">
   </tb-data-keys-panel>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
@@ -121,9 +123,11 @@
           <div>{{ 'legend.position' | translate }}</div>
           <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="legendPosition">
-              <mat-option *ngFor="let pos of legendPositions" [value]="pos">
-                {{ legendPositionTranslationMap.get(pos) | translate }}
-              </mat-option>
+              @for (pos of legendPositions; track pos) {
+                <mat-option [value]="pos">
+                  {{ legendPositionTranslationMap.get(pos) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -174,9 +178,11 @@
           <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="tooltipValueType">
-                <mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type">
-                  {{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }}
-                </mat-option>
+                @for (type of latestChartTooltipValueTypes; track type) {
+                  <mat-option [value]="type">
+                    {{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
@@ -210,7 +216,7 @@
     </mat-expansion-panel>
   </div>
   <tb-chart-animation-settings
-      formControlName="animation">
+    formControlName="animation">
   </tb-chart-animation-settings>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
@@ -239,7 +245,7 @@
     </div>
   </div>
   <tb-widget-actions-panel
-      formControlName="actions">
+    formControlName="actions">
   </tb-widget-actions-panel>
 </ng-container>
 
@@ -254,9 +260,11 @@
         <div class="flex flex-1 flex-row items-center justify-start gap-2">
           <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="labelPosition">
-              <mat-option *ngFor="let position of pieChartLabelPositions" [value]="position">
-                {{ pieChartLabelPositionTranslationMap.get(position) | translate }}
-              </mat-option>
+              @for (position of pieChartLabelPositions; track position) {
+                <mat-option [value]="position">
+                  {{ pieChartLabelPositionTranslationMap.get(position) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
           <tb-font-settings formControlName="labelFont"
@@ -310,12 +318,14 @@
                                     breakpoints: {
                                       'lt-sm': 1
                                     }}"
-                             label="{{ 'widgets.doughnut.layout' | translate }}" formControlName="layout">
-        <tb-image-cards-select-option *ngFor="let layout of doughnutLayouts"
-                                      [value]="layout"
-                                      [image]="doughnutLayoutImageMap.get(layout)">
-          {{ doughnutLayoutTranslationMap.get(layout) | translate }}
-        </tb-image-cards-select-option>
+        label="{{ 'widgets.doughnut.layout' | translate }}" formControlName="layout">
+        @for (layout of doughnutLayouts; track layout) {
+          <tb-image-cards-select-option
+            [value]="layout"
+            [image]="doughnutLayoutImageMap.get(layout)">
+            {{ doughnutLayoutTranslationMap.get(layout) | translate }}
+          </tb-image-cards-select-option>
+        }
       </tb-image-cards-select>
       <div class="tb-form-row">
         <mat-slide-toggle class="mat-slide" formControlName="autoScale">
@@ -346,8 +356,8 @@
     <div class="tb-form-panel">
       <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div>
       <tb-chart-bar-settings
-          formControlName="barSettings"
-          [series]="false">
+        formControlName="barSettings"
+        [series]="false">
       </tb-chart-bar-settings>
     </div>
     <div class="tb-form-panel">
@@ -385,9 +395,9 @@
     <div class="tb-form-panel">
       <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div>
       <tb-chart-bar-settings
-          formControlName="barSettings"
-          pieLabelPosition
-          [series]="false">
+        formControlName="barSettings"
+        pieLabelPosition
+        [series]="false">
       </tb-chart-bar-settings>
     </div>
     <div class="tb-form-panel">
@@ -434,9 +444,11 @@
         <div>{{ 'widgets.radar-chart.shape' | translate }}</div>
         <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="shape">
-            <mat-option *ngFor="let shape of radarChartShapes" [value]="shape">
-              {{ radarChartShapeTranslations.get(shape) | translate }}
-            </mat-option>
+            @for (shape of radarChartShapes; track shape) {
+              <mat-option [value]="shape">
+                {{ radarChartShapeTranslations.get(shape) | translate }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
@@ -454,9 +466,11 @@
         <div class="flex flex-row items-center justify-start gap-2">
           <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="lineType">
-              <mat-option *ngFor="let type of chartLineTypes" [value]="type">
-                {{ chartLineTypeTranslations.get(type) | translate }}
-              </mat-option>
+              @for (type of chartLineTypes; track type) {
+                <mat-option [value]="type">
+                  {{ chartLineTypeTranslations.get(type) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
           <mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic">
@@ -472,9 +486,11 @@
         <div class="flex flex-row items-center justify-start gap-2">
           <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="pointShape">
-              <mat-option *ngFor="let shape of chartShapes" [value]="shape">
-                {{ chartShapeTranslations.get(shape) | translate }}
-              </mat-option>
+              @for (shape of chartShapes; track shape) {
+                <mat-option [value]="shape">
+                  {{ chartShapeTranslations.get(shape) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
           <mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic">
@@ -490,9 +506,11 @@
         <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
           <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="labelPosition">
-              <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
-                {{ chartLabelPositionTranslations.get(position) | translate }}
-              </mat-option>
+              @for (position of chartLabelPositions; track position) {
+                <mat-option [value]="position">
+                  {{ chartLabelPositionTranslations.get(position) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
           <tb-font-settings formControlName="labelFont"
@@ -508,7 +526,7 @@
         </div>
       </div>
       <tb-chart-fill-settings
-          formControlName="fillAreaSettings">
+        formControlName="fillAreaSettings">
       </tb-chart-fill-settings>
     </div>
     <div class="tb-form-panel">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
index 7d3195e7f4..9f597fb501 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
@@ -83,7 +83,7 @@
       </mat-slide-toggle>
     </div>
     <tb-time-series-chart-grid-settings
-        formControlName="grid">
+      formControlName="grid">
     </tb-time-series-chart-grid-settings>
   </div>
   <div class="tb-form-panel">
@@ -118,11 +118,11 @@
         {{ 'widgets.range-chart.show-range-thresholds' | translate }}
       </mat-slide-toggle>
       <tb-time-series-chart-threshold-settings
-          boxButton
-          hideYAxis
-          [widgetConfig]="widgetConfig?.config"
-          title="widgets.range-chart.range-thresholds-settings"
-          formControlName="rangeThreshold">
+        boxButton
+        hideYAxis
+        [widgetConfig]="widgetConfig?.config"
+        title="widgets.range-chart.range-thresholds-settings"
+        formControlName="rangeThreshold">
       </tb-time-series-chart-threshold-settings>
     </div>
     <div class="tb-form-row">
@@ -150,9 +150,11 @@
         </mat-slide-toggle>
         <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="stepType">
-            <mat-option *ngFor="let stepType of lineSeriesStepTypes" [value]="stepType">
-              {{ lineSeriesStepTypeTranslations.get(stepType) | translate }}
-            </mat-option>
+            @for (stepType of lineSeriesStepTypes; track stepType) {
+              <mat-option [value]="stepType">
+                {{ lineSeriesStepTypeTranslations.get(stepType) | translate }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
@@ -165,9 +167,11 @@
         <div translate>widgets.time-series-chart.line-type</div>
         <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="lineType">
-            <mat-option *ngFor="let lineType of chartLineTypes" [value]="lineType">
-              {{ chartLineTypeTranslations.get(lineType) | translate }}
-            </mat-option>
+            @for (lineType of chartLineTypes; track lineType) {
+              <mat-option [value]="lineType">
+                {{ chartLineTypeTranslations.get(lineType) | translate }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
@@ -194,9 +198,11 @@
         <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
           <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="pointLabelPosition">
-              <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
-                {{ chartLabelPositionTranslations.get(position) | translate }}
-              </mat-option>
+              @for (position of chartLabelPositions; track position) {
+                <mat-option [value]="position">
+                  {{ chartLabelPositionTranslations.get(position) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
           <tb-font-settings formControlName="pointLabelFont"
@@ -224,9 +230,11 @@
         <div translate>widgets.time-series-chart.series.point.point-shape</div>
         <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="pointShape">
-            <mat-option *ngFor="let shape of chartShapes" [value]="shape">
-              {{ chartShapeTranslations.get(shape) | translate }}
-            </mat-option>
+            @for (shape of chartShapes; track shape) {
+              <mat-option [value]="shape">
+                {{ chartShapeTranslations.get(shape) | translate }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
@@ -241,29 +249,29 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.y-axis</div>
     <tb-time-series-chart-axis-settings
-        formControlName="yAxis"
-        [aliasController]="aliasController"
-        [dataKeyCallbacks]="callbacks"
-        [datasource]="datasource"
-        axisType="yAxis"
-        hideUnits
-        hideDecimals>
+      formControlName="yAxis"
+      [aliasController]="aliasController"
+      [dataKeyCallbacks]="callbacks"
+      [datasource]="datasource"
+      axisType="yAxis"
+      hideUnits
+      hideDecimals>
     </tb-time-series-chart-axis-settings>
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.x-axis</div>
     <tb-time-series-chart-axis-settings
-        formControlName="xAxis"
-        axisType="xAxis">
+      formControlName="xAxis"
+      axisType="xAxis">
     </tb-time-series-chart-axis-settings>
   </div>
   <tb-time-series-chart-thresholds-panel
-      formControlName="thresholds"
-      [aliasController]="aliasController"
-      [dataKeyCallbacks]="callbacks"
-      [datasource]="datasource"
-      [widgetConfig]="widgetConfig?.config"
-      hideYAxis>
+    formControlName="thresholds"
+    [aliasController]="aliasController"
+    [dataKeyCallbacks]="callbacks"
+    [datasource]="datasource"
+    [widgetConfig]="widgetConfig?.config"
+    hideYAxis>
   </tb-time-series-chart-thresholds-panel>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetConfigForm.get('showLegend').value" [disabled]="!rangeChartWidgetConfigForm.get('showLegend').value">
@@ -279,9 +287,11 @@
           <div>{{ 'legend.position' | translate }}</div>
           <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="legendPosition">
-              <mat-option *ngFor="let pos of legendPositions" [value]="pos">
-                {{ legendPositionTranslationMap.get(pos) | translate }}
-              </mat-option>
+              @for (pos of legendPositions; track pos) {
+                <mat-option [value]="pos">
+                  {{ legendPositionTranslationMap.get(pos) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -336,76 +346,76 @@
             </tb-color-input>
           </div>
         </div>        <div class="tb-form-row column-xs">
-          <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
-            {{ 'tooltip.date' | translate }}
-          </mat-slide-toggle>
-          <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
-            <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
-                                   formControlName="tooltipDateFormat"></tb-date-format-select>
-            <tb-font-settings formControlName="tooltipDateFont"
-                              [initialPreviewStyle]="{ color: rangeChartWidgetConfigForm.get('tooltipDateColor').value }"
-                              [previewText]="tooltipDatePreviewFn">
-            </tb-font-settings>
-            <tb-color-input asBoxInput
-                            colorClearButton
-                            formControlName="tooltipDateColor">
-            </tb-color-input>
-          </div>
-        </div>
-        <div class="tb-form-row">
-          <mat-slide-toggle class="mat-slide" formControlName="tooltipDateInterval">
-            <div tb-hint-tooltip-icon="{{'tooltip.show-date-time-interval-hint' | translate}}">
-              {{ 'tooltip.show-date-time-interval' | translate }}
-            </div>
-          </mat-slide-toggle>
-        </div>
-        <div class="tb-form-row space-between">
-          <div>{{ 'tooltip.background-color' | translate }}</div>
+        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
+          {{ 'tooltip.date' | translate }}
+        </mat-slide-toggle>
+        <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+          <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
+          formControlName="tooltipDateFormat"></tb-date-format-select>
+          <tb-font-settings formControlName="tooltipDateFont"
+                            [initialPreviewStyle]="{ color: rangeChartWidgetConfigForm.get('tooltipDateColor').value }"
+                            [previewText]="tooltipDatePreviewFn">
+          </tb-font-settings>
           <tb-color-input asBoxInput
                           colorClearButton
-                          formControlName="tooltipBackgroundColor">
+                          formControlName="tooltipDateColor">
           </tb-color-input>
         </div>
-        <div class="tb-form-row space-between">
-          <div>{{ 'tooltip.background-blur' | translate }}</div>
-          <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-            <input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-            <div matSuffix>px</div>
-          </mat-form-field>
-        </div>
-      </ng-template>
-    </mat-expansion-panel>
+      </div>
+      <div class="tb-form-row">
+        <mat-slide-toggle class="mat-slide" formControlName="tooltipDateInterval">
+          <div tb-hint-tooltip-icon="{{'tooltip.show-date-time-interval-hint' | translate}}">
+            {{ 'tooltip.show-date-time-interval' | translate }}
+          </div>
+        </mat-slide-toggle>
+      </div>
+      <div class="tb-form-row space-between">
+        <div>{{ 'tooltip.background-color' | translate }}</div>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="tooltipBackgroundColor">
+        </tb-color-input>
+      </div>
+      <div class="tb-form-row space-between">
+        <div>{{ 'tooltip.background-blur' | translate }}</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+          <div matSuffix>px</div>
+        </mat-form-field>
+      </div>
+    </ng-template>
+  </mat-expansion-panel>
+</div>
+<tb-chart-animation-settings
+  formControlName="animation">
+</tb-chart-animation-settings>
+<div class="tb-form-panel">
+  <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
+  <div class="tb-form-row space-between">
+    <div>{{ 'widgets.background.background' | translate }}</div>
+    <tb-background-settings formControlName="background">
+    </tb-background-settings>
   </div>
-  <tb-chart-animation-settings
-      formControlName="animation">
-  </tb-chart-animation-settings>
-  <div class="tb-form-panel">
-    <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
-    <div class="tb-form-row space-between">
-      <div>{{ 'widgets.background.background' | translate }}</div>
-      <tb-background-settings formControlName="background">
-      </tb-background-settings>
-    </div>
-    <div class="tb-form-row space-between column-lt-md">
-      <div translate>widget-config.show-card-buttons</div>
-      <mat-chip-listbox multiple formControlName="cardButtons">
-        <mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option>
-      </mat-chip-listbox>
-    </div>
-    <div class="tb-form-row space-between">
-      <div>{{ 'widget-config.card-border-radius' | translate }}</div>
-      <mat-form-field appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-    </div>
-    <div class="tb-form-row space-between">
-      <div>{{ 'widget-config.card-padding' | translate }}</div>
-      <mat-form-field appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-    </div>
+  <div class="tb-form-row space-between column-lt-md">
+    <div translate>widget-config.show-card-buttons</div>
+    <mat-chip-listbox multiple formControlName="cardButtons">
+      <mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option>
+    </mat-chip-listbox>
+  </div>
+  <div class="tb-form-row space-between">
+    <div>{{ 'widget-config.card-border-radius' | translate }}</div>
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
+    </mat-form-field>
+  </div>
+  <div class="tb-form-row space-between">
+    <div>{{ 'widget-config.card-padding' | translate }}</div>
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+    </mat-form-field>
   </div>
-  <tb-widget-actions-panel
-    formControlName="actions">
-  </tb-widget-actions-panel>
+</div>
+<tb-widget-actions-panel
+  formControlName="actions">
+</tb-widget-actions-panel>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
index 85ef776718..0602e55fc9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
@@ -19,11 +19,11 @@
   <tb-timewindow-config-panel formControlName="timewindowConfig">
   </tb-timewindow-config-panel>
   <tb-datasources
-      [configMode]="basicMode"
-      hideDatasourceLabel
-      hideDataKeys
-      forceSingleDatasource
-      formControlName="datasources">
+    [configMode]="basicMode"
+    hideDatasourceLabel
+    hideDataKeys
+    forceSingleDatasource
+    formControlName="datasources">
   </tb-datasources>
   <div class="tb-form-panel">
     <div class="flex flex-row items-center justify-between">
@@ -36,8 +36,8 @@
         <tb-toggle-option value="comparison">{{ 'widgets.time-series-chart.comparison.comparison' | translate }}</tb-toggle-option>
       </tb-toggle-select>
     </div>
-    <tb-data-keys-panel
-        *ngIf="seriesMode === 'series'"
+    @if (seriesMode === 'series') {
+      <tb-data-keys-panel
         hidePanel
         panelTitle="{{ 'widgets.chart.series' | translate }}"
         addKeyTitle="{{ 'widgets.chart.add-series' | translate }}"
@@ -53,55 +53,60 @@
         [deviceId]="datasource?.deviceId"
         [entityAliasId]="datasource?.entityAliasId"
         formControlName="series">
-    </tb-data-keys-panel>
-    <div *ngIf="seriesMode === 'comparison'" class="tb-form-row no-border no-padding column-xs">
-      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="comparisonEnabled">
-        {{ 'widgets.time-series-chart.comparison.comparison' | translate }}
-      </mat-slide-toggle>
-      <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <mat-select formControlName="timeForComparison">
-            <mat-option [value]="'previousInterval'">
-              {{ 'widgets.chart.time-for-comparison-previous-interval' | translate }}
-            </mat-option>
-            <mat-option [value]="'days'">
-              {{ 'widgets.chart.time-for-comparison-days' | translate }}
-            </mat-option>
-            <mat-option [value]="'weeks'">
-              {{ 'widgets.chart.time-for-comparison-weeks' | translate }}
-            </mat-option>
-            <mat-option [value]="'months'">
-              {{ 'widgets.chart.time-for-comparison-months' | translate }}
-            </mat-option>
-            <mat-option [value]="'years'">
-              {{ 'widgets.chart.time-for-comparison-years' | translate }}
-            </mat-option>
-            <mat-option [value]="'customInterval'">
-              {{ 'widgets.chart.time-for-comparison-custom-interval' | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field [class.!hidden]="timeSeriesChartWidgetConfigForm.get('timeForComparison').value !== 'customInterval'"
-                        appearance="outline" class="number flex-lt-md" subscriptSizing="dynamic">
-          <input matInput formControlName="comparisonCustomIntervalValue" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
-        <tb-time-series-chart-axis-settings-button
+      </tb-data-keys-panel>
+    }
+    @if (seriesMode === 'comparison') {
+      <div class="tb-form-row no-border no-padding column-xs">
+        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="comparisonEnabled">
+          {{ 'widgets.time-series-chart.comparison.comparison' | translate }}
+        </mat-slide-toggle>
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
+          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+            <mat-select formControlName="timeForComparison">
+              <mat-option [value]="'previousInterval'">
+                {{ 'widgets.chart.time-for-comparison-previous-interval' | translate }}
+              </mat-option>
+              <mat-option [value]="'days'">
+                {{ 'widgets.chart.time-for-comparison-days' | translate }}
+              </mat-option>
+              <mat-option [value]="'weeks'">
+                {{ 'widgets.chart.time-for-comparison-weeks' | translate }}
+              </mat-option>
+              <mat-option [value]="'months'">
+                {{ 'widgets.chart.time-for-comparison-months' | translate }}
+              </mat-option>
+              <mat-option [value]="'years'">
+                {{ 'widgets.chart.time-for-comparison-years' | translate }}
+              </mat-option>
+              <mat-option [value]="'customInterval'">
+                {{ 'widgets.chart.time-for-comparison-custom-interval' | translate }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field [class.!hidden]="timeSeriesChartWidgetConfigForm.get('timeForComparison').value !== 'customInterval'"
+                          appearance="outline" class="number flex-lt-md" subscriptSizing="dynamic">
+            <input matInput formControlName="comparisonCustomIntervalValue" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+          <tb-time-series-chart-axis-settings-button
             axisType="xAxis"
             panelTitle="{{ 'widgets.time-series-chart.axis.comparison-x-axis-settings' | translate }}"
             formControlName="comparisonXAxis">
-        </tb-time-series-chart-axis-settings-button>
+          </tb-time-series-chart-axis-settings-button>
+        </div>
       </div>
-    </div>
-    <tb-comparison-keys-table
-        *ngIf="seriesMode === 'comparison'"
+    }
+    @if (seriesMode === 'comparison') {
+      <tb-comparison-keys-table
         [datasourceType]="datasource?.type"
         formControlName="series">
-    </tb-comparison-keys-table>
+      </tb-comparison-keys-table>
+    }
   </div>
-  <tb-time-series-chart-states-panel
-      *ngIf="chartType === TimeSeriesChartType.state"
+  @if (chartType === TimeSeriesChartType.state) {
+    <tb-time-series-chart-states-panel
       formControlName="states">
-  </tb-time-series-chart-states-panel>
+    </tb-time-series-chart-states-panel>
+  }
   <tb-time-series-chart-y-axes-panel
     [aliasController]="aliasController"
     [dataKeyCallbacks]="callbacks"
@@ -176,7 +181,7 @@
       </mat-slide-toggle>
     </div>
     <tb-time-series-chart-grid-settings
-        formControlName="grid">
+      formControlName="grid">
     </tb-time-series-chart-grid-settings>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="stack">
@@ -193,10 +198,11 @@
       axisType="xAxis">
     </tb-time-series-chart-axis-settings>
   </div>
-  <tb-time-series-no-aggregation-bar-width-settings
-    *ngIf="chartType === TimeSeriesChartType.default || chartType === TimeSeriesChartType.bar"
-    formControlName="noAggregationBarWidthSettings">
-  </tb-time-series-no-aggregation-bar-width-settings>
+  @if (chartType === TimeSeriesChartType.default || chartType === TimeSeriesChartType.bar) {
+    <tb-time-series-no-aggregation-bar-width-settings
+      formControlName="noAggregationBarWidthSettings">
+    </tb-time-series-no-aggregation-bar-width-settings>
+  }
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetConfigForm.get('showLegend').value"
                          [disabled]="!timeSeriesChartWidgetConfigForm.get('showLegend').value">
@@ -268,9 +274,9 @@
           <div>{{ 'tooltip.trigger' | translate }}</div>
           <mat-chip-listbox class="center-stretch" formControlName="tooltipTrigger">
             <mat-chip-option [selectable]="timeSeriesChartWidgetConfigForm.get('tooltipTrigger').value !== EChartsTooltipTrigger.point"
-                             [value]="EChartsTooltipTrigger.point">{{ 'tooltip.trigger-point' | translate }}</mat-chip-option>
+            [value]="EChartsTooltipTrigger.point">{{ 'tooltip.trigger-point' | translate }}</mat-chip-option>
             <mat-chip-option [selectable]="timeSeriesChartWidgetConfigForm.get('tooltipTrigger').value !== EChartsTooltipTrigger.axis"
-                             [value]="EChartsTooltipTrigger.axis">{{ 'tooltip.trigger-axis' | translate }}</mat-chip-option>
+            [value]="EChartsTooltipTrigger.axis">{{ 'tooltip.trigger-axis' | translate }}</mat-chip-option>
           </mat-chip-listbox>
         </div>
         <div class="tb-form-row space-between">
@@ -305,7 +311,7 @@
           </mat-slide-toggle>
           <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
             <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
-                                   formControlName="tooltipDateFormat"></tb-date-format-select>
+            formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [initialPreviewStyle]="{ color: timeSeriesChartWidgetConfigForm.get('tooltipDateColor').value }"
                               [previewText]="tooltipDatePreviewFn">
@@ -325,7 +331,7 @@
         </div>
         <div class="tb-form-row">
           <mat-slide-toggle class="mat-slide" formControlName="tooltipHideZeroValues">
-              {{ 'tooltip.hide-zero-tooltip-values' | translate }}
+            {{ 'tooltip.hide-zero-tooltip-values' | translate }}
           </mat-slide-toggle>
         </div>
         <div class="tb-form-row">
@@ -380,6 +386,6 @@
     </div>
   </div>
   <tb-widget-actions-panel
-      formControlName="actions">
+    formControlName="actions">
   </tb-widget-actions-panel>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
index d23896289e..b8ea5924a5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
@@ -16,12 +16,14 @@
 
 -->
 <div [formGroup]="keyRowFormGroup" class="tb-form-table-row tb-data-key-row" [class]="{'tb-single-row': singleRow}">
-  <mat-form-field *ngIf="hasAdditionalLatestDataKeys" class="tb-inline-field tb-source-field" appearance="outline" subscriptSizing="dynamic">
-    <mat-select formControlName="latest">
-      <mat-option [value]="false">{{ 'datakey.timeseries' | translate }}</mat-option>
-      <mat-option [value]="true">{{ 'datakey.latest' | translate }}</mat-option>
-    </mat-select>
-  </mat-form-field>
+  @if (hasAdditionalLatestDataKeys) {
+    <mat-form-field class="tb-inline-field tb-source-field" appearance="outline" subscriptSizing="dynamic">
+      <mat-select formControlName="latest">
+        <mat-option [value]="false">{{ 'datakey.timeseries' | translate }}</mat-option>
+        <mat-option [value]="true">{{ 'datakey.latest' | translate }}</mat-option>
+      </mat-select>
+    </mat-form-field>
+  }
   <tb-data-key-input
     [required]="required"
     [widgetType]="widgetType"
@@ -35,67 +37,99 @@
     (keyEdit)="editKey()"
     [formControl]="keyFormControl">
   </tb-data-key-input>
-  <mat-form-field *ngIf="!hideDataKeyLabel" class="tb-inline-field tb-label-field" appearance="outline" subscriptSizing="dynamic">
-    <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-  </mat-form-field>
-  <div *ngIf="timeSeriesChart && showTimeSeriesType" class="tb-time-series-type-field">
-    <mat-form-field *ngIf="displayUnitsOrDigits" class="tb-inline-field fixed-height" appearance="outline" subscriptSizing="dynamic">
-      <mat-select formControlName="timeSeriesType" panelClass="tb-time-series-type-field">
-        <mat-select-trigger>
-          <tb-icon *ngIf="keyRowFormGroup.get('timeSeriesType').value">
-            {{ timeSeriesChartSeriesTypeIcons.get(keyRowFormGroup.get('timeSeriesType').value) }}
-          </tb-icon>
-        </mat-select-trigger>
-        <mat-option *ngFor="let type of timeSeriesChartSeriesTypes" [value]="type" class="flex">
-          <tb-icon>{{ timeSeriesChartSeriesTypeIcons.get(type) }}</tb-icon>
-          <span>{{ timeSeriesChartSeriesTypeTranslations.get(type) | translate }}</span>
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-  </div>
-  <div *ngIf="timeSeriesChart" class="tb-y-axis-field">
-    <mat-form-field *ngIf="displayUnitsOrDigits" class="tb-inline-field fixed-height" appearance="outline" subscriptSizing="dynamic">
-      <mat-select formControlName="yAxis">
-        <mat-option *ngFor="let yAxis of yAxisIds" [value]="yAxis">
-          {{ yAxis }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-  </div>
-  <div *ngIf="!hideDataKeyColor" class="tb-color-field">
-    <tb-color-input asBoxInput
-                    formControlName="color">
-    </tb-color-input>
-  </div>
-  <div *ngIf="!hideUnits && !hideDataKeyUnits && (!singleRow || displayUnitsOrDigits)" class="tb-units-field">
-    <tb-unit-input *ngIf="displayUnitsOrDigits"
-                   [supportsUnitConversion]="supportsUnitConversion"
-      formControlName="units">
-    </tb-unit-input>
-  </div>
-  <div *ngIf="!hideDecimals && !hideDataKeyDecimals && (!singleRow || displayUnitsOrDigits)" class="tb-decimals-field">
-    <mat-form-field *ngIf="displayUnitsOrDigits" appearance="outline" class="tb-inline-field number" subscriptSizing="dynamic">
-      <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-      <div *ngIf="singleRow" matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
+  @if (!hideDataKeyLabel) {
+    <mat-form-field class="tb-inline-field tb-label-field" appearance="outline" subscriptSizing="dynamic">
+      <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
     </mat-form-field>
-  </div>
-  <div *ngIf="!singleRow" class="tb-form-table-row-cell-buttons">
-    <div class="tb-settings-button lt-lg:!hidden">
-      <button *ngIf="modelValue"
-              type="button"
+  }
+  @if (timeSeriesChart && showTimeSeriesType) {
+    <div class="tb-time-series-type-field">
+      @if (displayUnitsOrDigits) {
+        <mat-form-field class="tb-inline-field fixed-height" appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="timeSeriesType" panelClass="tb-time-series-type-field">
+            <mat-select-trigger>
+              @if (keyRowFormGroup.get('timeSeriesType').value) {
+                <tb-icon>
+                  {{ timeSeriesChartSeriesTypeIcons.get(keyRowFormGroup.get('timeSeriesType').value) }}
+                </tb-icon>
+              }
+            </mat-select-trigger>
+            @for (type of timeSeriesChartSeriesTypes; track type) {
+              <mat-option [value]="type" class="flex">
+                <tb-icon>{{ timeSeriesChartSeriesTypeIcons.get(type) }}</tb-icon>
+                <span>{{ timeSeriesChartSeriesTypeTranslations.get(type) | translate }}</span>
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
+    </div>
+  }
+  @if (timeSeriesChart) {
+    <div class="tb-y-axis-field">
+      @if (displayUnitsOrDigits) {
+        <mat-form-field class="tb-inline-field fixed-height" appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="yAxis">
+            @for (yAxis of yAxisIds; track yAxis) {
+              <mat-option [value]="yAxis">
+                {{ yAxis }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
+    </div>
+  }
+  @if (!hideDataKeyColor) {
+    <div class="tb-color-field">
+      <tb-color-input asBoxInput
+                      formControlName="color">
+      </tb-color-input>
+    </div>
+  }
+  @if (!hideUnits && !hideDataKeyUnits && (!singleRow || displayUnitsOrDigits)) {
+    <div class="tb-units-field">
+      @if (displayUnitsOrDigits) {
+        <tb-unit-input
+          [supportsUnitConversion]="supportsUnitConversion"
+          formControlName="units">
+        </tb-unit-input>
+      }
+    </div>
+  }
+  @if (!hideDecimals && !hideDataKeyDecimals && (!singleRow || displayUnitsOrDigits)) {
+    <div class="tb-decimals-field">
+      @if (displayUnitsOrDigits) {
+        <mat-form-field appearance="outline" class="tb-inline-field number" subscriptSizing="dynamic">
+          <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+          @if (singleRow) {
+            <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
+          }
+        </mat-form-field>
+      }
+    </div>
+  }
+  @if (!singleRow) {
+    <div class="tb-form-table-row-cell-buttons">
+      <div class="tb-settings-button lt-lg:!hidden">
+        @if (modelValue) {
+          <button
+            type="button"
+            mat-icon-button
+            (click)="editKey(true)"
+            [matTooltip]="keySettingsTitle"
+            matTooltipPosition="above">
+            <mat-icon>settings</mat-icon>
+          </button>
+        }
+      </div>
+      <button type="button"
               mat-icon-button
-              (click)="editKey(true)"
-              [matTooltip]="keySettingsTitle"
+              (click)="keyRemoved.emit()"
+              [matTooltip]="removeKeyTitle"
               matTooltipPosition="above">
-        <mat-icon>settings</mat-icon>
+        <mat-icon>delete</mat-icon>
       </button>
     </div>
-    <button type="button"
-            mat-icon-button
-            (click)="keyRemoved.emit()"
-            [matTooltip]="removeKeyTitle"
-            matTooltipPosition="above">
-      <mat-icon>delete</mat-icon>
-    </button>
-  </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html
index d2d8df7139..393ab69ad8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html
@@ -18,61 +18,83 @@
 <div class="tb-form-panel tb-data-keys-panel"
      [class.no-border]="hidePanel"
      [class.no-padding]="hidePanel">
-  <div *ngIf="!hidePanel" class="tb-form-panel-title">{{ panelTitle }}</div>
+  @if (!hidePanel) {
+    <div class="tb-form-panel-title">{{ panelTitle }}</div>
+  }
   <div class="tb-form-table">
     <div class="tb-form-table-header no-padding-right">
-      <div *ngIf="hasAdditionalLatestDataKeys" class="tb-form-table-header-cell tb-source-header" translate>datakey.source</div>
+      @if (hasAdditionalLatestDataKeys) {
+        <div class="tb-form-table-header-cell tb-source-header" translate>datakey.source</div>
+      }
       <div class="tb-form-table-header-cell tb-key-header" translate>datakey.key</div>
       <div class="tb-form-table-header-cell tb-label-header" translate>datakey.label</div>
-      <div *ngIf="timeSeriesChart && showTimeSeriesType" class="tb-form-table-header-cell tb-time-series-type-header" translate>widgets.time-series-chart.series.type</div>
-      <div *ngIf="timeSeriesChart" class="tb-form-table-header-cell tb-y-axis-header" translate>widgets.time-series-chart.axis.y-axis</div>
-      <div *ngIf="!hideDataKeyColor" class="tb-form-table-header-cell tb-color-header" translate>datakey.color</div>
-      <div *ngIf="!hideUnits" class="tb-form-table-header-cell tb-units-header" translate>widget-config.units-short</div>
-      <div *ngIf="!hideDecimals" class="tb-form-table-header-cell tb-decimals-header" translate>widget-config.decimals-short</div>
+      @if (timeSeriesChart && showTimeSeriesType) {
+        <div class="tb-form-table-header-cell tb-time-series-type-header" translate>widgets.time-series-chart.series.type</div>
+      }
+      @if (timeSeriesChart) {
+        <div class="tb-form-table-header-cell tb-y-axis-header" translate>widgets.time-series-chart.axis.y-axis</div>
+      }
+      @if (!hideDataKeyColor) {
+        <div class="tb-form-table-header-cell tb-color-header" translate>datakey.color</div>
+      }
+      @if (!hideUnits) {
+        <div class="tb-form-table-header-cell tb-units-header" translate>widget-config.units-short</div>
+      }
+      @if (!hideDecimals) {
+        <div class="tb-form-table-header-cell tb-decimals-header" translate>widget-config.decimals-short</div>
+      }
       <div class="tb-form-table-header-cell tb-actions-header"></div>
     </div>
-    <div *ngIf="keysFormArray().controls.length; else noKeys" class="tb-form-table-body tb-drop-list"
-         cdkDropList cdkDropListOrientation="vertical"
-         [cdkDropListDisabled]="!dragEnabled"
-         (cdkDropListDropped)="keyDrop($event)">
-      <div cdkDrag [cdkDragDisabled]="!dragEnabled"
-           class="tb-draggable-form-table-row"
-           *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
-        <tb-data-key-row class="flex-1"
-                         [formControl]="keyControl"
-                         required
-                         [datasourceType]="datasourceType"
-                         [deviceId]="deviceId"
-                         [entityAliasId]="entityAliasId"
-                         [hasAdditionalLatestDataKeys]="hasAdditionalLatestDataKeys"
-                         [hideDataKeyColor]="hideDataKeyColor"
-                         [hideDecimals]="hideDecimals"
-                         [timeSeriesChart]="timeSeriesChart"
-                         [showTimeSeriesType]="showTimeSeriesType"
-                         [yAxisIds]="yAxisIds"
-                         [hideUnits]="hideUnits"
-                         [hideDataKeyDecimals]="hideDataKeyDecimals"
-                         [hideDataKeyUnits]="hideDataKeyUnits"
-                         [dataKeyType]="dataKeyType"
-                         [singleRow]="false"
-                         [keySettingsTitle]="keySettingsTitle"
-                         [removeKeyTitle]="removeKeyTitle"
-                         (keyRemoved)="removeKey($index)">
-        </tb-data-key-row>
-        <div class="tb-form-table-row-cell-buttons">
-          <button mat-icon-button
-                  type="button"
-                  cdkDragHandle
-                  class="lt-lg:!hidden"
-                  [class.tb-hidden]="!dragEnabled"
-                  matTooltip="{{ 'action.drag' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>drag_indicator</mat-icon>
-          </button>
-        </div>
+    @if (keysFormArray().controls.length) {
+      <div class="tb-form-table-body tb-drop-list"
+           cdkDropList cdkDropListOrientation="vertical"
+           [cdkDropListDisabled]="!dragEnabled"
+           (cdkDropListDropped)="keyDrop($event)">
+        @for (keyControl of keysFormArray().controls; track trackByKey($index, keyControl)) {
+          <div cdkDrag [cdkDragDisabled]="!dragEnabled"
+               class="tb-draggable-form-table-row"
+               >
+            <tb-data-key-row class="flex-1"
+                             [formControl]="keyControl"
+                             required
+                             [datasourceType]="datasourceType"
+                             [deviceId]="deviceId"
+                             [entityAliasId]="entityAliasId"
+                             [hasAdditionalLatestDataKeys]="hasAdditionalLatestDataKeys"
+                             [hideDataKeyColor]="hideDataKeyColor"
+                             [hideDecimals]="hideDecimals"
+                             [timeSeriesChart]="timeSeriesChart"
+                             [showTimeSeriesType]="showTimeSeriesType"
+                             [yAxisIds]="yAxisIds"
+                             [hideUnits]="hideUnits"
+                             [hideDataKeyDecimals]="hideDataKeyDecimals"
+                             [hideDataKeyUnits]="hideDataKeyUnits"
+                             [dataKeyType]="dataKeyType"
+                             [singleRow]="false"
+                             [keySettingsTitle]="keySettingsTitle"
+                             [removeKeyTitle]="removeKeyTitle"
+                             (keyRemoved)="removeKey($index)">
+            </tb-data-key-row>
+            <div class="tb-form-table-row-cell-buttons">
+              <button mat-icon-button
+                      type="button"
+                      cdkDragHandle
+                      class="lt-lg:!hidden"
+                      [class.tb-hidden]="!dragEnabled"
+                      matTooltip="{{ 'action.drag' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>drag_indicator</mat-icon>
+              </button>
+            </div>
+          </div>
+        }
       </div>
-    </div>
-    <tb-error *ngIf="errorText" noMargin [error]="errorText" style="padding-left: 12px;"></tb-error>
+    } @else {
+      <span class="tb-prompt flex items-center justify-center">{{ noKeysText }}</span>
+    }
+    @if (errorText) {
+      <tb-error noMargin [error]="errorText" style="padding-left: 12px;"></tb-error>
+    }
   </div>
   <div>
     <button type="button" mat-stroked-button color="primary" (click)="addKey()">
@@ -80,6 +102,3 @@
     </button>
   </div>
 </div>
-<ng-template #noKeys>
-  <span class="tb-prompt flex items-center justify-center">{{ noKeysText }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html
index 72f4b0f1d8..b493696d4e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html
@@ -19,18 +19,24 @@
   <div class="flex flex-row items-center justify-start gap-4">
     <div class="tb-form-panel-title" translate style="padding-right: 48px;">widget-config.actions</div>
     <mat-chip-listbox class="flex-1">
-      <ng-container *ngFor="let actionSourceId of widgetActionSourceIds">
-        <mat-chip *ngFor="let widgetAction of widgetActionsByActionSourceId(actionSourceId)">
-          <tb-icon matChipAvatar>{{ widgetAction.icon }}</tb-icon>
-          {{ widgetAction.name }}
-        </mat-chip>
-      </ng-container>
+      @for (actionSourceId of widgetActionSourceIds; track actionSourceId) {
+        @for (widgetAction of widgetActionsByActionSourceId(actionSourceId); track widgetAction) {
+          <mat-chip>
+            <tb-icon matChipAvatar>{{ widgetAction.icon }}</tb-icon>
+            {{ widgetAction.name }}
+          </mat-chip>
+        }
+      }
     </mat-chip-listbox>
-    <button mat-stroked-button color="primary" *ngIf="!hasWidgetActions">
-      {{ 'widget-config.add-action' | translate }}
-    </button>
-    <button mat-icon-button color="primary" *ngIf="hasWidgetActions">
-      <mat-icon>add</mat-icon>
-    </button>
+    @if (!hasWidgetActions) {
+      <button mat-stroked-button color="primary">
+        {{ 'widget-config.add-action' | translate }}
+      </button>
+    }
+    @if (hasWidgetActions) {
+      <button mat-icon-button color="primary">
+        <mat-icon>add</mat-icon>
+      </button>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
index 27ad183dfa..8acae32fa7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
@@ -16,10 +16,12 @@
 
 -->
 <ng-container [formGroup]="entitiesTableWidgetConfigForm">
-  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
-                              [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-                              formControlName="timewindowConfig">
-  </tb-timewindow-config-panel>
+  @if (displayTimewindowConfig) {
+    <tb-timewindow-config-panel
+      [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+      formControlName="timewindowConfig">
+    </tb-timewindow-config-panel>
+  }
   <tb-datasources
     [configMode]="basicMode"
     hideDataKeys
@@ -53,7 +55,7 @@
                                         [predefinedValues]="predefinedValues"
                                         placeholderText="{{ 'widget-config.set' | translate }}"
                                         formControlName="title"
-          ></tb-string-pattern-autocomplete>
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="entitiesTableWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
index be07426222..98d5bfd9ec 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
@@ -16,10 +16,12 @@
 
 -->
 <ng-container [formGroup]="radialGaugeWidgetConfigForm">
-  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
-                              [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-                              formControlName="timewindowConfig">
-  </tb-timewindow-config-panel>
+  @if (displayTimewindowConfig) {
+    <tb-timewindow-config-panel
+      [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+      formControlName="timewindowConfig">
+    </tb-timewindow-config-panel>
+  }
   <tb-datasources
     [configMode]="basicMode"
     hideDataKeyLabel
@@ -129,30 +131,32 @@
       </tb-color-range-settings>
     </div>
 
-    <div class="tb-form-panel" *ngIf="gaugeType === 'linear'">
-      <div class="tb-form-panel-title" translate>widgets.gauge.progress-bar</div>
-      <div class="tb-form-row space-between">
-        <div translate>widgets.gauge.progress-bar-color-start</div>
-        <tb-color-input asBoxInput
-                        colorClearButton
-                        formControlName="colorBarProgress">
-        </tb-color-input>
-      </div>
-      <div class="tb-form-row space-between">
-        <div translate>widgets.gauge.progress-bar-color-end</div>
-        <tb-color-input asBoxInput
-                        colorClearButton
-                        formControlName="colorBarProgressEnd">
-        </tb-color-input>
-      </div>
-      <div class="tb-form-row space-between">
-        <div translate>widgets.gauge.bar-stroke-color</div>
-        <tb-color-input asBoxInput
-                        colorClearButton
-                        formControlName="colorBarStroke">
-        </tb-color-input>
+    @if (gaugeType === 'linear') {
+      <div class="tb-form-panel">
+        <div class="tb-form-panel-title" translate>widgets.gauge.progress-bar</div>
+        <div class="tb-form-row space-between">
+          <div translate>widgets.gauge.progress-bar-color-start</div>
+          <tb-color-input asBoxInput
+                          colorClearButton
+                          formControlName="colorBarProgress">
+          </tb-color-input>
+        </div>
+        <div class="tb-form-row space-between">
+          <div translate>widgets.gauge.progress-bar-color-end</div>
+          <tb-color-input asBoxInput
+                          colorClearButton
+                          formControlName="colorBarProgressEnd">
+          </tb-color-input>
+        </div>
+        <div class="tb-form-row space-between">
+          <div translate>widgets.gauge.bar-stroke-color</div>
+          <tb-color-input asBoxInput
+                          colorClearButton
+                          formControlName="colorBarStroke">
+          </tb-color-input>
+        </div>
       </div>
-    </div>
+    }
 
   </div>
   <div class="tb-form-panel">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
index a5dbfac219..c2470210fb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
@@ -16,10 +16,12 @@
 
 -->
 <ng-container [formGroup]="compassGaugeWidgetConfigForm">
-  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
-                              [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-                              formControlName="timewindowConfig">
-  </tb-timewindow-config-panel>
+  @if (displayTimewindowConfig) {
+    <tb-timewindow-config-panel
+      [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+      formControlName="timewindowConfig">
+    </tb-timewindow-config-panel>
+  }
   <tb-datasources
     [configMode]="basicMode"
     hideDataKeyLabel
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
index 814c84c2f6..d6c8d7197c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
@@ -16,10 +16,12 @@
 
 -->
 <ng-container [formGroup]="simpleGaugeWidgetConfigForm">
-  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
-                              [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-                              formControlName="timewindowConfig">
-  </tb-timewindow-config-panel>
+  @if (displayTimewindowConfig) {
+    <tb-timewindow-config-panel
+      [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+      formControlName="timewindowConfig">
+    </tb-timewindow-config-panel>
+  }
   <tb-datasources
     [configMode]="basicMode"
     hideDataKeyLabel
@@ -35,21 +37,25 @@
                                     breakpoints: {
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.gauge.simple-gauge-type' | translate }}"
-                           formControlName="gaugeType">
-      <tb-image-cards-select-option *ngFor="let layout of digitalGaugeLayouts"
-                                    [value]="layout"
-                                    [image]="digitalGaugeLayoutImageMap.get(layout)">
-        {{ digitalGaugeLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.gauge.simple-gauge-type' | translate }}"
+      formControlName="gaugeType">
+      @for (layout of digitalGaugeLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="digitalGaugeLayoutImageMap.get(layout)">
+          {{ digitalGaugeLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
 
-    <div class="tb-form-row space-between" *ngIf="simpleGaugeWidgetConfigForm.get('gaugeType').value === digitalGaugeType.donut">
-      <div class="fixed-title-width">{{ 'widgets.gauge.donut-start-angle' | translate }}</div>
-      <mat-form-field appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="donutStartAngle" type="number" min="0" max="360" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-    </div>
+    @if (simpleGaugeWidgetConfigForm.get('gaugeType').value === digitalGaugeType.donut) {
+      <div class="tb-form-row space-between">
+        <div class="fixed-title-width">{{ 'widgets.gauge.donut-start-angle' | translate }}</div>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="donutStartAngle" type="number" min="0" max="360" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
+    }
 
     <div class="tb-form-row space-between column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showMinMax">
@@ -76,14 +82,15 @@
         <div class="tb-small-label" translate>widgets.gauge.max-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="maxValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
-                    [matTooltip]="'widgets.gauge.min-max-validation-text' | translate"
-                    *ngIf="simpleGaugeWidgetConfigForm.get('maxValue').hasError('maxValue')"
-                    class="material-icons tb-suffix-show-always tb-error">
-            warning
-          </mat-icon>
+          @if (simpleGaugeWidgetConfigForm.get('maxValue').hasError('maxValue')) {
+            <mat-icon matSuffix
+                      matTooltipPosition="above"
+                      matTooltipClass="tb-error-tooltip"
+                      [matTooltip]="'widgets.gauge.min-max-validation-text' | translate"
+                      class="material-icons tb-suffix-show-always tb-error">
+              warning
+            </mat-icon>
+          }
         </mat-form-field>
       </div>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
index e36e315b3e..8c8655a0f5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
@@ -16,10 +16,12 @@
 
 -->
 <ng-container [formGroup]="batteryLevelWidgetConfigForm">
-  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
-                              [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-                              formControlName="timewindowConfig">
-  </tb-timewindow-config-panel>
+  @if (displayTimewindowConfig) {
+    <tb-timewindow-config-panel
+      [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+      formControlName="timewindowConfig">
+    </tb-timewindow-config-panel>
+  }
   <tb-datasources
     [configMode]="basicMode"
     hideDataKeyLabel
@@ -35,19 +37,23 @@
                                     breakpoints: {
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.battery-level.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of batteryLevelLayouts"
-                                    [value]="layout"
-                                    [image]="batteryLevelLayoutImageMap.get(layout)">
-        {{ batteryLevelLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.battery-level.layout' | translate }}" formControlName="layout">
+      @for (layout of batteryLevelLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="batteryLevelLayoutImageMap.get(layout)">
+          {{ batteryLevelLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
-    <div *ngIf="sectionsCountEnabled" class="tb-form-row space-between">
-      <div>{{ 'widgets.battery-level.sections-count' | translate }}</div>
-      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-        <input matInput type="number" min="2" max="20" formControlName="sectionsCount" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-    </div>
+    @if (sectionsCountEnabled) {
+      <div class="tb-form-row space-between">
+        <div>{{ 'widgets.battery-level.sections-count' | translate }}</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput type="number" min="2" max="20" formControlName="sectionsCount" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
+    }
     <div class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
index 473bdb0b4b..7ecb3a0441 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
@@ -15,339 +15,364 @@
     limitations under the License.
 
 -->
-<ng-container *ngIf="levelCardWidgetConfigForm" [formGroup]="levelCardWidgetConfigForm">
-  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
-                              [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-                              formControlName="timewindowConfig">
-  </tb-timewindow-config-panel>
-  <tb-datasources
-    [configMode]="basicMode"
-    hideDataKeyLabel
-    hideDataKeyColor
-    hideDataKeyUnits
-    hideDataKeyDecimals
-    formControlName="datasources">
-  </tb-datasources>
-  <div class="tb-form-panel">
-    <div class="tb-form-panel-title" translate>widget-config.appearance</div>
-    <div class="tb-form-row column-xs">
-      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
-        {{ 'widgets.liquid-level-card.title' | translate }}
-      </mat-slide-toggle>
-      <div class="tb-flex row flex-start align-center">
-        <tb-string-pattern-autocomplete class="flex-1"
-                                        appearance="outline"
-                                        brackets="curly"
-                                        subscriptSizing="dynamic"
-                                        predefinedValuesButton="true"
-                                        [disabled]="!levelCardWidgetConfigForm.get('showTitle').value"
-                                        [predefinedValues]="predefinedValues"
-                                        placeholderText="{{ 'widget-config.set' | translate }}"
-                                        formControlName="title"
-        ></tb-string-pattern-autocomplete>
-        <tb-font-settings formControlName="titleFont"
-                          [previewText]="levelCardWidgetConfigForm.get('title').value">
-        </tb-font-settings>
-        <tb-color-input asBoxInput colorClearButton formControlName="titleColor">
-        </tb-color-input>
-      </div>
-    </div>
-    <div class="tb-form-row column-xs">
-      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitleIcon">
-        {{ 'widgets.liquid-level-card.icon' | translate }}
-      </mat-slide-toggle>
-      <div class="tb-flex row flex-end align-center">
-        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
-          <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
-        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
-        <tb-material-icon-select asBoxInput
-                                 iconClearButton
-                                 [color]="levelCardWidgetConfigForm.get('iconColor').value"
-                                 formControlName="titleIcon">
-        </tb-material-icon-select>
-        <tb-color-input asBoxInput colorClearButton formControlName="iconColor">
-        </tb-color-input>
+@if (levelCardWidgetConfigForm) {
+  <ng-container [formGroup]="levelCardWidgetConfigForm">
+    @if (displayTimewindowConfig) {
+      <tb-timewindow-config-panel
+        [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+        formControlName="timewindowConfig">
+      </tb-timewindow-config-panel>
+    }
+    <tb-datasources
+      [configMode]="basicMode"
+      hideDataKeyLabel
+      hideDataKeyColor
+      hideDataKeyUnits
+      hideDataKeyDecimals
+      formControlName="datasources">
+    </tb-datasources>
+    <div class="tb-form-panel">
+      <div class="tb-form-panel-title" translate>widget-config.appearance</div>
+      <div class="tb-form-row column-xs">
+        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
+          {{ 'widgets.liquid-level-card.title' | translate }}
+        </mat-slide-toggle>
+        <div class="tb-flex row flex-start align-center">
+          <tb-string-pattern-autocomplete class="flex-1"
+                                          appearance="outline"
+                                          brackets="curly"
+                                          subscriptSizing="dynamic"
+                                          predefinedValuesButton="true"
+                                          [disabled]="!levelCardWidgetConfigForm.get('showTitle').value"
+                                          [predefinedValues]="predefinedValues"
+                                          placeholderText="{{ 'widget-config.set' | translate }}"
+                                          formControlName="title"
+          ></tb-string-pattern-autocomplete>
+          <tb-font-settings formControlName="titleFont"
+                            [previewText]="levelCardWidgetConfigForm.get('title').value">
+          </tb-font-settings>
+          <tb-color-input asBoxInput colorClearButton formControlName="titleColor">
+          </tb-color-input>
+        </div>
       </div>
-    </div>
-    <div class="tb-form-row space-between flex-1 !flex-col">
-      <div class="tb-flex row space-between align-center no-gap fill-width">
-        <div class="fixed-title-width"  translate>widgets.liquid-level-card.shape</div>
-        <tb-toggle-select formControlName="tankSelectionType">
-          <tb-toggle-option *ngFor="let type of DataSourceTypes" [value]="type">
-            {{ DataSourceTypeTranslations.get(type) | translate }}
-          </tb-toggle-option>
-        </tb-toggle-select>
+      <div class="tb-form-row column-xs">
+        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitleIcon">
+          {{ 'widgets.liquid-level-card.icon' | translate }}
+        </mat-slide-toggle>
+        <div class="tb-flex row flex-end align-center">
+          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+            <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+          <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
+          <tb-material-icon-select asBoxInput
+                                   iconClearButton
+                                   [color]="levelCardWidgetConfigForm.get('iconColor').value"
+                                   formControlName="titleIcon">
+          </tb-material-icon-select>
+          <tb-color-input asBoxInput colorClearButton formControlName="iconColor">
+          </tb-color-input>
+        </div>
       </div>
-      <tb-image-cards-select #shapesImageCardsSelect
-                             [class.!hidden]="levelCardWidgetConfigForm.get('tankSelectionType').value !== DataSourceType.static"
-                             rowHeight="1:1"
+      <div class="tb-form-row space-between flex-1 !flex-col">
+        <div class="tb-flex row space-between align-center no-gap fill-width">
+          <div class="fixed-title-width"  translate>widgets.liquid-level-card.shape</div>
+          <tb-toggle-select formControlName="tankSelectionType">
+            @for (type of DataSourceTypes; track type) {
+              <tb-toggle-option [value]="type">
+                {{ DataSourceTypeTranslations.get(type) | translate }}
+              </tb-toggle-option>
+            }
+          </tb-toggle-select>
+        </div>
+        <tb-image-cards-select #shapesImageCardsSelect
+                               [class.!hidden]="levelCardWidgetConfigForm.get('tankSelectionType').value !== DataSourceType.static"
+                               rowHeight="1:1"
                              [cols]="{columns: 5,
                                     breakpoints: {
                                       'lt-md': 2
                                     }}"
-                             style="width: 100%;"
-                             label="{{ 'widgets.liquid-level-card.shape-type' | translate }}" formControlName="selectedShape">
-        <tb-image-cards-select-option *ngFor="let shape of shapes"
-                                      [value]="shape"
-                                      [image]="createShape(shapesImageMap.get(shape), LevelCardLayout.simple)">
-          {{ ShapesTranslationMap.get(shape) | translate }}
-        </tb-image-cards-select-option>
-      </tb-image-cards-select>
-      <ng-container *ngIf="levelCardWidgetConfigForm.get('tankSelectionType').value === DataSourceType.attribute">
-        <div class="tb-form-row space-between" style="width: 100%;">
-          <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.shape-attribute-name</div>
-          <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
-                                  required style="flex: 1"
-                                  [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
-                                  formControlName="shapeAttributeName">
-          </tb-string-autocomplete>
-        </div>
-        <div class="tb-flex row space-between align-center no-gap fill-width">
-          <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
-          <div class="see-example"
-               [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
-               tb-help-popup-placement="left"
-               trigger-style="font-size: 12px"
-               [tb-help-popup-style]="{maxWidth: '820px'}"
-               trigger-text="{{ 'widgets.liquid-level-card.see-examples' | translate }}">
+          style="width: 100%;"
+          label="{{ 'widgets.liquid-level-card.shape-type' | translate }}" formControlName="selectedShape">
+          @for (shape of shapes; track shape) {
+            <tb-image-cards-select-option
+              [value]="shape"
+              [image]="createShape(shapesImageMap.get(shape), LevelCardLayout.simple)">
+              {{ ShapesTranslationMap.get(shape) | translate }}
+            </tb-image-cards-select-option>
+          }
+        </tb-image-cards-select>
+        @if (levelCardWidgetConfigForm.get('tankSelectionType').value === DataSourceType.attribute) {
+          <div class="tb-form-row space-between" style="width: 100%;">
+            <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.shape-attribute-name</div>
+            <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                    required style="flex: 1"
+                                    [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                    formControlName="shapeAttributeName">
+            </tb-string-autocomplete>
           </div>
-        </div>
-      </ng-container>
-    </div>
-    <tb-image-cards-select #layoutsImageCardsSelect rowHeight="1:1"
-                           cols="3"
-                           label="{{ 'widgets.liquid-level-card.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option
-        *ngFor="let layout of LevelCardLayouts"
-        [value]="layout"
-        [image]="createShape(shapesImageMap.get(levelCardWidgetConfigForm.get('selectedShape').value), layout)">
-        {{ LevelCardLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
-    </tb-image-cards-select>
-  </div>
-  <div class="tb-form-panel">
-    <div class="tb-form-panel-title" translate>widgets.liquid-level-card.units</div>
-    <div class="tb-form-row space-between">
-      <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.datasource-units</div>
-      <div class="tb-flex row flex-end align-center no-gap">
-        <tb-unit-input required style="max-width: 25%;" class="flex"
-                       tagFilter="capacity"
-                       formControlName="datasourceUnits">
-        </tb-unit-input>
+          <div class="tb-flex row space-between align-center no-gap fill-width">
+            <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
+            <div class="see-example"
+                 [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
+                 tb-help-popup-placement="left"
+                 trigger-style="font-size: 12px"
+                 [tb-help-popup-style]="{maxWidth: '820px'}"
+                 trigger-text="{{ 'widgets.liquid-level-card.see-examples' | translate }}">
+            </div>
+          </div>
+        }
       </div>
+      <tb-image-cards-select #layoutsImageCardsSelect rowHeight="1:1"
+                             cols="3"
+                             label="{{ 'widgets.liquid-level-card.layout' | translate }}" formControlName="layout">
+        @for (layout of LevelCardLayouts; track layout) {
+          <tb-image-cards-select-option
+            [value]="layout"
+            [image]="createShape(shapesImageMap.get(levelCardWidgetConfigForm.get('selectedShape').value), layout)">
+            {{ LevelCardLayoutTranslationMap.get(layout) | translate }}
+          </tb-image-cards-select-option>
+        }
+      </tb-image-cards-select>
     </div>
-    <div class="tb-form-row space-between column-xs" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
-      <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
-      <div class="tb-flex row flex-start align-center">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
-          <mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
-            <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
-              {{ DataSourceTypeTranslations.get(type) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <tb-unit-input *ngIf="levelCardWidgetConfigForm.get('widgetUnitsSource').value === DataSourceType.static; else selectUnitsAttributes"
-                       class="flex" required
-                       supportsUnitConversion
-                       tagFilter="capacity"
-                       formControlName="units">
-        </tb-unit-input>
-        <ng-template #selectUnitsAttributes>
-          <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
-                                  required style="flex: 1"
-                                  [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
-                                  formControlName="widgetUnitsAttributeName">
-          </tb-string-autocomplete>
-        </ng-template>
+    <div class="tb-form-panel">
+      <div class="tb-form-panel-title" translate>widgets.liquid-level-card.units</div>
+      <div class="tb-form-row space-between">
+        <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.datasource-units</div>
+        <div class="tb-flex row flex-end align-center no-gap">
+          <tb-unit-input required style="max-width: 25%;" class="flex"
+                         tagFilter="capacity"
+                         formControlName="datasourceUnits">
+          </tb-unit-input>
+        </div>
       </div>
-    </div>
-    <div class="tb-form-row column-xs" [class.!hidden]="!volumeInput">
-      <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
-      <div class="tb-flex row flex-start align-center">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
-          <mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
-            <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
-              {{ DataSourceTypeTranslations.get(type) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field *ngIf="levelCardWidgetConfigForm.get('volumeSource').value === DataSourceType.static; else volumeAttributes"
-                        appearance="outline" class="number flex" subscriptSizing="dynamic">
-          <input matInput formControlName="volumeConstant" type="number"
-                 min="0.1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
-                    [matTooltip]="'widgets.liquid-level-card.total-volume-required' | translate"
-                    *ngIf="levelCardWidgetConfigForm.get('volumeConstant').hasError('required')"
-                    class="material-icons tb-suffix-show-always tb-error">
-            warning
-          </mat-icon>
-        </mat-form-field>
-        <ng-template #volumeAttributes>
-          <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
-                                  [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
-                                  required style="flex: 1"
-                                  formControlName="volumeAttributeName">
-          </tb-string-autocomplete>
-        </ng-template>
+      @if (levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute) {
+        <div class="tb-form-row space-between column-xs">
+          <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
+          <div class="tb-flex row flex-start align-center">
+            <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
+              <mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
+                @for (type of DataSourceTypes; track type) {
+                  <mat-option [value]="type">
+                    {{ DataSourceTypeTranslations.get(type) | translate }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+            @if (levelCardWidgetConfigForm.get('widgetUnitsSource').value === DataSourceType.static) {
+              <tb-unit-input
+                class="flex" required
+                supportsUnitConversion
+                tagFilter="capacity"
+                formControlName="units">
+              </tb-unit-input>
+            } @else {
+              <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                      required style="flex: 1"
+                                      [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                      formControlName="widgetUnitsAttributeName">
+              </tb-string-autocomplete>
+            }
+          </div>
+        </div>
+      }
+      <div class="tb-form-row column-xs" [class.!hidden]="!volumeInput">
+        <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
+        <div class="tb-flex row flex-start align-center">
+          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
+            <mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
+              @for (type of DataSourceTypes; track type) {
+                <mat-option [value]="type">
+                  {{ DataSourceTypeTranslations.get(type) | translate }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+          @if (levelCardWidgetConfigForm.get('volumeSource').value === DataSourceType.static) {
+            <mat-form-field
+              appearance="outline" class="number flex" subscriptSizing="dynamic">
+              <input matInput formControlName="volumeConstant" type="number"
+                     min="0.1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+              @if (levelCardWidgetConfigForm.get('volumeConstant').hasError('required')) {
+                <mat-icon matSuffix
+                          matTooltipPosition="above"
+                          matTooltipClass="tb-error-tooltip"
+                          [matTooltip]="'widgets.liquid-level-card.total-volume-required' | translate"
+                          class="material-icons tb-suffix-show-always tb-error">
+                  warning
+                </mat-icon>
+              }
+            </mat-form-field>
+          } @else {
+            <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                    [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                    required style="flex: 1"
+                                    formControlName="volumeAttributeName">
+            </tb-string-autocomplete>
+          }
+        </div>
       </div>
-    </div>
-    <div class="tb-form-row space-between column-xs" [class.!hidden]="!volumeInput">
-      <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
-      <div class="tb-flex row flex-start align-center">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
-          <mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
-            <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
-              {{ DataSourceTypeTranslations.get(type) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <tb-unit-input *ngIf="levelCardWidgetConfigForm.get('volumeUnitsSource').value === DataSourceType.static; else selectVolumeUnitsAttributes"
-                       class="flex" required
-                       tagFilter="capacity"
-                       formControlName="volumeUnits">
-        </tb-unit-input>
-        <ng-template #selectVolumeUnitsAttributes>
-          <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
-                                  required style="flex: 1"
-                                  [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
-                                  formControlName="volumeUnitsAttributeName">
-          </tb-string-autocomplete>
-        </ng-template>
+      <div class="tb-form-row space-between column-xs" [class.!hidden]="!volumeInput">
+        <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
+        <div class="tb-flex row flex-start align-center">
+          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
+            <mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
+              @for (type of DataSourceTypes; track type) {
+                <mat-option [value]="type">
+                  {{ DataSourceTypeTranslations.get(type) | translate }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+          @if (levelCardWidgetConfigForm.get('volumeUnitsSource').value === DataSourceType.static) {
+            <tb-unit-input
+              class="flex" required
+              tagFilter="capacity"
+              formControlName="volumeUnits">
+            </tb-unit-input>
+          } @else {
+            <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                    required style="flex: 1"
+                                    [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                    formControlName="volumeUnitsAttributeName">
+            </tb-string-autocomplete>
+          }
+        </div>
       </div>
     </div>
-  </div>
-  <div class="tb-form-panel">
-    <div class="tb-form-panel-title" translate>widgets.liquid-level-card.color-and-font</div>
-    <div class="tb-form-row space-between">
-      <div class="fixed-title-width" translate>widgets.liquid-level-card.tank-color</div>
-      <tb-color-settings formControlName="tankColor" settingsKey="{{'widgets.liquid-level-card.tank-color' | translate }}">
-      </tb-color-settings>
-    </div>
-    <div class="tb-form-row space-between">
-      <div class="fixed-title-width" translate>widgets.liquid-level-card.liquid-color</div>
-      <tb-color-settings formControlName="liquidColor" settingsKey="{{'widgets.liquid-level-card.liquid-color' | translate }}">
-      </tb-color-settings>
-    </div>
-    <div class="tb-form-row space-between"
-         *ngIf="levelCardWidgetConfigForm.get('layout').value !== LevelCardLayout.simple">
-      <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
-      <div class="tb-flex row flex-end align-center">
-        <mat-form-field style="max-width: 40%;" appearance="outline" class="number flex" subscriptSizing="dynamic">
-          <input matInput formControlName="decimals" type="number"
-                 min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
-        </mat-form-field>
-        <tb-font-settings formControlName="valueFont"
-                          [previewText]="valuePreviewFn">
-        </tb-font-settings>
-        <tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.liquid-level-card.value' | translate }}">
+    <div class="tb-form-panel">
+      <div class="tb-form-panel-title" translate>widgets.liquid-level-card.color-and-font</div>
+      <div class="tb-form-row space-between">
+        <div class="fixed-title-width" translate>widgets.liquid-level-card.tank-color</div>
+        <tb-color-settings formControlName="tankColor" settingsKey="{{'widgets.liquid-level-card.tank-color' | translate }}">
         </tb-color-settings>
       </div>
-    </div>
-    <div class="tb-form-row" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
-      <div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
-      <div class="tb-flex row flex-end align-center">
-        <tb-font-settings formControlName="volumeFont"
-                          [previewText]="totalVolumeValuePreviewFn">
-        </tb-font-settings>
-        <tb-color-input asBoxInput colorClearButton formControlName="volumeColor">
-        </tb-color-input>
+      <div class="tb-form-row space-between">
+        <div class="fixed-title-width" translate>widgets.liquid-level-card.liquid-color</div>
+        <tb-color-settings formControlName="liquidColor" settingsKey="{{'widgets.liquid-level-card.liquid-color' | translate }}">
+        </tb-color-settings>
       </div>
-    </div>
-  </div>
-  <div class="tb-form-panel tb-slide-toggle">
-    <mat-expansion-panel class="tb-settings"
-      [expanded]="levelCardWidgetConfigForm.get('showTooltip').value"
-      [disabled]="!levelCardWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header class="flex flex-row flex-wrap">
-        <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
-            {{ 'widget-config.tooltip' | translate }}
-          </mat-slide-toggle>
-        </mat-panel-title>
-      </mat-expansion-panel-header>
-      <ng-template matExpansionPanelContent>
-        <div class="tb-form-row column-xs">
-          <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipLevel">
-            {{ 'widgets.liquid-level-card.level' | translate }}
-          </mat-slide-toggle>
+      @if (levelCardWidgetConfigForm.get('layout').value !== LevelCardLayout.simple) {
+        <div class="tb-form-row space-between"
+             >
+          <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
           <div class="tb-flex row flex-end align-center">
-            <tb-unit-input required class="flex"
-                           supportsUnitConversion
-                           tagFilter="capacity"
-                           formControlName="tooltipUnits">
-            </tb-unit-input>
-            <mat-form-field style="width: 40%;" appearance="outline" class="number flex" subscriptSizing="dynamic">
-              <input matInput formControlName="tooltipLevelDecimals" type="number" min="0"
-                     max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+            <mat-form-field style="max-width: 40%;" appearance="outline" class="number flex" subscriptSizing="dynamic">
+              <input matInput formControlName="decimals" type="number"
+                     min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
               <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
             </mat-form-field>
-            <tb-font-settings formControlName="tooltipLevelFont"
-                              [previewText]="tooltipValuePreviewFn">
+            <tb-font-settings formControlName="valueFont"
+                              [previewText]="valuePreviewFn">
             </tb-font-settings>
-            <tb-color-settings formControlName="tooltipLevelColor" settingsKey="{{'widgets.liquid-level-card.background-overlay' | translate }}">
+            <tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.liquid-level-card.value' | translate }}">
             </tb-color-settings>
           </div>
         </div>
-        <div class="tb-form-row column-xs">
-          <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
-            {{ 'widgets.value-card.date' | translate }}
-          </mat-slide-toggle>
-          <div class="tb-flex row flex-start align-center">
-            <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
-            <tb-font-settings formControlName="tooltipDateFont"
-                              [previewText]="datePreviewFn">
+      }
+      @if (levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute) {
+        <div class="tb-form-row">
+          <div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
+          <div class="tb-flex row flex-end align-center">
+            <tb-font-settings formControlName="volumeFont"
+                              [previewText]="totalVolumeValuePreviewFn">
             </tb-font-settings>
-            <tb-color-input asBoxInput colorClearButton formControlName="tooltipDateColor">
+            <tb-color-input asBoxInput colorClearButton formControlName="volumeColor">
             </tb-color-input>
           </div>
         </div>
-        <div class="tb-form-row space-between">
-          <div class="fixed-title-width" translate>widgets.liquid-level-card.tooltip-background</div>
-          <tb-color-input asBoxInput colorClearButton formControlName="tooltipBackgroundColor">
-          </tb-color-input>
-        </div>
-        <div class="tb-form-row space-between">
-          <div class="fixed-title-width" translate>widgets.liquid-level-card.background-blur</div>
-          <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-            <input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1"
-                   placeholder="{{ 'widget-config.set' | translate }}">
-            <div matSuffix>px</div>
-          </mat-form-field>
-        </div>
-      </ng-template>
-    </mat-expansion-panel>
-  </div>
-  <div class="tb-form-panel">
-    <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
-    <div class="tb-form-row space-between">
-      <div>{{ 'widgets.background.background' | translate }}</div>
-      <tb-background-settings formControlName="background">
-      </tb-background-settings>
+      }
     </div>
-    <div class="tb-form-row space-between column-lt-md">
-      <div translate>widget-config.show-card-buttons</div>
-      <mat-chip-listbox multiple formControlName="cardButtons">
-        <mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option>
-      </mat-chip-listbox>
-    </div>
-    <div class="tb-form-row space-between">
-      <div>{{ 'widget-config.card-border-radius' | translate }}</div>
-      <mat-form-field appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+    <div class="tb-form-panel tb-slide-toggle">
+      <mat-expansion-panel class="tb-settings"
+                           [expanded]="levelCardWidgetConfigForm.get('showTooltip').value"
+                           [disabled]="!levelCardWidgetConfigForm.get('showTooltip').value">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
+          <mat-panel-title>
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
+              {{ 'widget-config.tooltip' | translate }}
+            </mat-slide-toggle>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <ng-template matExpansionPanelContent>
+          <div class="tb-form-row column-xs">
+            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipLevel">
+              {{ 'widgets.liquid-level-card.level' | translate }}
+            </mat-slide-toggle>
+            <div class="tb-flex row flex-end align-center">
+              <tb-unit-input required class="flex"
+                             supportsUnitConversion
+                             tagFilter="capacity"
+                             formControlName="tooltipUnits">
+              </tb-unit-input>
+              <mat-form-field style="width: 40%;" appearance="outline" class="number flex" subscriptSizing="dynamic">
+                <input matInput formControlName="tooltipLevelDecimals" type="number" min="0"
+                       max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+                <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
+              </mat-form-field>
+              <tb-font-settings formControlName="tooltipLevelFont"
+                                [previewText]="tooltipValuePreviewFn">
+              </tb-font-settings>
+              <tb-color-settings formControlName="tooltipLevelColor" settingsKey="{{'widgets.liquid-level-card.background-overlay' | translate }}">
+              </tb-color-settings>
+            </div>
+          </div>
+          <div class="tb-form-row column-xs">
+            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
+              {{ 'widgets.value-card.date' | translate }}
+            </mat-slide-toggle>
+            <div class="tb-flex row flex-start align-center">
+              <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
+              <tb-font-settings formControlName="tooltipDateFont"
+                                [previewText]="datePreviewFn">
+              </tb-font-settings>
+              <tb-color-input asBoxInput colorClearButton formControlName="tooltipDateColor">
+              </tb-color-input>
+            </div>
+          </div>
+          <div class="tb-form-row space-between">
+            <div class="fixed-title-width" translate>widgets.liquid-level-card.tooltip-background</div>
+            <tb-color-input asBoxInput colorClearButton formControlName="tooltipBackgroundColor">
+            </tb-color-input>
+          </div>
+          <div class="tb-form-row space-between">
+            <div class="fixed-title-width" translate>widgets.liquid-level-card.background-blur</div>
+            <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+              <input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1"
+                     placeholder="{{ 'widget-config.set' | translate }}">
+              <div matSuffix>px</div>
+            </mat-form-field>
+          </div>
+        </ng-template>
+      </mat-expansion-panel>
     </div>
-    <div class="tb-form-row space-between">
-      <div>{{ 'widget-config.card-padding' | translate }}</div>
-      <mat-form-field appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+    <div class="tb-form-panel">
+      <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
+      <div class="tb-form-row space-between">
+        <div>{{ 'widgets.background.background' | translate }}</div>
+        <tb-background-settings formControlName="background">
+        </tb-background-settings>
+      </div>
+      <div class="tb-form-row space-between column-lt-md">
+        <div translate>widget-config.show-card-buttons</div>
+        <mat-chip-listbox multiple formControlName="cardButtons">
+          <mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option>
+        </mat-chip-listbox>
+      </div>
+      <div class="tb-form-row space-between">
+        <div>{{ 'widget-config.card-border-radius' | translate }}</div>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
+      <div class="tb-form-row space-between">
+        <div>{{ 'widget-config.card-padding' | translate }}</div>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
     </div>
-  </div>
-  <tb-widget-actions-panel
-    formControlName="actions">
-  </tb-widget-actions-panel>
-</ng-container>
+    <tb-widget-actions-panel
+      formControlName="actions">
+    </tb-widget-actions-panel>
+  </ng-container>
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
index ed034aaf89..c34a73d6ac 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
@@ -16,10 +16,12 @@
 
 -->
 <ng-container [formGroup]="signalStrengthWidgetConfigForm">
-  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
-                              [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-                              formControlName="timewindowConfig">
-  </tb-timewindow-config-panel>
+  @if (displayTimewindowConfig) {
+    <tb-timewindow-config-panel
+      [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+      formControlName="timewindowConfig">
+    </tb-timewindow-config-panel>
+  }
   <tb-datasources
     [configMode]="basicMode"
     hideDataKeyLabel
@@ -35,12 +37,14 @@
                                     breakpoints: {
                                       'lt-sm': 1
                                     }}"
-                           label="{{ 'widgets.signal-strength.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of signalStrengthLayouts"
-                                    [value]="layout"
-                                    [image]="signalStrengthLayoutImageMap.get(layout)">
-        {{ signalStrengthLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.signal-strength.layout' | translate }}" formControlName="layout">
+      @for (layout of signalStrengthLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="signalStrengthLayoutImageMap.get(layout)">
+          {{ signalStrengthLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
index 2d596fd468..450f8227fa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
@@ -30,7 +30,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="initialState"></tb-get-value-action-settings>
+      formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
@@ -41,7 +41,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="disabledState"></tb-get-value-action-settings>
+      formControlName="disabledState"></tb-get-value-action-settings>
     </div>
   </div>
   <div class="tb-form-panel">
@@ -52,12 +52,14 @@
                                       'lt-sm': 1,
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.status-widget.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of statusWidgetLayouts"
-                                    [value]="layout"
-                                    [image]="statusWidgetLayoutImageMap.get(layout)">
-        {{ statusWidgetLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.status-widget.layout' | translate }}" formControlName="layout">
+      @for (layout of statusWidgetLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="statusWidgetLayoutImageMap.get(layout)">
+          {{ statusWidgetLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
   </div>
   <div class="tb-form-panel">
@@ -69,16 +71,18 @@
         <tb-toggle-option value="off">{{ 'widgets.status-widget.off' | translate }}</tb-toggle-option>
       </tb-toggle-select>
     </div>
-    <tb-status-widget-state-settings
-        *ngIf="cardStyleMode === 'on'"
+    @if (cardStyleMode === 'on') {
+      <tb-status-widget-state-settings
         [layout]="statusWidgetConfigForm.get('layout').value"
         formControlName="onState">
-    </tb-status-widget-state-settings>
-    <tb-status-widget-state-settings
-        *ngIf="cardStyleMode === 'off'"
+      </tb-status-widget-state-settings>
+    }
+    @if (cardStyleMode === 'off') {
+      <tb-status-widget-state-settings
         [layout]="statusWidgetConfigForm.get('layout').value"
         formControlName="offState">
-    </tb-status-widget-state-settings>
+      </tb-status-widget-state-settings>
+    }
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
@@ -102,6 +106,6 @@
     </div>
   </div>
   <tb-widget-actions-panel
-      formControlName="actions">
+    formControlName="actions">
   </tb-widget-actions-panel>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/map/map-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/map/map-basic-config.component.html
index 3d1f05fb4b..bfbdc25d9e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/map/map-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/map/map-basic-config.component.html
@@ -16,10 +16,12 @@
 
 -->
 <ng-container [formGroup]="mapWidgetConfigForm">
-  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
-                              [onlyHistoryTimewindow]="onlyHistoryTimewindow"
-                              formControlName="timewindowConfig">
-  </tb-timewindow-config-panel>
+  @if (displayTimewindowConfig) {
+    <tb-timewindow-config-panel
+      [onlyHistoryTimewindow]="onlyHistoryTimewindow"
+      formControlName="timewindowConfig">
+    </tb-timewindow-config-panel>
+  }
   <tb-map-settings
     [trip]="trip"
     [functionsOnly]="functionsOnly"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
index 606f092199..8b34ffa0c8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
@@ -30,7 +30,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="initialState"></tb-get-value-action-settings>
+      formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-on-hint' | translate}}" translate>widgets.rpc-state.turn-on</div>
@@ -39,7 +39,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="onUpdateState"></tb-set-value-action-settings>
+      formControlName="onUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-off-hint' | translate}}" translate>widgets.rpc-state.turn-off</div>
@@ -48,7 +48,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="offUpdateState"></tb-set-value-action-settings>
+      formControlName="offUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
@@ -59,7 +59,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="disabledState"></tb-get-value-action-settings>
+      formControlName="disabledState"></tb-get-value-action-settings>
     </div>
   </div>
   <div class="tb-form-panel">
@@ -70,12 +70,14 @@
                                       'lt-sm': 1,
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.single-switch.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of singleSwitchLayouts"
-                                    [value]="layout"
-                                    [image]="singleSwitchLayoutImageMap.get(layout)">
-        {{ singleSwitchLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.single-switch.layout' | translate }}" formControlName="layout">
+      @for (layout of singleSwitchLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="singleSwitchLayoutImageMap.get(layout)">
+          {{ singleSwitchLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="autoScale">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
index b6566c181e..d9bd4b82f2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
@@ -27,7 +27,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="initialState"></tb-get-value-action-settings>
+      formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}" translate>widgets.slider.on-value-change</div>
@@ -37,7 +37,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="valueChange"></tb-set-value-action-settings>
+      formControlName="valueChange"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
@@ -48,7 +48,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="disabledState"></tb-get-value-action-settings>
+      formControlName="disabledState"></tb-get-value-action-settings>
     </div>
   </div>
   <div class="tb-form-panel">
@@ -59,12 +59,14 @@
                                       'lt-sm': 1,
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.slider.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of sliderLayouts"
-                                    [value]="layout"
-                                    [image]="sliderLayoutImageMap.get(layout)">
-        {{ sliderLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.slider.layout' | translate }}" formControlName="layout">
+      @for (layout of sliderLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="sliderLayoutImageMap.get(layout)">
+          {{ sliderLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="autoScale">
@@ -117,25 +119,27 @@
         </tb-color-input>
       </div>
     </div>
-    <div *ngIf="sliderWidgetConfigForm.get('layout').value !== sliderLayout.simplified" class="tb-form-row column-xs">
-      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
-        {{ 'widgets.slider.value' | translate }}
-      </mat-slide-toggle>
-      <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <tb-unit-input class="flex" formControlName="valueUnits" supportsUnitConversion></tb-unit-input>
-        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
-          <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
-        </mat-form-field>
-        <tb-font-settings formControlName="valueFont"
-                          [previewText]="valuePreviewFn">
-        </tb-font-settings>
-        <tb-color-input asBoxInput
-                        colorClearButton
-                        formControlName="valueColor">
-        </tb-color-input>
+    @if (sliderWidgetConfigForm.get('layout').value !== sliderLayout.simplified) {
+      <div class="tb-form-row column-xs">
+        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
+          {{ 'widgets.slider.value' | translate }}
+        </mat-slide-toggle>
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
+          <tb-unit-input class="flex" formControlName="valueUnits" supportsUnitConversion></tb-unit-input>
+          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+            <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+            <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
+          </mat-form-field>
+          <tb-font-settings formControlName="valueFont"
+                            [previewText]="valuePreviewFn">
+          </tb-font-settings>
+          <tb-color-input asBoxInput
+                          colorClearButton
+                          formControlName="valueColor">
+          </tb-color-input>
+        </div>
       </div>
-    </div>
+    }
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.slider.range' | translate }}</div>
       <div class="flex flex-row items-center justify-start gap-2">
@@ -213,44 +217,48 @@
         </div>
       </div>
     </div>
-    <div *ngIf="sliderWidgetConfigForm.get('layout').value === sliderLayout.extended"
-         class="tb-form-row column-xs">
-      <div class="fixed-title-width">
-        {{ 'widgets.slider.left-icon' | translate }}
-      </div>
-      <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
-          <input matInput type="number" min="0" formControlName="leftIconSize" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
-        <tb-css-unit-select class="flex-1" formControlName="leftIconSizeUnit"></tb-css-unit-select>
-        <tb-material-icon-select asBoxInput
-                                 [color]="sliderWidgetConfigForm.get('leftIconColor').value"
-                                 formControlName="leftIcon">
-        </tb-material-icon-select>
-        <tb-color-input asBoxInput
-                        formControlName="leftIconColor">
-        </tb-color-input>
-      </div>
-    </div>
-    <div *ngIf="sliderWidgetConfigForm.get('layout').value === sliderLayout.extended"
-         class="tb-form-row column-xs">
-      <div class="fixed-title-width">
-        {{ 'widgets.slider.right-icon' | translate }}
+    @if (sliderWidgetConfigForm.get('layout').value === sliderLayout.extended) {
+      <div
+        class="tb-form-row column-xs">
+        <div class="fixed-title-width">
+          {{ 'widgets.slider.left-icon' | translate }}
+        </div>
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
+          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+            <input matInput type="number" min="0" formControlName="leftIconSize" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+          <tb-css-unit-select class="flex-1" formControlName="leftIconSizeUnit"></tb-css-unit-select>
+          <tb-material-icon-select asBoxInput
+                                   [color]="sliderWidgetConfigForm.get('leftIconColor').value"
+                                   formControlName="leftIcon">
+          </tb-material-icon-select>
+          <tb-color-input asBoxInput
+                          formControlName="leftIconColor">
+          </tb-color-input>
+        </div>
       </div>
-      <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
-          <input matInput type="number" min="0" formControlName="rightIconSize" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
-        <tb-css-unit-select class="flex-1" formControlName="rightIconSizeUnit"></tb-css-unit-select>
-        <tb-material-icon-select asBoxInput
-                                 [color]="sliderWidgetConfigForm.get('rightIconColor').value"
-                                 formControlName="rightIcon">
-        </tb-material-icon-select>
-        <tb-color-input asBoxInput
-                        formControlName="rightIconColor">
-        </tb-color-input>
+    }
+    @if (sliderWidgetConfigForm.get('layout').value === sliderLayout.extended) {
+      <div
+        class="tb-form-row column-xs">
+        <div class="fixed-title-width">
+          {{ 'widgets.slider.right-icon' | translate }}
+        </div>
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
+          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+            <input matInput type="number" min="0" formControlName="rightIconSize" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+          <tb-css-unit-select class="flex-1" formControlName="rightIconSizeUnit"></tb-css-unit-select>
+          <tb-material-icon-select asBoxInput
+                                   [color]="sliderWidgetConfigForm.get('rightIconColor').value"
+                                   formControlName="rightIcon">
+          </tb-material-icon-select>
+          <tb-color-input asBoxInput
+                          formControlName="rightIconColor">
+          </tb-color-input>
+        </div>
       </div>
-    </div>
+    }
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
@@ -279,6 +287,6 @@
     </div>
   </div>
   <tb-widget-actions-panel
-      formControlName="actions">
+    formControlName="actions">
   </tb-widget-actions-panel>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.html
index d9c654f17b..d2d1e65491 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.html
@@ -27,7 +27,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="initialState"></tb-get-value-action-settings>
+      formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.value-stepper.left-button-click-hint' | translate}}" translate>widgets.value-stepper.left-button-click</div>
@@ -37,7 +37,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="leftButtonClick"></tb-set-value-action-settings>
+      formControlName="leftButtonClick"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.value-stepper.right-button-click-hint' | translate}}" translate>widgets.value-stepper.right-button-click</div>
@@ -47,7 +47,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="rightButtonClick"></tb-set-value-action-settings>
+      formControlName="rightButtonClick"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
@@ -58,7 +58,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="disabledState"></tb-get-value-action-settings>
+      formControlName="disabledState"></tb-get-value-action-settings>
     </div>
   </div>
   <div class="tb-form-panel" formGroupName="appearance">
@@ -69,12 +69,14 @@
                                       'lt-sm': 1,
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.button.layout' | translate }}" formControlName="type">
-      <tb-image-cards-select-option *ngFor="let type of valueStepperTypes"
-                                    [value]="type"
-                                    [image]="valueStepperTypeImageMap.get(type)">
-        {{ valueStepperTypeTranslationMap.get(type) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.button.layout' | translate }}" formControlName="type">
+      @for (type of valueStepperTypes; track type) {
+        <tb-image-cards-select-option
+          [value]="type"
+          [image]="valueStepperTypeImageMap.get(type)">
+          {{ valueStepperTypeTranslationMap.get(type) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="autoScale">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
index 3727cd0952..af1cb2d514 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
@@ -16,10 +16,12 @@
 
 -->
 <ng-container [formGroup]="windSpeedDirectionWidgetConfigForm">
-  <tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
-                              [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-                              formControlName="timewindowConfig">
-  </tb-timewindow-config-panel>
+  @if (displayTimewindowConfig) {
+    <tb-timewindow-config-panel
+      [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+      formControlName="timewindowConfig">
+    </tb-timewindow-config-panel>
+  }
   <tb-datasources
     [configMode]="basicMode"
     hideDataKeys
@@ -42,15 +44,19 @@
                          hideDataKeyDecimals
                          hideDataKeyUnits>
         </tb-data-key-row>
-        <tb-font-settings *ngIf="!windSpeedDirectionWidgetConfigForm.get('centerValueKey').value"
-                          formControlName="centerValueFont"
-                          [autoScale]="true"
-                          [initialPreviewStyle]="{ color: windSpeedDirectionWidgetConfigForm.get('centerValueColor').value?.color }"
-                          [previewText]="centerValuePreviewFn">
-        </tb-font-settings>
-        <tb-color-settings *ngIf="!windSpeedDirectionWidgetConfigForm.get('centerValueKey').value"
-                           formControlName="centerValueColor" settingsKey="{{'widgets.wind-speed-direction.wind-direction' | translate }}">
-        </tb-color-settings>
+        @if (!windSpeedDirectionWidgetConfigForm.get('centerValueKey').value) {
+          <tb-font-settings
+            formControlName="centerValueFont"
+            [autoScale]="true"
+            [initialPreviewStyle]="{ color: windSpeedDirectionWidgetConfigForm.get('centerValueColor').value?.color }"
+            [previewText]="centerValuePreviewFn">
+          </tb-font-settings>
+        }
+        @if (!windSpeedDirectionWidgetConfigForm.get('centerValueKey').value) {
+          <tb-color-settings
+            formControlName="centerValueColor" settingsKey="{{'widgets.wind-speed-direction.wind-direction' | translate }}">
+          </tb-color-settings>
+        }
       </div>
     </div>
     <div class="tb-form-row column-xs">
@@ -64,15 +70,19 @@
                          hideDataKeyLabel
                          hideDataKeyColor>
         </tb-data-key-row>
-        <tb-font-settings *ngIf="windSpeedDirectionWidgetConfigForm.get('centerValueKey').value"
-                          formControlName="centerValueFont"
-                          [autoScale]="true"
-                          [initialPreviewStyle]="{ color: windSpeedDirectionWidgetConfigForm.get('centerValueColor').value?.color }"
-                          [previewText]="centerValuePreviewFn">
-        </tb-font-settings>
-        <tb-color-settings *ngIf="windSpeedDirectionWidgetConfigForm.get('centerValueKey').value"
-                           formControlName="centerValueColor" settingsKey="{{'widgets.wind-speed-direction.center-value' | translate }}">
-        </tb-color-settings>
+        @if (windSpeedDirectionWidgetConfigForm.get('centerValueKey').value) {
+          <tb-font-settings
+            formControlName="centerValueFont"
+            [autoScale]="true"
+            [initialPreviewStyle]="{ color: windSpeedDirectionWidgetConfigForm.get('centerValueColor').value?.color }"
+            [previewText]="centerValuePreviewFn">
+          </tb-font-settings>
+        }
+        @if (windSpeedDirectionWidgetConfigForm.get('centerValueKey').value) {
+          <tb-color-settings
+            formControlName="centerValueColor" settingsKey="{{'widgets.wind-speed-direction.center-value' | translate }}">
+          </tb-color-settings>
+        }
       </div>
     </div>
   </div>
@@ -83,12 +93,14 @@
                                     breakpoints: {
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.wind-speed-direction.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of windSpeedDirectionLayouts"
-                                    [value]="layout"
-                                    [image]="windSpeedDirectionLayoutImageMap.get(layout)">
-        {{ windSpeedDirectionLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.wind-speed-direction.layout' | translate }}" formControlName="layout">
+      @for (layout of windSpeedDirectionLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="windSpeedDirectionLayoutImageMap.get(layout)">
+          {{ windSpeedDirectionLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html b/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
index 1dacf0cd22..0a276dcbfd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
@@ -16,106 +16,126 @@
 
 -->
 <section class="tb-datasource-section tb-form-panel outlined" [formGroup]="datasourceFormGroup">
-  <mat-form-field *ngIf="!basicMode" class="tb-datasource-type" hideRequiredMarker appearance="outline">
-    <mat-label translate>widget-config.datasource-type</mat-label>
-    <mat-select formControlName="type">
-      <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
-        {{ datasourceTypesTranslations.get(datasourceType) | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-  <section class="flex flex-col" [ngSwitch]="datasourceFormGroup.get('type').value">
-    <ng-template [ngSwitchCase]="datasourceType.function">
-      <mat-form-field *ngIf="!hideDatasourceLabel" class="flex-1">
-        <mat-label translate>datasource.label</mat-label>
-        <input matInput
-               formControlName="name">
-      </mat-form-field>
-    </ng-template>
-    <ng-template [ngSwitchCase]="datasourceFormGroup.get('type').value === datasourceType.device ||
-                                 datasourceFormGroup.get('type').value === datasourceType.entity ||
-                                 datasourceFormGroup.get('type').value === datasourceType.entityCount ||
-                                 datasourceFormGroup.get('type').value === datasourceType.alarmCount ? datasourceFormGroup.get('type').value : ''">
-      <tb-alarm-filter-config *ngIf="datasourceFormGroup.get('type').value === datasourceType.alarmCount && !hideAlarmFilter"
-                              [initialAlarmFilterConfig]="{ statusList: [alarmSearchStatus.ACTIVE] }"
-                              style="height: 56px; margin-bottom: 22px;"
-                              formControlName="alarmFilterConfig"></tb-alarm-filter-config>
-      <tb-entity-autocomplete *ngIf="datasourceFormGroup.get('type').value === datasourceType.device"
-                              [required]="!datasourcesOptional"
-                              [entityType]="entityType.DEVICE"
-                              appearance="outline"
-                              formControlName="deviceId">
-      </tb-entity-autocomplete>
-      <tb-entity-alias-select
-        *ngIf="datasourceFormGroup.get('type').value !== datasourceType.device"
-        [showLabel]="true"
-        appearance="outline"
-        [tbRequired]="!entityAliasOptional"
-        [aliasController]="aliasController"
-        formControlName="entityAliasId"
-        [callbacks]="entityAliasSelectCallbacks">
-      </tb-entity-alias-select>
-      <mat-form-field *ngIf="!hideDatasourceLabel && [datasourceType.entityCount, datasourceType.alarmCount].includes(datasourceFormGroup.get('type').value)"
-                      class="flex-1" appearance="outline">
-        <input matInput
-               placeholder="{{ 'datasource.label' | translate }}"
-               formControlName="name">
-      </mat-form-field>
-    </ng-template>
+  @if (!basicMode) {
+    <mat-form-field class="tb-datasource-type" hideRequiredMarker appearance="outline">
+      <mat-label translate>widget-config.datasource-type</mat-label>
+      <mat-select formControlName="type">
+        @for (datasourceType of datasourceTypes; track datasourceType) {
+          <mat-option [value]="datasourceType">
+            {{ datasourceTypesTranslations.get(datasourceType) | translate }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  }
+  <section class="flex flex-col">
+    @switch (datasourceFormGroup.get('type').value) {
+      @case (datasourceType.function) {
+        @if (!hideDatasourceLabel) {
+          <mat-form-field class="flex-1">
+            <mat-label translate>datasource.label</mat-label>
+            <input matInput
+                   formControlName="name">
+          </mat-form-field>
+        }
+      }
+      @case (datasourceFormGroup.get('type').value === datasourceType.device ||
+        datasourceFormGroup.get('type').value === datasourceType.entity ||
+        datasourceFormGroup.get('type').value === datasourceType.entityCount ||
+        datasourceFormGroup.get('type').value === datasourceType.alarmCount ? datasourceFormGroup.get('type').value : '') {
+        @if (datasourceFormGroup.get('type').value === datasourceType.alarmCount && !hideAlarmFilter) {
+          <tb-alarm-filter-config
+            [initialAlarmFilterConfig]="{ statusList: [alarmSearchStatus.ACTIVE] }"
+            style="height: 56px; margin-bottom: 22px;"
+          formControlName="alarmFilterConfig"></tb-alarm-filter-config>
+        }
+        @if (datasourceFormGroup.get('type').value === datasourceType.device) {
+          <tb-entity-autocomplete
+            [required]="!datasourcesOptional"
+            [entityType]="entityType.DEVICE"
+            appearance="outline"
+            formControlName="deviceId">
+          </tb-entity-autocomplete>
+        }
+        @if (datasourceFormGroup.get('type').value !== datasourceType.device) {
+          <tb-entity-alias-select
+            [showLabel]="true"
+            appearance="outline"
+            [tbRequired]="!entityAliasOptional"
+            [aliasController]="aliasController"
+            formControlName="entityAliasId"
+            [callbacks]="entityAliasSelectCallbacks">
+          </tb-entity-alias-select>
+        }
+        @if (!hideDatasourceLabel && [datasourceType.entityCount, datasourceType.alarmCount].includes(datasourceFormGroup.get('type').value)) {
+          <mat-form-field
+            class="flex-1" appearance="outline">
+            <input matInput
+                   placeholder="{{ 'datasource.label' | translate }}"
+                   formControlName="name">
+          </mat-form-field>
+        }
+      }
+    }
   </section>
-  <section *ngIf="!hideDataKeys" class="flex flex-1 flex-col items-stretch justify-start">
-    <tb-data-keys class="tb-data-keys flex-1"
-                  appearance="outline"
-                  [widgetType]="widgetType"
-                  [datasourceType]="datasourceFormGroup.get('type').value"
-                  [hideDataKeyLabel]="hideDataKeyLabel"
-                  [hideDataKeyColor]="hideDataKeyColor"
-                  [hideDataKeyUnits]="hideDataKeyUnits"
-                  [hideDataKeyDecimals]="hideDataKeyDecimals"
-                  [maxDataKeys]="maxDataKeys"
-                  [supportsUnitConversion]="supportsUnitConversion"
-                  [optDataKeys]="isDataKeysOptional(datasourceFormGroup.get('type').value)"
-                  [simpleDataKeysLabel]="!hasAdditionalLatestDataKeys"
-                  [aliasController]="aliasController"
-                  [dataKeySettingsForm]="dataKeySettingsForm"
-                  [dataKeySettingsDirective]="dataKeySettingsDirective"
-                  [datakeySettingsFunction]="dataKeySettingsFunction"
-                  [dashboard]="dashboard"
-                  [widget]="widget"
-                  [callbacks]="callbacks"
-                  [entityAliasId]="datasourceFormGroup.get('entityAliasId').value"
-                  [deviceId]="datasourceFormGroup.get('deviceId').value"
-                  formControlName="dataKeys">
-    </tb-data-keys>
-    <tb-data-keys *ngIf="hasAdditionalLatestDataKeys" class="tb-data-keys flex-1"
-                  appearance="outline"
-                  [widgetType]="widgetTypes.latest"
-                  [datasourceType]="datasourceFormGroup.get('type').value"
-                  [hideDataKeyLabel]="hideDataKeyLabel"
-                  [hideDataKeyColor]="hideDataKeyColor"
-                  [hideDataKeyUnits]="hideDataKeyUnits"
-                  [hideDataKeyDecimals]="hideDataKeyDecimals"
-                  latestDataKeys
-                  [supportsUnitConversion]="supportsUnitConversion"
-                  [optDataKeys]="true"
-                  [aliasController]="aliasController"
-                  [dataKeySettingsForm]="latestDataKeySettingsForm"
-                  [dataKeySettingsDirective]="latestDataKeySettingsDirective"
-                  [datakeySettingsFunction]="dataKeySettingsFunction"
-                  [dashboard]="dashboard"
-                  [widget]="widget"
-                  [callbacks]="callbacks"
-                  [entityAliasId]="datasourceFormGroup.get('entityAliasId').value"
-                  [deviceId]="datasourceFormGroup.get('deviceId').value"
-                  formControlName="latestDataKeys">
-    </tb-data-keys>
-  </section>
-  <tb-filter-select
-    *ngIf="(!basicMode || displayDatasourceFilterForBasicMode) && ![datasourceType.function].includes(datasourceFormGroup.get('type').value)"
-    appearance="outline"
-    [showLabel]="true"
-    [aliasController]="aliasController"
-    formControlName="filterId"
-    [callbacks]="filterSelectCallbacks">
-  </tb-filter-select>
+  @if (!hideDataKeys) {
+    <section class="flex flex-1 flex-col items-stretch justify-start">
+      <tb-data-keys class="tb-data-keys flex-1"
+                    appearance="outline"
+                    [widgetType]="widgetType"
+                    [datasourceType]="datasourceFormGroup.get('type').value"
+                    [hideDataKeyLabel]="hideDataKeyLabel"
+                    [hideDataKeyColor]="hideDataKeyColor"
+                    [hideDataKeyUnits]="hideDataKeyUnits"
+                    [hideDataKeyDecimals]="hideDataKeyDecimals"
+                    [maxDataKeys]="maxDataKeys"
+                    [supportsUnitConversion]="supportsUnitConversion"
+                    [optDataKeys]="isDataKeysOptional(datasourceFormGroup.get('type').value)"
+                    [simpleDataKeysLabel]="!hasAdditionalLatestDataKeys"
+                    [aliasController]="aliasController"
+                    [dataKeySettingsForm]="dataKeySettingsForm"
+                    [dataKeySettingsDirective]="dataKeySettingsDirective"
+                    [datakeySettingsFunction]="dataKeySettingsFunction"
+                    [dashboard]="dashboard"
+                    [widget]="widget"
+                    [callbacks]="callbacks"
+                    [entityAliasId]="datasourceFormGroup.get('entityAliasId').value"
+                    [deviceId]="datasourceFormGroup.get('deviceId').value"
+                    formControlName="dataKeys">
+      </tb-data-keys>
+      @if (hasAdditionalLatestDataKeys) {
+        <tb-data-keys class="tb-data-keys flex-1"
+                      appearance="outline"
+                      [widgetType]="widgetTypes.latest"
+                      [datasourceType]="datasourceFormGroup.get('type').value"
+                      [hideDataKeyLabel]="hideDataKeyLabel"
+                      [hideDataKeyColor]="hideDataKeyColor"
+                      [hideDataKeyUnits]="hideDataKeyUnits"
+                      [hideDataKeyDecimals]="hideDataKeyDecimals"
+                      latestDataKeys
+                      [supportsUnitConversion]="supportsUnitConversion"
+                      [optDataKeys]="true"
+                      [aliasController]="aliasController"
+                      [dataKeySettingsForm]="latestDataKeySettingsForm"
+                      [dataKeySettingsDirective]="latestDataKeySettingsDirective"
+                      [datakeySettingsFunction]="dataKeySettingsFunction"
+                      [dashboard]="dashboard"
+                      [widget]="widget"
+                      [callbacks]="callbacks"
+                      [entityAliasId]="datasourceFormGroup.get('entityAliasId').value"
+                      [deviceId]="datasourceFormGroup.get('deviceId').value"
+                      formControlName="latestDataKeys">
+        </tb-data-keys>
+      }
+    </section>
+  }
+  @if ((!basicMode || displayDatasourceFilterForBasicMode) && ![datasourceType.function].includes(datasourceFormGroup.get('type').value)) {
+    <tb-filter-select
+      appearance="outline"
+      [showLabel]="true"
+      [aliasController]="aliasController"
+      formControlName="filterId"
+      [callbacks]="filterSelectCallbacks">
+    </tb-filter-select>
+  }
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
index f1f80b9248..f77c7c3ab4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
@@ -19,23 +19,30 @@
   <div class="flex flex-col">
     <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title">{{ (singleDatasource ? (isAlarmSource ? 'widget-config.alarm-source' : 'widget-config.datasource') : 'widget-config.datasources') | translate }}</div>
-      <div class="flex flex-1 flex-row items-center justify-center" *ngIf="timeseriesKeyError">
-        <mat-error >{{ 'widget-config.timeseries-key-error' | translate }}</mat-error>
-      </div>
-      <tb-toggle-select *ngIf="basicMode && !hideDatasourcesMode" [ngModel]="datasourcesMode" (ngModelChange)="datasourcesModeChange($event)"
-                        [ngModelOptions]="{ standalone: true }">
-        <tb-toggle-option [value]="datasourceType.device">{{ 'device.device' | translate }}</tb-toggle-option>
-        <tb-toggle-option [value]="datasourceType.entity">{{ 'entity.entity-alias' | translate }}</tb-toggle-option>
-      </tb-toggle-select>
+      @if (timeseriesKeyError) {
+        <div class="flex flex-1 flex-row items-center justify-center">
+          <mat-error >{{ 'widget-config.timeseries-key-error' | translate }}</mat-error>
+        </div>
+      }
+      @if (basicMode && !hideDatasourcesMode) {
+        <tb-toggle-select [ngModel]="datasourcesMode" (ngModelChange)="datasourcesModeChange($event)"
+                          [ngModelOptions]="{ standalone: true }">
+          <tb-toggle-option [value]="datasourceType.device">{{ 'device.device' | translate }}</tb-toggle-option>
+          <tb-toggle-option [value]="datasourceType.entity">{{ 'entity.entity-alias' | translate }}</tb-toggle-option>
+        </tb-toggle-select>
+      }
     </div>
-    <div *ngIf="maxDatasources > 1"
-         class="tb-form-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: maxDatasources} }}</div>
+    @if (maxDatasources > 1) {
+      <div
+      class="tb-form-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: maxDatasources} }}</div>
+    }
   </div>
-  <div *ngIf="datasourcesFormArray.length === 0; else datasourcesTemplate">
-                <span translate
-                      class="tb-prompt flex items-center justify-center">datasource.add-datasource-prompt</span>
-  </div>
-  <ng-template #datasourcesTemplate>
+  @if (datasourcesFormArray.length === 0) {
+    <div>
+      <span translate
+      class="tb-prompt flex items-center justify-center">datasource.add-datasource-prompt</span>
+    </div>
+  } @else {
     <div style="overflow: auto;">
       <mat-list class="tb-drop-list"
                 cdkDropList
@@ -43,50 +50,60 @@
                 (cdkDropListDropped)="onDatasourceDrop($event)"
                 [cdkDropListDisabled]="dragDisabled"
                 formArrayName="datasources">
-        <mat-list-item *ngFor="let datasourceControl of datasourcesControls; trackBy: trackByDatasource; let $index = index;"
-                       class="tb-datasource-list-item tb-draggable" cdkDrag
-                       [cdkDragDisabled]="dragDisabled">
-          <div class="tb-datasource-row">
-            <div *ngIf="!singleDatasource" class="tb-datasource-index-container">
-              <div class="tb-datasource-index">{{$index + 1}}</div>
-            </div>
-            <div class="tb-datasource-params">
-              <div class="tb-datasource-item">
-                <tb-datasource [formControl]="datasourceControl">
-                </tb-datasource>
-                <div *ngIf="!singleDatasource && !disabled" class="tb-datasource-buttons">
-                  <button class="tb-box-button" type="button"
-                          mat-icon-button
-                          (click)="removeDatasource($index)"
-                          matTooltip="{{ 'widget-config.remove-datasource' | translate }}"
-                          matTooltipPosition="above">
-                    <mat-icon>delete</mat-icon>
-                  </button>
-                  <button *ngIf="!dragDisabled"
+        @for (datasourceControl of datasourcesControls; track trackByDatasource($index, datasourceControl)) {
+          <mat-list-item
+            class="tb-datasource-list-item tb-draggable" cdkDrag
+            [cdkDragDisabled]="dragDisabled">
+            <div class="tb-datasource-row">
+              @if (!singleDatasource) {
+                <div class="tb-datasource-index-container">
+                  <div class="tb-datasource-index">{{$index + 1}}</div>
+                </div>
+              }
+              <div class="tb-datasource-params">
+                <div class="tb-datasource-item">
+                  <tb-datasource [formControl]="datasourceControl">
+                  </tb-datasource>
+                  @if (!singleDatasource && !disabled) {
+                    <div class="tb-datasource-buttons">
+                      <button class="tb-box-button" type="button"
+                              mat-icon-button
+                              (click)="removeDatasource($index)"
+                              matTooltip="{{ 'widget-config.remove-datasource' | translate }}"
+                              matTooltipPosition="above">
+                        <mat-icon>delete</mat-icon>
+                      </button>
+                      @if (!dragDisabled) {
+                        <button
                           class="tb-box-button"
                           mat-icon-button
                           type="button"
                           cdkDragHandle
                           matTooltip="{{ 'action.drag' | translate }}"
                           matTooltipPosition="above">
-                    <mat-icon>drag_indicator</mat-icon>
-                  </button>
+                          <mat-icon>drag_indicator</mat-icon>
+                        </button>
+                      }
+                    </div>
+                  }
                 </div>
+                <tb-error class="tb-datasource-error" [error]="datasourceError[$index] ? datasourceError[$index] : ''"></tb-error>
               </div>
-              <tb-error class="tb-datasource-error" [error]="datasourceError[$index] ? datasourceError[$index] : ''"></tb-error>
             </div>
-          </div>
-        </mat-list-item>
+          </mat-list-item>
+        }
       </mat-list>
     </div>
-  </ng-template>
-  <div *ngIf="showAddDatasource">
-    <button type="button"
-            mat-stroked-button color="primary"
-            (click)="addDatasource()"
-            matTooltip="{{ 'widget-config.add-datasource' | translate }}"
-            matTooltipPosition="above">
-      <span translate>widget-config.add-datasource</span>
-    </button>
-  </div>
+  }
+  @if (showAddDatasource) {
+    <div>
+      <button type="button"
+              mat-stroked-button color="primary"
+              (click)="addDatasource()"
+              matTooltip="{{ 'widget-config.add-datasource' | translate }}"
+              matTooltipPosition="above">
+        <span translate>widget-config.add-datasource</span>
+      </button>
+    </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
index d44c668be8..7c8a8b4a8b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
@@ -23,16 +23,19 @@
       <tb-toggle-option [value]="targetDeviceType.entity">{{ 'entity.entity-alias' | translate }}</tb-toggle-option>
     </tb-toggle-select>
   </div>
-  <tb-entity-autocomplete *ngIf="targetDeviceFormGroup.get('type').value === targetDeviceType.device"
-                          [required]="(!widgetEditMode && !targetDeviceOptional)"
-                          [entityType]="entityType.DEVICE"
-                          formControlName="deviceId">
-  </tb-entity-autocomplete>
-  <tb-entity-alias-select
-    *ngIf="targetDeviceFormGroup.get('type').value === targetDeviceType.entity"
-    [tbRequired]="(!widgetEditMode && !targetDeviceOptional)"
-    [aliasController]="aliasController"
-    [callbacks]="entityAliasSelectCallbacks"
-    formControlName="entityAliasId">
-  </tb-entity-alias-select>
+  @if (targetDeviceFormGroup.get('type').value === targetDeviceType.device) {
+    <tb-entity-autocomplete
+      [required]="(!widgetEditMode && !targetDeviceOptional)"
+      [entityType]="entityType.DEVICE"
+      formControlName="deviceId">
+    </tb-entity-autocomplete>
+  }
+  @if (targetDeviceFormGroup.get('type').value === targetDeviceType.entity) {
+    <tb-entity-alias-select
+      [tbRequired]="(!widgetEditMode && !targetDeviceOptional)"
+      [aliasController]="aliasController"
+      [callbacks]="entityAliasSelectCallbacks"
+      formControlName="entityAliasId">
+    </tb-entity-alias-select>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
index 75179512c9..a31ad603f1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
@@ -23,12 +23,15 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div class="dashboard-state-dialog-content flex flex-1 flex-col" mat-dialog-content style="padding: 8px;">
     <tb-dashboard-page [embedded]="true" [syncStateWithQueryParam]="false" [hideToolbar]="hideToolbar"
-                       [currentState]="state" [dashboard]="dashboard" [parentDashboard]="parentDashboard" style="width: 100%; height: 100%;"></tb-dashboard-page>
+    [currentState]="state" [dashboard]="dashboard" [parentDashboard]="parentDashboard" style="width: 100%; height: 100%;"></tb-dashboard-page>
   </div>
   <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
index 932624125d..33c0711cf8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
@@ -39,30 +39,34 @@
     </mat-toolbar>
     <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="alarmsDatasource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-                <span>
-                  {{ translate.get('alarm.selected-alarms',
-                  {count: alarmsDatasource.selection.selected.length}) | async }}
-                </span>
+        <span>
+          {{ translate.get('alarm.selected-alarms',
+          {count: alarmsDatasource.selection.selected.length}) | async }}
+        </span>
         <span class="flex-1"></span>
-        <button *ngIf="allowAcknowledgment"
-                mat-icon-button
-                matTooltip="{{ 'alarm.acknowledge' | translate }}"
-                matTooltipPosition="above"
-                (click)="ackAlarms($event)">
-          <mat-icon>done</mat-icon>
-        </button>
-        <button *ngIf="ctx.settings.allowClear"
-                mat-icon-button
-                matTooltip="{{ 'alarm.clear' | translate }}"
-                matTooltipPosition="above"
-                (click)="clearAlarms($event)">
-          <mat-icon>clear</mat-icon>
-        </button>
+        @if (allowAcknowledgment) {
+          <button
+            mat-icon-button
+            matTooltip="{{ 'alarm.acknowledge' | translate }}"
+            matTooltipPosition="above"
+            (click)="ackAlarms($event)">
+            <mat-icon>done</mat-icon>
+          </button>
+        }
+        @if (ctx.settings.allowClear) {
+          <button
+            mat-icon-button
+            matTooltip="{{ 'alarm.clear' | translate }}"
+            matTooltipPosition="above"
+            (click)="clearAlarms($event)">
+            <mat-icon>clear</mat-icon>
+          </button>
+        }
       </div>
     </mat-toolbar>
     <div class="table-container flex-1">
       <table mat-table [dataSource]="alarmsDatasource" [trackBy]="trackByAlarmId"
-                 matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
+             matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
           <mat-header-cell *matHeaderCellDef style="width: 30px;">
             <mat-checkbox (change)="$event ? alarmsDatasource.masterToggle() : null"
@@ -77,91 +81,103 @@
             </mat-checkbox>
           </mat-cell>
         </ng-container>
-        <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; let $index = index; trackBy: trackByColumnDef;">
-          <mat-header-cell [style]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="!column.sortable">
-            {{ column.title }}
-          </mat-header-cell>
-          <mat-cell *matCellDef="let alarm; let row = index"
-                    [style]="cellStyle(alarm, column, row) | async"
-                    (click)="onCellClick($event, alarm, column, $index)"
-                    [class.tb-pointer]="columnHasCellClick($index)">
-            <span [innerHTML]="cellContent(alarm, column, row) | async"></span>
-            <ng-container *ngIf="column.entityKey.key === 'assignee'">
-              <span class="assignee-cell flex flex-row items-center justify-start">
-                <span *ngIf="alarm.assigneeId && checkAssigneeHasName(alarm.assignee); else unassigned"
+        @for (column of columns; track trackByColumnDef($index, 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 alarm; let row = index"
+                      [style]="cellStyle(alarm, column, row) | async"
+                      (click)="onCellClick($event, alarm, column, $index)"
+                      [class.tb-pointer]="columnHasCellClick($index)">
+              <span [innerHTML]="cellContent(alarm, column, row) | async"></span>
+              @if (column.entityKey.key === 'assignee') {
+                <span class="assignee-cell flex flex-row items-center justify-start">
+                  @if (alarm.assigneeId && checkAssigneeHasName(alarm.assignee)) {
+                    <span
                       class="assigned-container">
-                  <span class="user-avatar" [style.backgroundColor]="getAvatarBgColor(alarm.assignee)">
-                    {{ getUserInitials(alarm.assignee) }}
-                  </span>
-                  <span [matTooltip]="getUserDisplayName(alarm.assignee)" matTooltipPosition="above">
-                    {{ getUserDisplayName(alarm.assignee) }}
-                  </span>
-                </span>
-                <ng-template #unassigned>
-                  <span class="unassigned-container">
-                    <mat-icon class="material-icons unassigned-icon">{{ alarm.assigneeId ? 'no_accounts' : 'account_circle' }}</mat-icon>
-                    <span matTooltip="{{ (alarm.assigneeId ? 'alarm.user-deleted' : 'alarm.unassigned') | translate }}"
-                          matTooltipPosition="above" style="vertical-align: middle">
-                      {{ (alarm.assigneeId ? 'alarm.user-deleted' : 'alarm.unassigned') | translate }}
+                      <span class="user-avatar" [style.backgroundColor]="getAvatarBgColor(alarm.assignee)">
+                        {{ getUserInitials(alarm.assignee) }}
+                      </span>
+                      <span [matTooltip]="getUserDisplayName(alarm.assignee)" matTooltipPosition="above">
+                        {{ getUserDisplayName(alarm.assignee) }}
+                      </span>
                     </span>
-                  </span>
-                </ng-template>
-                <button *ngIf="allowAssign"
-                        mat-icon-button
-                        matTooltip="{{ 'alarm.assign' | translate }}"
-                        matTooltipPosition="above"
-                        (click)="openAlarmAssigneePanel($event, alarm)">
-                  <mat-icon>
-                    keyboard_arrow_down
-                  </mat-icon>
-                </button>
-              </span>
-            </ng-container>
-          </mat-cell>
-        </ng-container>
+                  } @else {
+                    <span class="unassigned-container">
+                      <mat-icon class="material-icons unassigned-icon">{{ alarm.assigneeId ? 'no_accounts' : 'account_circle' }}</mat-icon>
+                      <span matTooltip="{{ (alarm.assigneeId ? 'alarm.user-deleted' : 'alarm.unassigned') | translate }}"
+                            matTooltipPosition="above" style="vertical-align: middle">
+                        {{ (alarm.assigneeId ? 'alarm.user-deleted' : 'alarm.unassigned') | translate }}
+                      </span>
+                    </span>
+                  }
+                  @if (allowAssign) {
+                    <button
+                      mat-icon-button
+                      matTooltip="{{ 'alarm.assign' | translate }}"
+                      matTooltipPosition="above"
+                      (click)="openAlarmAssigneePanel($event, alarm)">
+                      <mat-icon>
+                        keyboard_arrow_down
+                      </mat-icon>
+                    </button>
+                  }
+                </span>
+              }
+            </mat-cell>
+          </ng-container>
+        }
         <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
           <mat-header-cell *matHeaderCellDef>
-            <ng-container *ngIf="alarmsDatasource.countCellButtonAction">
+            @if (alarmsDatasource.countCellButtonAction) {
               <div class="gt-md:!hidden" style="min-width: 48px;">
               </div>
               <div class="lt-lg:!hidden"
                    [style.min-width]="(alarmsDatasource.countCellButtonAction * 48) + 'px'">
               </div>
-            </ng-container>
+            }
           </mat-header-cell>
           <mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row) | async">
-            <ng-container *ngIf="alarmsDatasource.countCellButtonAction">
+            @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'">
-                <ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                  <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
-                  <button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
-                          *ngIf="actionDescriptor.icon"
-                          matTooltip="{{ actionDescriptor.displayName }}"
-                          matTooltipPosition="above"
-                          (click)="onActionButtonClick($event, alarm, actionDescriptor)">
-                    <mat-icon>{{actionDescriptor.icon}}</mat-icon>
-                  </button>
-                </ng-container>
-              </div>
-              <div [class.!hidden]="!showCellActionsMenu || alarmsDatasource.countCellButtonAction === 1" class="gt-md:!hidden" *ngIf="alarm.hasActions">
-                <button mat-icon-button
-                        (click)="$event.stopPropagation(); ctx.detectChanges();"
-                        [matMenuTriggerFor]="cellActionsMenu">
-                  <mat-icon class="material-icons">more_vert</mat-icon>
-                </button>
-                <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                  <ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                    <button mat-menu-item *ngIf="actionDescriptor.icon"
-                            [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
+                @for (actionDescriptor of alarm.actionCellButtons; track trackByActionCellDescriptionId($index, actionDescriptor)) {
+                  @if (!actionDescriptor.icon) {
+                    <span style="width: 48px;"></span>
+                  }
+                  @if (actionDescriptor.icon) {
+                    <button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
+                            matTooltip="{{ actionDescriptor.displayName }}"
+                            matTooltipPosition="above"
                             (click)="onActionButtonClick($event, alarm, actionDescriptor)">
-                      <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                      <span>{{ actionDescriptor.displayName }}</span>
+                      <mat-icon>{{actionDescriptor.icon}}</mat-icon>
                     </button>
-                  </ng-container>
-                </mat-menu>
+                  }
+                }
               </div>
-            </ng-container>
+              @if (alarm.hasActions) {
+                <div [class.!hidden]="!showCellActionsMenu || alarmsDatasource.countCellButtonAction === 1" class="gt-md:!hidden">
+                  <button mat-icon-button
+                          (click)="$event.stopPropagation(); ctx.detectChanges();"
+                          [matMenuTriggerFor]="cellActionsMenu">
+                    <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)) {
+                      @if (actionDescriptor.icon) {
+                        <button mat-menu-item
+                                [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
+                                (click)="onActionButtonClick($event, alarm, actionDescriptor)">
+                          <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                          <span>{{ actionDescriptor.displayName }}</span>
+                        </button>
+                      }
+                    }
+                  </mat-menu>
+                </div>
+              }
+            }
           </mat-cell>
         </ng-container>
         <mat-header-row [class.mat-row-select]="enableSelection" *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
@@ -172,20 +188,24 @@
                  [class.tb-pointer]="hasRowAction"
                  *matRowDef="let alarm; columns: displayedColumns; let row = index"
                  [style]="rowStyle(alarm, row) | async"
-                 (click)="onRowClick($event, alarm)"></mat-row>
+        (click)="onRowClick($event, alarm)"></mat-row>
       </table>
       <span [class.!hidden]="(alarmsDatasource.isEmpty() | async) === false || alarmsDatasource.dataLoading"
-            class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
+      class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
       <span [class.!hidden]="!alarmsDatasource.dataLoading"
-            class="no-data-found flex items-center justify-center" >{{ 'common.loading' | translate }}</span>
+      class="no-data-found flex items-center justify-center" >{{ 'common.loading' | translate }}</span>
     </div>
-    <mat-divider *ngIf="displayPagination"></mat-divider>
-    <mat-paginator *ngIf="displayPagination"
-                   [length]="alarmsDatasource.total() | async"
-                   [pageIndex]="pageLink.page"
-                   [pageSize]="pageLink.pageSize"
-                   [pageSizeOptions]="pageSizeOptions"
-                   [hidePageSize]="hidePageSize"
-                   showFirstLastButtons></mat-paginator>
+    @if (displayPagination) {
+      <mat-divider></mat-divider>
+    }
+    @if (displayPagination) {
+      <mat-paginator
+        [length]="alarmsDatasource.total() | async"
+        [pageIndex]="pageLink.page"
+        [pageSize]="pageLink.pageSize"
+        [pageSizeOptions]="pageSizeOptions"
+        [hidePageSize]="hidePageSize"
+      showFirstLastButtons></mat-paginator>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/button/command-button-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/button/command-button-widget.component.html
index 23e6d9d7dd..067b2b182f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/button/command-button-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/button/command-button-widget.component.html
@@ -26,5 +26,7 @@
     [ctx]="ctx"
     (clicked)="onClick($event)">
   </tb-widget-button>
-  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
+  @if (loading$ | async) {
+    <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate"></mat-progress-bar>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html
index 37a9bc5ed3..92a0d87f45 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html
@@ -23,12 +23,14 @@
        [class.horizontal-fill]="horizontalFill"
        [class.vertical-fill]="verticalFill">
     <tb-widget-button
-        [appearance]="appearance"
-        [autoScale]="autoScale"
-        [disabled]="disabled || (loading$ | async)"
-        [ctx]="ctx"
-        (clicked)="onClick($event)">
+      [appearance]="appearance"
+      [autoScale]="autoScale"
+      [disabled]="disabled || (loading$ | async)"
+      [ctx]="ctx"
+      (clicked)="onClick($event)">
     </tb-widget-button>
   </div>
-  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
+  @if (loading$ | async) {
+    <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate"></mat-progress-bar>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/button/two-segment-button-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/button/two-segment-button-widget.component.html
index f1aee8b5cc..e95506704d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/button/two-segment-button-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/button/two-segment-button-widget.component.html
@@ -29,6 +29,8 @@
       (clicked)="onClick($event)">
     </tb-widget-button-toggle>
   </div>
-  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
+  @if (loading$ | async) {
+    <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate"></mat-progress-bar>
+  }
 </div>
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html
index cca727e061..1490b9074b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html
@@ -21,69 +21,83 @@
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
     <ng-container *ngTemplateOutlet="subtitleTpl"></ng-container>
   </div>
-  <ng-container *ngIf="showValues">
+  @if (showValues) {
     <ng-container *ngTemplateOutlet="valuesTpl"></ng-container>
-  </ng-container>
+  }
   <ng-container *ngTemplateOutlet="chartTpl"></ng-container>
   <ng-container *ngTemplateOutlet="dateTpl"></ng-container>
 </div>
 
 <ng-template #subtitleTpl>
-  <div *ngIf="showSubtitle" class="tb-aggregated-value-card-subtitle"
-       [style]="subtitleStyle" [style.color]="subtitleColor">{{ subtitle$ | async }}</div>
+  @if (showSubtitle) {
+    <div class="tb-aggregated-value-card-subtitle"
+    [style]="subtitleStyle" [style.color]="subtitleColor">{{ subtitle$ | async }}</div>
+  }
 </ng-template>
 <ng-template #valuesTpl>
   <div #valueCardValues class="tb-aggregated-value-card-values">
     <div #valueCardValueContainer class="tb-aggregated-value-card-values-container">
       <div class="tb-aggregated-value-card-values-section left">
-        <ng-container *ngIf="values[aggregatedValueCardKeyPosition.leftTop]">
+        @if (values[aggregatedValueCardKeyPosition.leftTop]) {
           <ng-container *ngTemplateOutlet="valueTpl; context:{value: values[aggregatedValueCardKeyPosition.leftTop]}"></ng-container>
-        </ng-container>
-        <ng-container *ngIf="values[aggregatedValueCardKeyPosition.leftBottom]">
+        }
+        @if (values[aggregatedValueCardKeyPosition.leftBottom]) {
           <ng-container *ngTemplateOutlet="valueTpl; context:{value: values[aggregatedValueCardKeyPosition.leftBottom]}"></ng-container>
-        </ng-container>
+        }
       </div>
       <div class="tb-aggregated-value-card-values-section center">
-        <ng-container *ngIf="values[aggregatedValueCardKeyPosition.center]">
+        @if (values[aggregatedValueCardKeyPosition.center]) {
           <ng-container *ngTemplateOutlet="valueTpl; context:{value: values[aggregatedValueCardKeyPosition.center]}"></ng-container>
-        </ng-container>
+        }
       </div>
       <div class="tb-aggregated-value-card-values-section right">
-        <ng-container *ngIf="values[aggregatedValueCardKeyPosition.rightTop]">
+        @if (values[aggregatedValueCardKeyPosition.rightTop]) {
           <ng-container *ngTemplateOutlet="valueTpl; context:{value: values[aggregatedValueCardKeyPosition.rightTop]}"></ng-container>
-        </ng-container>
-        <ng-container *ngIf="values[aggregatedValueCardKeyPosition.rightBottom]">
+        }
+        @if (values[aggregatedValueCardKeyPosition.rightBottom]) {
           <ng-container *ngTemplateOutlet="valueTpl; context:{value: values[aggregatedValueCardKeyPosition.rightBottom]}"></ng-container>
-        </ng-container>
+        }
       </div>
     </div>
   </div>
 </ng-template>
 <ng-template #chartTpl>
-  <div *ngIf="showChart" class="tb-aggregated-value-card-chart">
-    <div class="tb-aggregated-value-card-chart-ticks">
-      <div>{{tickMax$ | async}}</div>
-      <div>{{tickMin$ | async}}</div>
-    </div>
-    <div class="tb-aggregated-value-card-chart-container">
-      <div class="tb-aggregated-value-card-chart-element" #chartElement></div>
-      <div class="tb-aggregated-value-card-chart-boundary top left"></div>
-      <div class="tb-aggregated-value-card-chart-boundary top right"></div>
-      <div class="tb-aggregated-value-card-chart-boundary bottom left"></div>
-      <div class="tb-aggregated-value-card-chart-boundary bottom right"></div>
+  @if (showChart) {
+    <div class="tb-aggregated-value-card-chart">
+      <div class="tb-aggregated-value-card-chart-ticks">
+        <div>{{tickMax$ | async}}</div>
+        <div>{{tickMin$ | async}}</div>
+      </div>
+      <div class="tb-aggregated-value-card-chart-container">
+        <div class="tb-aggregated-value-card-chart-element" #chartElement></div>
+        <div class="tb-aggregated-value-card-chart-boundary top left"></div>
+        <div class="tb-aggregated-value-card-chart-boundary top right"></div>
+        <div class="tb-aggregated-value-card-chart-boundary bottom left"></div>
+        <div class="tb-aggregated-value-card-chart-boundary bottom right"></div>
+      </div>
     </div>
-  </div>
+  }
 </ng-template>
 <ng-template #dateTpl>
-  <div *ngIf="showDate" [style]="dateStyle" [style.color]="dateColor" [innerHTML]="dateFormat.formatted"></div>
+  @if (showDate) {
+    <div [style]="dateStyle" [style.color]="dateColor" [innerHTML]="dateFormat.formatted"></div>
+  }
 </ng-template>
 <ng-template #valueTpl let-value="value">
   <div class="tb-aggregated-value-card-value" [style]="value.style" [style.color]="value.color.color">
-    <div *ngIf="value.showArrow" class="value-arrow-container">
-      <span *ngIf="!value.upArrow && !value.downArrow" class="value-arrow"></span>
-      <tb-icon *ngIf="value.upArrow" class="value-arrow">arrow_upward</tb-icon>
-      <tb-icon *ngIf="value.downArrow" class="value-arrow">arrow_downward</tb-icon>
-    </div>
+    @if (value.showArrow) {
+      <div class="value-arrow-container">
+        @if (!value.upArrow && !value.downArrow) {
+          <span class="value-arrow"></span>
+        }
+        @if (value.upArrow) {
+          <tb-icon class="value-arrow">arrow_upward</tb-icon>
+        }
+        @if (value.downArrow) {
+          <tb-icon class="value-arrow">arrow_downward</tb-icon>
+        }
+      </div>
+    }
     <div class="value-text">
       <span>{{ value.value }}</span>
       <span class="units" [class]="{'small': value.center}">{{ value.units }}</span>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-card-widget.component.html
index c5084fd21a..fd56942e6c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-card-widget.component.html
@@ -23,7 +23,9 @@
   </div>
   <div #labelCardContent class="tb-label-card-content">
     <div #labelCardRow class="tb-label-card-row">
-      <tb-icon *ngIf="showIcon" [style]="iconStyle">{{ icon }}</tb-icon>
+      @if (showIcon) {
+        <tb-icon [style]="iconStyle">{{ icon }}</tb-icon>
+      }
       <div [class.tb-label-card-label]="!settings.autoScale" [style]="labelStyle" [innerHTML]="label | customTranslate  | safe:'html'"></div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-value-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-value-card-widget.component.html
index 289b54bb56..ea20b3521b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-value-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-value-card-widget.component.html
@@ -23,11 +23,17 @@
   </div>
   <div #labelCardContent class="tb-label-value-card-content">
     <div #labelCardRow class="tb-label-value-card-row">
-      <div *ngIf="showIcon || showLabel" class="tb-label-value-card-icon-label">
-        <tb-icon *ngIf="showIcon" [style]="iconStyle" [style.color]="iconColor.color">{{ icon }}</tb-icon>
-        <div *ngIf="showLabel" [class.tb-label-value-card-label]="!settings.autoScale" [style]="labelStyle" [style.color]="labelColor.color"
-             [innerHTML]="label$ | async | safe:'html'"></div>
-      </div>
+      @if (showIcon || showLabel) {
+        <div class="tb-label-value-card-icon-label">
+          @if (showIcon) {
+            <tb-icon [style]="iconStyle" [style.color]="iconColor.color">{{ icon }}</tb-icon>
+          }
+          @if (showLabel) {
+            <div [class.tb-label-value-card-label]="!settings.autoScale" [style]="labelStyle" [style.color]="labelColor.color"
+            [innerHTML]="label$ | async | safe:'html'"></div>
+          }
+        </div>
+      }
       <div class="tb-label-value-card-value" [style]="valueStyle" [style.color]="valueColor.color">{{ valueText }}</div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
index f486fd0594..e0a38d6eca 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
@@ -21,13 +21,14 @@
       <div class="fixed-title-width" translate>widgets.notification.notification-types</div>
       <mat-form-field floatLabel="auto" appearance="outline" subscriptSizing="dynamic" class="fb-chips flex">
         <mat-chip-grid #chipList>
-          <mat-chip-row
-            *ngFor="let type of selectedNotificationTypes"
-            removable
-            (removed)="remove(type)">
-            {{ notificationTypesTranslateMap.get(type).name | translate }}
-            <mat-icon matChipRemove>close</mat-icon>
-          </mat-chip-row>
+          @for (type of selectedNotificationTypes; track type) {
+            <mat-chip-row
+              removable
+              (removed)="remove(type)">
+              {{ notificationTypesTranslateMap.get(type).name | translate }}
+              <mat-icon matChipRemove>close</mat-icon>
+            </mat-chip-row>
+          }
           <input matInput type="text"
                  placeholder="{{ ( selectedNotificationTypes.length ? 'widgets.notification.notification-type' : 'widgets.notification.any-type' ) | translate }}"
                  style="max-width: 200px;"
@@ -46,9 +47,11 @@
                           class="tb-autocomplete"
                           (optionSelected)="selected($event)"
                           [displayWith]="displayTypeFn">
-          <mat-option *ngFor="let type of filteredNotificationTypesList | async" [value]="type">
-            <span [innerHTML]="notificationTypesTranslateMap.get(type).name | translate | highlight:searchText"></span>
-          </mat-option>
+          @for (type of filteredNotificationTypesList | async; track type) {
+            <mat-option [value]="type">
+              <span [innerHTML]="notificationTypesTranslateMap.get(type).name | translate | highlight:searchText"></span>
+            </mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html
index 0b9acd06fd..9b99295ca8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html
@@ -18,24 +18,30 @@
 <div #progressBarPanel class="tb-progress-bar-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-progress-bar-overlay" [style]="overlayStyle"></div>
   <div #progressBarContainer class="tb-progress-bar-container" [class]="layoutClass">
-    <ng-container *ngIf="layout === progressBarLayout.default">
+    @if (layout === progressBarLayout.default) {
       <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
-    </ng-container>
+    }
     <div class="tb-progress-bar-content">
-      <div *ngIf="showTitleValueRow" class="tb-progress-bar-title-value-row" [class]="titleValueRowClass">
-        <ng-container *ngIf="layout === progressBarLayout.simplified">
-          <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
-        </ng-container>
-        <div *ngIf="showValue" class="tb-progress-bar-value" [style]="valueStyle" [style.color]="valueColor.color">{{ valueText }}</div>
-      </div>
+      @if (showTitleValueRow) {
+        <div class="tb-progress-bar-title-value-row" [class]="titleValueRowClass">
+          @if (layout === progressBarLayout.simplified) {
+            <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
+          }
+          @if (showValue) {
+            <div class="tb-progress-bar-value" [style]="valueStyle" [style.color]="valueColor.color">{{ valueText }}</div>
+          }
+        </div>
+      }
       <div class="tb-progress-bar">
         <div class="tb-progress-bar-background" [style.background-color]="settings.barBackground">
           <div class="tb-progress-bar-progress" [style.background-color]="barColor.color" [style.width]="barWidth"></div>
         </div>
-        <div *ngIf="showTicks" class="tb-progress-bar-ticks" [style]="ticksStyle">
-          <div>{{ settings.tickMin }}</div>
-          <div>{{ settings.tickMax }}</div>
-        </div>
+        @if (showTicks) {
+          <div class="tb-progress-bar-ticks" [style]="ticksStyle">
+            <div>{{ settings.tickMin }}</div>
+            <div>{{ settings.tickMax }}</div>
+          </div>
+        }
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.html
index 2cc7e023d2..2f9fdb4ca9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.html
@@ -18,38 +18,44 @@
 <div class="tb-unread-notification-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-unread-notification-overlay" [style]="overlayStyle"></div>
   <ng-template #counter>
-    <div *ngIf="showCounter" class="notification-counter" [style.background-color]="counterBackground">
-      <span class="notification-counter-value" [style]="counterValueStyle">{{ count$ | async }}</span>
-    </div>
+    @if (showCounter) {
+      <div class="notification-counter" [style.background-color]="counterBackground">
+        <span class="notification-counter-value" [style]="counterValueStyle">{{ count$ | async }}</span>
+      </div>
+    }
   </ng-template>
   <ng-container *ngTemplateOutlet="widgetTitlePanel; context:{ titleSuffixTemplate: counter }"></ng-container>
 
   <div class="tb-unread-notification-content">
-    <ng-container *ngIf="loadNotification; else loadingNotification">
-      <div *ngIf="notifications.length; else emptyNotification" style="overflow: auto; width: 100%;">
-        <section style="min-height: 100px; overflow: auto; padding: 6px 0;">
-          <div *ngFor="let notification of notifications; let last = last; trackBy: trackById">
-            <tb-notification [notification]="notification"
-                             (markAsRead)="markAsRead($event)">
-            </tb-notification>
-            <mat-divider *ngIf="!last" style="margin: 4px"></mat-divider>
-          </div>
-        </section>
-      </div>
-    </ng-container>
-    <ng-template #emptyNotification>
-      <div class="tb-no-notification-svg-color" style="height: 85%;">
-        <svg height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 149 156" width="100%">
-          <use [attr.xlink:href]="'assets/notification-bell.svg#CHECK_ICON'"></use>
-        </svg>
-      </div>
-      <span class="tb-no-notification-text" translate>notification.no-notifications-yet</span>
-    </ng-template>
-    <ng-template #loadingNotification>
+    @if (loadNotification) {
+      @if (notifications.length) {
+        <div style="overflow: auto; width: 100%;">
+          <section style="min-height: 100px; overflow: auto; padding: 6px 0;">
+            @for (notification of notifications; track notification.id.id; let last = $last) {
+              <div>
+                <tb-notification [notification]="notification"
+                                 (markAsRead)="markAsRead($event)">
+                </tb-notification>
+                @if (!last) {
+                  <mat-divider style="margin: 4px"></mat-divider>
+                }
+              </div>
+            }
+          </section>
+        </div>
+      } @else {
+        <div class="tb-no-notification-svg-color" style="height: 85%;">
+          <svg height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 149 156" width="100%">
+            <use [attr.xlink:href]="'assets/notification-bell.svg#CHECK_ICON'"></use>
+          </svg>
+        </div>
+        <span class="tb-no-notification-text" translate>notification.no-notifications-yet</span>
+      }
+    } @else {
       <div class="tb-no-data-available" style="margin: 20px; gap: 16px;">
         <mat-spinner color="accent" diameter="65" strokeWidth="4"></mat-spinner>
         <div class="tb-no-data-text" translate>notification.loading-notifications</div>
       </div>
-    </ng-template>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.ts
index e68cddacf0..157dc0deec 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.ts
@@ -37,7 +37,7 @@ import {
   unreadNotificationDefaultSettings,
   UnreadNotificationWidgetSettings
 } from '@home/components/widget/lib/cards/unread-notification-widget.models';
-import { Notification, NotificationRequest, NotificationType } from '@shared/models/notification.models';
+import { Notification, NotificationType } from '@shared/models/notification.models';
 import { NotificationSubscriber } from '@shared/models/telemetry/telemetry.models';
 import { NotificationWebsocketService } from '@core/ws/notification-websocket.service';
 import { distinctUntilChanged, map, share, skip, take, tap } from 'rxjs/operators';
@@ -230,10 +230,6 @@ export class UnreadNotificationWidgetComponent implements OnInit, OnDestroy {
     }
   }
 
-  trackById(index: number, item: NotificationRequest): string {
-    return item.id.id;
-  }
-
   private editNotificationTypeFilter($event: Event) {
     if ($event) {
       $event.stopPropagation();
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
index 226b5668bf..6000ef6d3e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
@@ -21,35 +21,35 @@
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
   <div #valueCardContent class="tb-value-card-content" [class]="layout">
-    <ng-container [ngSwitch]="layout">
-      <ng-template [ngSwitchCase]="valueCardLayout.square">
+    @switch (layout) {
+      @case (valueCardLayout.square) {
         <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
         <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      </ng-template>
-      <ng-template [ngSwitchCase]="valueCardLayout.vertical">
+      }
+      @case (valueCardLayout.vertical) {
         <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
         <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
         <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
-      </ng-template>
-      <ng-template [ngSwitchCase]="valueCardLayout.centered">
+      }
+      @case (valueCardLayout.centered) {
         <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
         <div class="tb-value-card-icon-row">
           <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
           <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
         </div>
         <ng-container *ngTemplateOutlet="dateTpl"></ng-container>
-      </ng-template>
-      <ng-template [ngSwitchCase]="valueCardLayout.simplified">
+      }
+      @case (valueCardLayout.simplified) {
         <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
         <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
-      </ng-template>
-      <ng-template [ngSwitchCase]="layout === valueCardLayout.horizontal ||
-                                   layout === valueCardLayout.horizontal_reversed ? layout : ''">
+      }
+      @case (layout === valueCardLayout.horizontal ||
+        layout === valueCardLayout.horizontal_reversed ? layout : '') {
         <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
         <div class="flex-1"></div>
         <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      </ng-template>
-    </ng-container>
+      }
+    }
   </div>
 </div>
 <ng-template #iconWithLabelTpl>
@@ -62,13 +62,19 @@
   </div>
 </ng-template>
 <ng-template #iconTpl>
-  <tb-icon *ngIf="showIcon" [style]="iconStyle" [style.color]="iconColor.color">{{ icon }}</tb-icon>
+  @if (showIcon) {
+    <tb-icon [style]="iconStyle" [style.color]="iconColor.color">{{ icon }}</tb-icon>
+  }
 </ng-template>
 <ng-template #labelTpl>
-  <div *ngIf="showLabel" [style]="labelStyle" [style.color]="labelColor.color">{{ label$ | async }}</div>
+  @if (showLabel) {
+    <div [style]="labelStyle" [style.color]="labelColor.color">{{ label$ | async }}</div>
+  }
 </ng-template>
 <ng-template #dateTpl>
-  <div *ngIf="showDate" [style]="dateStyle" [style.color]="dateColor.color" [innerHTML]="dateFormat.formatted"></div>
+  @if (showDate) {
+    <div [style]="dateStyle" [style.color]="dateColor.color" [innerHTML]="dateFormat.formatted"></div>
+  }
 </ng-template>
 <ng-template #valueTpl>
   <div class="tb-value-card-value" [style]="valueStyle" [style.color]="valueColor.color">{{ valueText }}</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html
index 8d276d1231..4950936073 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html
@@ -19,9 +19,11 @@
   <div class="tb-value-chart-card-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div #valueChartCardContent class="tb-value-chart-card-content" [class]="layout" [class.auto-scale]="autoScale && showValue">
-    <div *ngIf="showValue" class="tb-value-chart-card-value-container">
-      <div class="tb-value-chart-card-value" #valueChartCardValue [style]="valueStyle" [style.color]="valueColor.color">{{ valueText }}</div>
-    </div>
+    @if (showValue) {
+      <div class="tb-value-chart-card-value-container">
+        <div class="tb-value-chart-card-value" #valueChartCardValue [style]="valueStyle" [style.color]="valueColor.color">{{ valueText }}</div>
+      </div>
+    }
     <div class="tb-value-chart-card-chart" #chartElement></div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html
index c8a7626cda..adbec193db 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html
@@ -28,16 +28,20 @@
   <div class="tb-bar-chart-content" [class]="legendClass">
     <div #chartShape class="tb-bar-chart-shape">
     </div>
-    <div *ngIf="showLegend" class="tb-bar-chart-legend">
-      <div class="tb-bar-chart-legend-item" *ngFor="let legendKey of legendKeys"
-           (mouseenter)="onLegendKeyEnter(legendKey)"
-           (mouseleave)="onLegendKeyLeave(legendKey)"
-           (click)="toggleLegendKey(legendKey)">
-        <div class="tb-bar-chart-legend-item-label">
-          <div class="tb-bar-chart-legend-item-label-circle" [style]="{background: !legendKey.hidden ? legendKey.color : null}"></div>
-          <div [style]="!legendKey.hidden ? legendLabelStyle : disabledLegendLabelStyle">{{ legendKey.label }}</div>
-        </div>
+    @if (showLegend) {
+      <div class="tb-bar-chart-legend">
+        @for (legendKey of legendKeys; track legendKey) {
+          <div class="tb-bar-chart-legend-item"
+               (mouseenter)="onLegendKeyEnter(legendKey)"
+               (mouseleave)="onLegendKeyLeave(legendKey)"
+               (click)="toggleLegendKey(legendKey)">
+            <div class="tb-bar-chart-legend-item-label">
+              <div class="tb-bar-chart-legend-item-label-circle" [style]="{background: !legendKey.hidden ? legendKey.color : null}"></div>
+              <div [style]="!legendKey.hidden ? legendLabelStyle : disabledLegendLabelStyle">{{ legendKey.label }}</div>
+            </div>
+          </div>
+        }
       </div>
-    </div>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.html
index 8e98d5f150..c840dc799e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.html
@@ -28,17 +28,21 @@
   <div #chartContent class="tb-latest-chart-content" [class]="legendClass">
     <div #chartShape class="tb-latest-chart-shape">
     </div>
-    <div *ngIf="showLegend" #chartLegend class="tb-latest-chart-legend">
-      <div class="tb-latest-chart-legend-item" *ngFor="let legendItem of legendItems" [class]="{'pointer': !legendItem.total && legendItem.hasValue}"
-           (mouseenter)="onLegendItemEnter(legendItem)"
-           (mouseleave)="onLegendItemLeave(legendItem)"
-           (click)="toggleLegendItem(legendItem)">
-        <div class="tb-latest-chart-legend-item-label">
-          <div class="tb-latest-chart-legend-item-label-circle" [style]="{background: (!legendItem.dataKey?.hidden && legendItem.hasValue) ? legendItem.color : null}"></div>
-          <div [style]="(!legendItem.dataKey?.hidden && legendItem.hasValue) ? legendLabelStyle : disabledLegendLabelStyle">{{ legendItem.label }}</div>
-        </div>
-        <div [style]="(!legendItem.dataKey?.hidden && legendItem.hasValue) ? legendValueStyle : disabledLegendValueStyle" class="tb-latest-chart-legend-item-value">{{ legendItem.value }}</div>
+    @if (showLegend) {
+      <div #chartLegend class="tb-latest-chart-legend">
+        @for (legendItem of legendItems; track legendItem) {
+          <div class="tb-latest-chart-legend-item" [class]="{'pointer': !legendItem.total && legendItem.hasValue}"
+               (mouseenter)="onLegendItemEnter(legendItem)"
+               (mouseleave)="onLegendItemLeave(legendItem)"
+               (click)="toggleLegendItem(legendItem)">
+            <div class="tb-latest-chart-legend-item-label">
+              <div class="tb-latest-chart-legend-item-label-circle" [style]="{background: (!legendItem.dataKey?.hidden && legendItem.hasValue) ? legendItem.color : null}"></div>
+              <div [style]="(!legendItem.dataKey?.hidden && legendItem.hasValue) ? legendLabelStyle : disabledLegendLabelStyle">{{ legendItem.label }}</div>
+            </div>
+            <div [style]="(!legendItem.dataKey?.hidden && legendItem.hasValue) ? legendValueStyle : disabledLegendValueStyle" class="tb-latest-chart-legend-item-value">{{ legendItem.value }}</div>
+          </div>
+        }
       </div>
-    </div>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html
index 48fe64d4a2..e001d9c56d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html
@@ -28,14 +28,18 @@
   <div class="tb-range-chart-content" [class]="legendClass">
     <div #chartShape class="tb-range-chart-shape">
     </div>
-    <div *ngIf="showLegend" class="tb-range-chart-legend">
-      <div class="tb-range-chart-legend-item" *ngFor="let rangeItem of visibleRangeItems"
-           (click)="toggleRangeItem(rangeItem)">
-        <div class="tb-range-chart-legend-item-label">
-          <div class="tb-range-chart-legend-item-label-circle" [style]="{background: rangeItem.enabled ? rangeItem.color : null}"></div>
-          <div [style]="rangeItem.enabled ? legendLabelStyle : disabledLegendLabelStyle">{{ rangeItem.label }}</div>
-        </div>
+    @if (showLegend) {
+      <div class="tb-range-chart-legend">
+        @for (rangeItem of visibleRangeItems; track rangeItem) {
+          <div class="tb-range-chart-legend-item"
+               (click)="toggleRangeItem(rangeItem)">
+            <div class="tb-range-chart-legend-item-label">
+              <div class="tb-range-chart-legend-item-label-circle" [style]="{background: rangeItem.enabled ? rangeItem.color : null}"></div>
+              <div [style]="rangeItem.enabled ? legendLabelStyle : disabledLegendLabelStyle">{{ rangeItem.label }}</div>
+            </div>
+          </div>
+        }
       </div>
-    </div>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html
index a7d1d6eb6e..7ae4145eb6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html
@@ -28,83 +28,107 @@
   <div class="tb-time-series-chart-content" [class]="legendClass">
     <div #chartShape class="tb-time-series-chart-shape">
     </div>
-    <div *ngIf="showLegend" class="tb-time-series-chart-legend" [class.tb-simple-legend]="!displayLegendValues">
-      <ng-container *ngIf="displayLegendValues; else simpleLegend">
-        <ng-container *ngIf="horizontalLegendPosition; else verticalLegend">
-          <ng-container *ngTemplateOutlet="horizontalLegend"></ng-container>
-        </ng-container>
-      </ng-container>
-    </div>
+    @if (showLegend) {
+      <div class="tb-time-series-chart-legend" [class.tb-simple-legend]="!displayLegendValues">
+        @if (displayLegendValues) {
+          @if (horizontalLegendPosition) {
+            <ng-container *ngTemplateOutlet="horizontalLegend"></ng-container>
+          } @else {
+            <table class="tb-time-series-chart-legend-table vertical">
+              <thead>
+                <tr>
+                  <th></th>
+                  @if (legendConfig.showMin === true) {
+                    <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle">{{ 'legend.Min' | translate }}</th>
+                  }
+                  @if (legendConfig.showMax === true) {
+                    <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle">{{ 'legend.Max' | translate }}</th>
+                  }
+                  @if (legendConfig.showAvg === true) {
+                    <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle">{{ 'legend.Avg' | translate }}</th>
+                  }
+                  @if (legendConfig.showTotal === true) {
+                    <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle">{{ 'legend.Total' | translate }}</th>
+                  }
+                  @if (legendConfig.showLatest === true) {
+                    <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle">{{ 'legend.Latest' | translate }}</th>
+                  }
+                </tr>
+              </thead>
+              <tbody>
+                @for (legendKey of legendKeys; track legendKey) {
+                  <tr>
+                    <th>
+                      <ng-container *ngTemplateOutlet="legendItem; context:{legendKey: legendKey, left: true}"></ng-container>
+                    </th>
+                    @if (legendConfig.showMin === true) {
+                      <td class="tb-time-series-chart-legend-value" [style]="legendValueStyle"
+                          [innerHTML]="legendData.data[legendKey.dataIndex].min | safe: 'html'">
+                      </td>
+                    }
+                    @if (legendConfig.showMax === true) {
+                      <td class="tb-time-series-chart-legend-value" [style]="legendValueStyle"
+                          [innerHTML]="legendData.data[legendKey.dataIndex].max | safe: 'html'">
+                      </td>
+                    }
+                    @if (legendConfig.showAvg === true) {
+                      <td class="tb-time-series-chart-legend-value" [style]="legendValueStyle"
+                          [innerHTML]="legendData.data[legendKey.dataIndex].avg | safe: 'html'">
+                      </td>
+                    }
+                    @if (legendConfig.showTotal === true) {
+                      <td class="tb-time-series-chart-legend-value" [style]="legendValueStyle"
+                          [innerHTML]="legendData.data[legendKey.dataIndex].total | safe: 'html'">
+                      </td>
+                    }
+                    @if (legendConfig.showLatest === true) {
+                      <td class="tb-time-series-chart-legend-value" [style]="legendValueStyle"
+                          [innerHTML]="legendData.data[legendKey.dataIndex].latest | safe: 'html'">
+                      </td>
+                    }
+                  </tr>
+                }
+              </tbody>
+            </table>
+          }
+        } @else {
+          @for (legendKey of legendKeys; track legendKey) {
+            <ng-container *ngTemplateOutlet="legendItem; context:{legendKey: legendKey}"></ng-container>
+          }
+        }
+      </div>
+    }
     <ng-template #horizontalLegend>
       <table class="tb-time-series-chart-legend-table">
         <thead>
-        <tr>
-          <th></th>
-          <th *ngFor="let legendKey of legendKeys">
-            <ng-container *ngTemplateOutlet="legendItem; context:{legendKey: legendKey}"></ng-container>
-          </th>
-        </tr>
-        </thead>
-        <tbody>
-        <ng-container *ngIf="legendConfig.showMin === true">
-          <ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Min', type: 'min'}"></ng-container>
-        </ng-container>
-        <ng-container *ngIf="legendConfig.showMax === true">
-          <ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Max', type: 'max'}"></ng-container>
-        </ng-container>
-        <ng-container *ngIf="legendConfig.showAvg === true">
-          <ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Avg', type: 'avg'}"></ng-container>
-        </ng-container>
-        <ng-container *ngIf="legendConfig.showTotal === true">
-          <ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Total', type: 'total'}"></ng-container>
-        </ng-container>
-        <ng-container *ngIf="legendConfig.showLatest === true">
-          <ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Latest', type: 'latest'}"></ng-container>
-        </ng-container>
-        </tbody>
-      </table>
-    </ng-template>
-    <ng-template #verticalLegend>
-      <table class="tb-time-series-chart-legend-table vertical">
-        <thead>
-        <tr>
-          <th></th>
-          <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showMin === true">{{ 'legend.Min' | translate }}</th>
-          <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showMax === true">{{ 'legend.Max' | translate }}</th>
-          <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showAvg === true">{{ 'legend.Avg' | translate }}</th>
-          <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showTotal === true">{{ 'legend.Total' | translate }}</th>
-          <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showLatest === true">{{ 'legend.Latest' | translate }}</th>
-        </tr>
+          <tr>
+            <th></th>
+            @for (legendKey of legendKeys; track legendKey) {
+              <th>
+                <ng-container *ngTemplateOutlet="legendItem; context:{legendKey: legendKey}"></ng-container>
+              </th>
+            }
+          </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let legendKey of legendKeys">
-            <th>
-              <ng-container *ngTemplateOutlet="legendItem; context:{legendKey: legendKey, left: true}"></ng-container>
-            </th>
-            <td *ngIf="legendConfig.showMin === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle"
-                [innerHTML]="legendData.data[legendKey.dataIndex].min | safe: 'html'">
-            </td>
-            <td *ngIf="legendConfig.showMax === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle"
-                [innerHTML]="legendData.data[legendKey.dataIndex].max | safe: 'html'">
-            </td>
-            <td *ngIf="legendConfig.showAvg === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle"
-                [innerHTML]="legendData.data[legendKey.dataIndex].avg | safe: 'html'">
-            </td>
-            <td *ngIf="legendConfig.showTotal === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle"
-                [innerHTML]="legendData.data[legendKey.dataIndex].total | safe: 'html'">
-            </td>
-            <td *ngIf="legendConfig.showLatest === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle"
-                [innerHTML]="legendData.data[legendKey.dataIndex].latest | safe: 'html'">
-            </td>
-          </tr>
+          @if (legendConfig.showMin === true) {
+            <ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Min', type: 'min'}"></ng-container>
+          }
+          @if (legendConfig.showMax === true) {
+            <ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Max', type: 'max'}"></ng-container>
+          }
+          @if (legendConfig.showAvg === true) {
+            <ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Avg', type: 'avg'}"></ng-container>
+          }
+          @if (legendConfig.showTotal === true) {
+            <ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Total', type: 'total'}"></ng-container>
+          }
+          @if (legendConfig.showLatest === true) {
+            <ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Latest', type: 'latest'}"></ng-container>
+          }
         </tbody>
       </table>
     </ng-template>
-    <ng-template #simpleLegend>
-      <ng-container *ngFor="let legendKey of legendKeys">
-        <ng-container *ngTemplateOutlet="legendItem; context:{legendKey: legendKey}"></ng-container>
-      </ng-container>
-    </ng-template>
     <ng-template #legendItem let-legendKey="legendKey" let-left="left">
       <div class="tb-time-series-chart-legend-item"
            [class.left]="left">
@@ -120,9 +144,11 @@
     <ng-template #legendDataRow let-label="label" let-type="type">
       <tr>
         <th class="tb-time-series-chart-legend-type-label" [style]="legendColumnTitleStyle">{{ label | translate }}</th>
-        <td *ngFor="let legendKey of legendKeys" class="tb-time-series-chart-legend-value" [style]="legendValueStyle"
-            [innerHTML]="legendData.data[legendKey.dataIndex][type] | safe: 'html'">
-        </td>
+        @for (legendKey of legendKeys; track legendKey) {
+          <td class="tb-time-series-chart-legend-value" [style]="legendValueStyle"
+              [innerHTML]="legendData.data[legendKey.dataIndex][type] | safe: 'html'">
+          </td>
+        }
       </tr>
     </ng-template>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/count/count-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/count/count-widget.component.html
index 37eb1f807a..a607300147 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/count/count-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/count/count-widget.component.html
@@ -20,20 +20,32 @@
     <div class="tb-count-panel-column">
       <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
       <div class="tb-count-panel-row">
-        <div class="tb-count-icon-panel" *ngIf="showIconBackground || showIcon"
-             [style]="{minWidth: iconBackgroundSize, minHeight: iconBackgroundSize}">
-          <div *ngIf="showIconBackground" class="tb-count-icon-background-panel">
-            <div [style]="iconBackgroundStyle" [style.background-color]="iconBackgroundColor.color"></div>
+        @if (showIconBackground || showIcon) {
+          <div class="tb-count-icon-panel"
+               [style]="{minWidth: iconBackgroundSize, minHeight: iconBackgroundSize}">
+            @if (showIconBackground) {
+              <div class="tb-count-icon-background-panel">
+                <div [style]="iconBackgroundStyle" [style.background-color]="iconBackgroundColor.color"></div>
+              </div>
+            }
+            @if (showIcon) {
+              <tb-icon [style]="iconStyle" [style.color]="iconColor.color">{{ icon }}</tb-icon>
+            }
           </div>
-          <tb-icon *ngIf="showIcon" [style]="iconStyle" [style.color]="iconColor.color">{{ icon }}</tb-icon>
-        </div>
+        }
         <div class="tb-count-label-value-panel" [class.tb-count-layout-row]="layout === countCardLayout.row">
-          <div *ngIf="showLabel" class="tb-count-label" [style]="labelStyle" [style.color]="labelColor.color">{{ label }}</div>
-          <div *ngIf="layout === countCardLayout.row" style="flex: 1; min-width: 12px;"></div>
+          @if (showLabel) {
+            <div class="tb-count-label" [style]="labelStyle" [style.color]="labelColor.color">{{ label }}</div>
+          }
+          @if (layout === countCardLayout.row) {
+            <div style="flex: 1; min-width: 12px;"></div>
+          }
           <div [style]="valueStyle" [style.color]="valueColor.color">{{ valueText }}</div>
         </div>
       </div>
     </div>
-    <tb-icon *ngIf="showChevron" [style]="chevronStyle">chevron_right</tb-icon>
+    @if (showChevron) {
+      <tb-icon [style]="chevronStyle">chevron_right</tb-icon>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
index b3c95cc73b..6683fa8c4b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
@@ -16,20 +16,24 @@
 
 -->
 <div class="mat-content mat-padding flex flex-col">
-  <mat-form-field *ngIf="settings.showTemplate" class="mat-block">
-    <input readonly [ngModel]="model.chosenLabel" matInput type="text">
-  </mat-form-field>
+  @if (settings.showTemplate) {
+    <mat-form-field class="mat-block">
+      <input readonly [ngModel]="model.chosenLabel" matInput type="text">
+    </mat-form-field>
+  }
   <ngx-daterangepicker-material [startDate]="model.startDate"
                                 [endDate]="model.endDate"
                                 [locale]="locale"
                                 [singleDatePicker]="settings.onePanel"
                                 [autoApply]="true" (choosedDate)="choosedDate($event)">
   </ngx-daterangepicker-material>
-  <div class="tb-panel-actions flex flex-row" *ngIf="!settings.autoConfirm">
-    <span class="flex-1"></span>
-    <button mat-button mat-raised-button color="primary"
-            type="button" (click)="apply()">
-      {{ 'action.ok' | translate }}
-    </button>
-  </div>
+  @if (!settings.autoConfirm) {
+    <div class="tb-panel-actions flex flex-row">
+      <span class="flex-1"></span>
+      <button mat-button mat-raised-button color="primary"
+              type="button" (click)="apply()">
+        {{ 'action.ok' | translate }}
+      </button>
+    </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
index f5f43a5346..3b5990a268 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
@@ -20,7 +20,9 @@
      [class.labels-hidden]="settings.hideLabels"
      [class.long-mode]="ctx.width >= 400">
   <mat-form-field class="mat-block" [class.!hidden]="settings.hidePicker" (click)="openNavigatorPanel($event)">
-    <mat-label *ngIf="!settings.hideLabels" translate>widgets.date-range-navigator.localizationMap.Date picker</mat-label>
+    @if (!settings.hideLabels) {
+      <mat-label translate>widgets.date-range-navigator.localizationMap.Date picker</mat-label>
+    }
     <mat-select #datePicker [ngModel]="advancedModel.chosenLabel">
       <mat-option [value]="advancedModel.chosenLabel">
         {{advancedModel.chosenLabel}}
@@ -28,14 +30,20 @@
     </mat-select>
   </mat-form-field>
   <mat-form-field class="mat-block" [class.!hidden]="settings.hideInterval">
-    <mat-label translate *ngIf="!settings.hideLabels">widgets.date-range-navigator.localizationMap.Interval</mat-label>
+    @if (!settings.hideLabels) {
+      <mat-label translate>widgets.date-range-navigator.localizationMap.Interval</mat-label>
+    }
     <mat-select [(ngModel)]="selectedDateInterval" (ngModelChange)="changeInterval()">
-      <mat-option *ngIf="customInterval" [value]="customInterval.ts">
-        {{'widgets.date-range-navigator.localizationMap.' + customInterval.label | translate}}
-      </mat-option>
-      <mat-option *ngFor="let date of datesMap | keyvalue: originalOrder" [value]="date.value.ts">
-        {{'widgets.date-range-navigator.localizationMap.' + date.value.label | translate}}
-      </mat-option>
+      @if (customInterval) {
+        <mat-option [value]="customInterval.ts">
+          {{'widgets.date-range-navigator.localizationMap.' + customInterval.label | translate}}
+        </mat-option>
+      }
+      @for (date of datesMap | keyvalue: originalOrder; track date) {
+        <mat-option [value]="date.value.ts">
+          {{'widgets.date-range-navigator.localizationMap.' + date.value.label | translate}}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
@@ -44,11 +52,15 @@
       <mat-icon>keyboard_arrow_left</mat-icon>
     </button>
     <mat-form-field class="mat-block gt-sm:flex-1">
-      <mat-label translate *ngIf="!settings.hideLabels">widgets.date-range-navigator.localizationMap.Step size</mat-label>
+      @if (!settings.hideLabels) {
+        <mat-label translate>widgets.date-range-navigator.localizationMap.Step size</mat-label>
+      }
       <mat-select [(ngModel)]="selectedStepSize">
-        <mat-option *ngFor="let date of datesMap | keyvalue: originalOrder" [value]="date.value.ts">
-          {{'widgets.date-range-navigator.localizationMap.' + date.value.label | translate}}
-        </mat-option>
+        @for (date of datesMap | keyvalue: originalOrder; track date) {
+          <mat-option [value]="date.value.ts">
+            {{'widgets.date-range-navigator.localizationMap.' + date.value.label | translate}}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
     <button mat-icon-button (click)="goForth()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
index 1f4d61c611..323793cc76 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
@@ -17,8 +17,12 @@
 -->
 <div class="tb-edges-overview tb-absolute-fill" tb-toast toastTarget="{{ toastTargetId }}">
   <div class="tb-absolute-fill flex flex-1 flex-col">
-    <span class="mat-subheader flex flex-row" *ngIf="customerTitle">{{ customerTitle }}</span>
-    <span class="mat-subheader flex flex-row" *ngIf="!edgeIsDatasource" translate>edge.widget-datasource-error</span>
+    @if (customerTitle) {
+      <span class="mat-subheader flex flex-row">{{ customerTitle }}</span>
+    }
+    @if (!edgeIsDatasource) {
+      <span class="mat-subheader flex flex-row" translate>edge.widget-datasource-error</span>
+    }
     <div class="tb-entities-nav-tree-panel flex-1">
       <tb-nav-tree
         [loadNodes]="loadNodes"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
index 5a99f2d733..a72dbf1dce 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
@@ -39,58 +39,67 @@
     </mat-toolbar>
     <div class="table-container flex-1">
       <table mat-table [dataSource]="entityDatasource" [trackBy]="trackByEntityId"
-                 matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
-        <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; let $index = index; trackBy: trackByColumnDef;">
-          <mat-header-cell [style]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="!column.sortable"> {{ column.title }} </mat-header-cell>
+             matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
+        @for (column of columns; track trackByColumnDef($index, 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"
                       [innerHTML]="cellContent(entity, column, row) | async"
                       [style]="cellStyle(entity, column, row) | async"
                       (click)="onCellClick($event, entity, column, $index)"
                       [class.tb-pointer]="columnHasCellClick($index)">
             </mat-cell>
-        </ng-container>
+          </ng-container>
+        }
         <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
           <mat-header-cell *matHeaderCellDef>
-            <ng-container *ngIf="entityDatasource.countCellButtonAction">
+            @if (entityDatasource.countCellButtonAction) {
               <div class="gt-md:!hidden" style="min-width: 48px;">
               </div>
               <div class="lt-lg:!hidden"
                    [style.min-width]="(entityDatasource.countCellButtonAction * 48) + 'px'">
               </div>
-            </ng-container>
+            }
           </mat-header-cell>
           <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(entity, row) | async">
-            <ng-container *ngIf="entityDatasource.countCellButtonAction">
+            @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'">
-                <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                  <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
-                  <button mat-icon-button
-                          *ngIf="actionDescriptor.icon"
-                          matTooltip="{{ actionDescriptor.displayName }}"
-                          matTooltipPosition="above"
-                          (click)="onActionButtonClick($event, entity, actionDescriptor)">
-                    <tb-icon>{{actionDescriptor.icon}}</tb-icon>
-                  </button>
-                </ng-container>
-              </div>
-              <div [class.!hidden]="!showCellActionsMenu || entityDatasource.countCellButtonAction === 1" class="gt-md:!hidden" *ngIf="entity.hasActions">
-                <button mat-icon-button
-                        (click)="$event.stopPropagation(); ctx.detectChanges();"
-                        [matMenuTriggerFor]="cellActionsMenu">
-                  <mat-icon class="material-icons">more_vert</mat-icon>
-                </button>
-                <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                  <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                    <button mat-menu-item *ngIf="actionDescriptor.icon"
+                @for (actionDescriptor of entity.actionCellButtons; track trackByActionCellDescriptionId($index, actionDescriptor)) {
+                  @if (!actionDescriptor.icon) {
+                    <span style="width: 48px;"></span>
+                  }
+                  @if (actionDescriptor.icon) {
+                    <button mat-icon-button
+                            matTooltip="{{ actionDescriptor.displayName }}"
+                            matTooltipPosition="above"
                             (click)="onActionButtonClick($event, entity, actionDescriptor)">
-                      <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                      <span>{{ actionDescriptor.displayName }}</span>
+                      <tb-icon>{{actionDescriptor.icon}}</tb-icon>
                     </button>
-                  </ng-container>
-                </mat-menu>
+                  }
+                }
               </div>
-            </ng-container>
+              @if (entity.hasActions) {
+                <div [class.!hidden]="!showCellActionsMenu || entityDatasource.countCellButtonAction === 1" class="gt-md:!hidden">
+                  <button mat-icon-button
+                          (click)="$event.stopPropagation(); ctx.detectChanges();"
+                          [matMenuTriggerFor]="cellActionsMenu">
+                    <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)) {
+                      @if (actionDescriptor.icon) {
+                        <button mat-menu-item
+                                (click)="onActionButtonClick($event, entity, actionDescriptor)">
+                          <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                          <span>{{ actionDescriptor.displayName }}</span>
+                        </button>
+                      }
+                    }
+                  </mat-menu>
+                </div>
+              }
+            }
           </mat-cell>
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
@@ -99,20 +108,24 @@
                  [class.tb-pointer]="hasRowAction"
                  *matRowDef="let entity; columns: displayedColumns; let row = index"
                  [style]="rowStyle(entity, row) | async"
-                 (click)="onRowClick($event, entity)" (dblclick)="onRowClick($event, entity, true)"></mat-row>
+        (click)="onRowClick($event, entity)" (dblclick)="onRowClick($event, entity, true)"></mat-row>
       </table>
       <span [class.!hidden]="(entityDatasource.isEmpty() | async) === false || entityDatasource.dataLoading"
-            class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
+      class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
       <span [class.!hidden]="!entityDatasource.dataLoading"
-            class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
+      class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
     </div>
-    <mat-divider *ngIf="displayPagination"></mat-divider>
-    <mat-paginator *ngIf="displayPagination"
-                   [length]="entityDatasource.total() | async"
-                   [pageIndex]="pageLink.page"
-                   [pageSize]="pageLink.pageSize"
-                   [pageSizeOptions]="pageSizeOptions"
-                   [hidePageSize]="hidePageSize"
-                   showFirstLastButtons></mat-paginator>
+    @if (displayPagination) {
+      <mat-divider></mat-divider>
+    }
+    @if (displayPagination) {
+      <mat-paginator
+        [length]="entityDatasource.total() | async"
+        [pageIndex]="pageLink.page"
+        [pageSize]="pageLink.pageSize"
+        [pageSizeOptions]="pageSizeOptions"
+        [hidePageSize]="hidePageSize"
+      showFirstLastButtons></mat-paginator>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html
index b1a5d90025..274b1f13ea 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html
@@ -16,17 +16,21 @@
 
 -->
 <div class="tb-absolute-fill flex" [class]="legendContainerLayoutType">
-  <tb-legend *ngIf="displayLegend && isLegendFirst"
-             [style]="legendStyle"
-             [legendConfig]="legendConfig"
-             [legendData]="legendData"
-             (legendKeyHiddenChange)="onLegendKeyHiddenChange($event)">
-  </tb-legend>
+  @if (displayLegend && isLegendFirst) {
+    <tb-legend
+      [style]="legendStyle"
+      [legendConfig]="legendConfig"
+      [legendData]="legendData"
+      (legendKeyHiddenChange)="onLegendKeyHiddenChange($event)">
+    </tb-legend>
+  }
   <div class="flex-1" #flotElement></div>
-  <tb-legend *ngIf="displayLegend && !isLegendFirst"
-             [style]="legendStyle"
-             [legendConfig]="legendConfig"
-             [legendData]="legendData"
-             (legendKeyHiddenChange)="onLegendKeyHiddenChange($event)">
-  </tb-legend>
+  @if (displayLegend && !isLegendFirst) {
+    <tb-legend
+      [style]="legendStyle"
+      [legendConfig]="legendConfig"
+      [legendData]="legendData"
+      (legendKeyHiddenChange)="onLegendKeyHiddenChange($event)">
+    </tb-legend>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
index 3d98b5e659..5c153621fc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
@@ -15,34 +15,45 @@
     limitations under the License.
 
 -->
-<div class="flex flex-row" *ngIf="addMode || editMode; else docLinkTemplate">
-  <div class="tb-edit-link flex flex-1 flex-col" [class.edit-mode]="editMode" [formGroup]="editDocLinkFormGroup">
-    <tb-material-icon-select required formControlName="icon"></tb-material-icon-select>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.documentation.name</mat-label>
-      <input required matInput formControlName="name">
-      <mat-error *ngIf="editDocLinkFormGroup.get('name').hasError('required')">
-        {{ 'widgets.documentation.name-required' | translate }}
-      </mat-error>
-    </mat-form-field>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.documentation.link</mat-label>
-      <input required matInput formControlName="link">
-      <mat-error *ngIf="editDocLinkFormGroup.get('link').hasError('required')">
-        {{ 'widgets.documentation.link-required' | translate }}
-      </mat-error>
-    </mat-form-field>
-    <div *ngIf="addMode" class="flex flex-row items-stretch justify-end gap-2">
-      <button *ngIf="!addOnly" mat-button color="primary" (click)="cancelAdd()">{{ 'action.cancel' | translate }}</button>
-      <button mat-raised-button color="primary" (click)="add()">{{ 'action.add' | translate }}</button>
+@if (addMode || editMode) {
+  <div class="flex flex-row">
+    <div class="tb-edit-link flex flex-1 flex-col" [class.edit-mode]="editMode" [formGroup]="editDocLinkFormGroup">
+      <tb-material-icon-select required formControlName="icon"></tb-material-icon-select>
+      <mat-form-field class="mat-block flex-1">
+        <mat-label translate>widgets.documentation.name</mat-label>
+        <input required matInput formControlName="name">
+        @if (editDocLinkFormGroup.get('name').hasError('required')) {
+          <mat-error>
+            {{ 'widgets.documentation.name-required' | translate }}
+          </mat-error>
+        }
+      </mat-form-field>
+      <mat-form-field class="mat-block flex-1">
+        <mat-label translate>widgets.documentation.link</mat-label>
+        <input required matInput formControlName="link">
+        @if (editDocLinkFormGroup.get('link').hasError('required')) {
+          <mat-error>
+            {{ 'widgets.documentation.link-required' | translate }}
+          </mat-error>
+        }
+      </mat-form-field>
+      @if (addMode) {
+        <div class="flex flex-row items-stretch justify-end gap-2">
+          @if (!addOnly) {
+            <button mat-button color="primary" (click)="cancelAdd()">{{ 'action.cancel' | translate }}</button>
+          }
+          <button mat-raised-button color="primary" (click)="add()">{{ 'action.add' | translate }}</button>
+        </div>
+      }
     </div>
+    @if (editMode) {
+      <div class="tb-edit-buttons flex flex-row">
+        <button mat-icon-button (click)="apply()"><tb-icon>check</tb-icon></button>
+        <button mat-icon-button (click)="cancelEdit()"><tb-icon>close</tb-icon></button>
+      </div>
+    }
   </div>
-  <div *ngIf="editMode" class="tb-edit-buttons flex flex-row">
-    <button mat-icon-button (click)="apply()"><tb-icon>check</tb-icon></button>
-    <button mat-icon-button (click)="cancelEdit()"><tb-icon>close</tb-icon></button>
-  </div>
-</div>
-<ng-template #docLinkTemplate>
+} @else {
   <div class="flex flex-row">
     <div class="tb-link flex-1">
       <div class="tb-link-container">
@@ -67,4 +78,4 @@
       </button>
     </div>
   </div>
-</ng-template>
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html
index 1f3756431c..fc2199b679 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html
@@ -27,17 +27,19 @@
     </button>
   </div>
   <mat-grid-list class="tb-links-list flex-1" [cols]="columns" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
-    <mat-grid-tile class="tb-links-tile" *ngFor="let docLink of documentationLinks?.links">
-      <a class="tb-link-button flex-1"
-         [href]="docLink.link" target="_blank">
-        <div class="tb-link-container">
-          <div class="tb-link-icon-container">
-            <tb-icon color="primary">{{ docLink.icon }}</tb-icon>
+    @for (docLink of documentationLinks?.links; track docLink) {
+      <mat-grid-tile class="tb-links-tile">
+        <a class="tb-link-button flex-1"
+           [href]="docLink.link" target="_blank">
+          <div class="tb-link-container">
+            <div class="tb-link-icon-container">
+              <tb-icon color="primary">{{ docLink.icon }}</tb-icon>
+            </div>
+            <div class="tb-link-text">{{ docLink.name | customTranslate }}</div>
           </div>
-          <div class="tb-link-text">{{ docLink.name | customTranslate }}</div>
-        </div>
-      </a>
-    </mat-grid-tile>
+        </a>
+      </mat-grid-tile>
+    }
     <mat-grid-tile class="tb-links-tile">
       <div class="tb-add-link-button flex-1"
            matTooltip="{{ 'widgets.documentation.add-link' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html
index 6265da606b..c09ce61869 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html
@@ -28,68 +28,71 @@
   <div mat-dialog-content>
     <div class="tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
          (cdkDropListDropped)="linkDrop($event)" [cdkDropListDisabled]="editMode || addMode">
-      <div cdkDrag class="tb-draggable flex flex-row items-center justify-start" *ngFor="let linkControl of linksFormArray().controls; trackBy: trackByLink;
-               let $index = index; last as isLast;"
-           [class.pb-2]="!isLast">
-        <ng-container [ngSwitch]="mode">
-          <ng-template [ngSwitchCase]="'docs'">
-            <tb-doc-link class="flex-1" #docLink [formControl]="linkControl"
-                         [disableEdit]="editMode || addMode"
-                         (editModeChanged)="editMode = $event"
-                         (docLinkUpdated)="update()"
-                         (docLinkDeleted)="deleteLink($index)">
-            </tb-doc-link>
-            <ng-container *ngIf="!docLink.isEditing()">
-              <ng-container *ngTemplateOutlet="dragHandle"></ng-container>
-            </ng-container>
-          </ng-template>
-          <ng-template [ngSwitchCase]="'quickLinks'">
-            <tb-quick-link class="flex-1" #quickLink [formControl]="linkControl"
+      @for (linkControl of linksFormArray().controls; track trackByLink($index, linkControl); let isLast = $last) {
+        <div cdkDrag class="tb-draggable flex flex-row items-center justify-start"
+             [class.pb-2]="!isLast">
+          @switch (mode) {
+            @case ('docs') {
+              <tb-doc-link class="flex-1" #docLink [formControl]="linkControl"
                            [disableEdit]="editMode || addMode"
                            (editModeChanged)="editMode = $event"
-                           (quickLinkUpdated)="update()"
-                           (quickLinkDeleted)="deleteLink($index)">
-            </tb-quick-link>
-            <ng-container *ngIf="!quickLink.isEditing()">
-              <ng-container *ngTemplateOutlet="dragHandle"></ng-container>
-            </ng-container>
+                           (docLinkUpdated)="update()"
+                           (docLinkDeleted)="deleteLink($index)">
+              </tb-doc-link>
+              @if (!docLink.isEditing()) {
+                <ng-container *ngTemplateOutlet="dragHandle"></ng-container>
+              }
+            }
+            @case ('quickLinks') {
+              <tb-quick-link class="flex-1" #quickLink [formControl]="linkControl"
+                             [disableEdit]="editMode || addMode"
+                             (editModeChanged)="editMode = $event"
+                             (quickLinkUpdated)="update()"
+                             (quickLinkDeleted)="deleteLink($index)">
+              </tb-quick-link>
+              @if (!quickLink.isEditing()) {
+                <ng-container *ngTemplateOutlet="dragHandle"></ng-container>
+              }
+            }
+          }
+          <ng-template #dragHandle>
+            <div cdkDragHandle
+                 matTooltip="{{ 'action.drag' | translate }}"
+                 matTooltipPosition="above"
+                 class="tb-drag-handle">
+              <tb-icon>drag_indicator</tb-icon>
+            </div>
           </ng-template>
-        </ng-container>
-        <ng-template #dragHandle>
-          <div cdkDragHandle
-               matTooltip="{{ 'action.drag' | translate }}"
-               matTooltipPosition="above"
-               class="tb-drag-handle">
-            <tb-icon>drag_indicator</tb-icon>
-          </div>
-        </ng-template>
-      </div>
+        </div>
+      }
     </div>
   </div>
   <div mat-dialog-actions>
-    <div *ngIf="!editMode && !addMode" class="tb-add-link-button flex-1"
-         matTooltip="{{ (mode === 'docs' ? 'widgets.documentation.add-link' : 'widgets.quick-links.add-link') | translate }}"
-         matTooltipPosition="above"
-         (click)="addLink()">
-      <tb-icon class="tb-add-icon">add</tb-icon>
-    </div>
-    <ng-container *ngIf="addMode">
-      <ng-container [ngSwitch]="mode">
-        <ng-template [ngSwitchCase]="'docs'">
+    @if (!editMode && !addMode) {
+      <div class="tb-add-link-button flex-1"
+           matTooltip="{{ (mode === 'docs' ? 'widgets.documentation.add-link' : 'widgets.quick-links.add-link') | translate }}"
+           matTooltipPosition="above"
+           (click)="addLink()">
+        <tb-icon class="tb-add-icon">add</tb-icon>
+      </div>
+    }
+    @if (addMode) {
+      @switch (mode) {
+        @case ('docs') {
           <tb-doc-link class="flex-1" [(ngModel)]="addingLink"
                        [ngModelOptions]="{standalone: true}"
                        (docLinkAdded)="linkAdded($event)"
                        (docLinkAddCanceled)="addMode = false">
           </tb-doc-link>
-        </ng-template>
-        <ng-template [ngSwitchCase]="'quickLinks'">
+        }
+        @case ('quickLinks') {
           <tb-quick-link class="flex-1" [(ngModel)]="addingLink"
-                       [ngModelOptions]="{standalone: true}"
-                       (quickLinkAdded)="linkAdded($event)"
-                       (quickLinkAddCanceled)="addMode = false">
+                         [ngModelOptions]="{standalone: true}"
+                         (quickLinkAdded)="linkAdded($event)"
+                         (quickLinkAddCanceled)="addMode = false">
           </tb-quick-link>
-        </ng-template>
-      </ng-container>
-    </ng-container>
+        }
+      }
+    }
   </div>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
index 582070ad33..5247c09ffd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
@@ -22,191 +22,213 @@
     <ng-template matStepperIcon="edit" let-index="index">
       {{ index + 1 }}
     </ng-template>
-    <ng-container [ngSwitch]="authUser.authority">
-      <ng-template [ngSwitchCase]="authority.SYS_ADMIN">
+    @switch (authUser.authority) {
+      @case (authority.SYS_ADMIN) {
         <mat-step [completed]="gettingStarted.maxSelectedIndex > -1">
           <ng-template matStepLabel>
             <div class="flex items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step1.title</div>
-              <a *ngIf="matStepper.selectedIndex === 0" mat-button color="primary" routerLink="/tenants">{{ 'tenant.tenants' | translate }}</a>
+              @if (matStepper.selectedIndex === 0) {
+                <a mat-button color="primary" routerLink="/tenants">{{ 'tenant.tenants' | translate }}</a>
+              }
             </div>
           </ng-template>
           <div [innerHTML]="'widgets.getting-started.sys-admin.step1.content' | translate | safe: 'html'"></div>
           <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/ui/tenants/" target="_blank">
             <mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step1.how-to-create-tenant' | translate }}</a>
-        </mat-step>
-        <mat-step [completed]="gettingStarted.maxSelectedIndex > 0">
-          <ng-template matStepLabel>
-            <div class="flex items-center justify-between">
-              <div translate>widgets.getting-started.sys-admin.step2.title</div>
-              <a *ngIf="matStepper.selectedIndex === 1" mat-button color="primary" routerLink="/settings/outgoing-mail">{{ 'admin.settings' | translate }}</a>
-            </div>
-          </ng-template>
-          <div [innerHTML]="'widgets.getting-started.sys-admin.step2.content' | translate | safe: 'html'"></div>
-          <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/ui/mail-settings/" target="_blank">
-            <mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step2.how-to-configure-mail-server' | translate }}</a>
-        </mat-step>
-        <mat-step [completed]="gettingStarted.maxSelectedIndex > 1">
-          <ng-template matStepLabel>
-            <div class="flex items-center justify-between">
-              <div translate>widgets.getting-started.sys-admin.step3.title</div>
-              <a *ngIf="matStepper.selectedIndex === 2" mat-button color="primary" routerLink="/settings/notifications">{{ 'admin.settings' | translate }}</a>
-            </div>
-          </ng-template>
-          <div [innerHTML]="'widgets.getting-started.sys-admin.step3.content' | translate | safe: 'html'"></div>
-          <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/ui/sms-provider-settings/" target="_blank">
-            <mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step3.how-to-configure-sms-provider' | translate }}</a>
-        </mat-step>
-        <mat-step [completed]="gettingStarted.maxSelectedIndex > 2">
-          <ng-template matStepLabel>
-            <div class="flex items-center justify-between">
-              <div translate>widgets.getting-started.sys-admin.step4.title</div>
-              <a *ngIf="matStepper.selectedIndex === 3" mat-button color="primary" routerLink="/security-settings/2fa">{{ 'admin.settings' | translate }}</a>
-            </div>
-          </ng-template>
-          <div [innerHTML]="'widgets.getting-started.sys-admin.step4.content' | translate | safe: 'html'"></div>
-          <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/two-factor-authentication/" target="_blank">
-            <mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step4.how-to-configure-2fa' | translate }}</a>
-        </mat-step>
-        <mat-step [completed]="gettingStarted.maxSelectedIndex > 3">
-          <ng-template matStepLabel>
-            <div class="flex items-center justify-between">
-              <div translate>widgets.getting-started.sys-admin.step5.title</div>
-              <a *ngIf="matStepper.selectedIndex === 4" mat-button color="primary" routerLink="/security-settings/oauth2">{{ 'admin.settings' | translate }}</a>
-            </div>
-          </ng-template>
-          <div [innerHTML]="'widgets.getting-started.sys-admin.step5.content' | translate | safe: 'html'"></div>
-          <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/oauth-2-support/" target="_blank">
-            <mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step5.how-to-configure-oauth2' | translate }}</a>
-        </mat-step>
-        <mat-step [completed]="gettingStarted.maxSelectedIndex > 4">
-          <ng-template matStepLabel>
-            <div class="flex items-center justify-between">
-              <div translate>widgets.getting-started.sys-admin.step6.title</div>
-              <a *ngIf="matStepper.selectedIndex === 5" mat-button color="primary" routerLink="/settings/notifications">{{ 'admin.settings' | translate }}</a>
-            </div>
-          </ng-template>
-          <div [innerHTML]="'widgets.getting-started.sys-admin.step6.content' | translate | safe: 'html'"></div>
-          <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/ui/slack-settings/" target="_blank">
-            <mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step6.how-to-configure-notifications' | translate }}</a>
-        </mat-step>
-      </ng-template>
-      <ng-template [ngSwitchCase]="authority.TENANT_ADMIN">
-        <mat-step [completed]="gettingStarted.maxSelectedIndex > -1">
-          <ng-template matStepLabel>
-            <div class="flex items-center justify-between">
-              <div translate>widgets.getting-started.tenant-admin.step1.title</div>
-              <a *ngIf="matStepper.selectedIndex === 0" mat-button color="primary" routerLink="/entities/devices">{{ 'device.devices' | translate }}</a>
-            </div>
-          </ng-template>
-          <div [innerHTML]="'widgets.getting-started.tenant-admin.step1.content' | translate | safe: 'html'"></div>
-          <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/getting-started-guides/helloworld/#step-1-provision-device" target="_blank">
-            <mat-icon>description</mat-icon>{{ 'widgets.getting-started.tenant-admin.step1.how-to-create-device' | translate }}</a>
-        </mat-step>
-        <mat-step [completed]="gettingStarted.maxSelectedIndex > 0">
-          <ng-template matStepLabel>
-            <div class="flex items-center justify-between">
-              <div translate>widgets.getting-started.tenant-admin.step2.title</div>
-            </div>
-          </ng-template>
-          <div [innerHTML]="'widgets.getting-started.tenant-admin.step2.content-before' | translate | safe: 'html'"></div>
-          <div class="tb-bordered-content">
-            <tb-toggle-header #publishCommandSteps value="ubuntu" name="publishCommandSteps" useSelectOnMdLg="false">
-              <tb-toggle-option value="ubuntu">Ubuntu</tb-toggle-option>
-              <tb-toggle-option value="macos">MacOS</tb-toggle-option>
-              <tb-toggle-option value="windows">Windows</tb-toggle-option>
-            </tb-toggle-header>
-            <ng-container [ngSwitch]="publishCommandSteps.value">
-              <ng-template [ngSwitchCase]="'ubuntu'">
-                <p [innerHTML]="'widgets.getting-started.tenant-admin.step2.ubuntu.install-curl' | translate | safe: 'html'"></p>
+          </mat-step>
+          <mat-step [completed]="gettingStarted.maxSelectedIndex > 0">
+            <ng-template matStepLabel>
+              <div class="flex items-center justify-between">
+                <div translate>widgets.getting-started.sys-admin.step2.title</div>
+                @if (matStepper.selectedIndex === 1) {
+                  <a mat-button color="primary" routerLink="/settings/outgoing-mail">{{ 'admin.settings' | translate }}</a>
+                }
+              </div>
+            </ng-template>
+            <div [innerHTML]="'widgets.getting-started.sys-admin.step2.content' | translate | safe: 'html'"></div>
+            <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/ui/mail-settings/" target="_blank">
+              <mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step2.how-to-configure-mail-server' | translate }}</a>
+            </mat-step>
+            <mat-step [completed]="gettingStarted.maxSelectedIndex > 1">
+              <ng-template matStepLabel>
+                <div class="flex items-center justify-between">
+                  <div translate>widgets.getting-started.sys-admin.step3.title</div>
+                  @if (matStepper.selectedIndex === 2) {
+                    <a mat-button color="primary" routerLink="/settings/notifications">{{ 'admin.settings' | translate }}</a>
+                  }
+                </div>
+              </ng-template>
+              <div [innerHTML]="'widgets.getting-started.sys-admin.step3.content' | translate | safe: 'html'"></div>
+              <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/ui/sms-provider-settings/" target="_blank">
+                <mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step3.how-to-configure-sms-provider' | translate }}</a>
+              </mat-step>
+              <mat-step [completed]="gettingStarted.maxSelectedIndex > 2">
+                <ng-template matStepLabel>
+                  <div class="flex items-center justify-between">
+                    <div translate>widgets.getting-started.sys-admin.step4.title</div>
+                    @if (matStepper.selectedIndex === 3) {
+                      <a mat-button color="primary" routerLink="/security-settings/2fa">{{ 'admin.settings' | translate }}</a>
+                    }
+                  </div>
+                </ng-template>
+                <div [innerHTML]="'widgets.getting-started.sys-admin.step4.content' | translate | safe: 'html'"></div>
+                <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/two-factor-authentication/" target="_blank">
+                  <mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step4.how-to-configure-2fa' | translate }}</a>
+                </mat-step>
+                <mat-step [completed]="gettingStarted.maxSelectedIndex > 3">
+                  <ng-template matStepLabel>
+                    <div class="flex items-center justify-between">
+                      <div translate>widgets.getting-started.sys-admin.step5.title</div>
+                      @if (matStepper.selectedIndex === 4) {
+                        <a mat-button color="primary" routerLink="/security-settings/oauth2">{{ 'admin.settings' | translate }}</a>
+                      }
+                    </div>
+                  </ng-template>
+                  <div [innerHTML]="'widgets.getting-started.sys-admin.step5.content' | translate | safe: 'html'"></div>
+                  <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/oauth-2-support/" target="_blank">
+                    <mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step5.how-to-configure-oauth2' | translate }}</a>
+                  </mat-step>
+                  <mat-step [completed]="gettingStarted.maxSelectedIndex > 4">
+                    <ng-template matStepLabel>
+                      <div class="flex items-center justify-between">
+                        <div translate>widgets.getting-started.sys-admin.step6.title</div>
+                        @if (matStepper.selectedIndex === 5) {
+                          <a mat-button color="primary" routerLink="/settings/notifications">{{ 'admin.settings' | translate }}</a>
+                        }
+                      </div>
+                    </ng-template>
+                    <div [innerHTML]="'widgets.getting-started.sys-admin.step6.content' | translate | safe: 'html'"></div>
+                    <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/ui/slack-settings/" target="_blank">
+                      <mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step6.how-to-configure-notifications' | translate }}</a>
+                    </mat-step>
+                  }
+                  @case (authority.TENANT_ADMIN) {
+                    <mat-step [completed]="gettingStarted.maxSelectedIndex > -1">
+                      <ng-template matStepLabel>
+                        <div class="flex items-center justify-between">
+                          <div translate>widgets.getting-started.tenant-admin.step1.title</div>
+                          @if (matStepper.selectedIndex === 0) {
+                            <a mat-button color="primary" routerLink="/entities/devices">{{ 'device.devices' | translate }}</a>
+                          }
+                        </div>
+                      </ng-template>
+                      <div [innerHTML]="'widgets.getting-started.tenant-admin.step1.content' | translate | safe: 'html'"></div>
+                      <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/getting-started-guides/helloworld/#step-1-provision-device" target="_blank">
+                        <mat-icon>description</mat-icon>{{ 'widgets.getting-started.tenant-admin.step1.how-to-create-device' | translate }}</a>
+                      </mat-step>
+                      <mat-step [completed]="gettingStarted.maxSelectedIndex > 0">
+                        <ng-template matStepLabel>
+                          <div class="flex items-center justify-between">
+                            <div translate>widgets.getting-started.tenant-admin.step2.title</div>
+                          </div>
+                        </ng-template>
+                        <div [innerHTML]="'widgets.getting-started.tenant-admin.step2.content-before' | translate | safe: 'html'"></div>
+                        <div class="tb-bordered-content">
+                          <tb-toggle-header #publishCommandSteps value="ubuntu" name="publishCommandSteps" useSelectOnMdLg="false">
+                            <tb-toggle-option value="ubuntu">Ubuntu</tb-toggle-option>
+                            <tb-toggle-option value="macos">MacOS</tb-toggle-option>
+                            <tb-toggle-option value="windows">Windows</tb-toggle-option>
+                          </tb-toggle-header>
+                          @switch (publishCommandSteps.value) {
+                            @case ('ubuntu') {
+                              <p [innerHTML]="'widgets.getting-started.tenant-admin.step2.ubuntu.install-curl' | translate | safe: 'html'"></p>
                 <tb-markdown usePlainMarkdown containerClass="tb-getting-started-code" data="
                     ```bash
                     sudo apt-get install curl
                     {:copy-code}
                     ```
                 "></tb-markdown>
-              </ng-template>
-              <ng-template [ngSwitchCase]="'macos'">
-                <p [innerHTML]="'widgets.getting-started.tenant-admin.step2.macos.install-curl' | translate | safe: 'html'"></p>
+                            }
+                            @case ('macos') {
+                              <p [innerHTML]="'widgets.getting-started.tenant-admin.step2.macos.install-curl' | translate | safe: 'html'"></p>
                 <tb-markdown usePlainMarkdown containerClass="tb-getting-started-code" data="
                     ```bash
                     brew install curl
                     {:copy-code}
                     ```
                 "></tb-markdown>
-              </ng-template>
-              <ng-template [ngSwitchCase]="'windows'">
-                <p [innerHTML]="'widgets.getting-started.tenant-admin.step2.windows.install-curl' | translate | safe: 'html'"></p>
-              </ng-template>
-            </ng-container>
-            <p [innerHTML]="'widgets.getting-started.tenant-admin.step2.replace-access-token' | translate | safe: 'html'"></p>
+                            }
+                            @case ('windows') {
+                              <p [innerHTML]="'widgets.getting-started.tenant-admin.step2.windows.install-curl' | translate | safe: 'html'"></p>
+                            }
+                          }
+                          <p [innerHTML]="'widgets.getting-started.tenant-admin.step2.replace-access-token' | translate | safe: 'html'"></p>
             <tb-markdown usePlainMarkdown containerClass="tb-getting-started-code" data="
                     ```bash
                     curl -v -X POST -d &quot;{\&quot;temperature\&quot;: 25}&quot; {{baseUrl}}/api/v1/$ACCESS_TOKEN/telemetry --header &quot;Content-Type:application/json&quot;
                     {:copy-code}
                     ```
                 "></tb-markdown>
-          </div>
-          <div [innerHTML]="'widgets.getting-started.tenant-admin.step2.content-after' | translate | safe: 'html'"></div>
-          <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/getting-started-guides/helloworld/#step-2-connect-device" target="_blank">
-            <mat-icon>description</mat-icon>{{ 'widgets.getting-started.tenant-admin.step2.how-to-connect-device' | translate }}</a>
-        </mat-step>
-        <mat-step [completed]="gettingStarted.maxSelectedIndex > 1">
-          <ng-template matStepLabel>
-            <div class="flex items-center justify-between">
-              <div translate>widgets.getting-started.tenant-admin.step3.title</div>
-              <a *ngIf="matStepper.selectedIndex === 2" mat-button color="primary" routerLink="/dashboards">{{ 'dashboard.dashboards' | translate }}</a>
-            </div>
-          </ng-template>
-          <div [innerHTML]="'widgets.getting-started.tenant-admin.step3.content' | translate | safe: 'html'"></div>
-          <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/getting-started-guides/helloworld/#step-3-create-dashboard" target="_blank">
-            <mat-icon>description</mat-icon>{{ 'widgets.getting-started.tenant-admin.step3.how-to-create-dashboard' | translate }}</a>
-        </mat-step>
-        <mat-step [completed]="gettingStarted.maxSelectedIndex > 2">
-          <ng-template matStepLabel>
-            <div class="flex items-center justify-between">
-              <div translate>widgets.getting-started.tenant-admin.step4.title</div>
-              <a *ngIf="matStepper.selectedIndex === 3" mat-button color="primary" routerLink="/alarms/alarm-rules">{{ 'widgets.getting-started.tenant-admin.step4.alarm-rules' | translate }}</a>
-            </div>
-          </ng-template>
-          <div [innerHTML]="'widgets.getting-started.tenant-admin.step4.content' | translate | safe: 'html'"></div>
-          <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/alarm-rules/" target="_blank">
-            <mat-icon>description</mat-icon>{{ 'widgets.getting-started.tenant-admin.step4.how-to-configure-alarm-rules' | translate }}</a>
-        </mat-step>
-        <mat-step [completed]="gettingStarted.maxSelectedIndex > 3">
-          <ng-template matStepLabel>
-            <div class="flex items-center justify-between">
-              <div translate>widgets.getting-started.tenant-admin.step5.title</div>
-            </div>
-          </ng-template>
-          <div [innerHTML]="'widgets.getting-started.tenant-admin.step5.content-before' | translate | safe: 'html'"></div>
-          <p [innerHTML]="'widgets.getting-started.tenant-admin.step5.replace-access-token' | translate | safe: 'html'"></p>
+                        </div>
+                        <div [innerHTML]="'widgets.getting-started.tenant-admin.step2.content-after' | translate | safe: 'html'"></div>
+                        <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/getting-started-guides/helloworld/#step-2-connect-device" target="_blank">
+                          <mat-icon>description</mat-icon>{{ 'widgets.getting-started.tenant-admin.step2.how-to-connect-device' | translate }}</a>
+                        </mat-step>
+                        <mat-step [completed]="gettingStarted.maxSelectedIndex > 1">
+                          <ng-template matStepLabel>
+                            <div class="flex items-center justify-between">
+                              <div translate>widgets.getting-started.tenant-admin.step3.title</div>
+                              @if (matStepper.selectedIndex === 2) {
+                                <a mat-button color="primary" routerLink="/dashboards">{{ 'dashboard.dashboards' | translate }}</a>
+                              }
+                            </div>
+                          </ng-template>
+                          <div [innerHTML]="'widgets.getting-started.tenant-admin.step3.content' | translate | safe: 'html'"></div>
+                          <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/getting-started-guides/helloworld/#step-3-create-dashboard" target="_blank">
+                            <mat-icon>description</mat-icon>{{ 'widgets.getting-started.tenant-admin.step3.how-to-create-dashboard' | translate }}</a>
+                          </mat-step>
+                          <mat-step [completed]="gettingStarted.maxSelectedIndex > 2">
+                            <ng-template matStepLabel>
+                              <div class="flex items-center justify-between">
+                                <div translate>widgets.getting-started.tenant-admin.step4.title</div>
+                                @if (matStepper.selectedIndex === 3) {
+                                  <a mat-button color="primary" routerLink="/alarms/alarm-rules">{{ 'widgets.getting-started.tenant-admin.step4.alarm-rules' | translate }}</a>
+                                }
+                              </div>
+                            </ng-template>
+                            <div [innerHTML]="'widgets.getting-started.tenant-admin.step4.content' | translate | safe: 'html'"></div>
+                            <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/alarm-rules/" target="_blank">
+                              <mat-icon>description</mat-icon>{{ 'widgets.getting-started.tenant-admin.step4.how-to-configure-alarm-rules' | translate }}</a>
+                            </mat-step>
+                            <mat-step [completed]="gettingStarted.maxSelectedIndex > 3">
+                              <ng-template matStepLabel>
+                                <div class="flex items-center justify-between">
+                                  <div translate>widgets.getting-started.tenant-admin.step5.title</div>
+                                </div>
+                              </ng-template>
+                              <div [innerHTML]="'widgets.getting-started.tenant-admin.step5.content-before' | translate | safe: 'html'"></div>
+                              <p [innerHTML]="'widgets.getting-started.tenant-admin.step5.replace-access-token' | translate | safe: 'html'"></p>
           <tb-markdown usePlainMarkdown containerClass="tb-getting-started-code" data="
                     ```bash
                     curl -v -X POST -d &quot;{\&quot;temperature\&quot;: 26}&quot; {{baseUrl}}/api/v1/$ACCESS_TOKEN/telemetry --header &quot;Content-Type:application/json&quot;
                     {:copy-code}
                     ```
                 "></tb-markdown>
-          <div [innerHTML]="'widgets.getting-started.tenant-admin.step5.content-after' | translate | safe: 'html'"></div>
-          <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/getting-started-guides/helloworld/#step-5-create-alarm" target="_blank">
-            <mat-icon>description</mat-icon>{{ 'widgets.getting-started.tenant-admin.step5.how-to-create-alarm' | translate }}</a>
-        </mat-step>
-        <mat-step [completed]="gettingStarted.maxSelectedIndex > 4">
-          <ng-template matStepLabel>
-            <div class="flex items-center justify-between">
-              <div translate>widgets.getting-started.tenant-admin.step6.title</div>
-              <a *ngIf="matStepper.selectedIndex === 5" mat-button color="primary" routerLink="/customers">{{ 'customer.customers' | translate }}</a>
-            </div>
-          </ng-template>
-          <div [innerHTML]="'widgets.getting-started.tenant-admin.step6.content' | translate | safe: 'html'"></div>
-          <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/getting-started-guides/helloworld/#step-7-assign-device-and-dashboard-to-customer" target="_blank">
-            <mat-icon>description</mat-icon>{{ 'widgets.getting-started.tenant-admin.step6.how-to-create-customer-and-assign-dashboard' | translate }}</a>
-        </mat-step>
-      </ng-template>
-    </ng-container>
-  </mat-stepper>
-  <div *ngIf="allCompleted" class="flex justify-center pt-6">
-    <button (click)="gettingStartedCompleted()" mat-flat-button color="primary">
-      <mat-icon>rocket_launch</mat-icon>{{ 'widgets.getting-started.finish' | translate }}</button>
-  </div>
-</div>
+                              <div [innerHTML]="'widgets.getting-started.tenant-admin.step5.content-after' | translate | safe: 'html'"></div>
+                              <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/getting-started-guides/helloworld/#step-5-create-alarm" target="_blank">
+                                <mat-icon>description</mat-icon>{{ 'widgets.getting-started.tenant-admin.step5.how-to-create-alarm' | translate }}</a>
+                              </mat-step>
+                              <mat-step [completed]="gettingStarted.maxSelectedIndex > 4">
+                                <ng-template matStepLabel>
+                                  <div class="flex items-center justify-between">
+                                    <div translate>widgets.getting-started.tenant-admin.step6.title</div>
+                                    @if (matStepper.selectedIndex === 5) {
+                                      <a mat-button color="primary" routerLink="/customers">{{ 'customer.customers' | translate }}</a>
+                                    }
+                                  </div>
+                                </ng-template>
+                                <div [innerHTML]="'widgets.getting-started.tenant-admin.step6.content' | translate | safe: 'html'"></div>
+                                <a mat-stroked-button color="primary" href="https://thingsboard.io/docs/getting-started-guides/helloworld/#step-7-assign-device-and-dashboard-to-customer" target="_blank">
+                                  <mat-icon>description</mat-icon>{{ 'widgets.getting-started.tenant-admin.step6.how-to-create-customer-and-assign-dashboard' | translate }}</a>
+                                </mat-step>
+                              }
+                            }
+                          </mat-stepper>
+                          @if (allCompleted) {
+                            <div class="flex justify-center pt-6">
+                              <button (click)="gettingStartedCompleted()" mat-flat-button color="primary">
+                                <mat-icon>rocket_launch</mat-icon>{{ 'widgets.getting-started.finish' | translate }}</button>
+                              </div>
+                            }
+                          </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
index 9fa8ea6b13..6692c97e46 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
@@ -15,52 +15,69 @@
     limitations under the License.
 
 -->
-<div class="flex flex-row" *ngIf="addMode || editMode; else quickLinkTemplate">
-  <div class="tb-edit-link flex flex-1 flex-col" [class.edit-mode]="editMode" [formGroup]="editQuickLinkFormGroup">
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.quick-links.quick-link</mat-label>
-      <input matInput type="text"
-             #linkInput
-             formControlName="link"
-             (focusin)="onFocus()"
-             required
-             [matAutocomplete]="linkAutocomplete">
-      <tb-icon matPrefix *ngIf="quickLink" color="primary">{{ quickLink.icon }}</tb-icon>
-      <button *ngIf="editQuickLinkFormGroup.get('link').value && !disabled"
-              type="button"
-              matSuffix mat-icon-button aria-label="Clear"
-              (click)="clear()">
-        <tb-icon>close</tb-icon>
-      </button>
-      <mat-autocomplete
-        class="tb-autocomplete tb-quick-links"
-        #linkAutocomplete="matAutocomplete"
-        [displayWith]="displayLinkFn">
-        <mat-option *ngFor="let link of filteredLinks | async" [value]="link">
-          <tb-icon>{{ link.icon }}</tb-icon>
-          <span [innerHTML]="link.name | highlight:searchText"></span>
-        </mat-option>
-        <mat-option *ngIf="!(filteredLinks | async)?.length" [value]="null">
-          <span>
-              {{ translate.get('widgets.quick-links.no-links-matching', {name: searchText}) | async }}
-          </span>
-        </mat-option>
-      </mat-autocomplete>
-      <mat-error *ngIf="editQuickLinkFormGroup.get('link').hasError('required')">
-        {{ 'widgets.quick-links.quick-link-required' | translate }}
-      </mat-error>
-    </mat-form-field>
-    <div *ngIf="addMode" class="flex flex-row items-stretch justify-end gap-2">
-      <button *ngIf="!addOnly" mat-button color="primary" (click)="cancelAdd()">{{ 'action.cancel' | translate }}</button>
-      <button mat-raised-button color="primary" (click)="add()">{{ 'action.add' | translate }}</button>
+@if (addMode || editMode) {
+  <div class="flex flex-row">
+    <div class="tb-edit-link flex flex-1 flex-col" [class.edit-mode]="editMode" [formGroup]="editQuickLinkFormGroup">
+      <mat-form-field class="mat-block flex-1">
+        <mat-label translate>widgets.quick-links.quick-link</mat-label>
+        <input matInput type="text"
+               #linkInput
+               formControlName="link"
+               (focusin)="onFocus()"
+               required
+               [matAutocomplete]="linkAutocomplete">
+        @if (quickLink) {
+          <tb-icon matPrefix color="primary">{{ quickLink.icon }}</tb-icon>
+        }
+        @if (editQuickLinkFormGroup.get('link').value && !disabled) {
+          <button
+            type="button"
+            matSuffix mat-icon-button aria-label="Clear"
+            (click)="clear()">
+            <tb-icon>close</tb-icon>
+          </button>
+        }
+        <mat-autocomplete
+          class="tb-autocomplete tb-quick-links"
+          #linkAutocomplete="matAutocomplete"
+          [displayWith]="displayLinkFn">
+          @for (link of filteredLinks | async; track link) {
+            <mat-option [value]="link">
+              <tb-icon>{{ link.icon }}</tb-icon>
+              <span [innerHTML]="link.name | highlight:searchText"></span>
+            </mat-option>
+          }
+          @if (!(filteredLinks | async)?.length) {
+            <mat-option [value]="null">
+              <span>
+                {{ translate.get('widgets.quick-links.no-links-matching', {name: searchText}) | async }}
+              </span>
+            </mat-option>
+          }
+        </mat-autocomplete>
+        @if (editQuickLinkFormGroup.get('link').hasError('required')) {
+          <mat-error>
+            {{ 'widgets.quick-links.quick-link-required' | translate }}
+          </mat-error>
+        }
+      </mat-form-field>
+      @if (addMode) {
+        <div class="flex flex-row items-stretch justify-end gap-2">
+          @if (!addOnly) {
+            <button mat-button color="primary" (click)="cancelAdd()">{{ 'action.cancel' | translate }}</button>
+          }
+          <button mat-raised-button color="primary" (click)="add()">{{ 'action.add' | translate }}</button>
+        </div>
+      }
     </div>
+    @if (editMode) {
+      <div class="tb-edit-buttons flex flex-row">
+        <button mat-icon-button (click)="apply()"><tb-icon>check</tb-icon></button>
+        <button mat-icon-button (click)="cancelEdit()"><tb-icon>close</tb-icon></button>
+      </div>
+    }
   </div>
-  <div *ngIf="editMode" class="tb-edit-buttons flex flex-row">
-    <button mat-icon-button (click)="apply()"><tb-icon>check</tb-icon></button>
-    <button mat-icon-button (click)="cancelEdit()"><tb-icon>close</tb-icon></button>
-  </div>
-</div>
-<ng-template #quickLinkTemplate>
+} @else {
   <div class="flex flex-row">
     <div class="tb-link flex-1">
       <div class="tb-link-container">
@@ -85,4 +102,4 @@
       </button>
     </div>
   </div>
-</ng-template>
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html
index ee6e1097ac..f70355a0c4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html
@@ -27,17 +27,19 @@
     </button>
   </div>
   <mat-grid-list class="tb-links-list flex-1" [cols]="columns" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
-    <mat-grid-tile class="tb-links-tile" *ngFor="let quickLink of menuLinks$() | async">
-      <a class="tb-link-button flex-1"
-         [routerLink]="quickLink.path">
-        <div class="tb-link-container">
-          <div class="tb-link-icon-container">
-            <tb-icon color="primary">{{ quickLink.icon }}</tb-icon>
+    @for (quickLink of menuLinks$() | async; track quickLink) {
+      <mat-grid-tile class="tb-links-tile">
+        <a class="tb-link-button flex-1"
+           [routerLink]="quickLink.path">
+          <div class="tb-link-container">
+            <div class="tb-link-icon-container">
+              <tb-icon color="primary">{{ quickLink.icon }}</tb-icon>
+            </div>
+            <div class="tb-link-text">{{ (quickLink.fullName || quickLink.name) | translate }}</div>
           </div>
-          <div class="tb-link-text">{{ (quickLink.fullName || quickLink.name) | translate }}</div>
-        </div>
-      </a>
-    </mat-grid-tile>
+        </a>
+      </mat-grid-tile>
+    }
     <mat-grid-tile class="tb-links-tile">
       <div class="tb-add-link-button flex-1"
            matTooltip="{{ 'widgets.quick-links.add-link' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
index e8fba081ee..81ac1e5da2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-card-content flex flex-col gap-2">
-  <ng-container *ngIf="hasDashboardsAccess; else noDataAvailable">
+  @if (hasDashboardsAccess) {
     <div class="tb-card-header">
       <a class="tb-title-link" routerLink="/dashboards">{{ 'widgets.recent-dashboards.title' | translate }}</a>
       <div class="flex flex-row items-center justify-start gap-2 lt-md:items-center lt-md:justify-between">
@@ -24,89 +24,92 @@
           <tb-toggle-option value="last">{{ 'widgets.recent-dashboards.last' | translate }}</tb-toggle-option>
           <tb-toggle-option value="starred">{{ 'widgets.recent-dashboards.starred' | translate }}</tb-toggle-option>
         </tb-toggle-header>
-        <ng-container *ngIf="authUser.authority === authority.TENANT_ADMIN">
+        @if (authUser.authority === authority.TENANT_ADMIN) {
           @if (hasDevice) {
             <a class="md:!hidden"
-               mat-flat-button color="primary" routerLink="/dashboards/all" [queryParams]="{action: 'add'}">{{ 'dashboard.add' | translate }}</a>
+            mat-flat-button color="primary" routerLink="/dashboards/all" [queryParams]="{action: 'add'}">{{ 'dashboard.add' | translate }}</a>
           } @else {
             <a class="md:!hidden"
-               mat-stroked-button color="primary" routerLink="/dashboards/all" [queryParams]="{action: 'add'}">{{ 'dashboard.add' | translate }}</a>
+            mat-stroked-button color="primary" routerLink="/dashboards/all" [queryParams]="{action: 'add'}">{{ 'dashboard.add' | translate }}</a>
           }
-        </ng-container>
+        }
       </div>
     </div>
-    <ng-container *ngIf="userDashboardsInfo; else loading" [ngSwitch]="dashboardsToggle.value">
-      <ng-template [ngSwitchCase]="'last'">
-        <div *ngIf="hasLastVisitedDashboards(); else noLastVisitedDashboards" style="overflow-y: auto;">
-          <table mat-table
-                 [dataSource]="lastVisitedDashboardsDataSource" matSort
-                 [matSortActive]="lastVisitedDashboardsPageLink.sortOrder?.property"
-                 [matSortDirection]="lastVisitedDashboardsPageLink.sortDirection()" matSortDisableClear>
-            <ng-container matColumnDef="starred">
-              <mat-header-cell class="star-cell" *matHeaderCellDef>
-              </mat-header-cell>
-              <mat-cell class="star-cell" *matCellDef="let lastVisitedDashboard">
-                <mat-icon (click)="toggleDashboardStar(lastVisitedDashboard)"
-                          class="star" [class.starred]="lastVisitedDashboard.starred">{{ lastVisitedDashboard.starred ? 'star' : 'star_border' }}</mat-icon>
-              </mat-cell>
-            </ng-container>
-            <ng-container matColumnDef="title">
-              <mat-header-cell class="title" *matHeaderCellDef mat-sort-header>
-                {{ 'widgets.recent-dashboards.name' | translate }}
-              </mat-header-cell>
-              <mat-cell class="title" *matCellDef="let lastVisitedDashboard">
-                <a [routerLink]="createDashboardUrl(lastVisitedDashboard.id)">{{ lastVisitedDashboard.title | customTranslate }}</a>
-              </mat-cell>
-            </ng-container>
-            <ng-container matColumnDef="lastVisited">
-              <mat-header-cell class="last-visited" *matHeaderCellDef mat-sort-header>
-                {{ 'widgets.recent-dashboards.last-viewed' | translate }}
-              </mat-header-cell>
-              <mat-cell class="last-visited" *matCellDef="let lastVisitedDashboard">
-                {{ lastVisitedDashboard.lastVisited | dateAgo:{applyAgo: true} }}
-              </mat-cell>
-            </ng-container>
-            <mat-header-row *matHeaderRowDef="lastVisitedDashboardsColumns; sticky: true"></mat-header-row>
-            <mat-row *matRowDef="let lastVisitedDashboard; columns: lastVisitedDashboardsColumns;"></mat-row>
-          </table>
-        </div>
-        <ng-template #noLastVisitedDashboards>
-          <div class="tb-no-dashboards">
-            <div class="tb-no-last-visited-bg"></div>
-            <div class="tb-no-last-visited-dashboards-text">{{ 'widgets.recent-dashboards.no-last-viewed-dashboards' | translate }}</div>
-          </div>
-        </ng-template>
-      </ng-template>
-      <ng-template [ngSwitchCase]="'starred'">
-        <div style="overflow-y: auto;">
-          <div class="tb-starred-dashboard-row" *ngFor="let dashboard of userDashboardsInfo?.starred">
-            <div class="tb-cell star-cell">
-              <mat-icon (click)="toggleDashboardStar(dashboard)"
-                        class="star" [class.starred]="dashboard.starred">{{ dashboard.starred ? 'star' : 'star_border' }}</mat-icon>
+    @if (userDashboardsInfo) {
+      @switch (dashboardsToggle.value) {
+        @case ('last') {
+          @if (hasLastVisitedDashboards()) {
+            <div style="overflow-y: auto;">
+              <table mat-table
+                     [dataSource]="lastVisitedDashboardsDataSource" matSort
+                     [matSortActive]="lastVisitedDashboardsPageLink.sortOrder?.property"
+                     [matSortDirection]="lastVisitedDashboardsPageLink.sortDirection()" matSortDisableClear>
+                <ng-container matColumnDef="starred">
+                  <mat-header-cell class="star-cell" *matHeaderCellDef>
+                  </mat-header-cell>
+                  <mat-cell class="star-cell" *matCellDef="let lastVisitedDashboard">
+                    <mat-icon (click)="toggleDashboardStar(lastVisitedDashboard)"
+                    class="star" [class.starred]="lastVisitedDashboard.starred">{{ lastVisitedDashboard.starred ? 'star' : 'star_border' }}</mat-icon>
+                  </mat-cell>
+                </ng-container>
+                <ng-container matColumnDef="title">
+                  <mat-header-cell class="title" *matHeaderCellDef mat-sort-header>
+                    {{ 'widgets.recent-dashboards.name' | translate }}
+                  </mat-header-cell>
+                  <mat-cell class="title" *matCellDef="let lastVisitedDashboard">
+                    <a [routerLink]="createDashboardUrl(lastVisitedDashboard.id)">{{ lastVisitedDashboard.title | customTranslate }}</a>
+                  </mat-cell>
+                </ng-container>
+                <ng-container matColumnDef="lastVisited">
+                  <mat-header-cell class="last-visited" *matHeaderCellDef mat-sort-header>
+                    {{ 'widgets.recent-dashboards.last-viewed' | translate }}
+                  </mat-header-cell>
+                  <mat-cell class="last-visited" *matCellDef="let lastVisitedDashboard">
+                    {{ lastVisitedDashboard.lastVisited | dateAgo:{applyAgo: true} }}
+                  </mat-cell>
+                </ng-container>
+                <mat-header-row *matHeaderRowDef="lastVisitedDashboardsColumns; sticky: true"></mat-header-row>
+                <mat-row *matRowDef="let lastVisitedDashboard; columns: lastVisitedDashboardsColumns;"></mat-row>
+              </table>
             </div>
-            <div class="tb-cell title">
-              <a [routerLink]="createDashboardUrl(dashboard.id)">{{ dashboard.title | customTranslate }}</a>
+          } @else {
+            <div class="tb-no-dashboards">
+              <div class="tb-no-last-visited-bg"></div>
+              <div class="tb-no-last-visited-dashboards-text">{{ 'widgets.recent-dashboards.no-last-viewed-dashboards' | translate }}</div>
             </div>
+          }
+        }
+        @case ('starred') {
+          <div style="overflow-y: auto;">
+            @for (dashboard of userDashboardsInfo?.starred; track dashboard) {
+              <div class="tb-starred-dashboard-row">
+                <div class="tb-cell star-cell">
+                  <mat-icon (click)="toggleDashboardStar(dashboard)"
+                  class="star" [class.starred]="dashboard.starred">{{ dashboard.starred ? 'star' : 'star_border' }}</mat-icon>
+                </div>
+                <div class="tb-cell title">
+                  <a [routerLink]="createDashboardUrl(dashboard.id)">{{ dashboard.title | customTranslate }}</a>
+                </div>
+              </div>
+            }
           </div>
-        </div>
-        <tb-dashboard-autocomplete class="tb-star-dashboard-autocomplete"
-                                   #starDashboardAutocomplete
-                                   subscriptSizing="dynamic"
-                                   appearance="outline"
-                                   [useIdValue]="false"
-                                   [customerId]="customerId"
-                                   label=""
-                                   placeholder="{{ 'dashboard.select-dashboard' | translate }}"
-                                   [(ngModel)]="starredDashboardValue" (ngModelChange)="onStarDashboard($event)"></tb-dashboard-autocomplete>
-      </ng-template>
-    </ng-container>
-    <ng-template #loading>
+          <tb-dashboard-autocomplete class="tb-star-dashboard-autocomplete"
+                                     #starDashboardAutocomplete
+                                     subscriptSizing="dynamic"
+                                     appearance="outline"
+                                     [useIdValue]="false"
+                                     [customerId]="customerId"
+                                     label=""
+                                     placeholder="{{ 'dashboard.select-dashboard' | translate }}"
+          [(ngModel)]="starredDashboardValue" (ngModelChange)="onStarDashboard($event)"></tb-dashboard-autocomplete>
+        }
+      }
+    } @else {
       <div class="tb-no-dashboards">
         <mat-spinner [diameter]="50" mode="indeterminate"></mat-spinner>
       </div>
-    </ng-template>
-  </ng-container>
-  <ng-template #noDataAvailable>
+    }
+  } @else {
     <div class="tb-card-header">
       <div class="tb-title">{{ 'widgets.recent-dashboards.title' | translate }}</div>
     </div>
@@ -114,5 +117,5 @@
       <div class="tb-no-data-bg"></div>
       <div class="tb-no-data-text" translate>widgets.home.no-data-available</div>
     </div>
-  </ng-template>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
index d23b7b8e50..dd2e0258da 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-card-content flex flex-col gap-2">
-  <ng-container *ngIf="hasUsageInfoAccess; else noDataAvailable">
+  @if (hasUsageInfoAccess) {
     <div class="tb-card-header">
       <a class="tb-title-link" routerLink="/usage">{{ 'widgets.usage-info.title' | translate }}</a>
       <tb-toggle-header #usageToggle [value]="toggleValue" name="usageToggle">
@@ -24,8 +24,8 @@
         <tb-toggle-option value="apiCalls">{{ 'widgets.usage-info.api-calls' | translate }}</tb-toggle-option>
       </tb-toggle-header>
     </div>
-    <ng-container [ngSwitch]="usageToggle.value">
-      <ng-template [ngSwitchCase]="'entities'">
+    @switch (usageToggle.value) {
+      @case ('entities') {
         <div class="tb-usage-list flex-1">
           <div class="tb-usage-items">
             <div class="tb-usage-item" [class.critical]="entityItemCritical.devices" translate>device.devices</div>
@@ -51,8 +51,8 @@
             </div>
           </div>
         </div>
-      </ng-template>
-      <ng-template [ngSwitchCase]="'apiCalls'">
+      }
+      @case ('apiCalls') {
         <div class="tb-usage-list flex-1">
           <div class="tb-usage-items">
             <div class="tb-usage-item" [class.critical]="apiCallItemCritical.transportMessages" translate>api-usage.transport-messages</div>
@@ -78,10 +78,9 @@
             </div>
           </div>
         </div>
-      </ng-template>
-    </ng-container>
-  </ng-container>
-  <ng-template #noDataAvailable>
+      }
+    }
+  } @else {
     <div class="tb-card-header">
       <div class="tb-title">{{ 'widgets.usage-info.title' | translate }}</div>
     </div>
@@ -89,5 +88,5 @@
       <div class="tb-no-data-bg"></div>
       <div class="tb-no-data-text" translate>widgets.home.no-data-available</div>
     </div>
-  </ng-template>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html
index 92f6686624..409dd62b6c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html
@@ -36,28 +36,29 @@
         </div>
       </div>
     </div>
-    <div class="tb-version-info-container flex flex-1 flex-row" *ngIf="updateMessage?.updateAvailable; else versionUpToDate">
-      <div class="flex flex-1 flex-col items-stretch justify-evenly">
-        <div class="tb-card-header">
-          <a class="tb-version-link" [href]="updateMessage?.latestVersionReleaseNotesUrl" target="_blank">
-            <span class="md-lg:!hidden" translate>widgets.version-info.available-version</span>
-            <span class="lt-md:!hidden gt-md-lg:!hidden" translate>widgets.version-info.available</span>
-          </a>
+    @if (updateMessage?.updateAvailable) {
+      <div class="tb-version-info-container flex flex-1 flex-row">
+        <div class="flex flex-1 flex-col items-stretch justify-evenly">
+          <div class="tb-card-header">
+            <a class="tb-version-link" [href]="updateMessage?.latestVersionReleaseNotesUrl" target="_blank">
+              <span class="md-lg:!hidden" translate>widgets.version-info.available-version</span>
+              <span class="lt-md:!hidden gt-md-lg:!hidden" translate>widgets.version-info.available</span>
+            </a>
+          </div>
+          <div class="tb-version">{{ updateMessage?.latestVersion }}</div>
+          <div class="flex flex-row items-end justify-end gt-md-lg:!hidden">
+            <a mat-flat-button color="primary" class="tb-upgrade" [href]="updateMessage?.upgradeInstructionsUrl" target="_blank">{{ 'widgets.version-info.upgrade' | translate }}</a>
+          </div>
         </div>
-        <div class="tb-version">{{ updateMessage?.latestVersion }}</div>
-        <div class="flex flex-row items-end justify-end gt-md-lg:!hidden">
+        <div class="flex flex-col items-stretch justify-center md-lg:!hidden lt-md:!hidden">
           <a mat-flat-button color="primary" class="tb-upgrade" [href]="updateMessage?.upgradeInstructionsUrl" target="_blank">{{ 'widgets.version-info.upgrade' | translate }}</a>
         </div>
       </div>
-      <div class="flex flex-col items-stretch justify-center md-lg:!hidden lt-md:!hidden">
-        <a mat-flat-button color="primary" class="tb-upgrade" [href]="updateMessage?.upgradeInstructionsUrl" target="_blank">{{ 'widgets.version-info.upgrade' | translate }}</a>
+    } @else {
+      <div class="tb-version-info-container up-to-date flex flex-1 flex-col items-center justify-evenly">
+        <div class="material-icons-round check-icon">check</div>
+        <div class="up-to-date-text" translate>widgets.version-info.version-is-up-to-date</div>
       </div>
-    </div>
+    }
   </div>
 </div>
-<ng-template #versionUpToDate>
-  <div class="tb-version-info-container up-to-date flex flex-1 flex-col items-center justify-evenly">
-    <div class="material-icons-round check-icon">check</div>
-    <div class="up-to-date-text" translate>widgets.version-info.version-is-up-to-date</div>
-  </div>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html
index 025dbf3e33..c47fd94f75 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html
@@ -24,21 +24,26 @@
       <div #batteryLevelRectangle class="tb-battery-level-rectangle" [class]="layoutClass" [class.solid]="solid" [class.divided]="!solid">
         <div class="tb-battery-level-shape" [style.background]="batteryShapeColor.color"></div>
         <div class="tb-battery-level-container" [style.gap]="dividedGap">
-          <div *ngIf="solid; else dividedIndicator" class="tb-battery-level-indicator-box solid"
-               [style.background-image]="'linear-gradient(0deg, ' + batteryLevelColor.color + ' 0% 100%)'"
-               [style.background-size]="vertical ? '100% ' + (batteryFillValue + 1) + '%' : (batteryFillValue + 1) + '% 100%'">
-          </div>
+          @if (solid) {
+            <div class="tb-battery-level-indicator-box solid"
+                 [style.background-image]="'linear-gradient(0deg, ' + batteryLevelColor.color + ' 0% 100%)'"
+                 [style.background-size]="vertical ? '100% ' + (batteryFillValue + 1) + '%' : (batteryFillValue + 1) + '% 100%'">
+            </div>
+          } @else {
+            @for (section of batterySections; track trackBySection($index)) {
+              <div class="tb-battery-level-indicator-box divided"
+                   [style.background]="batteryLevelColor.color"
+                   [style.border-radius]="dividedBorderRadius"
+              [style.opacity]="section ? '1': '0'"></div>
+            }
+          }
         </div>
       </div>
     </div>
-    <div *ngIf="showValue" #batteryLevelValueBox class="tb-battery-level-value-box">
-      <div #batteryLevelValue class="tb-battery-level-value" [style]="valueStyle" [style.color]="valueColor.color">{{ valueText }}</div>
-    </div>
+    @if (showValue) {
+      <div #batteryLevelValueBox class="tb-battery-level-value-box">
+        <div #batteryLevelValue class="tb-battery-level-value" [style]="valueStyle" [style.color]="valueColor.color">{{ valueText }}</div>
+      </div>
+    }
   </div>
 </div>
-<ng-template #dividedIndicator>
-  <div *ngFor="let section of batterySections; trackBy: trackBySection" class="tb-battery-level-indicator-box divided"
-       [style.background]="batteryLevelColor.color"
-       [style.border-radius]="dividedBorderRadius"
-       [style.opacity]="section ? '1': '0'"></div>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.html
index 9c2803d117..d9cf483025 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.html
@@ -20,11 +20,15 @@
   <div class="tb-liquid-level-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div #liquidLevelContent class="tb-liquid-level-content"></div>
-  <div *ngIf="errorsMsg.length" class="tb-liquid-level-error">
-    <div class="tb-liquid-level-error-container">
-      <div *ngFor="let error of errorsMsg">
-        {{ error }}
+  @if (errorsMsg.length) {
+    <div class="tb-liquid-level-error">
+      <div class="tb-liquid-level-error-container">
+        @for (error of errorsMsg; track error) {
+          <div>
+            {{ error }}
+          </div>
+        }
       </div>
     </div>
-  </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.html
index 0dbd05d6bc..43c92c9c73 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.html
@@ -17,25 +17,35 @@
 -->
 <div class="tb-signal-strength-panel" [style.padding]="padding" [style]="backgroundStyle$ | async"
      [class.tb-signal-strength-pointer]="hasCardClickAction" (click)="cardClick($event)">
-    <div class="tb-signal-strength-overlay" [style]="overlayStyle"></div>
-    <div *ngIf="widgetComponent.dashboardWidget.showWidgetTitlePanel || showDate" class="tb-signal-strength-title-panel">
-        <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
-        <div *ngIf="showDate" [style]="dateStyle" [innerHTML]="dateFormat.formatted"></div>
+  <div class="tb-signal-strength-overlay" [style]="overlayStyle"></div>
+  @if (widgetComponent.dashboardWidget.showWidgetTitlePanel || showDate) {
+    <div class="tb-signal-strength-title-panel">
+      <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
+      @if (showDate) {
+        <div [style]="dateStyle" [innerHTML]="dateFormat.formatted"></div>
+      }
     </div>
-    <div class="tb-signal-strength-content">
-        <div #signalStrengthShape class="tb-signal-strength-shape">
-        </div>
-        <div *ngIf="showTooltip" class="tb-signal-strength-tooltip-container">
-            <div #signalStrengthTooltip [style]="tooltipStyle" class="tb-signal-strength-tooltip">
-                <div *ngIf="showTooltipValue" class="tb-signal-strength-tooltip-row">
-                    <div [style]="tooltipValueLabelStyle" translate>widgets.signal-strength.value</div>
-                    <div [style]="tooltipValueStyle">{{ tooltipValueText }}</div>
-                </div>
-                <div *ngIf="showTooltipDate" class="tb-signal-strength-tooltip-row">
-                    <div [style]="tooltipDateLabelStyle" translate>widgets.signal-strength.last-update</div>
-                    <div [style]="tooltipDateStyle" [innerHTML]="tooltipDateFormat.formatted"></div>
-                </div>
+  }
+  <div class="tb-signal-strength-content">
+    <div #signalStrengthShape class="tb-signal-strength-shape">
+    </div>
+    @if (showTooltip) {
+      <div class="tb-signal-strength-tooltip-container">
+        <div #signalStrengthTooltip [style]="tooltipStyle" class="tb-signal-strength-tooltip">
+          @if (showTooltipValue) {
+            <div class="tb-signal-strength-tooltip-row">
+              <div [style]="tooltipValueLabelStyle" translate>widgets.signal-strength.value</div>
+              <div [style]="tooltipValueStyle">{{ tooltipValueText }}</div>
             </div>
+          }
+          @if (showTooltipDate) {
+            <div class="tb-signal-strength-tooltip-row">
+              <div [style]="tooltipDateLabelStyle" translate>widgets.signal-strength.last-update</div>
+              <div [style]="tooltipDateStyle" [innerHTML]="tooltipDateFormat.formatted"></div>
+            </div>
+          }
         </div>
-    </div>
+      </div>
+    }
+  </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html
index 0cc88f5404..29e51327db 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html
@@ -25,9 +25,15 @@
       <tb-icon [style]="iconStyle">{{ icon }}</tb-icon>
     </div>
     <div class="tb-status-widget-labels-container">
-      <div *ngIf="showLabel" class="tb-status-widget-label" [style]="labelStyle">{{ label$ | async }}</div>
-      <div *ngIf="showStatus" class="tb-status-widget-status" [style]="statusStyle">{{ status$ | async }}</div>
+      @if (showLabel) {
+        <div class="tb-status-widget-label" [style]="labelStyle">{{ label$ | async }}</div>
+      }
+      @if (showStatus) {
+        <div class="tb-status-widget-status" [style]="statusStyle">{{ status$ | async }}</div>
+      }
     </div>
   </div>
-  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
+  @if (loading$ | async) {
+    <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate"></mat-progress-bar>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
index e12bb74d9e..42786f7a58 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
@@ -16,43 +16,45 @@
 
 -->
 <div class="tb-json-input" tb-toast toastTarget="{{ toastTargetId }}">
-  <form *ngIf="attributeUpdateFormGroup"
-        class="tb-json-input__form flex flex-col"
-        [formGroup]="attributeUpdateFormGroup"
-        (ngSubmit)="save()">
-      <div class="flex flex-1 flex-col gap-2.5" *ngIf="datasourceDetected && !errorMessage; else errorContainer">
-        <fieldset class="flex-1">
-          <tb-json-object-edit
-            [editorStyle]="{minHeight: '100px'}"
-            fillHeight="true"
-            [jsonRequired]="settings.attributeRequired"
-            label="{{ settings.showLabel ? labelValue : '' }}"
-            formControlName="currentValue"
-            (focusin)="isFocused = true;"
-            (focusout)="isFocused = false;"
-          ></tb-json-object-edit>
-        </fieldset>
-        <div class="tb-json-input__actions flex flex-row items-center justify-end gap-5">
-          <button mat-button color="primary"
-                  type="button"
-                  [disabled]="!attributeUpdateFormGroup.dirty"
-                  (click)="discard()"
-                  matTooltip="{{ 'widgets.input-widgets.discard-changes' | translate }}"
-                  matTooltipPosition="above">
-            {{ "action.undo" | translate }}
-          </button>
-          <button mat-raised-button color="primary"
-                  type="submit"
-                  [disabled]="attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty">
-            {{ "action.save" | translate }}
-          </button>
+  @if (attributeUpdateFormGroup) {
+    <form
+      class="tb-json-input__form flex flex-col"
+      [formGroup]="attributeUpdateFormGroup"
+      (ngSubmit)="save()">
+      @if (datasourceDetected && !errorMessage) {
+        <div class="flex flex-1 flex-col gap-2.5">
+          <fieldset class="flex-1">
+            <tb-json-object-edit
+              [editorStyle]="{minHeight: '100px'}"
+              fillHeight="true"
+              [jsonRequired]="settings.attributeRequired"
+              label="{{ settings.showLabel ? labelValue : '' }}"
+              formControlName="currentValue"
+              (focusin)="isFocused = true;"
+              (focusout)="isFocused = false;"
+            ></tb-json-object-edit>
+          </fieldset>
+          <div class="tb-json-input__actions flex flex-row items-center justify-end gap-5">
+            <button mat-button color="primary"
+                    type="button"
+                    [disabled]="!attributeUpdateFormGroup.dirty"
+                    (click)="discard()"
+                    matTooltip="{{ 'widgets.input-widgets.discard-changes' | translate }}"
+                    matTooltipPosition="above">
+              {{ "action.undo" | translate }}
+            </button>
+            <button mat-raised-button color="primary"
+                    type="submit"
+                    [disabled]="attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty">
+              {{ "action.save" | translate }}
+            </button>
+          </div>
         </div>
-      </div>
-
-    <ng-template #errorContainer>
-      <div class="tb-json-input__error flex flex-1 flex-col items-center justify-center">
-        {{ errorMessage | translate }}
-      </div>
-    </ng-template>
-  </form>
+      } @else {
+        <div class="tb-json-input__error flex flex-1 flex-col items-center justify-center">
+          {{ errorMessage | translate }}
+        </div>
+      }
+    </form>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
index cd50cb6174..4c74e0e668 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
@@ -17,72 +17,120 @@
 -->
 <table class="tb-legend" [class.tb-legend-row]="isRowDirection" [class.tb-legend-column]="!isRowDirection">
   <thead>
-  <tr class="tb-legend-header" *ngIf="!isRowDirection">
-    <th colspan="2"></th>
-    <th *ngIf="legendConfig.showMin === true">{{ 'legend.min' | translate }}</th>
-    <th *ngIf="legendConfig.showMax === true">{{ 'legend.max' | translate }}</th>
-    <th *ngIf="legendConfig.showAvg === true">{{ 'legend.avg' | translate }}</th>
-    <th *ngIf="legendConfig.showTotal === true">{{ 'legend.total' | translate }}</th>
-    <th *ngIf="legendConfig.showLatest === true">{{ 'legend.latest' | translate }}</th>
-  </tr>
+    @if (!isRowDirection) {
+      <tr class="tb-legend-header">
+        <th colspan="2"></th>
+        @if (legendConfig.showMin === true) {
+          <th>{{ 'legend.min' | translate }}</th>
+        }
+        @if (legendConfig.showMax === true) {
+          <th>{{ 'legend.max' | translate }}</th>
+        }
+        @if (legendConfig.showAvg === true) {
+          <th>{{ 'legend.avg' | translate }}</th>
+        }
+        @if (legendConfig.showTotal === true) {
+          <th>{{ 'legend.total' | translate }}</th>
+        }
+        @if (legendConfig.showLatest === true) {
+          <th>{{ 'legend.latest' | translate }}</th>
+        }
+      </tr>
+    }
   </thead>
   <tbody>
-    <ng-container *ngIf="!isRowDirection">
-      <tr class="tb-legend-keys" *ngFor="let legendKey of legendKeys()">
-        <td><span class="tb-legend-line" [style.background-color]="legendKey.dataKey.color"></span></td>
-        <td class="tb-legend-label"
-            (click)="toggleHideData(legendKey.dataIndex)"
-            [innerHTML]="legendKey.dataKey.label | safe: 'html'"
-            [class.tb-hidden-label]="legendKey.dataKey.hidden"
-            [class.tb-horizontal]="isHorizontal">
-        </td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showMin === true"
+    @if (!isRowDirection) {
+      @for (legendKey of legendKeys(); track legendKey) {
+        <tr class="tb-legend-keys">
+          <td><span class="tb-legend-line" [style.background-color]="legendKey.dataKey.color"></span></td>
+          <td class="tb-legend-label"
+              (click)="toggleHideData(legendKey.dataIndex)"
+              [innerHTML]="legendKey.dataKey.label | safe: 'html'"
+              [class.tb-hidden-label]="legendKey.dataKey.hidden"
+              [class.tb-horizontal]="isHorizontal">
+          </td>
+          @if (legendConfig.showMin === true) {
+            <td class="tb-legend-value"
             [innerHTML]="legendData.data[legendKey.dataIndex].min | safe: 'html'"></td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showMax === true"
+          }
+          @if (legendConfig.showMax === true) {
+            <td class="tb-legend-value"
             [innerHTML]="legendData.data[legendKey.dataIndex].max | safe: 'html'"></td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showAvg === true"
+          }
+          @if (legendConfig.showAvg === true) {
+            <td class="tb-legend-value"
             [innerHTML]="legendData.data[legendKey.dataIndex].avg | safe: 'html'"></td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showTotal === true"
+          }
+          @if (legendConfig.showTotal === true) {
+            <td class="tb-legend-value"
             [innerHTML]="legendData.data[legendKey.dataIndex].total | safe: 'html'"></td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showLatest === true"
+          }
+          @if (legendConfig.showLatest === true) {
+            <td class="tb-legend-value"
             [innerHTML]="legendData.data[legendKey.dataIndex].latest | safe: 'html'"></td>
+          }
+        </tr>
+      }
+    }
+    @if (isRowDirection) {
+      <tr class="tb-legend-keys" [class.tb-row-direction]="!displayHeader">
+        <td></td>
+        @for (legendKey of legendKeys(); track legendKey) {
+          <td>
+            <span class="tb-legend-line" [style.background-color]="legendKey.dataKey.color"></span>
+            <span class="tb-legend-label"
+                  [innerHTML]="legendKey.dataKey.label | safe: 'html'"
+                  (click)="toggleHideData(legendKey.dataIndex)"
+                  [class.tb-hidden-label]="legendKey.dataKey.hidden">
+            </span>
+          </td>
+        }
       </tr>
-    </ng-container>
-    <tr *ngIf="isRowDirection" class="tb-legend-keys" [class.tb-row-direction]="!displayHeader">
-      <td></td>
-      <td *ngFor="let legendKey of legendKeys()">
-        <span class="tb-legend-line" [style.background-color]="legendKey.dataKey.color"></span>
-        <span class="tb-legend-label"
-              [innerHTML]="legendKey.dataKey.label | safe: 'html'"
-              (click)="toggleHideData(legendKey.dataIndex)"
-              [class.tb-hidden-label]="legendKey.dataKey.hidden">
-        </span>
-      </td>
-    </tr>
-    <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showMin === true">
-      <td class="tb-legend-type">{{ 'legend.min' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()"
+    }
+    @if (isRowDirection && legendConfig.showMin === true) {
+      <tr class="tb-legend-keys">
+        <td class="tb-legend-type">{{ 'legend.min' | translate }}</td>
+        @for (legendKey of legendKeys(); track legendKey) {
+          <td class="tb-legend-value"
           [innerHTML]="legendData.data[legendKey.dataIndex].min | safe: 'html'"></td>
-    </tr>
-    <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showMax === true">
-      <td class="tb-legend-type">{{ 'legend.max' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()"
+        }
+      </tr>
+    }
+    @if (isRowDirection && legendConfig.showMax === true) {
+      <tr class="tb-legend-keys">
+        <td class="tb-legend-type">{{ 'legend.max' | translate }}</td>
+        @for (legendKey of legendKeys(); track legendKey) {
+          <td class="tb-legend-value"
           [innerHTML]="legendData.data[legendKey.dataIndex].max | safe: 'html'"></td>
-    </tr>
-    <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showAvg === true">
-      <td class="tb-legend-type">{{ 'legend.avg' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()"
+        }
+      </tr>
+    }
+    @if (isRowDirection && legendConfig.showAvg === true) {
+      <tr class="tb-legend-keys">
+        <td class="tb-legend-type">{{ 'legend.avg' | translate }}</td>
+        @for (legendKey of legendKeys(); track legendKey) {
+          <td class="tb-legend-value"
           [innerHTML]="legendData.data[legendKey.dataIndex].avg | safe: 'html'"></td>
-    </tr>
-    <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showTotal === true">
-      <td class="tb-legend-type">{{ 'legend.total' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()"
+        }
+      </tr>
+    }
+    @if (isRowDirection && legendConfig.showTotal === true) {
+      <tr class="tb-legend-keys">
+        <td class="tb-legend-type">{{ 'legend.total' | translate }}</td>
+        @for (legendKey of legendKeys(); track legendKey) {
+          <td class="tb-legend-value"
           [innerHTML]="legendData.data[legendKey.dataIndex].total | safe: 'html'"></td>
-    </tr>
-    <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showLatest === true">
-      <td class="tb-legend-type">{{ 'legend.latest' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()"
+        }
+      </tr>
+    }
+    @if (isRowDirection && legendConfig.showLatest === true) {
+      <tr class="tb-legend-keys">
+        <td class="tb-legend-type">{{ 'legend.latest' | translate }}</td>
+        @for (legendKey of legendKeys(); track legendKey) {
+          <td class="tb-legend-value"
           [innerHTML]="legendData.data[legendKey.dataIndex].latest | safe: 'html'"></td>
-    </tr>
+        }
+      </tr>
+    }
   </tbody>
 </table>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps-legacy/dialogs/select-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/maps-legacy/dialogs/select-entity-dialog.component.html
index 485141bb03..afc11a7633 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps-legacy/dialogs/select-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps-legacy/dialogs/select-entity-dialog.component.html
@@ -23,16 +23,21 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <mat-form-field class="mat-block" style="min-width: 280px">
       <mat-label translate>entity.entity</mat-label>
       <mat-select formControlName="entity">
-        <mat-option *ngFor="let entity of data.entities" [value]="entity">
-          {{ entity.entityParseName }}
-        </mat-option>
+        @for (entity of data.entities; track entity) {
+          <mat-option [value]="entity">
+            {{ entity.entityParseName }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
     <div class="tb-hint" translate>widgets.maps.select-entity-hint</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/map-timeline-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/map-timeline-panel.component.html
index 870583125b..c85272dd90 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/map-timeline-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/map-timeline-panel.component.html
@@ -25,7 +25,9 @@
     </mat-slider>
     <div class="tb-timeline-controls">
       <div class="flex flex-1 flex-row items-center justify-start">
-        <div class="tb-map-timeline-timestamp" *ngIf="settings.showTimestamp" [innerHTML]="timestampFormat.formatted"></div>
+        @if (settings.showTimestamp) {
+          <div class="tb-map-timeline-timestamp" [innerHTML]="timestampFormat.formatted"></div>
+        }
       </div>
       <div class="tb-timeline-buttons flex flex-1 flex-row items-center justify-center gap-3">
         <button mat-mini-fab color="primary"
@@ -67,7 +69,9 @@
       <div class="flex flex-1 flex-row items-center justify-end">
         <mat-select class="w-auto" [(ngModel)]="speed" (selectionChange)="speedUpdated()" aria-label="Speed selector">
           <mat-select-trigger><span style="padding-right: 10px;">{{speed}}x</span></mat-select-trigger>
-          <mat-option [value]="speedValue" *ngFor="let speedValue of settings.speedOptions">{{speedValue}}x</mat-option>
+          @for (speedValue of settings.speedOptions; track speedValue) {
+            <mat-option [value]="speedValue">{{speedValue}}x</mat-option>
+          }
         </mat-select>
       </div>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/select-map-entity-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/select-map-entity-panel.component.html
index 1da11e665e..d407ba95e0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/select-map-entity-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/select-map-entity-panel.component.html
@@ -19,9 +19,11 @@
   <mat-form-field class="mat-block" appearance="outline" hideRequiredMarker>
     <mat-label>{{ (selectEntityFormGroup.get('entity').value ? 'entity.entity' : 'widgets.maps.data-layer.select-entity') | translate }}</mat-label>
     <mat-select formControlName="entity">
-      <mat-option *ngFor="let entity of entities" [value]="entity">
-        {{ entity.entity.entityDisplayName }}
-      </mat-option>
+      @for (entity of entities; track entity) {
+        <mat-option [value]="entity">
+          {{ entity.entity.entityDisplayName }}
+        </mat-option>
+      }
     </mat-select>
     <mat-hint translate>widgets.maps.data-layer.select-entity-hint</mat-hint>
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html
index 4cfc970feb..a5be42db25 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html
@@ -26,21 +26,29 @@
          [class.row]="mobileAppSettings?.qrCodeConfig.badgePosition === badgePosition.RIGHT"
          [class.row-reverse]="mobileAppSettings?.qrCodeConfig.badgePosition === badgePosition.LEFT">
       <div class="tb-qrcode" (click)="navigateByDeepLink($event)" [innerHTML]="qrCodeSVG | safe: 'html'"></div>
-      <div class="tb-badges" [class.tb-no-interaction]="previewMode"
-           *ngIf="(mobileAppSettings?.iosEnabled || mobileAppSettings?.androidEnabled) &&
-                    mobileAppSettings?.qrCodeConfig.badgeEnabled && showBadgeContainer">
-        <a *ngIf="mobileAppSettings?.iosEnabled" [href]="appStoreLink" target="_blank">
-          <img alt="{{ 'widgets.mobile-app-qr-code.download-on-the-app-store' | translate }}"
-               src="assets/android-ios-stores-badges/ios_store_en_black_badge.svg">
-        </a>
-        <a *ngIf="mobileAppSettings?.androidEnabled" [href]="googlePlayLink" target="_blank">
-          <img alt="{{ 'widgets.mobile-app-qr-code.get-it-on-google-play' | translate }}"
-               src="assets/android-ios-stores-badges/android_store_en_black_badge.svg">
-        </a>
+      @if ((mobileAppSettings?.iosEnabled || mobileAppSettings?.androidEnabled) &&
+        mobileAppSettings?.qrCodeConfig.badgeEnabled && showBadgeContainer) {
+        <div class="tb-badges" [class.tb-no-interaction]="previewMode"
+             >
+          @if (mobileAppSettings?.iosEnabled) {
+            <a [href]="appStoreLink" target="_blank">
+              <img alt="{{ 'widgets.mobile-app-qr-code.download-on-the-app-store' | translate }}"
+                   src="assets/android-ios-stores-badges/ios_store_en_black_badge.svg">
+              </a>
+            }
+            @if (mobileAppSettings?.androidEnabled) {
+              <a [href]="googlePlayLink" target="_blank">
+                <img alt="{{ 'widgets.mobile-app-qr-code.get-it-on-google-play' | translate }}"
+                     src="assets/android-ios-stores-badges/android_store_en_black_badge.svg">
+                </a>
+              }
+            </div>
+          }
+        </div>
+        @if (mobileAppSettings?.qrCodeConfig.qrCodeLabelEnabled) {
+          <div class="tb-qrcode-label">
+            {{ mobileAppSettings.qrCodeConfig.qrCodeLabel }}
+          </div>
+        }
       </div>
     </div>
-    <div class="tb-qrcode-label" *ngIf="mobileAppSettings?.qrCodeConfig.qrCodeLabelEnabled">
-      {{ mobileAppSettings.qrCodeConfig.qrCodeLabel }}
-    </div>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
index c03ac0c603..9f6b755431 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
@@ -19,218 +19,281 @@
       [formGroup]="multipleInputFormGroup"
       tb-toast toastTarget="{{ toastTargetId }}"
       (ngSubmit)="saveForm()" novalidate autocomplete="off">
-  <div class="tb-multiple-input-container" *ngIf="entityDetected && isAllParametersValid">
-    <fieldset *ngFor="let source of sources" [class.fields-group]="settings.showGroupTitle">
-      <legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }}
-      </legend>
-      <div class="tb-multiple-input-layout"
-           [style]="{'grid-template-columns': 'repeat(' + columns + ', 1fr)', 'column-gap': settings.columnGap + 'px', 'row-gap': settings.rowGap + 'px'}">
-        <ng-container *ngFor="let key of visibleKeys(source)">
-          <mat-form-field *ngIf="key.settings.dataKeyValueType === 'string'"
-                          [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
-            <mat-label>{{key.label}}</mat-label>
-            <input matInput
-                   formControlName="{{key.formId}}"
-                   [required]="key.settings.required"
-                   [readonly]="key.settings.isEditable === 'readonly'"
-                   type="text"
-                   (focus)="key.isFocused = true; focusInputElement($event)"
-                   (blur)="key.isFocused = false; inputChanged(source, key)">
-            <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
-              <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
-            </ng-container>
-            <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
-              {{ getErrorMessageText(key.settings, 'required') }}
-            </mat-error>
-          </mat-form-field>
-          <mat-form-field *ngIf="['double', 'integer'].includes(key.settings.dataKeyValueType)"
-                          [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
-            <mat-label>{{key.label}}</mat-label>
-            <input matInput
-                   formControlName="{{key.formId}}"
-                   [required]="key.settings.required"
-                   [readonly]="key.settings.isEditable === 'readonly'"
-                   type="number"
-                   step="{{key.settings.step}}"
-                   min="{{key.settings.minValue}}"
-                   max="{{key.settings.maxValue}}"
-                   (focus)="key.isFocused = true; focusInputElement($event)"
-                   (blur)="key.isFocused = false; inputChanged(source, key)">
-            <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
-              <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
-            </ng-container>
-            <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
-              {{ getErrorMessageText(key.settings,'required') }}
-            </mat-error>
-            <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('min')">
-              {{ getErrorMessageText(key.settings,'min') }}
-            </mat-error>
-            <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('max')">
-              {{ getErrorMessageText(key.settings,'max') }}
-            </mat-error>
-          </mat-form-field>
-          <mat-form-field *ngIf="key.settings.dataKeyValueType === 'JSON'"
-                          [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
-            <mat-label>{{key.label}}</mat-label>
-            <input
-              matInput
-              type="text"
-              formControlName="{{key.formId}}"
-              tb-json-to-string
-              [readonly]="key.settings.isEditable === 'readonly'"
-              [required]="key.settings.required"
-              (focus)="key.isFocused = true; focusInputElement($event)"
-              (blur)="key.isFocused = false; inputChanged(source, key)"
-            />
-            <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
-              <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
-            </ng-container>
-            <button [disabled]="key.settings.isEditable === 'disabled' || key.settings.isEditable === 'readonly'"
-                    type="button"
-                    matSuffix mat-icon-button
-                    (click)="openEditJSONDialog($event, key, source)">
-              <mat-icon>open_in_new</mat-icon>
-            </button>
-            <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required') && !multipleInputFormGroup.get(key.formId).hasError('invalidJSON')">
-              {{ getErrorMessageText(key.settings,'required') }}
-            </mat-error>
-            <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('invalidJSON')">
-              {{ getErrorMessageText(key.settings,'invalidJSON') | translate }}
-            </mat-error>
-          </mat-form-field>
-          <mat-form-field *ngIf="['dateTime','date', 'time'].includes(key.settings.dataKeyValueType)"
-                          [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
-            <mat-label>{{key.label}}</mat-label>
-            <mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
-            <mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}"
-                                openOnFocus="true"></mat-datetimepicker>
-            <input matInput formControlName="{{key.formId}}"
-                   [required]="key.settings.required"
-                   [readonly]="key.settings.isEditable === 'readonly'"
-                   [matDatetimepicker]="datePicker"
-                   (focus)="key.isFocused = true;"
-                   (blur)="key.isFocused = false;"
-                   (dateChange)="inputChanged(source, key)">
-            <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
-              {{ getErrorMessageText(key.settings, 'required') }}
-            </mat-error>
-            <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('matDatepickerParse')">
-              {{ getErrorMessageText(key.settings, 'invalidDate') }}
-            </mat-error>
-          </mat-form-field>
-          <mat-form-field *ngIf="key.settings.dataKeyValueType === 'select'"
-                          [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
-            <mat-label>{{key.label}}</mat-label>
-            <mat-select formControlName="{{key.formId}}"
-                        [required]="key.settings.required"
-                        (openedChange)="key.isFocused = $event"
-                        (selectionChange)="inputChanged(source, key)">
-              <mat-option *ngFor="let option of key.settings.selectOptions"
-                          [value]="option.value"
-                          [disabled]="key.settings.isEditable === 'readonly'">
-                {{ getCustomTranslationText(option.label ? option.label : option.value) }}
-              </mat-option>
-            </mat-select>
-            <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
-              <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
-            </ng-container>
-            <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
-              {{ getErrorMessageText(key.settings, 'required') }}
-            </mat-error>
-          </mat-form-field>
-
-          <div *ngIf="key.settings.dataKeyValueType === 'radio'">
-            <mat-label>{{key.label}}</mat-label>
-            <mat-radio-group
-              [style]="{'display': 'grid', 'grid-template-columns': 'repeat(' + key.settings.radioColumns + ', 1fr)', 'column-gap': '5px', 'row-gap': '5px'}"
-              [labelPosition]="key.settings.radioLabelPosition"
-              (change)="inputChanged(source, key)"
-              formControlName="{{key.formId}}">
-                <mat-radio-button
-                  [style]="radioButtonSelectedColor(key.settings.radioColor)"
-                  [disabled]="key.settings.isEditable === 'readonly'"
-                  *ngFor="let option of key.settings.selectOptions"
-                  [value]="option.value">
-                  <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
+  @if (entityDetected && isAllParametersValid) {
+    <div class="tb-multiple-input-container">
+      @for (source of sources; track source) {
+        <fieldset [class.fields-group]="settings.showGroupTitle">
+          @if (settings.showGroupTitle) {
+            <legend class="group-title">{{ getGroupTitle(source.datasource) }}
+            </legend>
+          }
+          <div class="tb-multiple-input-layout"
+               [style]="{'grid-template-columns': 'repeat(' + columns + ', 1fr)', 'column-gap': settings.columnGap + 'px', 'row-gap': settings.rowGap + 'px'}">
+            @for (key of visibleKeys(source); track key) {
+              @if (key.settings.dataKeyValueType === 'string') {
+                <mat-form-field
+                  [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
+                  <mat-label>{{key.label}}</mat-label>
+                  <input matInput
+                         formControlName="{{key.formId}}"
+                         [required]="key.settings.required"
+                         [readonly]="key.settings.isEditable === 'readonly'"
+                         type="text"
+                         (focus)="key.isFocused = true; focusInputElement($event)"
+                         (blur)="key.isFocused = false; inputChanged(source, key)">
+                  @if (key.settings.icon || key.settings.customIconUrl) {
+                    <ng-container matIconPrefix>
+                      <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
+                    </ng-container>
+                  }
+                  @if (multipleInputFormGroup.get(key.formId).hasError('required')) {
+                    <mat-error>
+                      {{ getErrorMessageText(key.settings, 'required') }}
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+              @if (['double', 'integer'].includes(key.settings.dataKeyValueType)) {
+                <mat-form-field
+                  [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
+                  <mat-label>{{key.label}}</mat-label>
+                  <input matInput
+                         formControlName="{{key.formId}}"
+                         [required]="key.settings.required"
+                         [readonly]="key.settings.isEditable === 'readonly'"
+                         type="number"
+                         step="{{key.settings.step}}"
+                         min="{{key.settings.minValue}}"
+                         max="{{key.settings.maxValue}}"
+                         (focus)="key.isFocused = true; focusInputElement($event)"
+                         (blur)="key.isFocused = false; inputChanged(source, key)">
+                  @if (key.settings.icon || key.settings.customIconUrl) {
+                    <ng-container matIconPrefix>
+                      <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
+                    </ng-container>
+                  }
+                  @if (multipleInputFormGroup.get(key.formId).hasError('required')) {
+                    <mat-error>
+                      {{ getErrorMessageText(key.settings,'required') }}
+                    </mat-error>
+                  }
+                  @if (multipleInputFormGroup.get(key.formId).hasError('min')) {
+                    <mat-error>
+                      {{ getErrorMessageText(key.settings,'min') }}
+                    </mat-error>
+                  }
+                  @if (multipleInputFormGroup.get(key.formId).hasError('max')) {
+                    <mat-error>
+                      {{ getErrorMessageText(key.settings,'max') }}
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+              @if (key.settings.dataKeyValueType === 'JSON') {
+                <mat-form-field
+                  [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
+                  <mat-label>{{key.label}}</mat-label>
+                  <input
+                    matInput
+                    type="text"
+                    formControlName="{{key.formId}}"
+                    tb-json-to-string
+                    [readonly]="key.settings.isEditable === 'readonly'"
+                    [required]="key.settings.required"
+                    (focus)="key.isFocused = true; focusInputElement($event)"
+                    (blur)="key.isFocused = false; inputChanged(source, key)"
+                    />
+                  @if (key.settings.icon || key.settings.customIconUrl) {
+                    <ng-container matIconPrefix>
+                      <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
+                    </ng-container>
+                  }
+                  <button [disabled]="key.settings.isEditable === 'disabled' || key.settings.isEditable === 'readonly'"
+                          type="button"
+                          matSuffix mat-icon-button
+                          (click)="openEditJSONDialog($event, key, source)">
+                    <mat-icon>open_in_new</mat-icon>
+                  </button>
+                  @if (multipleInputFormGroup.get(key.formId).hasError('required') && !multipleInputFormGroup.get(key.formId).hasError('invalidJSON')) {
+                    <mat-error>
+                      {{ getErrorMessageText(key.settings,'required') }}
+                    </mat-error>
+                  }
+                  @if (multipleInputFormGroup.get(key.formId).hasError('invalidJSON')) {
+                    <mat-error>
+                      {{ getErrorMessageText(key.settings,'invalidJSON') | translate }}
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+              @if (['dateTime','date', 'time'].includes(key.settings.dataKeyValueType)) {
+                <mat-form-field
+                  [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
+                  <mat-label>{{key.label}}</mat-label>
+                  <mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
+                  <mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}"
+                  openOnFocus="true"></mat-datetimepicker>
+                  <input matInput formControlName="{{key.formId}}"
+                         [required]="key.settings.required"
+                         [readonly]="key.settings.isEditable === 'readonly'"
+                         [matDatetimepicker]="datePicker"
+                         (focus)="key.isFocused = true;"
+                         (blur)="key.isFocused = false;"
+                         (dateChange)="inputChanged(source, key)">
+                  @if (multipleInputFormGroup.get(key.formId).hasError('required')) {
+                    <mat-error>
+                      {{ getErrorMessageText(key.settings, 'required') }}
+                    </mat-error>
+                  }
+                  @if (multipleInputFormGroup.get(key.formId).hasError('matDatepickerParse')) {
+                    <mat-error>
+                      {{ getErrorMessageText(key.settings, 'invalidDate') }}
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+              @if (key.settings.dataKeyValueType === 'select') {
+                <mat-form-field
+                  [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
+                  <mat-label>{{key.label}}</mat-label>
+                  <mat-select formControlName="{{key.formId}}"
+                              [required]="key.settings.required"
+                              (openedChange)="key.isFocused = $event"
+                              (selectionChange)="inputChanged(source, key)">
+                    @for (option of key.settings.selectOptions; track option) {
+                      <mat-option
+                        [value]="option.value"
+                        [disabled]="key.settings.isEditable === 'readonly'">
+                        {{ getCustomTranslationText(option.label ? option.label : option.value) }}
+                      </mat-option>
+                    }
+                  </mat-select>
+                  @if (key.settings.icon || key.settings.customIconUrl) {
+                    <ng-container matIconPrefix>
+                      <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
+                    </ng-container>
+                  }
+                  @if (multipleInputFormGroup.get(key.formId).hasError('required')) {
+                    <mat-error>
+                      {{ getErrorMessageText(key.settings, 'required') }}
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+              @if (key.settings.dataKeyValueType === 'radio') {
+                <div>
+                  <mat-label>{{key.label}}</mat-label>
+                  <mat-radio-group
+                    [style]="{'display': 'grid', 'grid-template-columns': 'repeat(' + key.settings.radioColumns + ', 1fr)', 'column-gap': '5px', 'row-gap': '5px'}"
+                    [labelPosition]="key.settings.radioLabelPosition"
+                    (change)="inputChanged(source, key)"
+                    formControlName="{{key.formId}}">
+                    @for (option of key.settings.selectOptions; track option) {
+                      <mat-radio-button
+                        [style]="radioButtonSelectedColor(key.settings.radioColor)"
+                        [disabled]="key.settings.isEditable === 'readonly'"
+                        [value]="option.value">
+                        @if (key.settings.icon || key.settings.customIconUrl) {
+                          <ng-container matIconPrefix>
+                            <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
+                          </ng-container>
+                        }
+                        <span class="label-wrapper">
+                          {{ getCustomTranslationText(option.label ? option.label : option.value) }}
+                        </span>
+                      </mat-radio-button>
+                    }
+                  </mat-radio-group>
+                </div>
+              }
+              @if (key.settings.dataKeyValueType === 'color') {
+                <mat-form-field
+                  class="color-input" [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing"
+                  (click)="colorInput.openColorPickerPopup($event)">
+                  <mat-label>{{key.label}}</mat-label>
+                  <input matInput
+                         formControlName="{{key.formId}}"
+                         [required]="key.settings.required"
+                         [readonly]="key.settings.isEditable === 'readonly'"
+                         type="text"
+                         (keydown)="$event.preventDefault();">
+                  @if (key.settings.icon || key.settings.customIconUrl) {
+                    <ng-container matIconPrefix>
+                      <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
+                    </ng-container>
+                  }
+                  <tb-color-input #colorInput asBoxInput matSuffix
+                                  colorClearButton
+                                  [disabled]="multipleInputFormGroup.get(key.formId).disabled"
+                                  [readonly]="key.settings.isEditable === 'readonly'"
+                                  [ngModel]="multipleInputFormGroup.get(key.formId).value"
+                                  (ngModelChange)="colorChanged(source, key, $event)"
+                                  [ngModelOptions]="{ standalone: true }">
+                  </tb-color-input>
+                  @if (multipleInputFormGroup.get(key.formId).hasError('required')) {
+                    <mat-error>
+                      {{ getErrorMessageText(key.settings, 'required') }}
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+              @if (key.settings.dataKeyValueType === 'booleanCheckbox') {
+                <mat-checkbox
+                  formControlName="{{key.formId}}"
+                  (change)="inputChanged(source, key)">
+                  @if (key.settings.icon || key.settings.customIconUrl) {
+                    <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
+                  }
+                  <span class="label-wrapper">{{key.label}}</span>
+                </mat-checkbox>
+              }
+              @if (key.settings.dataKeyValueType === 'booleanSwitch') {
+                <mat-slide-toggle
+                  formControlName="{{key.formId}}"
+                  [labelPosition]="key.settings.slideToggleLabelPosition"
+                  (change)="inputChanged(source, key)">
+                  @if (key.settings.icon || key.settings.customIconUrl) {
                     <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
-                  </ng-container>
-                  <span class="label-wrapper">
-                    {{ getCustomTranslationText(option.label ? option.label : option.value) }}
-                  </span>
-                </mat-radio-button>
-            </mat-radio-group>
+                  }
+                  <span class="label-wrapper">{{key.label}}</span>
+                </mat-slide-toggle>
+              }
+            }
           </div>
-          <mat-form-field *ngIf="key.settings.dataKeyValueType === 'color'"
-                          class="color-input" [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing"
-                          (click)="colorInput.openColorPickerPopup($event)">
-            <mat-label>{{key.label}}</mat-label>
-            <input matInput
-                   formControlName="{{key.formId}}"
-                   [required]="key.settings.required"
-                   [readonly]="key.settings.isEditable === 'readonly'"
-                   type="text"
-                   (keydown)="$event.preventDefault();">
-            <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
-              <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
-            </ng-container>
-            <tb-color-input #colorInput asBoxInput matSuffix
-                            colorClearButton
-                            [disabled]="multipleInputFormGroup.get(key.formId).disabled"
-                            [readonly]="key.settings.isEditable === 'readonly'"
-                            [ngModel]="multipleInputFormGroup.get(key.formId).value"
-                            (ngModelChange)="colorChanged(source, key, $event)"
-                            [ngModelOptions]="{ standalone: true }">
-            </tb-color-input>
-            <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
-              {{ getErrorMessageText(key.settings, 'required') }}
-            </mat-error>
-          </mat-form-field>
-          <mat-checkbox *ngIf="key.settings.dataKeyValueType === 'booleanCheckbox'"
-                        formControlName="{{key.formId}}"
-                        (change)="inputChanged(source, key)">
-            <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl">
-              <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
-            </ng-container>
-            <span class="label-wrapper">{{key.label}}</span>
-          </mat-checkbox>
-          <mat-slide-toggle *ngIf="key.settings.dataKeyValueType === 'booleanSwitch'"
-                            formControlName="{{key.formId}}"
-                            [labelPosition]="key.settings.slideToggleLabelPosition"
-                            (change)="inputChanged(source, key)">
-            <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl">
-              <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
-            </ng-container>
-            <span class="label-wrapper">{{key.label}}</span>
-          </mat-slide-toggle>
-        </ng-container>
-      </div>
-    </fieldset>
-  </div>
-  <div class="mat-padding tb-multiple-input--buttons-container"
-       *ngIf="entityDetected && isAllParametersValid && settings.showActionButtons">
-    <button mat-button color="primary" type="button"
-            (click)="discardAll()" class="tb-multiple-input--buttons-container__button"
-            [disabled]="!multipleInputFormGroup.dirty">
-      {{ resetButtonLabel }}
-    </button>
-    <button mat-button mat-raised-button color="primary" type="submit"
-            class="tb-multiple-input--buttons-container__button"
-            [disabled]="!multipleInputFormGroup.dirty || invalid()">
-      {{ saveButtonLabel }}
-    </button>
-  </div>
-  <div class="tb-multiple-input--errors-container" *ngIf="(!entityDetected || !isAllParametersValid) && datasourceDetected">
-    <div class="tb-multiple-input--errors-container__error" [class.!hidden]="entityDetected">
-      {{ 'widgets.input-widgets.no-entity-selected' | translate }}
+        </fieldset>
+      }
     </div>
-    <div class="tb-multiple-input--errors-container__error" [class.!hidden]="!entityDetected || isAllParametersValid">
-      {{ 'widgets.input-widgets.not-allowed-entity' | translate }}
+  }
+  @if (entityDetected && isAllParametersValid && settings.showActionButtons) {
+    <div class="mat-padding tb-multiple-input--buttons-container"
+         >
+      <button mat-button color="primary" type="button"
+              (click)="discardAll()" class="tb-multiple-input--buttons-container__button"
+              [disabled]="!multipleInputFormGroup.dirty">
+        {{ resetButtonLabel }}
+      </button>
+      <button mat-button mat-raised-button color="primary" type="submit"
+              class="tb-multiple-input--buttons-container__button"
+              [disabled]="!multipleInputFormGroup.dirty || invalid()">
+        {{ saveButtonLabel }}
+      </button>
+    </div>
+  }
+  @if ((!entityDetected || !isAllParametersValid) && datasourceDetected) {
+    <div class="tb-multiple-input--errors-container">
+      <div class="tb-multiple-input--errors-container__error" [class.!hidden]="entityDetected">
+        {{ 'widgets.input-widgets.no-entity-selected' | translate }}
+      </div>
+      <div class="tb-multiple-input--errors-container__error" [class.!hidden]="!entityDetected || isAllParametersValid">
+        {{ 'widgets.input-widgets.not-allowed-entity' | translate }}
+      </div>
     </div>
-  </div>
+  }
 </form>
 <ng-template #iconPrefix let-key="key">
-  <tb-icon *ngIf="!key.settings.customIconUrl; else customToggleIcon">{{key.settings.icon}}</tb-icon>
-  <ng-template #customToggleIcon>
+  @if (!key.settings.customIconUrl) {
+    <tb-icon>{{key.settings.icon}}</tb-icon>
+  } @else {
     <img class="mat-icon" [src]="key.settings.customIconUrl | image | async" alt="icon">
-  </ng-template>
+  }
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.html
index 2ca0650502..2f1f53968e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.html
@@ -15,22 +15,28 @@
     limitations under the License.
 
 -->
-<mat-grid-list *ngIf="cols" class="tb-navigation-cards" [cols]="cols" rowHeight="280px">
-  <mat-grid-tile [colspan]="sectionColspan(section)" *ngFor="let section of showHomeSections$| async">
-    <mat-card appearance="outlined" style="width: 100%;">
-      <mat-card-title>
-        <span translate class="mat-headline-5">{{section.name}}</span>
-      </mat-card-title>
-      <mat-card-content>
-        <mat-grid-list rowHeight="170px" [cols]="sectionPlaces(section).length">
-          <mat-grid-tile *ngFor="let place of sectionPlaces(section)">
-            <a mat-raised-button color="primary" class="tb-card-button" href="{{place.path}}" (click)="navigate($event, place.path)">
-              <tb-icon matButtonIcon class="tb-mat-96">{{place.icon}}</tb-icon>
-              <span>{{place.customTranslate ? (place.name | customTranslate) : (place.name | translate)}}</span>
-            </a>
-          </mat-grid-tile>
-        </mat-grid-list>
-      </mat-card-content>
-    </mat-card>
-  </mat-grid-tile>
-</mat-grid-list>
+@if (cols) {
+  <mat-grid-list class="tb-navigation-cards" [cols]="cols" rowHeight="280px">
+    @for (section of showHomeSections$| async; track section) {
+      <mat-grid-tile [colspan]="sectionColspan(section)">
+        <mat-card appearance="outlined" style="width: 100%;">
+          <mat-card-title>
+            <span translate class="mat-headline-5">{{section.name}}</span>
+          </mat-card-title>
+          <mat-card-content>
+            <mat-grid-list rowHeight="170px" [cols]="sectionPlaces(section).length">
+              @for (place of sectionPlaces(section); track place) {
+                <mat-grid-tile>
+                  <a mat-raised-button color="primary" class="tb-card-button" href="{{place.path}}" (click)="navigate($event, place.path)">
+                    <tb-icon matButtonIcon class="tb-mat-96">{{place.icon}}</tb-icon>
+                    <span>{{place.customTranslate ? (place.name | customTranslate) : (place.name | translate)}}</span>
+                  </a>
+                </mat-grid-tile>
+              }
+            </mat-grid-list>
+          </mat-card-content>
+        </mat-card>
+      </mat-grid-tile>
+    }
+  </mat-grid-list>
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
index 36b7d038b0..6b1d18fe43 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
@@ -16,50 +16,56 @@
 
 -->
 <div class="tb-web-camera flex flex-col items-center justify-center" tb-fullscreen [fullscreen]="isShowCamera">
-  <div *ngIf="isEntityDetected && dataKeyDetected && isCameraSupport && isProtocolHttps" class="image-container">
-    <div [class.!hidden]="isShowCamera" class="flex size-full flex-col items-center justify-between">
-      <div class="tb-web-camera__last-photo flex-1">
-        <span [class.!hidden]="lastPhoto" class="tb-web-camera__last-photo_text" translate>widgets.input-widgets.no-image</span>
-        <img [class.!hidden]="!lastPhoto" class="tb-web-camera__last-photo_img" [src]="lastPhoto | image | async" alt="last photo"/>
-      </div>
-      <button mat-raised-button color="primary" (click)="takePhoto()" *ngIf="!textMessage">
-        {{ "widgets.input-widgets.take-photo" | translate }}
-      </button>
-    </div>
-    <div [class.!hidden]="!isShowCamera" class="camera-container flex flex-col items-center justify-center">
-      <div class="camera" [class.!hidden]="isPreviewPhoto">
-        <video autoplay muted playsinline class="camera-stream" #videoStream></video>
-        <div class="camera-controls flex flex-row flex-wrap items-end justify-between">
-          <div class="flex-1"></div>
-          <button mat-mini-fab color="primary" (click)="switchWebCamera()" [disabled]="singleDevice">
-            <mat-icon>switch_camera</mat-icon>
-          </button>
-          <button mat-fab color="accent" (click)="createPhoto()">
-            <mat-icon>photo_camera</mat-icon>
-          </button>
-          <button mat-mini-fab color="primary" (click)="closeCamera()">
-            <mat-icon>close</mat-icon>
-          </button>
-          <div class="flex-1"></div>
+  @if (isEntityDetected && dataKeyDetected && isCameraSupport && isProtocolHttps) {
+    <div class="image-container">
+      <div [class.!hidden]="isShowCamera" class="flex size-full flex-col items-center justify-between">
+        <div class="tb-web-camera__last-photo flex-1">
+          <span [class.!hidden]="lastPhoto" class="tb-web-camera__last-photo_text" translate>widgets.input-widgets.no-image</span>
+          <img [class.!hidden]="!lastPhoto" class="tb-web-camera__last-photo_img" [src]="lastPhoto | image | async" alt="last photo"/>
         </div>
-      </div>
-      <div class="camera" [class.!hidden]="!isPreviewPhoto">
-        <img alt="preview photo" class="camera-stream" [src]="previewPhoto">
-        <canvas #canvas style="display:none;"></canvas>
-        <div class="camera-controls flex flex-row items-end justify-between">
-          <div class="flex-1"></div>
-          <button mat-fab color="primary" [disabled]="updatePhoto" (click)="cancelPhoto()">
-            <mat-icon>close</mat-icon>
-          </button>
-          <button mat-fab color="accent" [disabled]="updatePhoto" (click)="savePhoto()">
-            <mat-icon>check</mat-icon>
+        @if (!textMessage) {
+          <button mat-raised-button color="primary" (click)="takePhoto()">
+            {{ "widgets.input-widgets.take-photo" | translate }}
           </button>
-          <div class="flex-1"></div>
+        }
+      </div>
+      <div [class.!hidden]="!isShowCamera" class="camera-container flex flex-col items-center justify-center">
+        <div class="camera" [class.!hidden]="isPreviewPhoto">
+          <video autoplay muted playsinline class="camera-stream" #videoStream></video>
+          <div class="camera-controls flex flex-row flex-wrap items-end justify-between">
+            <div class="flex-1"></div>
+            <button mat-mini-fab color="primary" (click)="switchWebCamera()" [disabled]="singleDevice">
+              <mat-icon>switch_camera</mat-icon>
+            </button>
+            <button mat-fab color="accent" (click)="createPhoto()">
+              <mat-icon>photo_camera</mat-icon>
+            </button>
+            <button mat-mini-fab color="primary" (click)="closeCamera()">
+              <mat-icon>close</mat-icon>
+            </button>
+            <div class="flex-1"></div>
+          </div>
+        </div>
+        <div class="camera" [class.!hidden]="!isPreviewPhoto">
+          <img alt="preview photo" class="camera-stream" [src]="previewPhoto">
+          <canvas #canvas style="display:none;"></canvas>
+          <div class="camera-controls flex flex-row items-end justify-between">
+            <div class="flex-1"></div>
+            <button mat-fab color="primary" [disabled]="updatePhoto" (click)="cancelPhoto()">
+              <mat-icon>close</mat-icon>
+            </button>
+            <button mat-fab color="accent" [disabled]="updatePhoto" (click)="savePhoto()">
+              <mat-icon>check</mat-icon>
+            </button>
+            <div class="flex-1"></div>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div class="message-text" *ngIf="textMessage">
-    {{ textMessage | translate }}
-  </div>
+  }
+  @if (textMessage) {
+    <div class="message-text">
+      {{ textMessage | translate }}
+    </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
index 01313aa0d0..87495e0477 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
@@ -17,6 +17,10 @@
 -->
 <div class="flex size-full flex-col items-center justify-center">
   <canvas class="flex-1" #canvas [class.!hidden]="!qrCodeText || invalidQrCodeText"></canvas>
-  <div *ngIf="!qrCodeText && !invalidQrCodeText" style="text-align: center" translate>entity.no-data</div>
-  <div *ngIf="invalidQrCodeText" style="text-align: center" translate>widgets.invalid-qr-code-text</div>
+  @if (!qrCodeText && !invalidQrCodeText) {
+    <div style="text-align: center" translate>entity.no-data</div>
+  }
+  @if (invalidQrCodeText) {
+    <div style="text-align: center" translate>widgets.invalid-qr-code-text</div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
index 1b5b3f1992..5f7d83fbad 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content class="add-dialog">
     <fieldset [disabled]="isLoading$ | async">
       <div class="flex flex-row gap-1.5">
@@ -39,12 +42,16 @@
         <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="persistentFormGroup.get('method').hasError('required')">
-            {{'widgets.persistent-table.method-error' | translate}}
-          </mat-error>
-          <mat-error *ngIf="persistentFormGroup.get('method').hasError('pattern')">
-            {{'widgets.persistent-table.white-space-error' | translate}}
-          </mat-error>
+          @if (persistentFormGroup.get('method').hasError('required')) {
+            <mat-error>
+              {{'widgets.persistent-table.method-error' | translate}}
+            </mat-error>
+          }
+          @if (persistentFormGroup.get('method').hasError('pattern')) {
+            <mat-error>
+              {{'widgets.persistent-table.white-space-error' | translate}}
+            </mat-error>
+          }
         </mat-form-field>
         <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.retries</mat-label>
@@ -71,7 +78,9 @@
       </mat-expansion-panel>
     </fieldset>
   </div>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (!(isLoading$ | async)) {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-actions class="flex flex-row">
     <button mat-button color="primary"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
index f1f10ce5b6..bffb4e21cc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
       <div class="flex flex-row gap-1.5 xs:flex-col">
@@ -55,11 +58,13 @@
           <mat-label translate>widgets.persistent-table.method</mat-label>
           <input matInput formControlName="method" readonly>
         </mat-form-field>
-        <mat-form-field class="mat-block flex-1"
-                        *ngIf="persistentFormGroup.get('retries').value">
-          <mat-label translate>widgets.persistent-table.retries</mat-label>
-          <input matInput formControlName="retries" readonly>
-        </mat-form-field>
+        @if (persistentFormGroup.get('retries').value) {
+          <mat-form-field class="mat-block flex-1"
+                          >
+            <mat-label translate>widgets.persistent-table.retries</mat-label>
+            <input matInput formControlName="retries" readonly>
+          </mat-form-field>
+        }
       </div>
 
       <mat-accordion class="rpc-dialog" multi>
@@ -69,7 +74,7 @@
               {{ 'widgets.persistent-table.response' | translate }}
             </mat-panel-title>
           </mat-expansion-panel-header>
-            <tb-json-object-view formControlName="response" autoHeight></tb-json-object-view>
+          <tb-json-object-view formControlName="response" autoHeight></tb-json-object-view>
         </mat-expansion-panel>
         <mat-expansion-panel>
           <mat-expansion-panel-header>
@@ -98,14 +103,15 @@
     </fieldset>
   </div>
   <div mat-dialog-actions class="flex flex-row">
-    <button mat-raised-button
-            *ngIf="allowDelete"
-            color="primary"
-            type="button"
-            (click)="deleteRpcRequest()"
-            [disabled]="(isLoading$ | async)">
-      {{ 'widgets.persistent-table.delete' | translate }}
-    </button>
+    @if (allowDelete) {
+      <button mat-raised-button
+              color="primary"
+              type="button"
+              (click)="deleteRpcRequest()"
+              [disabled]="(isLoading$ | async)">
+        {{ 'widgets.persistent-table.delete' | translate }}
+      </button>
+    }
     <span class="flex-1"></span>
     <div class="flex flex-row gap-2">
       <button mat-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
index 307eb35620..5d405f73bc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
@@ -23,9 +23,11 @@
       <mat-option [value]="null">
         {{ 'widgets.persistent-table.rpc-search-status-all' | translate }}
       </mat-option>
-      <mat-option *ngFor="let searchStatus of persistentSearchStatuses" [value]="searchStatus">
-        {{ rpcSearchStatusTranslationMap.get(searchStatus) | translate }}
-      </mat-option>
+      @for (searchStatus of persistentSearchStatuses; track searchStatus) {
+        <mat-option [value]="searchStatus">
+          {{ rpcSearchStatusTranslationMap.get(searchStatus) | translate }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <div class="tb-panel-actions flex flex-row items-center justify-end">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.ts
index 50eb4dddc9..f42d36dd51 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.ts
@@ -39,7 +39,7 @@ export class PersistentFilterPanelComponent {
   public rpcSearchStatusTranslationMap = rpcStatusTranslation;
   public rpcSearchPlaceholder: string;
 
-  public persistentSearchStatuses = Object.keys(RpcStatus);
+  public persistentSearchStatuses = Object.values(RpcStatus);
 
   constructor(@Inject(PERSISTENT_FILTER_PANEL_DATA)
               public data: PersistentFilterPanelData,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html
index 559ffc6f6a..928f865449 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html
@@ -76,50 +76,58 @@
           </mat-header-cell>
           <mat-cell *matCellDef="let column">
             <div class="flex flex-row items-stretch justify-end lt-lg:!hidden">
-              <ng-container *ngFor="let actionDescriptor of actionCellButtonAction">
+              @for (actionDescriptor of actionCellButtonAction; track actionDescriptor) {
                 <button mat-icon-button [disabled]="isLoading$ | async"
                         matTooltip="{{ actionDescriptor.displayName }}"
                         matTooltipPosition="above"
                         (click)="onActionButtonClick($event, column, actionDescriptor)">
                   <tb-icon>{{ actionDescriptor.icon }}</tb-icon>
                 </button>
-              </ng-container>
-            </div>
-            <div class="gt-md:!hidden" *ngIf="actionCellButtonAction.length">
-              <button mat-icon-button
-                      (click)="$event.stopPropagation(); ctx.detectChanges();"
-                      [matMenuTriggerFor]="cellActionsMenu">
-                <tb-icon>more_vert</tb-icon>
-              </button>
-              <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                <ng-container *ngFor="let actionDescriptor of actionCellButtonAction">
-                  <button mat-menu-item *ngIf="actionDescriptor.icon"
-                          [disabled]="(isLoading$ | async)"
-                          (click)="onActionButtonClick($event, column, actionDescriptor)">
-                    <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                    <span>{{ actionDescriptor.displayName }}</span>
-                  </button>
-                </ng-container>
-              </mat-menu>
+              }
             </div>
+            @if (actionCellButtonAction.length) {
+              <div class="gt-md:!hidden">
+                <button mat-icon-button
+                        (click)="$event.stopPropagation(); ctx.detectChanges();"
+                        [matMenuTriggerFor]="cellActionsMenu">
+                  <tb-icon>more_vert</tb-icon>
+                </button>
+                <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                  @for (actionDescriptor of actionCellButtonAction; track actionDescriptor) {
+                    @if (actionDescriptor.icon) {
+                      <button mat-menu-item
+                              [disabled]="(isLoading$ | async)"
+                              (click)="onActionButtonClick($event, column, actionDescriptor)">
+                        <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                        <span>{{ actionDescriptor.displayName }}</span>
+                      </button>
+                    }
+                  }
+                </mat-menu>
+              </div>
+            }
           </mat-cell>
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
         <mat-row *matRowDef="let column; columns: displayedColumns"
-                 [class.!hidden]="persistentDatasource.dataLoading"></mat-row>
+        [class.!hidden]="persistentDatasource.dataLoading"></mat-row>
       </table>
       <span [class.!hidden]="(persistentDatasource.isEmpty() | async) === false || persistentDatasource.dataLoading || !hasData"
-            class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
+      class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
       <span [class.!hidden]="!persistentDatasource.dataLoading"
-            class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
-  </div>
-  <mat-divider *ngIf="displayPagination"></mat-divider>
-  <mat-paginator *ngIf="displayPagination"
-                 [length]="persistentDatasource.total() | async"
-                 [pageIndex]="pageLink.page"
-                 [pageSize]="pageLink.pageSize"
-                 [pageSizeOptions]="pageSizeOptions"
-                 [hidePageSize]="hidePageSize"
-                 showFirstLastButtons></mat-paginator>
+      class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
+    </div>
+    @if (displayPagination) {
+      <mat-divider></mat-divider>
+    }
+    @if (displayPagination) {
+      <mat-paginator
+        [length]="persistentDatasource.total() | async"
+        [pageIndex]="pageLink.page"
+        [pageSize]="pageLink.pageSize"
+        [pageSizeOptions]="pageSizeOptions"
+        [hidePageSize]="hidePageSize"
+      showFirstLastButtons></mat-paginator>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html
index faf054957c..83dd2c5b3a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html
@@ -22,5 +22,7 @@
     <div #powerButtonShape class="tb-power-button-shape" [class.tb-power-button-pointer]="!disabled && (loading$ | async) === false">
     </div>
   </div>
-  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
+  @if (loading$ | async) {
+    <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate"></mat-progress-bar>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
index b54bc91b6f..421668d0f3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
@@ -21,20 +21,32 @@
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
   <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>
-      <div *ngIf="showLabel" class="tb-single-switch-label" [style]="labelStyle"
-           [style.color]="(disabled || (loading$ | async)) ? disabledColor : settings.labelColor">{{ label$ | async }}</div>
-    </div>
+    @if (showIcon || showLabel) {
+      <div #singleSwitchLabelRow class="tb-single-switch-label-row">
+        @if (showIcon) {
+          <tb-icon [style]="iconStyle"
+          [style.color]="(disabled || (loading$ | async)) ? disabledColor : settings.iconColor">{{ icon }}</tb-icon>
+        }
+        @if (showLabel) {
+          <div class="tb-single-switch-label" [style]="labelStyle"
+          [style.color]="(disabled || (loading$ | async)) ? disabledColor : settings.labelColor">{{ label$ | async }}</div>
+        }
+      </div>
+    }
     <div #singleSwitchToggleRow class="tb-single-switch-slide-toggle-row">
-      <div *ngIf="showOffLabel" [style]="offLabelStyle"
-           [style.color]="(disabled || (loading$ | async)) ? disabledColor : settings.offLabelColor">{{ offLabel }}</div>
+      @if (showOffLabel) {
+        <div [style]="offLabelStyle"
+        [style.color]="(disabled || (loading$ | async)) ? disabledColor : settings.offLabelColor">{{ offLabel }}</div>
+      }
       <mat-slide-toggle class="tb-single-switch-toggle" [disabled]="disabled || (loading$ | async)" [(ngModel)]="value" (click)="!disabled && onToggleChange($event)">
       </mat-slide-toggle>
-      <div *ngIf="showOnLabel" [style]="onLabelStyle"
-           [style.color]="(disabled || (loading$ | async)) ? disabledColor : settings.onLabelColor">{{ onLabel }}</div>
+      @if (showOnLabel) {
+        <div [style]="onLabelStyle"
+        [style.color]="(disabled || (loading$ | async)) ? disabledColor : settings.onLabelColor">{{ onLabel }}</div>
+      }
     </div>
   </div>
-  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
+  @if (loading$ | async) {
+    <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate"></mat-progress-bar>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html
index 60523571fd..afd2bb085c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html
@@ -17,18 +17,24 @@
 -->
 <div class="tb-slider-panel" [class.no-pointer-events]="ctx.isEdit" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-slider-overlay" [style]="overlayStyle"></div>
-  <div *ngIf="showWidgetTitlePanel" class="tb-slider-title-panel">
-    <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
-  </div>
-  <div #sliderContent class="tb-slider-content">
-    <div #sliderValueContainer class="tb-slider-value-container" *ngIf="showValue" >
-      <div #sliderValue class="tb-slider-value" [style]="valueStyle">{{ valueText }}</div>
+  @if (showWidgetTitlePanel) {
+    <div class="tb-slider-title-panel">
+      <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
     </div>
-    <div class="tb-slider-container" [class.tb-min-height]="!showValue">
-      <div #leftSliderIconContainer *ngIf="showLeftRightIcon" >
-        <tb-icon #leftSliderIcon [style]="leftIconStyle"
-                 [style.color]="(disabled || (loading$ | async)) ? settings.mainColorDisabled : settings.leftIconColor">{{ leftIcon }}</tb-icon>
+  }
+  <div #sliderContent class="tb-slider-content">
+    @if (showValue) {
+      <div #sliderValueContainer class="tb-slider-value-container" >
+        <div #sliderValue class="tb-slider-value" [style]="valueStyle">{{ valueText }}</div>
       </div>
+    }
+    <div class="tb-slider-container" [class.tb-min-height]="!showValue">
+      @if (showLeftRightIcon) {
+        <div #leftSliderIconContainer >
+          <tb-icon #leftSliderIcon [style]="leftIconStyle"
+          [style.color]="(disabled || (loading$ | async)) ? settings.mainColorDisabled : settings.leftIconColor">{{ leftIcon }}</tb-icon>
+        </div>
+      }
       <div class="tb-slider-column">
         <mat-slider class="tb-slider"
                     [disabled]="disabled || (loading$ | async)"
@@ -40,20 +46,26 @@
                     discrete>
           <input matSliderThumb [(ngModel)]="value" (valueChange)="onSliderChange()">
         </mat-slider>
-        <div *ngIf="showTicks" class="tb-slider-ticks" [style]="ticksStyle">
-          <div #sliderTickMinContainer>
-            <div #sliderTickMin>{{ tickMinText }}</div>
-          </div>
-          <div #sliderTickMaxContainer>
-            <div #sliderTickMax>{{ tickMaxText }}</div>
+        @if (showTicks) {
+          <div class="tb-slider-ticks" [style]="ticksStyle">
+            <div #sliderTickMinContainer>
+              <div #sliderTickMin>{{ tickMinText }}</div>
+            </div>
+            <div #sliderTickMaxContainer>
+              <div #sliderTickMax>{{ tickMaxText }}</div>
+            </div>
           </div>
-        </div>
-      </div>
-      <div #rightSliderIconContainer *ngIf="showLeftRightIcon" >
-        <tb-icon #rightSliderIcon [style]="rightIconStyle"
-                 [style.color]="(disabled || (loading$ | async)) ? settings.mainColorDisabled : settings.rightIconColor">{{ rightIcon }}</tb-icon>
+        }
       </div>
+      @if (showLeftRightIcon) {
+        <div #rightSliderIconContainer >
+          <tb-icon #rightSliderIcon [style]="rightIconStyle"
+          [style.color]="(disabled || (loading$ | async)) ? settings.mainColorDisabled : settings.rightIconColor">{{ rightIcon }}</tb-icon>
+        </div>
+      }
     </div>
   </div>
-  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
+  @if (loading$ | async) {
+    <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate"></mat-progress-bar>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html
index d681981e01..4eef6a39b0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html
@@ -15,40 +15,45 @@
     limitations under the License.
 
 -->
-<div class="tb-switch flex flex-col" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" *ngIf="switchType === 'switch'; else slideToggle">
-  <div #switchErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
-    <span #switchError class="switch-error">{{ error }}</span>
-  </div>
-  <div #switchTitleContainer class="title-container flex max-h-30% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
-    <span #switchTitle class="switch-title">{{title}}</span>
-  </div>
-  <div #switchContainer class="flex flex-full flex-col items-center justify-center"
+@if (switchType === 'switch') {
+  <div class="tb-switch flex flex-col" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'">
+    <div #switchErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
+      <span #switchError class="switch-error">{{ error }}</span>
+    </div>
+    <div #switchTitleContainer class="title-container flex max-h-30% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
+      <span #switchTitle class="switch-title">{{title}}</span>
+    </div>
+    <div #switchContainer class="flex flex-full flex-col items-center justify-center"
        [class]="{
           'max-h-70%': showTitle,
           'max-h-100%': !showTitle
        }"
-       id="switch-container">
-    <div #switch class="switch">
-      <mat-slide-toggle #matSlideToggle [(ngModel)]="value" (change)="onValue()">
-      </mat-slide-toggle>
-    </div>
-    <div #onoffContainer class="onoff-container flex flex-row items-start justify-center" [class.!hidden]="!showOnOffLabels">
-      <span #offLabel class="off-label flex-1" [class.!hidden]="value" style="text-align: center;">OFF</span>
-      <span class="flex-1" [class.!hidden]="!value"></span>
-      <span #onLabel class="on-label flex-1" [class.!hidden]="!value" style="text-align: center;">ON</span>
-      <span class="flex-1" [class.!hidden]="value"></span>
+      id="switch-container">
+      <div #switch class="switch">
+        <mat-slide-toggle #matSlideToggle [(ngModel)]="value" (change)="onValue()">
+        </mat-slide-toggle>
+      </div>
+      <div #onoffContainer class="onoff-container flex flex-row items-start justify-center" [class.!hidden]="!showOnOffLabels">
+        <span #offLabel class="off-label flex-1" [class.!hidden]="value" style="text-align: center;">OFF</span>
+        <span class="flex-1" [class.!hidden]="!value"></span>
+        <span #onLabel class="on-label flex-1" [class.!hidden]="!value" style="text-align: center;">ON</span>
+        <span class="flex-1" [class.!hidden]="value"></span>
+      </div>
     </div>
+    <div #textMeasure id="text-measure"></div>
   </div>
-  <div #textMeasure id="text-measure"></div>
-</div>
-<ng-template #slideToggle>
+} @else {
   <div class="tb-absolute-fill flex flex-col items-center justify-center" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'">
     <div>
       <mat-slide-toggle [disabled]="executingUpdateValue" [labelPosition]="labelPosition" [color]="sliderColor" [(ngModel)]="value" (change)="onValue()">{{title}}</mat-slide-toggle>
-      <mat-progress-bar style="height: 2px;" [color]="sliderColor" mode="indeterminate" *ngIf="executingUpdateValue"></mat-progress-bar>
-      <div style="height: 2px;" *ngIf="!executingUpdateValue"></div>
+      @if (executingUpdateValue) {
+        <mat-progress-bar style="height: 2px;" [color]="sliderColor" mode="indeterminate"></mat-progress-bar>
+      }
+      @if (!executingUpdateValue) {
+        <div style="height: 2px;"></div>
+      }
       <tb-error style="margin-top: -6px; display: block; pointer-events: none;"
-                [error]="error"></tb-error>
+      [error]="error"></tb-error>
     </div>
   </div>
-</ng-template>
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.component.html
index d70dda0019..c9c24439ad 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.component.html
@@ -31,7 +31,7 @@
       <div #value
            class="tb-value-stepper-value"
            [style.color]="(disabledState$ | async) === true ? disabledColor : valueStyleColor"
-           [style]="valueStyle">{{ valueText }}</div>
+      [style]="valueStyle">{{ valueText }}</div>
     </div>
     <div [class.!hidden]="!showRightButton"
          #rightButton
@@ -39,5 +39,7 @@
          [class.tb-button-pointer]="!rightDisabledState && (loading$ | async) === false">
     </div>
   </div>
-  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
+  @if (loading$ | async) {
+    <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate"></mat-progress-bar>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.html
index 830a62b484..6a0acbdf25 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.html
@@ -17,13 +17,17 @@
 -->
 <div class="tb-scada-symbol-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-scada-symbol-overlay" [style]="overlayStyle"></div>
-  <ng-container *ngIf="widgetComponent.dashboardWidget.showWidgetTitlePanel">
+  @if (widgetComponent.dashboardWidget.showWidgetTitlePanel) {
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
-  </ng-container>
+  }
   <div class="tb-scada-symbol-content">
     <div #scadaSymbolShape class="tb-scada-symbol-shape">
     </div>
-    <div *ngIf="noScadaSymbol" class="tb-no-scada-symbol" translate>scada.no-symbol-selected</div>
+    @if (noScadaSymbol) {
+      <div class="tb-no-scada-symbol" translate>scada.no-symbol-selected</div>
+    }
   </div>
-  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
+  @if (loading$ | async) {
+    <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate"></mat-progress-bar>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
index e81eed3b4a..64183bd00b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
@@ -101,34 +101,36 @@
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="pageStepIncrement" type="number" min="1" step="1" required
                  placeholder="{{ 'widget-config.set' | translate }}">
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
+          @if (alarmsTableWidgetSettingsForm.get('pageStepIncrement').invalid
+            && alarmsTableWidgetSettingsForm.get('pageStepIncrement').touched) {
+            <mat-icon matSuffix
+                      matTooltipPosition="above"
+                      matTooltipClass="tb-error-tooltip"
                     [matTooltip]="(alarmsTableWidgetSettingsForm.get('pageStepIncrement').hasError('required')
                                      ? 'widgets.value-source.value-required'
                                      : 'widgets.table.page-step-increment-format-message') | translate"
-                    *ngIf="alarmsTableWidgetSettingsForm.get('pageStepIncrement').invalid
-                    && alarmsTableWidgetSettingsForm.get('pageStepIncrement').touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
+              class="tb-error">
+              warning
+            </mat-icon>
+          }
         </mat-form-field>
         <mat-divider vertical class="xs:hidden"></mat-divider>
         <div class="tb-small-label" translate>widgets.table.page-step-count</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
                  placeholder="{{ 'widget-config.set' | translate }}">
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
+          @if (alarmsTableWidgetSettingsForm.get('pageStepCount').invalid
+            && alarmsTableWidgetSettingsForm.get('pageStepCount').touched) {
+            <mat-icon matSuffix
+                      matTooltipPosition="above"
+                      matTooltipClass="tb-error-tooltip"
                     [matTooltip]="(alarmsTableWidgetSettingsForm.get('pageStepCount').hasError('required')
                                      ? 'widgets.value-source.value-required'
                                      : 'widgets.table.page-step-count-format-message') | translate"
-                    *ngIf="alarmsTableWidgetSettingsForm.get('pageStepCount').invalid
-                    && alarmsTableWidgetSettingsForm.get('pageStepCount').touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
+              class="tb-error">
+              warning
+            </mat-icon>
+          }
         </mat-form-field>
       </div>
     </div>
@@ -136,9 +138,11 @@
       <div translate>widgets.table.default-page-size</div>
       <mat-form-field appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="defaultPageSize" placeholder="{{ 'widget-config.set' | translate }}">
-          <mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
-            {{ size }}
-          </mat-option>
+          @for (size of pageStepSizeValues; track size) {
+            <mat-option [value]="size">
+              {{ size }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
index fc89c9840e..82f1de831d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
@@ -29,7 +29,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="initialState"></tb-get-value-action-settings>
+      formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}" translate>widgets.power-button.power-on</div>
@@ -38,7 +38,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="onUpdateState"></tb-set-value-action-settings>
+      formControlName="onUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}" translate>widgets.power-button.power-off</div>
@@ -47,7 +47,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="offUpdateState"></tb-set-value-action-settings>
+      formControlName="offUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
@@ -58,7 +58,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="disabledState"></tb-get-value-action-settings>
+      formControlName="disabledState"></tb-get-value-action-settings>
     </div>
   </div>
   <div class="tb-form-panel">
@@ -69,12 +69,14 @@
                                       'lt-sm': 1,
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.power-button.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of powerButtonLayouts"
-                                    [value]="layout"
-                                    [image]="powerButtonLayoutImageMap.get(layout)">
-        {{ powerButtonLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.power-button.layout' | translate }}" formControlName="layout">
+      @for (layout of powerButtonLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="powerButtonLayoutImageMap.get(layout)">
+          {{ powerButtonLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.background.background' | translate }}</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html
index fc27e782e2..e6331aded8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html
@@ -29,7 +29,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="initialState"></tb-get-value-action-settings>
+      formControlName="initialState"></tb-get-value-action-settings>
     </div>
 
     <div class="tb-form-row">
@@ -60,7 +60,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="disabledState"></tb-get-value-action-settings>
+      formControlName="disabledState"></tb-get-value-action-settings>
     </div>
   </div>
   <div class="tb-form-panel" formGroupName="appearance">
@@ -72,12 +72,14 @@
                                     breakpoints: {
                                       'lt-sm': 1
                                     }}"
-                           label="{{ 'widgets.segmented-button.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of segmentedButtonLayouts"
-                                    [value]="layout"
-                                    [image]="segmentedButtonLayoutImageMap.get(layout)">
-        {{ segmentedButtonLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.segmented-button.layout' | translate }}" formControlName="layout">
+      @for (layout of segmentedButtonLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="segmentedButtonLayoutImageMap.get(layout)">
+          {{ segmentedButtonLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="autoScale">
@@ -216,16 +218,18 @@
             </mat-panel-title>
           </mat-expansion-panel-header>
           <ng-template matExpansionPanelContent>
-            <div class="tb-form-row space-between" *ngFor="let state of widgetButtonToggleStates">
-              <div>{{ widgetButtonToggleStatesTranslationsMap.get(state) | translate }}</div>
-              <tb-widget-button-toggle-custom-style
-                [value]="true"
-                [state]="state"
-                [appearance]="segmentedButtonWidgetSettingsForm.get('appearance').value"
-                [autoScale]="true"
-                [formControlName]="state">
-              </tb-widget-button-toggle-custom-style>
-            </div>
+            @for (state of widgetButtonToggleStates; track state) {
+              <div class="tb-form-row space-between">
+                <div>{{ widgetButtonToggleStatesTranslationsMap.get(state) | translate }}</div>
+                <tb-widget-button-toggle-custom-style
+                  [value]="true"
+                  [state]="state"
+                  [appearance]="segmentedButtonWidgetSettingsForm.get('appearance').value"
+                  [autoScale]="true"
+                  [formControlName]="state">
+                </tb-widget-button-toggle-custom-style>
+              </div>
+            }
           </ng-template>
         </mat-expansion-panel>
       </div>
@@ -257,16 +261,18 @@
             </mat-panel-title>
           </mat-expansion-panel-header>
           <ng-template matExpansionPanelContent>
-            <div class="tb-form-row space-between" *ngFor="let state of widgetButtonToggleStates">
-              <div>{{ widgetButtonToggleStatesTranslationsMap.get(state) | translate }}</div>
-              <tb-widget-button-toggle-custom-style
-                [value]="false"
-                [state]="state"
-                [appearance]="segmentedButtonWidgetSettingsForm.get('appearance').value"
-                [autoScale]="true"
-                [formControlName]="state">
-              </tb-widget-button-toggle-custom-style>
-            </div>
+            @for (state of widgetButtonToggleStates; track state) {
+              <div class="tb-form-row space-between">
+                <div>{{ widgetButtonToggleStatesTranslationsMap.get(state) | translate }}</div>
+                <tb-widget-button-toggle-custom-style
+                  [value]="false"
+                  [state]="state"
+                  [appearance]="segmentedButtonWidgetSettingsForm.get('appearance').value"
+                  [autoScale]="true"
+                  [formControlName]="state">
+                </tb-widget-button-toggle-custom-style>
+              </div>
+            }
           </ng-template>
         </mat-expansion-panel>
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-key-settings.component.html
index 2b579b4750..45dcb56a5e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-key-settings.component.html
@@ -22,9 +22,11 @@
       <div>{{ 'widgets.aggregated-value-card.position' | translate }}</div>
       <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="position">
-          <mat-option *ngFor="let position of aggregatedValueCardKeyPositions" [value]="position">
-            {{ aggregatedValueCardKeyPositionTranslationMap.get(position) | translate }}
-          </mat-option>
+          @for (position of aggregatedValueCardKeyPositions; track position) {
+            <mat-option [value]="position">
+              {{ aggregatedValueCardKeyPositionTranslationMap.get(position) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/api-usage-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/api-usage-widget-settings.component.html
index 046d76d351..a718b11669 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/api-usage-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/api-usage-widget-settings.component.html
@@ -38,31 +38,37 @@
           <div class="tb-form-table-header-cell tb-key-header" translate>widgets.api-usage.current-number</div>
           <div class="tb-form-table-header-cell tb-actions-header"></div>
         </div>
-        <div cdkDropList cdkDropListOrientation="vertical"
-             [cdkDropListDisabled]="!dragEnabled"
-             (cdkDropListDropped)="layerDrop($event)" *ngIf="dataKeysFormArray().controls?.length; else noDataLayers" class="tb-form-table-body">
-          <div cdkDrag [cdkDragDisabled]="!dragEnabled"
-               *ngFor="let dataKeyControl of dataKeysFormArray().controls; trackBy: trackByDataKey; let $index = index;">
-            <div class="tb-draggable-form-table-row">
-              <tb-api-usage-data-key-row class="flex-1"
-                                         [context]="context"
-                                         [dsEntityAliasId]="apiUsageWidgetSettingsForm.get('dsEntityAliasId').value"
-                                         [formControl]="dataKeyControl"
-                                         (dataKeyRemoved)="removeDataKey($index)">
-              </tb-api-usage-data-key-row>
-              <div class="tb-form-table-row-cell-buttons">
-                <button [class.tb-hidden]="!dragEnabled"
-                        mat-icon-button
-                        type="button"
-                        cdkDragHandle
-                        matTooltip="{{ 'action.drag' | translate }}"
-                        matTooltipPosition="above">
-                  <mat-icon>drag_indicator</mat-icon>
-                </button>
+        @if (dataKeysFormArray().controls?.length) {
+          <div cdkDropList cdkDropListOrientation="vertical"
+               [cdkDropListDisabled]="!dragEnabled"
+               (cdkDropListDropped)="layerDrop($event)" class="tb-form-table-body">
+            @for (dataKeyControl of dataKeysFormArray().controls; track trackByDataKey($index)) {
+              <div cdkDrag [cdkDragDisabled]="!dragEnabled"
+                   >
+                <div class="tb-draggable-form-table-row">
+                  <tb-api-usage-data-key-row class="flex-1"
+                                             [context]="context"
+                                             [dsEntityAliasId]="apiUsageWidgetSettingsForm.get('dsEntityAliasId').value"
+                                             [formControl]="dataKeyControl"
+                                             (dataKeyRemoved)="removeDataKey($index)">
+                  </tb-api-usage-data-key-row>
+                  <div class="tb-form-table-row-cell-buttons">
+                    <button [class.tb-hidden]="!dragEnabled"
+                            mat-icon-button
+                            type="button"
+                            cdkDragHandle
+                            matTooltip="{{ 'action.drag' | translate }}"
+                            matTooltipPosition="above">
+                      <mat-icon>drag_indicator</mat-icon>
+                    </button>
+                  </div>
+                </div>
               </div>
-            </div>
+            }
           </div>
-        </div>
+        } @else {
+          <span class="tb-prompt flex items-center justify-center">{{ 'widgets.api-usage.no-key' | translate }}</span>
+        }
       </div>
       <div>
         <button type="button" mat-stroked-button color="primary" (click)="addDataKey()">
@@ -70,9 +76,6 @@
         </button>
       </div>
     </div>
-    <ng-template #noDataLayers>
-      <span class="tb-prompt flex items-center justify-center">{{ 'widgets.api-usage.no-key' | translate }}</span>
-    </ng-template>
     <tb-string-autocomplete [fetchOptionsFn]="fetchDashboardStates.bind(this)"
                             additionalClass="tb-suffix-show-on-hover"
                             appearance="outline"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
index 3a8fb61d99..f8dab56b02 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
@@ -23,18 +23,22 @@
              #dashboardStateInput
              formControlName="stateId"
              [matAutocomplete]="dashboardStateAutocomplete">
-      <button *ngIf="dashboardStateWidgetSettingsForm.get('stateId').value"
-              type="button"
-              matSuffix mat-icon-button aria-label="Clear"
-              (click)="clearDashboardState()">
-        <mat-icon class="material-icons">close</mat-icon>
-      </button>
+      @if (dashboardStateWidgetSettingsForm.get('stateId').value) {
+        <button
+          type="button"
+          matSuffix mat-icon-button aria-label="Clear"
+          (click)="clearDashboardState()">
+          <mat-icon class="material-icons">close</mat-icon>
+        </button>
+      }
       <mat-autocomplete
         class="tb-autocomplete"
         #dashboardStateAutocomplete="matAutocomplete">
-        <mat-option *ngFor="let state of filteredDashboardStates | async" [value]="state">
-          <span [innerHTML]="state | highlight:dashboardStateSearchText"></span>
-        </mat-option>
+        @for (state of filteredDashboardStates | async; track state) {
+          <mat-option [value]="state">
+            <span [innerHTML]="state | highlight:dashboardStateSearchText"></span>
+          </mat-option>
+        }
       </mat-autocomplete>
     </mat-form-field>
     <mat-expansion-panel class="tb-settings">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
index ae477eeb6d..767be11007 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
@@ -24,13 +24,15 @@
         </div>
       </mat-panel-title>
       <span class="flex-1"></span>
-      <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
-              type="button"
-              (click)="removeLabel.emit()"
-              matTooltip="{{ 'action.remove' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>delete</mat-icon>
-      </button>
+      @if (!disabled) {
+        <button mat-icon-button style="min-width: 40px;"
+                type="button"
+                (click)="removeLabel.emit()"
+                matTooltip="{{ 'action.remove' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon>delete</mat-icon>
+        </button>
+      }
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
@@ -40,9 +42,11 @@
         <mat-form-field style="padding-bottom: 16px;">
           <mat-label translate>widgets.label-widget.label-pattern</mat-label>
           <input required matInput formControlName="pattern">
-          <mat-error *ngIf="labelWidgetLabelFormGroup.get('pattern').hasError('required')">
-            {{ 'widgets.label-widget.label-pattern-required' | translate }}
-          </mat-error>
+          @if (labelWidgetLabelFormGroup.get('pattern').hasError('required')) {
+            <mat-error>
+              {{ 'widgets.label-widget.label-pattern-required' | translate }}
+            </mat-error>
+          }
           <mat-hint [innerHTML]="'widgets.label-widget.label-pattern-hint' | translate | safe: 'html'"></mat-hint>
         </mat-form-field>
         <fieldset class="fields-group">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html
index 7dad480482..52e3f39fa3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html
@@ -17,27 +17,30 @@
 -->
 <section class="tb-widget-settings flex flex-col" [formGroup]="labelWidgetSettingsForm">
   <tb-gallery-image-input required
-                  label="{{ 'widgets.label-widget.background-image' | translate }}"
-                  formControlName="backgroundImageUrl">
+                          label="{{ 'widgets.label-widget.background-image' | translate }}"
+                          formControlName="backgroundImageUrl">
   </tb-gallery-image-input>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.label-widget.labels</legend>
     <div class="flex flex-col">
       <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
            (cdkDropListDropped)="labelDrop($event)">
-        <div cdkDrag class="tb-draggable flex flex-col" *ngFor="let labelControl of labelsFormArray().controls; trackBy: trackByLabelControl;
-                 let $index = index; last as isLast;"
-             [class.pb-2]="!isLast">
-          <tb-label-widget-label [formControl]="labelControl"
-                                 [expanded]="labelControl.new"
-                                 (removeLabel)="removeLabel($index)">
-          </tb-label-widget-label>
-        </div>
-      </div>
-      <div *ngIf="!labelsFormArray().controls.length">
-      <span translate
-            class="tb-prompt flex items-center justify-center">widgets.label-widget.no-labels</span>
+        @for (labelControl of typedSelectOptions; track trackByLabelControl($index, labelControl); let isLast = $last) {
+          <div cdkDrag class="tb-draggable flex flex-col"
+               [class.pb-2]="!isLast">
+            <tb-label-widget-label [formControl]="labelControl"
+                                   [expanded]="labelControl.new"
+                                   (removeLabel)="removeLabel($index)">
+            </tb-label-widget-label>
+          </div>
+        }
       </div>
+      @if (!labelsFormArray().controls.length) {
+        <div>
+          <span translate
+          class="tb-prompt flex items-center justify-center">widgets.label-widget.no-labels</span>
+        </div>
+      }
       <div style="padding-top: 16px;">
         <button mat-raised-button color="primary"
                 type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.ts
index 88e3e23cf2..e62f079836 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.ts
@@ -72,6 +72,9 @@ export class LabelWidgetSettingsComponent extends WidgetSettingsComponent {
   labelsFormArray(): UntypedFormArray {
     return this.labelWidgetSettingsForm.get('labels') as UntypedFormArray;
   }
+  get typedSelectOptions() {
+    return this.labelsFormArray().controls as (AbstractControl & { new?: boolean })[];
+  }
 
   public trackByLabelControl(index: number, labelControl: AbstractControl): any {
     return labelControl;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.html
index 463c792416..8c31273426 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.html
@@ -23,48 +23,52 @@
       </mat-slide-toggle>
     </div>
   </div>
-  <div class="tb-form-panel no-border no-padding" *ngIf="!mobileAppQRCodeWidgetSettingsForm.get('useSystemSettings').value">
-    <div class="tb-form-panel" formGroupName="qrCodeConfig">
-      <div class="tb-form-panel-title" translate>widget-config.card-style</div>
-      <div class="tb-form-hint tb-primary-fill">{{ 'widgets.mobile-app-qr-code.configuration-hint' | translate }}</div>
-      <div class="tb-form-panel stroked no-padding no-gap">
-        <div class="tb-form-row space-between no-border no-padding-bottom column-xs">
-          <mat-slide-toggle class="mat-slide fixed-title-width-230" formControlName="badgeEnabled"
-                            (click)="$event.stopPropagation()">
-            {{ 'admin.mobile-app.badges' | translate }}
-          </mat-slide-toggle>
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-            <mat-select formControlName="badgePosition" appearance="outline" subscriptSizing="dynamic">
-              <mat-option *ngFor="let badgePosition of badgePositionTranslationsMap | keyvalue" [value]="badgePosition.key">
-                {{ badgePosition.value | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+  @if (!mobileAppQRCodeWidgetSettingsForm.get('useSystemSettings').value) {
+    <div class="tb-form-panel no-border no-padding">
+      <div class="tb-form-panel" formGroupName="qrCodeConfig">
+        <div class="tb-form-panel-title" translate>widget-config.card-style</div>
+        <div class="tb-form-hint tb-primary-fill">{{ 'widgets.mobile-app-qr-code.configuration-hint' | translate }}</div>
+        <div class="tb-form-panel stroked no-padding no-gap">
+          <div class="tb-form-row space-between no-border no-padding-bottom column-xs">
+            <mat-slide-toggle class="mat-slide fixed-title-width-230" formControlName="badgeEnabled"
+                              (click)="$event.stopPropagation()">
+              {{ 'admin.mobile-app.badges' | translate }}
+            </mat-slide-toggle>
+            <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+              <mat-select formControlName="badgePosition" appearance="outline" subscriptSizing="dynamic">
+                @for (badgePosition of badgePositionTranslationsMap | keyvalue; track badgePosition) {
+                  <mat-option [value]="badgePosition.key">
+                    {{ badgePosition.value | translate }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          </div>
+        </div>
+        <div class="tb-form-panel stroked no-padding no-gap">
+          <div class="tb-form-row space-between no-border no-padding-bottom column-xs">
+            <mat-slide-toggle class="mat-slide fixed-title-width-230" formControlName="qrCodeLabelEnabled" (click)="$event.stopPropagation()">
+              {{ 'admin.mobile-app.label' | translate }}
+            </mat-slide-toggle>
+            <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+              <input matInput formControlName="qrCodeLabel" placeholder="{{'admin.mobile-app.set' | translate}}">
+            </mat-form-field>
+          </div>
         </div>
       </div>
-      <div class="tb-form-panel stroked no-padding no-gap">
-        <div class="tb-form-row space-between no-border no-padding-bottom column-xs">
-          <mat-slide-toggle class="mat-slide fixed-title-width-230" formControlName="qrCodeLabelEnabled" (click)="$event.stopPropagation()">
-            {{ 'admin.mobile-app.label' | translate }}
-          </mat-slide-toggle>
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="qrCodeLabel" placeholder="{{'admin.mobile-app.set' | translate}}">
-          </mat-form-field>
+      <div class="tb-form-panel no-border no-padding">
+        <div class="tb-form-row space-between">
+          <div>{{ 'widgets.background.background' | translate }}</div>
+          <tb-background-settings formControlName="background">
+          </tb-background-settings>
         </div>
       </div>
-    </div>
-    <div class="tb-form-panel no-border no-padding">
       <div class="tb-form-row space-between">
-        <div>{{ 'widgets.background.background' | translate }}</div>
-        <tb-background-settings formControlName="background">
-        </tb-background-settings>
+        <div>{{ 'widget-config.card-padding' | translate }}</div>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
       </div>
     </div>
-    <div class="tb-form-row space-between">
-      <div>{{ 'widget-config.card-padding' | translate }}</div>
-      <mat-form-field appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-    </div>
-  </div>
+  }
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
index bd16e4a467..9c222e2379 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
@@ -23,12 +23,14 @@
                                     breakpoints: {
                                       'lt-sm': 1
                                     }}"
-                           label="{{ 'widgets.progress-bar.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of progressBarLayouts"
-                                    [value]="layout"
-                                    [image]="progressBarLayoutImageMap.get(layout)">
-        {{ progressBarLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.progress-bar.layout' | translate }}" formControlName="layout">
+      @for (layout of progressBarLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="progressBarLayoutImageMap.get(layout)">
+          {{ progressBarLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="autoScale">
@@ -63,20 +65,22 @@
         </mat-form-field>
       </div>
     </div>
-    <div *ngIf="progressBarWidgetSettingsForm.get('layout').value === progressBarLayout.default" class="tb-form-row space-between">
-      <mat-slide-toggle class="mat-slide" formControlName="showTicks">
-        {{ 'widgets.progress-bar.range-ticks' | translate }}
-      </mat-slide-toggle>
-      <div class="flex flex-row items-center justify-start gap-2">
-        <tb-font-settings formControlName="ticksFont"
-                          previewText="100">
-        </tb-font-settings>
-        <tb-color-input asBoxInput
-                        colorClearButton
-                        formControlName="ticksColor">
-        </tb-color-input>
+    @if (progressBarWidgetSettingsForm.get('layout').value === progressBarLayout.default) {
+      <div class="tb-form-row space-between">
+        <mat-slide-toggle class="mat-slide" formControlName="showTicks">
+          {{ 'widgets.progress-bar.range-ticks' | translate }}
+        </mat-slide-toggle>
+        <div class="flex flex-row items-center justify-start gap-2">
+          <tb-font-settings formControlName="ticksFont"
+                            previewText="100">
+          </tb-font-settings>
+          <tb-color-input asBoxInput
+                          colorClearButton
+                          formControlName="ticksColor">
+          </tb-color-input>
+        </div>
       </div>
-    </div>
+    }
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.progress-bar.bar-color' | translate }}</div>
       <tb-color-settings formControlName="barColor"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
index 0ec46a2857..6372c2519e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
@@ -23,9 +23,11 @@
     <mat-label translate>widgets.qr-code.qr-code-text-pattern</mat-label>
     <input required matInput formControlName="qrCodeTextPattern">
     <mat-hint>{{ 'widgets.qr-code.qr-code-text-pattern-hint' | translate }}</mat-hint>
-    <mat-error *ngIf="qrCodeWidgetSettingsForm.get('qrCodeTextPattern').hasError('required')">
-      {{ 'widgets.qr-code.qr-code-text-pattern-required' | translate }}
-    </mat-error>
+    @if (qrCodeWidgetSettingsForm.get('qrCodeTextPattern').hasError('required')) {
+      <mat-error>
+        {{ 'widgets.qr-code.qr-code-text-pattern-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <tb-js-func required
               [class.!hidden]="!qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
index 375c50dbc3..1d0b24fa0a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
@@ -68,34 +68,36 @@
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="pageStepIncrement" type="number" min="1" step="1" required
                  placeholder="{{ 'widget-config.set' | translate }}">
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
+          @if (timeseriesTableWidgetSettingsForm.get('pageStepIncrement').invalid
+            && timeseriesTableWidgetSettingsForm.get('pageStepIncrement').touched) {
+            <mat-icon matSuffix
+                      matTooltipPosition="above"
+                      matTooltipClass="tb-error-tooltip"
                     [matTooltip]="(timeseriesTableWidgetSettingsForm.get('pageStepIncrement').hasError('required')
                                      ? 'widgets.value-source.value-required'
                                      : 'widgets.table.page-step-increment-format-message') | translate"
-                    *ngIf="timeseriesTableWidgetSettingsForm.get('pageStepIncrement').invalid
-                    && timeseriesTableWidgetSettingsForm.get('pageStepIncrement').touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
+              class="tb-error">
+              warning
+            </mat-icon>
+          }
         </mat-form-field>
         <mat-divider vertical class="xs:hidden"></mat-divider>
         <div class="tb-small-label" translate>widgets.table.page-step-count</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
                  placeholder="{{ 'widget-config.set' | translate }}">
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
+          @if (timeseriesTableWidgetSettingsForm.get('pageStepCount').invalid
+            && timeseriesTableWidgetSettingsForm.get('pageStepCount').touched) {
+            <mat-icon matSuffix
+                      matTooltipPosition="above"
+                      matTooltipClass="tb-error-tooltip"
                     [matTooltip]="(timeseriesTableWidgetSettingsForm.get('pageStepCount').hasError('required')
                                      ? 'widgets.value-source.value-required'
                                      : 'widgets.table.page-step-count-format-message') | translate"
-                    *ngIf="timeseriesTableWidgetSettingsForm.get('pageStepCount').invalid
-                    && timeseriesTableWidgetSettingsForm.get('pageStepCount').touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
+              class="tb-error">
+              warning
+            </mat-icon>
+          }
         </mat-form-field>
       </div>
     </div>
@@ -103,9 +105,11 @@
       <div translate>widgets.table.default-page-size</div>
       <mat-form-field appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="defaultPageSize" placeholder="{{ 'widget-config.set' | translate }}">
-          <mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
-            {{ size }}
-          </mat-option>
+          @for (size of pageStepSizeValues; track size) {
+            <mat-option [value]="size">
+              {{ size }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
@@ -115,23 +119,23 @@
     <mat-slide-toggle class="mat-slide" formControlName="useEntityLabel">
       {{ 'widgets.table.use-entity-label-tab-name' | translate }}
     </mat-slide-toggle>
-   <div class="tb-form-row justify-between column-xs" formGroupName="sortOrder">
-    <div class="fixed-title-width" translate>widgets.table.sort-by</div>
-     <div class="flex flex-1 flex-row justify-end gap-2 ">
-       <mat-form-field class="flex-lt-lg medium-width" appearance="outline" subscriptSizing="dynamic">
-         <mat-select formControlName="property" placeholder="{{ 'widget-config.set' | translate }}">
-           <mat-option [value]="entityFields.createdTime.value">{{ entityFields.createdTime.name | translate }}</mat-option>
-           <mat-option  [value]="entityFields.name.value">{{ entityFields.name.name | translate }}</mat-option>
-         </mat-select>
-       </mat-form-field>
-       <mat-form-field class="flex-lt-lg medium-width" appearance="outline" subscriptSizing="dynamic">
-         <mat-select formControlName="direction" placeholder="{{ 'widget-config.set' | translate }}">
-           <mat-option  [value]="Direction.ASC">{{ 'common.sort-asc' | translate }}</mat-option>
-           <mat-option  [value]="Direction.DESC">{{ 'common.sort-desc' | translate }}</mat-option>
-         </mat-select>
-       </mat-form-field>
-     </div>
-   </div>
+    <div class="tb-form-row justify-between column-xs" formGroupName="sortOrder">
+      <div class="fixed-title-width" translate>widgets.table.sort-by</div>
+      <div class="flex flex-1 flex-row justify-end gap-2 ">
+        <mat-form-field class="flex-lt-lg medium-width" appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="property" placeholder="{{ 'widget-config.set' | translate }}">
+            <mat-option [value]="entityFields.createdTime.value">{{ entityFields.createdTime.name | translate }}</mat-option>
+            <mat-option  [value]="entityFields.name.value">{{ entityFields.name.name | translate }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="flex-lt-lg medium-width" appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="direction" placeholder="{{ 'widget-config.set' | translate }}">
+            <mat-option  [value]="Direction.ASC">{{ 'common.sort-asc' | translate }}</mat-option>
+            <mat-option  [value]="Direction.DESC">{{ 'common.sort-desc' | translate }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </div>
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" style="padding-bottom: 16px;" translate>widgets.table.rows</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
index 15832b67a3..e605e97c89 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
@@ -23,12 +23,14 @@
                                     breakpoints: {
                                       'lt-md': horizontal ? 1 : 2
                                     }}"
-                           label="{{ 'widgets.value-card.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of valueCardLayouts"
-                                    [value]="layout"
-                                    [image]="valueCardLayoutImageMap.get(layout)">
-        {{ valueCardLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.value-card.layout' | translate }}" formControlName="layout">
+      @for (layout of valueCardLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="valueCardLayoutImageMap.get(layout)">
+          {{ valueCardLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="autoScale">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
index 1f042ab1ff..a03ec60e35 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
@@ -23,12 +23,14 @@
                                     breakpoints: {
                                       'lt-sm': 1
                                     }}"
-                           label="{{ 'widgets.value-chart-card.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of valueChartCardLayouts"
-                                    [value]="layout"
-                                    [image]="valueChartCardLayoutImageMap.get(layout)">
-        {{ valueChartCardLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.value-chart-card.layout' | translate }}" formControlName="layout">
+      @for (layout of valueChartCardLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="valueChartCardLayoutImageMap.get(layout)">
+          {{ valueChartCardLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="autoScale">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
index 8ab61ea509..bda194828e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
@@ -24,7 +24,7 @@
       </mat-slide-toggle>
     </div>
     <tb-time-series-chart-grid-settings
-        formControlName="grid">
+      formControlName="grid">
     </tb-time-series-chart-grid-settings>
     <div class="tb-form-panel">
       <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div>
@@ -78,43 +78,43 @@
         </mat-form-field>
       </div>
       <tb-chart-fill-settings
-          formControlName="barBackgroundSettings"
-          titleText="widgets.chart.background"
-          fillNoneTitle="widgets.chart.fill-type-solid">
+        formControlName="barBackgroundSettings"
+        titleText="widgets.chart.background"
+        fillNoneTitle="widgets.chart.fill-type-solid">
       </tb-chart-fill-settings>
       <tb-time-series-no-aggregation-bar-width-settings
-          stroked
-          formControlName="noAggregationBarWidthSettings">
+        stroked
+        formControlName="noAggregationBarWidthSettings">
       </tb-time-series-no-aggregation-bar-width-settings>
     </div>
     <div class="tb-form-panel">
       <div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.y-axis</div>
       <tb-time-series-chart-axis-settings
-          formControlName="yAxis"
-          [aliasController]="aliasController"
-          [dataKeyCallbacks]="callbacks"
-          [datasource]="datasource"
-          axisType="yAxis"
-          advanced
-          hideUnits
-          hideDecimals>
+        formControlName="yAxis"
+        [aliasController]="aliasController"
+        [dataKeyCallbacks]="callbacks"
+        [datasource]="datasource"
+        axisType="yAxis"
+        advanced
+        hideUnits
+        hideDecimals>
       </tb-time-series-chart-axis-settings>
     </div>
     <div class="tb-form-panel">
       <div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.x-axis</div>
       <tb-time-series-chart-axis-settings
-          formControlName="xAxis"
-          axisType="xAxis"
-          advanced>
+        formControlName="xAxis"
+        axisType="xAxis"
+        advanced>
       </tb-time-series-chart-axis-settings>
     </div>
     <tb-time-series-chart-thresholds-panel
-        formControlName="thresholds"
-        [aliasController]="aliasController"
-        [dataKeyCallbacks]="dataKeyCallbacks"
-        [datasource]="datasource"
-        [widgetConfig]="widgetConfig?.config"
-        hideYAxis>
+      formControlName="thresholds"
+      [aliasController]="aliasController"
+      [dataKeyCallbacks]="dataKeyCallbacks"
+      [datasource]="datasource"
+      [widgetConfig]="widgetConfig?.config"
+      hideYAxis>
     </tb-time-series-chart-thresholds-panel>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetSettingsForm.get('showLegend').value" [disabled]="!barChartWidgetSettingsForm.get('showLegend').value">
@@ -130,9 +130,11 @@
             <div>{{ 'legend.position' | translate }}</div>
             <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="legendPosition">
-                <mat-option *ngFor="let pos of legendPositions" [value]="pos">
-                  {{ legendPositionTranslationMap.get(pos) | translate }}
-                </mat-option>
+                @for (pos of legendPositions; track pos) {
+                  <mat-option [value]="pos">
+                    {{ legendPositionTranslationMap.get(pos) | translate }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
           </div>
@@ -193,7 +195,7 @@
             </mat-slide-toggle>
             <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
               <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
-                                     formControlName="tooltipDateFormat"></tb-date-format-select>
+              formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipDateColor').value }"
                                 [previewText]="tooltipDatePreviewFn">
@@ -229,7 +231,7 @@
       </mat-expansion-panel>
     </div>
     <tb-chart-animation-settings
-        formControlName="animation">
+      formControlName="animation">
     </tb-chart-animation-settings>
     <div class="tb-form-panel">
       <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
index 87a84493c2..9bbfc28921 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
@@ -202,16 +202,19 @@
         <span translate>widgets.chart.add-threshold</span>
       </button>
     </div>
-    <div *ngIf="thresholdsFormArray().length" class="tb-control-list tb-drop-list flex flex-col gap-3" cdkDropList cdkDropListOrientation="vertical"
-         (cdkDropListDropped)="thresholdDrop($event)">
-      <div cdkDrag class="tb-draggable" *ngFor="let thresholdControl of thresholdsFormArray().controls; trackBy: trackByThreshold;
-                 let $index = index;">
-        <tb-flot-threshold [formControl]="thresholdControl"
-                           [aliasController]="aliasController"
-                           (removeThreshold)="removeThreshold($index)">
-        </tb-flot-threshold>
+    @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)) {
+          <div cdkDrag class="tb-draggable">
+            <tb-flot-threshold [formControl]="thresholdControl"
+                               [aliasController]="aliasController"
+                               (removeThreshold)="removeThreshold($index)">
+            </tb-flot-threshold>
+          </div>
+        }
       </div>
-    </div>
+    }
   </div>
   <div class="tb-form-panel tb-slide-toggle" formGroupName="comparisonSettings">
     <div class="tb-form-panel-title" translate>widgets.chart.comparison-settings</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
index b458e20387..a9034b9e12 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
@@ -22,23 +22,29 @@
       <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.radius</mat-label>
         <input matInput type="number" step="0.1" min="0" max="1" formControlName="radius">
-        <mat-error *ngIf="flotPieWidgetSettingsForm.get('radius').hasError('min') || flotPieWidgetSettingsForm.get('radius').hasError('max')">
-          {{ 'widgets.chart.common-pie-settings-range-error' | translate }}
-        </mat-error>
+        @if (flotPieWidgetSettingsForm.get('radius').hasError('min') || flotPieWidgetSettingsForm.get('radius').hasError('max')) {
+          <mat-error>
+            {{ 'widgets.chart.common-pie-settings-range-error' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
       <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.inner-radius</mat-label>
         <input matInput type="number" step="0.1" min="0" max="1" formControlName="innerRadius">
-        <mat-error *ngIf="flotPieWidgetSettingsForm.get('innerRadius').hasError('min') || flotPieWidgetSettingsForm.get('innerRadius').hasError('max')">
-          {{ 'widgets.chart.common-pie-settings-range-error' | translate }}
-        </mat-error>
+        @if (flotPieWidgetSettingsForm.get('innerRadius').hasError('min') || flotPieWidgetSettingsForm.get('innerRadius').hasError('max')) {
+          <mat-error>
+            {{ 'widgets.chart.common-pie-settings-range-error' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
       <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.tilt</mat-label>
         <input matInput type="number" step="0.1" min="0" max="1" formControlName="tilt">
-        <mat-error *ngIf="flotPieWidgetSettingsForm.get('tilt').hasError('min') || flotPieWidgetSettingsForm.get('tilt').hasError('max')">
-          {{ 'widgets.chart.common-pie-settings-range-error' | translate }}
-        </mat-error>
+        @if (flotPieWidgetSettingsForm.get('tilt').hasError('min') || flotPieWidgetSettingsForm.get('tilt').hasError('max')) {
+          <mat-error>
+            {{ 'widgets.chart.common-pie-settings-range-error' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
     </section>
     <mat-slide-toggle formControlName="showLabels" class="slide-block">
@@ -56,9 +62,9 @@
         <input matInput type="number" min="0" formControlName="width">
       </mat-form-field>
       <tb-color-input class="flex-1"
-        formControlName="color"
-        icon="format_color_fill"
-        label="{{ 'widgets.chart.color' | translate }}" openOnInput colorClearButton>
+                      formControlName="color"
+                      icon="format_color_fill"
+                      label="{{ 'widgets.chart.color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
   </fieldset>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
index e97d45fdd1..ad8b865391 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
@@ -18,13 +18,14 @@
 <div class="tb-form-row no-border no-padding column-lt-md" style="gap: 10px;" [formGroup]="thresholdFormGroup">
   <tb-value-source style="flex: 1" [aliasController]="aliasController" formControlName="valueSource"></tb-value-source>
   <div class="tb-form-row no-border no-padding" style="gap: 10px;">
-      <mat-form-field appearance="outline" class="number lt-md:flex-1" subscriptSizing="dynamic">
-        <input matInput formControlName="lineWidth" type="number" min="0" placeholder="{{ 'widgets.chart.line-width' | translate }}">
-      </mat-form-field>
-      <tb-color-input asBoxInput
-                      formControlName="color">
-      </tb-color-input>
-      <button *ngIf="!disabled" mat-icon-button
+    <mat-form-field appearance="outline" class="number lt-md:flex-1" subscriptSizing="dynamic">
+      <input matInput formControlName="lineWidth" type="number" min="0" placeholder="{{ 'widgets.chart.line-width' | translate }}">
+    </mat-form-field>
+    <tb-color-input asBoxInput
+                    formControlName="color">
+    </tb-color-input>
+    @if (!disabled) {
+      <button mat-icon-button
               class="tb-box-button"
               type="button"
               (click)="removeThreshold.emit()"
@@ -32,5 +33,6 @@
               matTooltipPosition="above">
         <mat-icon>delete</mat-icon>
       </button>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
index 0ae52d9993..2079d5e35f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
@@ -24,43 +24,53 @@
     <mat-slide-toggle class="mat-slide" formControlName="enableSelection">
       {{ 'widgets.chart.enable-selection-mode' | translate }}
     </mat-slide-toggle>
-    <mat-slide-toggle *ngIf="chartType === 'graph'" class="mat-slide" formControlName="smoothLines">
-      {{ 'widgets.chart.display-smooth-lines' | translate }}
-    </mat-slide-toggle>
-    <div *ngIf="chartType === 'graph'" class="tb-form-row space-between">
-      <div translate>widgets.chart.line-shadow-size</div>
-      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-        <input matInput formControlName="shadowSize" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-    </div>
-    <div *ngIf="chartType === 'bar'" class="tb-form-row space-between">
-      <div translate>widgets.chart.default-bar-width</div>
-      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-        <input matInput formControlName="defaultBarWidth" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-    </div>
-    <div *ngIf="chartType === 'bar'" class="tb-form-row space-between">
-      <div>{{ 'widgets.chart.bar-alignment' | translate }}</div>
-      <mat-form-field appearance="outline" subscriptSizing="dynamic">
-        <mat-select formControlName="barAlignment">
-          <mat-option [value]="'left'">
-            {{ 'widgets.chart.bar-alignment-left' | translate }}
-          </mat-option>
-          <mat-option [value]="'right'">
-            {{ 'widgets.chart.bar-alignment-right' | translate }}
-          </mat-option>
-          <mat-option [value]="'center'">
-            {{ 'widgets.chart.bar-alignment-center' | translate }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
-    <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-row space-between">
-      <div translate>widgets.chart.thresholds-line-width</div>
-      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-        <input matInput formControlName="thresholdsLineWidth" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-    </div>
+    @if (chartType === 'graph') {
+      <mat-slide-toggle class="mat-slide" formControlName="smoothLines">
+        {{ 'widgets.chart.display-smooth-lines' | translate }}
+      </mat-slide-toggle>
+    }
+    @if (chartType === 'graph') {
+      <div class="tb-form-row space-between">
+        <div translate>widgets.chart.line-shadow-size</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="shadowSize" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
+    }
+    @if (chartType === 'bar') {
+      <div class="tb-form-row space-between">
+        <div translate>widgets.chart.default-bar-width</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="defaultBarWidth" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
+    }
+    @if (chartType === 'bar') {
+      <div class="tb-form-row space-between">
+        <div>{{ 'widgets.chart.bar-alignment' | translate }}</div>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="barAlignment">
+            <mat-option [value]="'left'">
+              {{ 'widgets.chart.bar-alignment-left' | translate }}
+            </mat-option>
+            <mat-option [value]="'right'">
+              {{ 'widgets.chart.bar-alignment-right' | translate }}
+            </mat-option>
+            <mat-option [value]="'center'">
+              {{ 'widgets.chart.bar-alignment-center' | translate }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+    }
+    @if (chartType === 'graph' || chartType === 'bar') {
+      <div class="tb-form-row space-between">
+        <div translate>widgets.chart.thresholds-line-width</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="thresholdsLineWidth" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
+    }
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.chart.default-font' | translate }}</div>
       <div class="flex flex-row items-center justify-start gap-2">
@@ -74,25 +84,27 @@
       </div>
     </div>
   </div>
-  <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
-    <div class="tb-form-panel-title" translate>widget-config.legend</div>
-    <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('showLegend').value">
-      <mat-expansion-panel-header class="flex flex-row flex-wrap">
-        <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
-            {{ 'widget-config.legend' | translate }}
-          </mat-slide-toggle>
-        </mat-panel-title>
-        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
-          widget-config.advanced-settings
-        </mat-panel-description>
-      </mat-expansion-panel-header>
-      <ng-template matExpansionPanelContent>
-        <tb-legend-config formControlName="legendConfig">
-        </tb-legend-config>
-      </ng-template>
-    </mat-expansion-panel>
-  </div>
+  @if (chartType === 'graph' || chartType === 'bar') {
+    <div class="tb-form-panel tb-slide-toggle">
+      <div class="tb-form-panel-title" translate>widget-config.legend</div>
+      <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('showLegend').value">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
+          <mat-panel-title>
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
+              {{ 'widget-config.legend' | translate }}
+            </mat-slide-toggle>
+          </mat-panel-title>
+          <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
+            widget-config.advanced-settings
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+        <ng-template matExpansionPanelContent>
+          <tb-legend-config formControlName="legendConfig">
+          </tb-legend-config>
+        </ng-template>
+      </mat-expansion-panel>
+    </div>
+  }
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.chart.axis</div>
     <div class="tb-form-panel stroked" formGroupName="yaxis">
@@ -267,124 +279,131 @@
       </ng-template>
     </mat-expansion-panel>
   </div>
-  <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
-    <div class="tb-form-panel-title" translate>widgets.chart.comparison-settings</div>
-    <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('comparisonEnabled').value">
-      <mat-expansion-panel-header class="flex flex-row flex-wrap">
-        <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="comparisonEnabled" (click)="$event.stopPropagation()">
-            {{ 'widgets.chart.enable-comparison' | translate }}
-          </mat-slide-toggle>
-        </mat-panel-title>
-        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
-          widget-config.advanced-settings
-        </mat-panel-description>
-      </mat-expansion-panel-header>
-      <ng-template matExpansionPanelContent>
-        <div class="tb-form-row space-between">
-          <div>{{ 'widgets.chart.time-for-comparison' | translate }}</div>
-          <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
-            <mat-select formControlName="timeForComparison">
-              <mat-option [value]="'previousInterval'">
-                {{ 'widgets.chart.time-for-comparison-previous-interval' | translate }}
-              </mat-option>
-              <mat-option [value]="'days'">
-                {{ 'widgets.chart.time-for-comparison-days' | translate }}
-              </mat-option>
-              <mat-option [value]="'weeks'">
-                {{ 'widgets.chart.time-for-comparison-weeks' | translate }}
-              </mat-option>
-              <mat-option [value]="'months'">
-                {{ 'widgets.chart.time-for-comparison-months' | translate }}
-              </mat-option>
-              <mat-option [value]="'years'">
-                {{ 'widgets.chart.time-for-comparison-years' | translate }}
-              </mat-option>
-              <mat-option [value]="'customInterval'">
-                {{ 'widgets.chart.time-for-comparison-custom-interval' | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div [class.!hidden]="flotSettingsFormGroup.get('timeForComparison').value !== 'customInterval'" class="tb-form-row space-between">
-          <div translate>widgets.chart.custom-interval-value</div>
-          <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-            <input matInput formControlName="comparisonCustomIntervalValue" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-        </div>
-        <div class="tb-form-panel stroked" formGroupName="xaxisSecond">
-          <div class="tb-form-panel-title" translate>widgets.chart.comparison-x-axis-settings</div>
-          <div class="tb-form-row">
-            <div class="fixed-title-width" translate>widgets.chart.axis-title</div>
-            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-              <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-            </mat-form-field>
-          </div>
-          <div class="tb-form-row">
-            <mat-slide-toggle class="mat-slide" formControlName="showLabels">
-              {{ 'widgets.chart.show-tick-labels' | translate }}
+  @if (chartType === 'graph' || chartType === 'bar') {
+    <div class="tb-form-panel tb-slide-toggle">
+      <div class="tb-form-panel-title" translate>widgets.chart.comparison-settings</div>
+      <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('comparisonEnabled').value">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
+          <mat-panel-title>
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="comparisonEnabled" (click)="$event.stopPropagation()">
+              {{ 'widgets.chart.enable-comparison' | translate }}
             </mat-slide-toggle>
-          </div>
+          </mat-panel-title>
+          <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
+            widget-config.advanced-settings
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+        <ng-template matExpansionPanelContent>
           <div class="tb-form-row space-between">
-            <div>{{ 'widgets.chart.axis-position' | translate }}</div>
+            <div>{{ 'widgets.chart.time-for-comparison' | translate }}</div>
             <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
-              <mat-select formControlName="axisPosition">
-                <mat-option [value]="'top'">
-                  {{ 'widgets.chart.axis-position-top' | translate }}
+              <mat-select formControlName="timeForComparison">
+                <mat-option [value]="'previousInterval'">
+                  {{ 'widgets.chart.time-for-comparison-previous-interval' | translate }}
                 </mat-option>
-                <mat-option [value]="'bottom'">
-                  {{ 'widgets.chart.axis-position-bottom' | translate }}
+                <mat-option [value]="'days'">
+                  {{ 'widgets.chart.time-for-comparison-days' | translate }}
+                </mat-option>
+                <mat-option [value]="'weeks'">
+                  {{ 'widgets.chart.time-for-comparison-weeks' | translate }}
+                </mat-option>
+                <mat-option [value]="'months'">
+                  {{ 'widgets.chart.time-for-comparison-months' | translate }}
+                </mat-option>
+                <mat-option [value]="'years'">
+                  {{ 'widgets.chart.time-for-comparison-years' | translate }}
+                </mat-option>
+                <mat-option [value]="'customInterval'">
+                  {{ 'widgets.chart.time-for-comparison-custom-interval' | translate }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
           </div>
-        </div>
-      </ng-template>
-    </mat-expansion-panel>
-  </div>
-  <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
-    <div class="tb-form-panel-title" translate>widgets.chart.custom-legend-settings</div>
-    <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('customLegendEnabled').value">
-      <mat-expansion-panel-header class="flex flex-row flex-wrap">
-        <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="customLegendEnabled" (click)="$event.stopPropagation()">
-            {{ 'widgets.chart.enable-custom-legend' | translate }}
-          </mat-slide-toggle>
-        </mat-panel-title>
-        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
-          widget-config.advanced-settings
-        </mat-panel-description>
-      </mat-expansion-panel-header>
-      <ng-template matExpansionPanelContent>
-        <div class="tb-form-panel stroked">
-          <div class="tb-form-panel-title" translate>widgets.chart.label-keys-list</div>
-          <div class="flex flex-col">
-            <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
-                 (cdkDropListDropped)="labelDataKeyDrop($event)">
-              <div cdkDrag class="tb-draggable flex flex-col" *ngFor="let labelDataKeyControl of dataKeysListForLabelsFormArray().controls; trackBy: trackByLabelDataKey;
-                 let $index = index; last as isLast;"
-                   [class.pb-2]="!isLast">
-                <tb-label-data-key [formControl]="labelDataKeyControl"
-                                   [expanded]="labelDataKeyControl.new"
-                                   (removeLabelDataKey)="removeLabelDataKey($index)">
-                </tb-label-data-key>
-              </div>
+          <div [class.!hidden]="flotSettingsFormGroup.get('timeForComparison').value !== 'customInterval'" class="tb-form-row space-between">
+            <div translate>widgets.chart.custom-interval-value</div>
+            <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+              <input matInput formControlName="comparisonCustomIntervalValue" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
+            </mat-form-field>
+          </div>
+          <div class="tb-form-panel stroked" formGroupName="xaxisSecond">
+            <div class="tb-form-panel-title" translate>widgets.chart.comparison-x-axis-settings</div>
+            <div class="tb-form-row">
+              <div class="fixed-title-width" translate>widgets.chart.axis-title</div>
+              <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+                <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+              </mat-form-field>
             </div>
-            <div *ngIf="!dataKeysListForLabelsFormArray().controls.length">
-            <span translate
-                  class="tb-prompt flex items-center justify-center">widgets.chart.no-label-keys</span>
+            <div class="tb-form-row">
+              <mat-slide-toggle class="mat-slide" formControlName="showLabels">
+                {{ 'widgets.chart.show-tick-labels' | translate }}
+              </mat-slide-toggle>
             </div>
-            <div style="padding-top: 16px;">
-              <button mat-raised-button color="primary"
-                      type="button"
-                      [disabled]="!flotSettingsFormGroup.get('customLegendEnabled').value"
-                      (click)="addLabelDataKey()">
-                <span translate>widgets.chart.add-label-key</span>
-              </button>
+            <div class="tb-form-row space-between">
+              <div>{{ 'widgets.chart.axis-position' | translate }}</div>
+              <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
+                <mat-select formControlName="axisPosition">
+                  <mat-option [value]="'top'">
+                    {{ 'widgets.chart.axis-position-top' | translate }}
+                  </mat-option>
+                  <mat-option [value]="'bottom'">
+                    {{ 'widgets.chart.axis-position-bottom' | translate }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
             </div>
           </div>
-        </div>
-      </ng-template>
-    </mat-expansion-panel>
-  </div>
+        </ng-template>
+      </mat-expansion-panel>
+    </div>
+  }
+  @if (chartType === 'graph' || chartType === 'bar') {
+    <div class="tb-form-panel tb-slide-toggle">
+      <div class="tb-form-panel-title" translate>widgets.chart.custom-legend-settings</div>
+      <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('customLegendEnabled').value">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
+          <mat-panel-title>
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="customLegendEnabled" (click)="$event.stopPropagation()">
+              {{ 'widgets.chart.enable-custom-legend' | translate }}
+            </mat-slide-toggle>
+          </mat-panel-title>
+          <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
+            widget-config.advanced-settings
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+        <ng-template matExpansionPanelContent>
+          <div class="tb-form-panel stroked">
+            <div class="tb-form-panel-title" translate>widgets.chart.label-keys-list</div>
+            <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) {
+                  <div cdkDrag class="tb-draggable flex flex-col"
+                       [class.pb-2]="!isLast">
+                    <tb-label-data-key [formControl]="labelDataKeyControl"
+                                       [expanded]="labelDataKeyControl.new"
+                                       (removeLabelDataKey)="removeLabelDataKey($index)">
+                    </tb-label-data-key>
+                  </div>
+                }
+              </div>
+              @if (!dataKeysListForLabelsFormArray().controls.length) {
+                <div>
+                  <span translate
+                  class="tb-prompt flex items-center justify-center">widgets.chart.no-label-keys</span>
+                </div>
+              }
+              <div style="padding-top: 16px;">
+                <button mat-raised-button color="primary"
+                        type="button"
+                        [disabled]="!flotSettingsFormGroup.get('customLegendEnabled').value"
+                        (click)="addLabelDataKey()">
+                  <span translate>widgets.chart.add-label-key</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </ng-template>
+      </mat-expansion-panel>
+    </div>
+  }
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts
index 65fc17df26..4b3af4a63e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts
@@ -424,6 +424,10 @@ export class FlotWidgetSettingsComponent extends PageComponent implements OnInit
     return this.flotSettingsFormGroup.get('dataKeysListForLabels') as UntypedFormArray;
   }
 
+  get typedSelectOptions() {
+    return this.dataKeysListForLabelsFormArray().controls as (AbstractControl & { new?: boolean })[];
+  }
+
   public trackByLabelDataKey(index: number, labelDataKeyControl: AbstractControl): any {
     return labelDataKeyControl;
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html
index e9ca4d51ea..9be7ec3da7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html
@@ -24,13 +24,15 @@
         </div>
       </mat-panel-title>
       <span class="flex-1"></span>
-      <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
-              type="button"
-              (click)="removeLabelDataKey.emit()"
-              matTooltip="{{ 'action.remove' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>delete</mat-icon>
-      </button>
+      @if (!disabled) {
+        <button mat-icon-button style="min-width: 40px;"
+                type="button"
+                (click)="removeLabelDataKey.emit()"
+                matTooltip="{{ 'action.remove' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon>delete</mat-icon>
+        </button>
+      }
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
@@ -41,9 +43,11 @@
           <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.chart.key-name</mat-label>
             <input required matInput formControlName="name">
-            <mat-error *ngIf="labelDataKeyFormGroup.get('name').hasError('required')">
-              {{ 'widgets.chart.key-name-required' | translate }}
-            </mat-error>
+            @if (labelDataKeyFormGroup.get('name').hasError('required')) {
+              <mat-error>
+                {{ 'widgets.chart.key-name-required' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
           <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.chart.key-type</mat-label>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
index 8d7ba9a603..fcc637f7b5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
@@ -31,9 +31,11 @@
           <div>{{ 'legend.position' | translate }}</div>
           <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="legendPosition">
-              <mat-option *ngFor="let pos of legendPositions" [value]="pos">
-                {{ legendPositionTranslationMap.get(pos) | translate }}
-              </mat-option>
+              @for (pos of legendPositions; track pos) {
+                <mat-option [value]="pos">
+                  {{ legendPositionTranslationMap.get(pos) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -84,9 +86,11 @@
           <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="tooltipValueType">
-                <mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type">
-                  {{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }}
-                </mat-option>
+                @for (type of latestChartTooltipValueTypes; track type) {
+                  <mat-option [value]="type">
+                    {{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
@@ -120,7 +124,7 @@
     </mat-expansion-panel>
   </div>
   <tb-chart-animation-settings
-      formControlName="animation">
+    formControlName="animation">
   </tb-chart-animation-settings>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
@@ -149,9 +153,11 @@
         <div class="flex flex-1 flex-row items-center justify-start gap-2">
           <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="labelPosition">
-              <mat-option *ngFor="let position of pieChartLabelPositions" [value]="position">
-                {{ pieChartLabelPositionTranslationMap.get(position) | translate }}
-              </mat-option>
+              @for (position of pieChartLabelPositions; track position) {
+                <mat-option [value]="position">
+                  {{ pieChartLabelPositionTranslationMap.get(position) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
           <tb-font-settings formControlName="labelFont"
@@ -209,12 +215,14 @@
                                     breakpoints: {
                                       'lt-sm': 1
                                     }}"
-                             label="{{ 'widgets.doughnut.layout' | translate }}" formControlName="layout">
-        <tb-image-cards-select-option *ngFor="let layout of doughnutLayouts"
-                                      [value]="layout"
-                                      [image]="doughnutLayoutImageMap.get(layout)">
-          {{ doughnutLayoutTranslationMap.get(layout) | translate }}
-        </tb-image-cards-select-option>
+        label="{{ 'widgets.doughnut.layout' | translate }}" formControlName="layout">
+        @for (layout of doughnutLayouts; track layout) {
+          <tb-image-cards-select-option
+            [value]="layout"
+            [image]="doughnutLayoutImageMap.get(layout)">
+            {{ doughnutLayoutTranslationMap.get(layout) | translate }}
+          </tb-image-cards-select-option>
+        }
       </tb-image-cards-select>
       <div class="tb-form-row">
         <mat-slide-toggle class="mat-slide" formControlName="autoScale">
@@ -256,8 +264,8 @@
       <div class="tb-form-panel">
         <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div>
         <tb-chart-bar-settings
-            formControlName="barSettings"
-            [series]="false">
+          formControlName="barSettings"
+          [series]="false">
         </tb-chart-bar-settings>
       </div>
       <div class="tb-form-panel">
@@ -303,9 +311,9 @@
       <div class="tb-form-panel">
         <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div>
         <tb-chart-bar-settings
-            formControlName="barSettings"
-            pieLabelPosition
-            [series]="false">
+          formControlName="barSettings"
+          pieLabelPosition
+          [series]="false">
         </tb-chart-bar-settings>
       </div>
       <div class="tb-form-panel">
@@ -360,9 +368,11 @@
           <div>{{ 'widgets.radar-chart.shape' | translate }}</div>
           <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="shape">
-              <mat-option *ngFor="let shape of radarChartShapes" [value]="shape">
-                {{ radarChartShapeTranslations.get(shape) | translate }}
-              </mat-option>
+              @for (shape of radarChartShapes; track shape) {
+                <mat-option [value]="shape">
+                  {{ radarChartShapeTranslations.get(shape) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -380,9 +390,11 @@
           <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="lineType">
-                <mat-option *ngFor="let type of chartLineTypes" [value]="type">
-                  {{ chartLineTypeTranslations.get(type) | translate }}
-                </mat-option>
+                @for (type of chartLineTypes; track type) {
+                  <mat-option [value]="type">
+                    {{ chartLineTypeTranslations.get(type) | translate }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
             <mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic">
@@ -398,9 +410,11 @@
           <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="pointShape">
-                <mat-option *ngFor="let shape of chartShapes" [value]="shape">
-                  {{ chartShapeTranslations.get(shape) | translate }}
-                </mat-option>
+                @for (shape of chartShapes; track shape) {
+                  <mat-option [value]="shape">
+                    {{ chartShapeTranslations.get(shape) | translate }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
             <mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic">
@@ -416,9 +430,11 @@
           <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
             <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="labelPosition">
-                <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
-                  {{ chartLabelPositionTranslations.get(position) | translate }}
-                </mat-option>
+                @for (position of chartLabelPositions; track position) {
+                  <mat-option [value]="position">
+                    {{ chartLabelPositionTranslations.get(position) | translate }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
             <tb-font-settings formControlName="labelFont"
@@ -434,7 +450,7 @@
           </div>
         </div>
         <tb-chart-fill-settings
-            formControlName="fillAreaSettings">
+          formControlName="fillAreaSettings">
         </tb-chart-fill-settings>
       </div>
       <div class="tb-form-panel">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
index ded6a1a7b4..2ff773c61c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
@@ -24,7 +24,7 @@
       </mat-slide-toggle>
     </div>
     <tb-time-series-chart-grid-settings
-        formControlName="grid">
+      formControlName="grid">
     </tb-time-series-chart-grid-settings>
     <div class="tb-form-panel">
       <div class="tb-form-panel-title" translate>widgets.range-chart.range-chart-appearance</div>
@@ -45,11 +45,11 @@
           {{ 'widgets.range-chart.show-range-thresholds' | translate }}
         </mat-slide-toggle>
         <tb-time-series-chart-threshold-settings
-            boxButton
-            hideYAxis
-            [widgetConfig]="widgetConfig?.config"
-            title="widgets.range-chart.range-thresholds-settings"
-            formControlName="rangeThreshold">
+          boxButton
+          hideYAxis
+          [widgetConfig]="widgetConfig?.config"
+          title="widgets.range-chart.range-thresholds-settings"
+          formControlName="rangeThreshold">
         </tb-time-series-chart-threshold-settings>
       </div>
       <div class="tb-form-row">
@@ -77,9 +77,11 @@
           </mat-slide-toggle>
           <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="stepType">
-              <mat-option *ngFor="let stepType of lineSeriesStepTypes" [value]="stepType">
-                {{ lineSeriesStepTypeTranslations.get(stepType) | translate }}
-              </mat-option>
+              @for (stepType of lineSeriesStepTypes; track stepType) {
+                <mat-option [value]="stepType">
+                  {{ lineSeriesStepTypeTranslations.get(stepType) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -92,9 +94,11 @@
           <div translate>widgets.time-series-chart.line-type</div>
           <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="lineType">
-              <mat-option *ngFor="let lineType of chartLineTypes" [value]="lineType">
-                {{ chartLineTypeTranslations.get(lineType) | translate }}
-              </mat-option>
+              @for (lineType of chartLineTypes; track lineType) {
+                <mat-option [value]="lineType">
+                  {{ chartLineTypeTranslations.get(lineType) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -121,9 +125,11 @@
           <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
             <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="pointLabelPosition">
-                <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
-                  {{ chartLabelPositionTranslations.get(position) | translate }}
-                </mat-option>
+                @for (position of chartLabelPositions; track position) {
+                  <mat-option [value]="position">
+                    {{ chartLabelPositionTranslations.get(position) | translate }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
             <tb-font-settings formControlName="pointLabelFont"
@@ -151,9 +157,11 @@
           <div translate>widgets.time-series-chart.series.point.point-shape</div>
           <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="pointShape">
-              <mat-option *ngFor="let shape of chartShapes" [value]="shape">
-                {{ chartShapeTranslations.get(shape) | translate }}
-              </mat-option>
+              @for (shape of chartShapes; track shape) {
+                <mat-option [value]="shape">
+                  {{ chartShapeTranslations.get(shape) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -168,29 +176,29 @@
     <div class="tb-form-panel">
       <div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.y-axis</div>
       <tb-time-series-chart-axis-settings
-          formControlName="yAxis"
-          [aliasController]="aliasController"
-          [dataKeyCallbacks]="callbacks"
-          [datasource]="datasource"
-          axisType="yAxis"
-          hideUnits
-          hideDecimals>
+        formControlName="yAxis"
+        [aliasController]="aliasController"
+        [dataKeyCallbacks]="callbacks"
+        [datasource]="datasource"
+        axisType="yAxis"
+        hideUnits
+        hideDecimals>
       </tb-time-series-chart-axis-settings>
     </div>
     <div class="tb-form-panel">
       <div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.x-axis</div>
       <tb-time-series-chart-axis-settings
-          formControlName="xAxis"
-          axisType="xAxis">
+        formControlName="xAxis"
+        axisType="xAxis">
       </tb-time-series-chart-axis-settings>
     </div>
     <tb-time-series-chart-thresholds-panel
-        formControlName="thresholds"
-        [aliasController]="aliasController"
-        [dataKeyCallbacks]="dataKeyCallbacks"
-        [datasource]="datasource"
-        [widgetConfig]="widgetConfig?.config"
-        hideYAxis>
+      formControlName="thresholds"
+      [aliasController]="aliasController"
+      [dataKeyCallbacks]="dataKeyCallbacks"
+      [datasource]="datasource"
+      [widgetConfig]="widgetConfig?.config"
+      hideYAxis>
     </tb-time-series-chart-thresholds-panel>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetSettingsForm.get('showLegend').value" [disabled]="!rangeChartWidgetSettingsForm.get('showLegend').value">
@@ -206,9 +214,11 @@
             <div>{{ 'legend.position' | translate }}</div>
             <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="legendPosition">
-                <mat-option *ngFor="let pos of legendPositions" [value]="pos">
-                  {{ legendPositionTranslationMap.get(pos) | translate }}
-                </mat-option>
+                @for (pos of legendPositions; track pos) {
+                  <mat-option [value]="pos">
+                    {{ legendPositionTranslationMap.get(pos) | translate }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
           </div>
@@ -269,7 +279,7 @@
             </mat-slide-toggle>
             <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
               <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
-                                     formControlName="tooltipDateFormat"></tb-date-format-select>
+              formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [initialPreviewStyle]="{ color: rangeChartWidgetSettingsForm.get('tooltipDateColor').value }"
                                 [previewText]="tooltipDatePreviewFn">
@@ -305,7 +315,7 @@
       </mat-expansion-panel>
     </div>
     <tb-chart-animation-settings
-        formControlName="animation">
+      formControlName="animation">
     </tb-chart-animation-settings>
     <div class="tb-form-panel">
       <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html
index fcc2faf05f..d8706aa2d4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html
@@ -34,67 +34,74 @@
       <div translate>widgets.time-series-chart.axis.y-axis</div>
       <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="yAxisId">
-          <mat-option *ngFor="let yAxis of yAxisIds" [value]="yAxis">
-            {{ yAxis }}
-          </mat-option>
+          @for (yAxis of yAxisIds; track yAxis) {
+            <mat-option [value]="yAxis">
+              {{ yAxis }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
   </div>
   <div class="tb-form-panel">
-    <div *ngIf="chartType === TimeSeriesChartType.default; else chartTypeTitle" class="flex flex-row items-center justify-between">
-      <div class="tb-form-panel-title" translate>widgets.time-series-chart.series.series-type</div>
-      <tb-toggle-select formControlName="type">
-        <tb-toggle-option *ngFor="let type of timeSeriesChartSeriesTypes" [value]="type">{{ timeSeriesChartSeriesTypeTranslations.get(type) | translate }}</tb-toggle-option>
-      </tb-toggle-select>
-    </div>
+    @if (chartType === TimeSeriesChartType.default) {
+      <div class="flex flex-row items-center justify-between">
+        <div class="tb-form-panel-title" translate>widgets.time-series-chart.series.series-type</div>
+        <tb-toggle-select formControlName="type">
+          @for (type of timeSeriesChartSeriesTypes; track type) {
+            <tb-toggle-option [value]="type">{{ timeSeriesChartSeriesTypeTranslations.get(type) | translate }}</tb-toggle-option>
+          }
+        </tb-toggle-select>
+      </div>
+    } @else {
+      <div class="tb-form-panel-title">{{ timeSeriesChartTypeTranslations.get(chartType) | translate }}</div>
+    }
     <tb-time-series-chart-line-settings [class.!hidden]="timeSeriesChartKeySettingsForm.get('type').value !== TimeSeriesChartSeriesType.line"
                                         [chartType]="chartType"
                                         formControlName="lineSettings">
     </tb-time-series-chart-line-settings>
     <tb-chart-bar-settings [class.!hidden]="timeSeriesChartKeySettingsForm.get('type').value !== TimeSeriesChartSeriesType.bar"
-                                     formControlName="barSettings">
+                           formControlName="barSettings">
     </tb-chart-bar-settings>
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.chart.tooltip-settings</div>
     <tb-js-func
-        formControlName="tooltipValueFormatter"
-        [globalVariables]="functionScopeVariables"
-        [functionArgs]="['value', 'latestData']"
-        functionTitle="{{ 'widgets.chart.tooltip-value-format-function' | translate }}"
-        helpId="widget/lib/flot/tooltip_value_format_fn">
+      formControlName="tooltipValueFormatter"
+      [globalVariables]="functionScopeVariables"
+      [functionArgs]="['value', 'latestData']"
+      functionTitle="{{ 'widgets.chart.tooltip-value-format-function' | translate }}"
+      helpId="widget/lib/flot/tooltip_value_format_fn">
     </tb-js-func>
   </div>
-  <div *ngIf="comparisonEnabled" class="tb-form-panel tb-slide-toggle" formGroupName="comparisonSettings">
-    <div class="tb-form-panel-title" translate>widgets.time-series-chart.comparison.settings</div>
-    <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartKeySettingsForm.get('comparisonSettings.showValuesForComparison').value"
-                         [disabled]="!timeSeriesChartKeySettingsForm.get('comparisonSettings.showValuesForComparison').value">
-      <mat-expansion-panel-header class="flex flex-row flex-wrap">
-        <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showValuesForComparison" (click)="$event.stopPropagation()">
-            {{ 'widgets.time-series-chart.comparison.show-values-for-comparison' | translate }}
-          </mat-slide-toggle>
-        </mat-panel-title>
-      </mat-expansion-panel-header>
-      <ng-template matExpansionPanelContent>
-        <div class="tb-form-row">
-          <div class="fixed-title-width" translate>widgets.time-series-chart.comparison.comparison-values-label</div>
-          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="comparisonValuesLabel" placeholder="{{ 'widgets.time-series-chart.comparison.comparison-values-label-auto' | translate }}">
-          </mat-form-field>
-        </div>
-        <div class="tb-form-row space-between">
-          <div>{{ 'widgets.time-series-chart.comparison.comparison-data-color' | translate }}</div>
-          <tb-color-input asBoxInput
-                          colorClearButton
-                          formControlName="color">
-          </tb-color-input>
-        </div>
-      </ng-template>
-    </mat-expansion-panel>
-  </div>
+  @if (comparisonEnabled) {
+    <div class="tb-form-panel tb-slide-toggle" formGroupName="comparisonSettings">
+      <div class="tb-form-panel-title" translate>widgets.time-series-chart.comparison.settings</div>
+      <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartKeySettingsForm.get('comparisonSettings.showValuesForComparison').value"
+                           [disabled]="!timeSeriesChartKeySettingsForm.get('comparisonSettings.showValuesForComparison').value">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
+          <mat-panel-title>
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showValuesForComparison" (click)="$event.stopPropagation()">
+              {{ 'widgets.time-series-chart.comparison.show-values-for-comparison' | translate }}
+            </mat-slide-toggle>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <ng-template matExpansionPanelContent>
+          <div class="tb-form-row">
+            <div class="fixed-title-width" translate>widgets.time-series-chart.comparison.comparison-values-label</div>
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+              <input matInput formControlName="comparisonValuesLabel" placeholder="{{ 'widgets.time-series-chart.comparison.comparison-values-label-auto' | translate }}">
+            </mat-form-field>
+          </div>
+          <div class="tb-form-row space-between">
+            <div>{{ 'widgets.time-series-chart.comparison.comparison-data-color' | translate }}</div>
+            <tb-color-input asBoxInput
+                            colorClearButton
+                            formControlName="color">
+            </tb-color-input>
+          </div>
+        </ng-template>
+      </mat-expansion-panel>
+    </div>
+  }
 </ng-container>
-<ng-template #chartTypeTitle>
-  <div class="tb-form-panel-title">{{ timeSeriesChartTypeTranslations.get(chartType) | translate }}</div>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html
index 9a562cec25..b607679be2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html
@@ -16,56 +16,124 @@
 
 -->
 <ng-container [formGroup]="lineSettingsFormGroup">
-  <div *ngIf="chartType !== TimeSeriesChartType.point" class="tb-form-panel stroked">
-    <div class="tb-form-panel-title" translate>widgets.time-series-chart.series.line.line</div>
-    <div *ngIf="chartType !== TimeSeriesChartType.state" class="tb-form-row">
-      <mat-slide-toggle class="mat-slide" formControlName="showLine">
-        {{ 'widgets.time-series-chart.series.line.show-line' | translate }}
-      </mat-slide-toggle>
+  @if (chartType !== TimeSeriesChartType.point) {
+    <div class="tb-form-panel stroked">
+      <div class="tb-form-panel-title" translate>widgets.time-series-chart.series.line.line</div>
+      @if (chartType !== TimeSeriesChartType.state) {
+        <div class="tb-form-row">
+          <mat-slide-toggle class="mat-slide" formControlName="showLine">
+            {{ 'widgets.time-series-chart.series.line.show-line' | translate }}
+          </mat-slide-toggle>
+        </div>
+      }
+      <div class="tb-form-row space-between column-xs">
+        <mat-slide-toggle class="mat-slide" formControlName="step">
+          {{ 'widgets.time-series-chart.series.line.step-line' | translate }}
+        </mat-slide-toggle>
+        <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="stepType">
+            @for (stepType of lineSeriesStepTypes; track stepType) {
+              <mat-option [value]="stepType">
+                {{ lineSeriesStepTypeTranslations.get(stepType) | translate }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+      @if (chartType !== TimeSeriesChartType.state) {
+        <div class="tb-form-row">
+          <mat-slide-toggle class="mat-slide" formControlName="smooth">
+            {{ 'widgets.time-series-chart.series.line.smooth-line' | translate }}
+          </mat-slide-toggle>
+        </div>
+      }
+      <div class="tb-form-row space-between column-xs">
+        <div translate>widgets.time-series-chart.line-type</div>
+        <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="lineType">
+            @for (lineType of chartLineTypes; track lineType) {
+              <mat-option [value]="lineType">
+                {{ chartLineTypeTranslations.get(lineType) | translate }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <div class="tb-form-row space-between column-xs">
+        <div translate>widgets.time-series-chart.line-width</div>
+        <mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
+          <input matInput type="number" formControlName="lineWidth" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
+        </mat-form-field>
+      </div>
     </div>
-    <div class="tb-form-row space-between column-xs">
-      <mat-slide-toggle class="mat-slide" formControlName="step">
-        {{ 'widgets.time-series-chart.series.line.step-line' | translate }}
+  }
+  @if (chartType !== TimeSeriesChartType.point) {
+    <div class="tb-form-panel stroked">
+      <div class="tb-form-panel-title" translate>widgets.time-series-chart.series.point.points</div>
+      <div class="tb-form-row">
+        <mat-slide-toggle class="mat-slide" formControlName="showPoints">
+          {{ 'widgets.time-series-chart.series.point.show-points' | translate }}
+        </mat-slide-toggle>
+      </div>
+      <ng-container *ngTemplateOutlet="pointSettings"></ng-container>
+    </div>
+  } @else {
+    <div class="tb-form-row space-between column-lt-md">
+      <mat-slide-toggle class="mat-slide" formControlName="showPointLabel">
+        <div tb-hint-tooltip-icon="{{'widgets.time-series-chart.series.point.point-label-hint' | translate}}">
+          {{ 'widgets.time-series-chart.series.point.point-label' | translate }}
+        </div>
       </mat-slide-toggle>
-      <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
-        <mat-select formControlName="stepType">
-          <mat-option *ngFor="let stepType of lineSeriesStepTypes" [value]="stepType">
-            {{ lineSeriesStepTypeTranslations.get(stepType) | translate }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
+      <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
+        <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="pointLabelPosition">
+            @for (position of chartLabelPositions; track position) {
+              <mat-option [value]="position">
+                {{ chartLabelPositionTranslations.get(position) | translate }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        <tb-font-settings formControlName="pointLabelFont"
+                          clearButton
+                          disabledLineHeight
+                          forceSizeUnit="px"
+                          [previewText]="pointLabelPreviewFn">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="pointLabelColor">
+        </tb-color-input>
+      </div>
     </div>
-    <div *ngIf="chartType !== TimeSeriesChartType.state" class="tb-form-row">
-      <mat-slide-toggle class="mat-slide" formControlName="smooth">
-        {{ 'widgets.time-series-chart.series.line.smooth-line' | translate }}
+    <div class="tb-form-row space-between">
+      <mat-slide-toggle class="mat-slide" formControlName="enablePointLabelBackground">
+        {{ 'widgets.time-series-chart.series.point.point-label-background' | translate }}
       </mat-slide-toggle>
+      <tb-color-input asBoxInput
+                      colorClearButton
+                      formControlName="pointLabelBackground">
+      </tb-color-input>
     </div>
     <div class="tb-form-row space-between column-xs">
-      <div translate>widgets.time-series-chart.line-type</div>
+      <div translate>widgets.time-series-chart.series.point.point-shape</div>
       <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
-        <mat-select formControlName="lineType">
-          <mat-option *ngFor="let lineType of chartLineTypes" [value]="lineType">
-            {{ chartLineTypeTranslations.get(lineType) | translate }}
-          </mat-option>
+        <mat-select formControlName="pointShape">
+          @for (shape of chartShapes; track shape) {
+            <mat-option [value]="shape">
+              {{ chartShapeTranslations.get(shape) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
     <div class="tb-form-row space-between column-xs">
-      <div translate>widgets.time-series-chart.line-width</div>
+      <div translate>widgets.time-series-chart.series.point.point-size</div>
       <mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="number" formControlName="lineWidth" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
+        <input matInput type="number" formControlName="pointSize" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
       </mat-form-field>
     </div>
-  </div>
-  <div *ngIf="chartType !== TimeSeriesChartType.point; else pointSettings" class="tb-form-panel stroked">
-    <div class="tb-form-panel-title" translate>widgets.time-series-chart.series.point.points</div>
-    <div class="tb-form-row">
-      <mat-slide-toggle class="mat-slide" formControlName="showPoints">
-        {{ 'widgets.time-series-chart.series.point.show-points' | translate }}
-      </mat-slide-toggle>
-    </div>
-    <ng-container *ngTemplateOutlet="pointSettings"></ng-container>
-  </div>
+  }
   <tb-chart-fill-settings
     formControlName="fillAreaSettings">
   </tb-chart-fill-settings>
@@ -80,9 +148,11 @@
     <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
       <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="pointLabelPosition">
-          <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
-            {{ chartLabelPositionTranslations.get(position) | translate }}
-          </mat-option>
+          @for (position of chartLabelPositions; track position) {
+            <mat-option [value]="position">
+              {{ chartLabelPositionTranslations.get(position) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <tb-font-settings formControlName="pointLabelFont"
@@ -110,9 +180,11 @@
     <div translate>widgets.time-series-chart.series.point.point-shape</div>
     <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="pointShape">
-        <mat-option *ngFor="let shape of chartShapes" [value]="shape">
-          {{ chartShapeTranslations.get(shape) | translate }}
-        </mat-option>
+        @for (shape of chartShapes; track shape) {
+          <mat-option [value]="shape">
+            {{ chartShapeTranslations.get(shape) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
index 36bf2aea89..b49d8ad902 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
@@ -56,10 +56,11 @@
       </div>
     </div>
   </div>
-  <tb-time-series-chart-states-panel
-      *ngIf="chartType === TimeSeriesChartType.state"
+  @if (chartType === TimeSeriesChartType.state) {
+    <tb-time-series-chart-states-panel
       formControlName="states">
-  </tb-time-series-chart-states-panel>
+    </tb-time-series-chart-states-panel>
+  }
   <tb-time-series-chart-y-axes-panel
     formControlName="yAxes"
     [aliasController]="aliasController"
@@ -70,13 +71,13 @@
     advanced>
   </tb-time-series-chart-y-axes-panel>
   <tb-time-series-chart-thresholds-panel
-      formControlName="thresholds"
-      [aliasController]="aliasController"
-      [dataKeyCallbacks]="dataKeyCallbacks"
-      [datasource]="datasource"
-      [widgetConfig]="widgetConfig?.config"
-      [yAxisIds]="yAxisIds"
-      [supportsUnitConversion]="widgetConfig.typeParameters.supportsUnitConversion">
+    formControlName="thresholds"
+    [aliasController]="aliasController"
+    [dataKeyCallbacks]="dataKeyCallbacks"
+    [datasource]="datasource"
+    [widgetConfig]="widgetConfig?.config"
+    [yAxisIds]="yAxisIds"
+    [supportsUnitConversion]="widgetConfig.typeParameters.supportsUnitConversion">
   </tb-time-series-chart-thresholds-panel>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.time-series-chart.chart-style</div>
@@ -86,7 +87,7 @@
       </mat-slide-toggle>
     </div>
     <tb-time-series-chart-grid-settings
-        formControlName="grid">
+      formControlName="grid">
     </tb-time-series-chart-grid-settings>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="stack">
@@ -98,15 +99,16 @@
     <div class="tb-form-panel">
       <div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.x-axis</div>
       <tb-time-series-chart-axis-settings
-          formControlName="xAxis"
-          advanced
-          axisType="xAxis">
+        formControlName="xAxis"
+        advanced
+        axisType="xAxis">
       </tb-time-series-chart-axis-settings>
     </div>
-    <tb-time-series-no-aggregation-bar-width-settings
-      *ngIf="chartType === TimeSeriesChartType.default || chartType === TimeSeriesChartType.bar"
-      formControlName="noAggregationBarWidthSettings">
-    </tb-time-series-no-aggregation-bar-width-settings>
+    @if (chartType === TimeSeriesChartType.default || chartType === TimeSeriesChartType.bar) {
+      <tb-time-series-no-aggregation-bar-width-settings
+        formControlName="noAggregationBarWidthSettings">
+      </tb-time-series-no-aggregation-bar-width-settings>
+    }
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetSettingsForm.get('showLegend').value"
                            [disabled]="!timeSeriesChartWidgetSettingsForm.get('showLegend').value">
@@ -178,9 +180,9 @@
             <div>{{ 'tooltip.trigger' | translate }}</div>
             <mat-chip-listbox class="center-stretch" formControlName="tooltipTrigger">
               <mat-chip-option [selectable]="timeSeriesChartWidgetSettingsForm.get('tooltipTrigger').value !== EChartsTooltipTrigger.point"
-                               [value]="EChartsTooltipTrigger.point">{{ 'tooltip.trigger-point' | translate }}</mat-chip-option>
+              [value]="EChartsTooltipTrigger.point">{{ 'tooltip.trigger-point' | translate }}</mat-chip-option>
               <mat-chip-option [selectable]="timeSeriesChartWidgetSettingsForm.get('tooltipTrigger').value !== EChartsTooltipTrigger.axis"
-                               [value]="EChartsTooltipTrigger.axis">{{ 'tooltip.trigger-axis' | translate }}</mat-chip-option>
+              [value]="EChartsTooltipTrigger.axis">{{ 'tooltip.trigger-axis' | translate }}</mat-chip-option>
             </mat-chip-listbox>
           </div>
           <div class="tb-form-row space-between">
@@ -210,11 +212,11 @@
             </div>
           </div>
           <tb-js-func
-              formControlName="tooltipValueFormatter"
-              [globalVariables]="functionScopeVariables"
-              [functionArgs]="['value', 'latestData']"
-              functionTitle="{{ 'widgets.chart.tooltip-value-format-function' | translate }}"
-              helpId="widget/lib/flot/tooltip_value_format_fn">
+            formControlName="tooltipValueFormatter"
+            [globalVariables]="functionScopeVariables"
+            [functionArgs]="['value', 'latestData']"
+            functionTitle="{{ 'widgets.chart.tooltip-value-format-function' | translate }}"
+            helpId="widget/lib/flot/tooltip_value_format_fn">
           </tb-js-func>
           <div class="tb-form-row column-xs">
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
@@ -222,7 +224,7 @@
             </mat-slide-toggle>
             <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
               <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
-                                     formControlName="tooltipDateFormat"></tb-date-format-select>
+              formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [initialPreviewStyle]="{ color: timeSeriesChartWidgetSettingsForm.get('tooltipDateColor').value }"
                                 [previewText]="tooltipDatePreviewFn">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html
index 229fb79a62..b6ddd18d6d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html
@@ -17,31 +17,36 @@
 -->
 <div class="tb-custom-action-pretty" tb-fullscreen [fullscreen]="fullscreen">
   <div class="tb-action-expand-button flex flex-row items-center justify-end" [class.tb-fullscreen-editor]="fullscreen">
-    <button *ngIf="!fullscreen"
-            class="lt-md:!hidden"
-            mat-icon-button
-            matTooltip="{{ 'widget.toggle-fullscreen' | translate }}"
-            matTooltipPosition="above"
-            (click)="fullscreen = true">
-      <mat-icon>fullscreen</mat-icon>
-    </button>
-    <button *ngIf="fullscreen"
-            mat-button
-            matTooltip="{{ 'widget.toggle-fullscreen' | translate }}"
-            matTooltipPosition="above"
-            (click)="fullscreen = false">
-      <mat-icon>fullscreen_exit</mat-icon>
-      <span translate>widget.toggle-fullscreen</span>
-    </button>
+    @if (!fullscreen) {
+      <button
+        class="lt-md:!hidden"
+        mat-icon-button
+        matTooltip="{{ 'widget.toggle-fullscreen' | translate }}"
+        matTooltipPosition="above"
+        (click)="fullscreen = true">
+        <mat-icon>fullscreen</mat-icon>
+      </button>
+    }
+    @if (fullscreen) {
+      <button
+        mat-button
+        matTooltip="{{ 'widget.toggle-fullscreen' | translate }}"
+        matTooltipPosition="above"
+        (click)="fullscreen = false">
+        <mat-icon>fullscreen_exit</mat-icon>
+        <span translate>widget.toggle-fullscreen</span>
+      </button>
+    }
   </div>
   <div class="tb-custom-action-editor" [class.tb-fullscreen-editor]="fullscreen">
-    <div *ngIf="!fullscreen; else fullscreenEditor">
-      <tb-custom-action-pretty-resources-tabs [hasCustomFunction]="true"
-                                              [helpId]="helpId"
-                                              [action]="action" (actionUpdated)="onActionUpdated($event ? true : false)">
-      </tb-custom-action-pretty-resources-tabs>
-    </div>
-    <ng-template #fullscreenEditor>
+    @if (!fullscreen) {
+      <div>
+        <tb-custom-action-pretty-resources-tabs [hasCustomFunction]="true"
+                                                [helpId]="helpId"
+                                                [action]="action" (actionUpdated)="onActionUpdated($event ? true : false)">
+        </tb-custom-action-pretty-resources-tabs>
+      </div>
+    } @else {
       <div class="tb-fullscreen-panel tb-layout-fill flex flex-row">
         <div #leftPanel class="tb-split tb-content left-panel">
           <tb-custom-action-pretty-resources-tabs [hasCustomFunction]="false"
@@ -65,6 +70,6 @@
           </tb-js-func>
         </div>
       </div>
-    </ng-template>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html
index 6d36ee7e24..683b97c588 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html
@@ -19,29 +19,31 @@
   <mat-tab label="{{ 'widget.resources' | translate }}" style="width: 100%; height: 100%;">
     <div class="tb-custom-action-editor-container" style="background-color: #fff;">
       <div class="mat-padding">
-        <div class="flex flex-1 flex-row items-center justify-start"
-             *ngFor="let resource of action.customResources; let i = index" style="padding-top: 10px;">
-          <tb-resource-autocomplete class="mat-block flex-1"
-                                    subscriptSizing="dynamic"
-                                    hideRequiredMarker required
-                                    [allowAutocomplete]="resource.isModule"
-                                    [(ngModel)]="resource.url"
-                                    (ngModelChange)="notifyActionUpdated()"
-                                    placeholder="{{ 'widget.resource-url' | translate }}">
-          </tb-resource-autocomplete>
-          <mat-checkbox [(ngModel)]="resource.isModule"
-                        (ngModelChange)="notifyActionUpdated()">
-            {{ 'widget.resource-is-extension' | translate }}
-          </mat-checkbox>
-          <button mat-icon-button color="primary"
-                  [disabled]="isLoading$ | async"
-                  type="button"
-                  (click)="removeResource(i)"
-                  matTooltip="{{'widget.remove-resource' | translate}}"
-                  matTooltipPosition="above">
-            <mat-icon>close</mat-icon>
-          </button>
-        </div>
+        @for (resource of action.customResources; track resource; let i = $index) {
+          <div class="flex flex-1 flex-row items-center justify-start"
+               style="padding-top: 10px;">
+            <tb-resource-autocomplete class="mat-block flex-1"
+                                      subscriptSizing="dynamic"
+                                      hideRequiredMarker required
+                                      [allowAutocomplete]="resource.isModule"
+                                      [(ngModel)]="resource.url"
+                                      (ngModelChange)="notifyActionUpdated()"
+                                      placeholder="{{ 'widget.resource-url' | translate }}">
+            </tb-resource-autocomplete>
+            <mat-checkbox [(ngModel)]="resource.isModule"
+                          (ngModelChange)="notifyActionUpdated()">
+              {{ 'widget.resource-is-extension' | translate }}
+            </mat-checkbox>
+            <button mat-icon-button color="primary"
+                    [disabled]="isLoading$ | async"
+                    type="button"
+                    (click)="removeResource(i)"
+                    matTooltip="{{'widget.remove-resource' | translate}}"
+                    matTooltipPosition="above">
+              <mat-icon>close</mat-icon>
+            </button>
+          </div>
+        }
         <button mat-button mat-raised-button color="primary"
                 style="margin-top: 18px;"
                 [disabled]="isLoading$ | async"
@@ -91,18 +93,20 @@
       <div #htmlInput class="html-panel"></div>
     </div>
   </mat-tab>
-  <mat-tab *ngIf="hasCustomFunction" label="{{ 'widget.js' | translate }}" style="width: 100%; height: 100%;">
-    <tb-js-func
-      [(ngModel)]="action.customFunction"
-      (ngModelChange)="notifyActionUpdated()"
-      withModules
-      [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel']"
-      [disableUndefinedCheck]="true"
-      [validationArgs]="[]"
-      [editorCompleter]="customPrettyActionEditorCompleter"
-      functionTitle="{{ 'widget-action.custom-pretty-function' | translate }}"
-      [helpId]="helpId"
-      [helpPopupStyle]="{width: '900px'}">
-    </tb-js-func>
-  </mat-tab>
+  @if (hasCustomFunction) {
+    <mat-tab label="{{ 'widget.js' | translate }}" style="width: 100%; height: 100%;">
+      <tb-js-func
+        [(ngModel)]="action.customFunction"
+        (ngModelChange)="notifyActionUpdated()"
+        withModules
+        [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel']"
+        [disableUndefinedCheck]="true"
+        [validationArgs]="[]"
+        [editorCompleter]="customPrettyActionEditorCompleter"
+        functionTitle="{{ 'widget-action.custom-pretty-function' | translate }}"
+        [helpId]="helpId"
+        [helpPopupStyle]="{width: '900px'}">
+      </tb-js-func>
+    </mat-tab>
+  }
 </mat-tab-group>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
index 0e009341ee..e04426ce1b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
@@ -22,40 +22,43 @@
       <div class="fixed-title-width" >{{ 'widgets.value-action.action' | translate }}</div>
       <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="action">
-          <mat-option *ngFor="let action of getValueActions" [value]="action">
-            {{ getValueActionTranslationsMap.get(action) | translate }}
-          </mat-option>
+          @for (action of getValueActions; track action) {
+            <mat-option [value]="action">
+              {{ getValueActionTranslationsMap.get(action) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
-    <ng-container [ngSwitch]="getValueSettingsFormGroup.get('action').value">
-      <ng-template [ngSwitchCase]="getValueAction.DO_NOTHING">
+    @switch (getValueSettingsFormGroup.get('action').value) {
+      @case (getValueAction.DO_NOTHING) {
         <div class="tb-form-row space-between">
           <div tb-hint-tooltip-icon="{{'widgets.value-action.init-value-hint' | translate}}" translate>widgets.value-action.value</div>
           <tb-value-input [valueType]="valueType"
                           [trueLabel]="trueLabel"
                           [falseLabel]="falseLabel"
-                          formControlName="defaultValue"></tb-value-input>
+          formControlName="defaultValue"></tb-value-input>
         </div>
-      </ng-template>
-      <ng-template [ngSwitchCase]="getValueAction.EXECUTE_RPC">
+      }
+      @case (getValueAction.EXECUTE_RPC) {
         <div class="tb-form-row" formGroupName="executeRpc">
           <div class="fixed-title-width" >{{ 'widgets.value-action.method' | translate }}*</div>
           <mat-form-field class="tb-suffix-absolute flex" appearance="outline" subscriptSizing="dynamic">
             <input matInput required formControlName="method" placeholder="{{ 'widget-config.set' | translate }}">
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="'widgets.value-action.method-name-required' | translate"
-                      *ngIf="getValueSettingsFormGroup.get('executeRpc').get('method').hasError('required')
-                              && getValueSettingsFormGroup.get('executeRpc').get('method').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
+            @if (getValueSettingsFormGroup.get('executeRpc').get('method').hasError('required')
+              && getValueSettingsFormGroup.get('executeRpc').get('method').touched) {
+              <mat-icon matSuffix
+                        matTooltipPosition="above"
+                        matTooltipClass="tb-error-tooltip"
+                        [matTooltip]="'widgets.value-action.method-name-required' | translate"
+                        class="tb-error">
+                warning
+              </mat-icon>
+            }
           </mat-form-field>
         </div>
-      </ng-template>
-      <ng-template [ngSwitchCase]="getValueAction.GET_ATTRIBUTE">
+      }
+      @case (getValueAction.GET_ATTRIBUTE) {
         <ng-container formGroupName="getAttribute">
           <div class="tb-form-row">
             <div class="fixed-title-width">{{ 'widgets.value-action.attribute-scope' | translate }}</div>
@@ -64,9 +67,11 @@
                 <mat-option [value]="null">
                   {{ 'attribute.scope-any' | translate }}
                 </mat-option>
-                <mat-option *ngFor="let scope of attributeScopes" [value]="scope">
-                  {{ telemetryTypeTranslationsMap.get(scope) | translate }}
-                </mat-option>
+                @for (scope of attributeScopes; track scope) {
+                  <mat-option [value]="scope">
+                    {{ telemetryTypeTranslationsMap.get(scope) | translate }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
           </div>
@@ -85,8 +90,8 @@
             </tb-device-key-autocomplete>
           </div>
         </ng-container>
-      </ng-template>
-      <ng-template [ngSwitchCase]="getValueAction.GET_TIME_SERIES">
+      }
+      @case (getValueAction.GET_TIME_SERIES) {
         <ng-container formGroupName="getTimeSeries">
           <div class="tb-form-row">
             <div class="fixed-title-width" >{{ 'widgets.value-action.time-series-key' | translate }}*</div>
@@ -102,15 +107,17 @@
             </tb-device-key-autocomplete>
           </div>
         </ng-container>
-      </ng-template>
-      <ng-template [ngSwitchCase]="getValueAction.GET_ALARM_STATUS">
+      }
+      @case (getValueAction.GET_ALARM_STATUS) {
         <ng-container formGroupName="getAlarmStatus">
           <div class="tb-form-row space-between column-xs">
             <div class="fixed-title-width" translate>alarm.alarm-severity</div>
             <mat-chip-listbox multiple formControlName="severityList">
-              <mat-chip-option *ngFor="let alarmSeverity of alarmSeverities" [value]="alarmSeverity">
-                {{ alarmSeverityTranslationMap.get(alarmSeverity) | translate }}
-              </mat-chip-option>
+              @for (alarmSeverity of alarmSeverities; track alarmSeverity) {
+                <mat-chip-option [value]="alarmSeverity">
+                  {{ alarmSeverityTranslationMap.get(alarmSeverity) | translate }}
+                </mat-chip-option>
+              }
             </mat-chip-listbox>
           </div>
           <div class="tb-form-row column-xs">
@@ -124,101 +131,111 @@
             </tb-entity-subtype-list>
           </div>
         </ng-container>
-      </ng-template>
-    </ng-container>
-    <div *ngIf="getValueSettingsFormGroup.get('action').value !== getValueAction.DO_NOTHING &&
-                getValueSettingsFormGroup.get('action').value !== getValueAction.GET_ALARM_STATUS"
-          class="tb-form-panel stroked" formGroupName="dataToValue">
-      <div class="tb-form-row no-padding no-border column-xs">
-        <div class="fixed-title-width" translate>widgets.value-action.action-result-converter</div>
-        <tb-toggle-select formControlName="type"
-                          class="flex-1"
-                          [class.invisible]="getValueSettingsFormGroup.get('action').value === getValueAction.GET_DASHBOARD_STATE_OBJECT">
-          <tb-toggle-option [value]="dataToValueType.NONE">{{ 'widgets.value-action.converter-none' | translate }}</tb-toggle-option>
-          <tb-toggle-option [value]="dataToValueType.FUNCTION">{{ 'widgets.value-action.converter-function' | translate }}</tb-toggle-option>
-        </tb-toggle-select>
-      </div>
-      <tb-js-func *ngIf="getValueSettingsFormGroup.get('dataToValue').get('type').value === dataToValueType.FUNCTION"
-                  formControlName="dataToValueFunction"
-                  withModules
-                  required
-                  [globalVariables]="functionScopeVariables"
-                  [functionArgs]="['data']"
-                  functionTitle="{{ 'widgets.value-action.parse-value-function' | translate }}"
-                  [helpId]="getParseValueFunctionHelpId()">
-      </tb-js-func>
-      <div *ngIf="valueType === ValueType.BOOLEAN" class="tb-form-row align-start no-gap column-xs">
-        <div class="fixed-title-width fixed-title-height">{{ 'widgets.value-action.state-when-result-is' | translate:{state: stateLabel} }}</div>
-        <tb-value-input
-          class="flex-1"
+      }
+    }
+    @if (getValueSettingsFormGroup.get('action').value !== getValueAction.DO_NOTHING &&
+      getValueSettingsFormGroup.get('action').value !== getValueAction.GET_ALARM_STATUS) {
+      <div
+        class="tb-form-panel stroked" formGroupName="dataToValue">
+        <div class="tb-form-row no-padding no-border column-xs">
+          <div class="fixed-title-width" translate>widgets.value-action.action-result-converter</div>
+          <tb-toggle-select formControlName="type"
+                            class="flex-1"
+                            [class.invisible]="getValueSettingsFormGroup.get('action').value === getValueAction.GET_DASHBOARD_STATE_OBJECT">
+            <tb-toggle-option [value]="dataToValueType.NONE">{{ 'widgets.value-action.converter-none' | translate }}</tb-toggle-option>
+            <tb-toggle-option [value]="dataToValueType.FUNCTION">{{ 'widgets.value-action.converter-function' | translate }}</tb-toggle-option>
+          </tb-toggle-select>
+        </div>
+        @if (getValueSettingsFormGroup.get('dataToValue').get('type').value === dataToValueType.FUNCTION) {
+          <tb-js-func
+            formControlName="dataToValueFunction"
+            withModules
+            required
+            [globalVariables]="functionScopeVariables"
+            [functionArgs]="['data']"
+            functionTitle="{{ 'widgets.value-action.parse-value-function' | translate }}"
+            [helpId]="getParseValueFunctionHelpId()">
+          </tb-js-func>
+        }
+        @if (valueType === ValueType.BOOLEAN) {
+          <div class="tb-form-row align-start no-gap column-xs">
+            <div class="fixed-title-width fixed-title-height">{{ 'widgets.value-action.state-when-result-is' | translate:{state: stateLabel} }}</div>
+            <tb-value-input
+              class="flex-1"
           [valueType]="(getValueSettingsFormGroup.get('action').value === getValueAction.GET_DASHBOARD_STATE &&
                         getValueSettingsFormGroup.get('dataToValue').get('type').value === dataToValueType.NONE) ? ValueType.STRING : null"
-          layout="column"
-          formControlName="compareToValue">
-        </tb-value-input>
+              layout="column"
+              formControlName="compareToValue">
+            </tb-value-input>
+          </div>
+        }
       </div>
-    </div>
-    <div *ngIf="getValueSettingsFormGroup.get('action').value === getValueAction.EXECUTE_RPC"
-         class="tb-form-panel no-border tb-slide-toggle" formGroupName="executeRpc">
-      <mat-expansion-panel class="tb-settings no-padding">
-        <mat-expansion-panel-header class="flex flex-row flex-wrap">
-          <mat-panel-title>
-          </mat-panel-title>
-          <mat-panel-description class="flex items-center justify-end" translate>
-            widget-config.advanced-settings
-          </mat-panel-description>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
-          <div class="tb-form-row space-between">
-            <div>{{ 'widgets.value-action.request-timeout-ms' | translate }}</div>
-            <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-              <input matInput formControlName="requestTimeout" type="number" required min="5000" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-              <mat-icon matSuffix
-                        matTooltipPosition="above"
-                        matTooltipClass="tb-error-tooltip"
+    }
+    @if (getValueSettingsFormGroup.get('action').value === getValueAction.EXECUTE_RPC) {
+      <div
+        class="tb-form-panel no-border tb-slide-toggle" formGroupName="executeRpc">
+        <mat-expansion-panel class="tb-settings no-padding">
+          <mat-expansion-panel-header class="flex flex-row flex-wrap">
+            <mat-panel-title>
+            </mat-panel-title>
+            <mat-panel-description class="flex items-center justify-end" translate>
+              widget-config.advanced-settings
+            </mat-panel-description>
+          </mat-expansion-panel-header>
+          <ng-template matExpansionPanelContent>
+            <div class="tb-form-row space-between">
+              <div>{{ 'widgets.value-action.request-timeout-ms' | translate }}</div>
+              <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+                <input matInput formControlName="requestTimeout" type="number" required min="5000" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+                @if (getValueSettingsFormGroup.get('executeRpc').get('requestTimeout').touched &&
+                  getValueSettingsFormGroup.get('executeRpc').get('requestTimeout').invalid) {
+                  <mat-icon matSuffix
+                            matTooltipPosition="above"
+                            matTooltipClass="tb-error-tooltip"
                         [matTooltip]="(getValueSettingsFormGroup.get('executeRpc').get('requestTimeout').hasError('required')
                                         ? 'widgets.value-action.request-timeout-required' : 'widgets.value-action.min-request-timeout-error') | translate"
-                        *ngIf="getValueSettingsFormGroup.get('executeRpc').get('requestTimeout').touched &&
-                               getValueSettingsFormGroup.get('executeRpc').get('requestTimeout').invalid"
-                        class="tb-error">
-                warning
-              </mat-icon>
-            </mat-form-field>
-          </div>
-          <div class="tb-form-panel stroked tb-slide-toggle">
-            <mat-expansion-panel class="tb-settings"
-                                 [expanded]="getValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value"
-                                 [disabled]="!getValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value">
-              <mat-expansion-panel-header class="flex flex-row flex-wrap">
-                <mat-panel-title>
-                  <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="requestPersistent" (click)="$event.stopPropagation()">
-                    {{ 'widgets.value-action.request-persistent' | translate }}
-                  </mat-slide-toggle>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <ng-template matExpansionPanelContent>
-                <div class="tb-form-row space-between">
-                  <div tb-hint-tooltip-icon="{{'widgets.value-action.persistent-polling-interval-hint' | translate}}">{{ 'widgets.value-action.persistent-polling-interval' | translate }}</div>
-                  <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-                    <input matInput formControlName="persistentPollingInterval" type="number" required min="1000" placeholder="{{ 'widget-config.set' | translate }}">
-                    <mat-icon matSuffix
-                              matTooltipPosition="above"
-                              matTooltipClass="tb-error-tooltip"
+                    class="tb-error">
+                    warning
+                  </mat-icon>
+                }
+              </mat-form-field>
+            </div>
+            <div class="tb-form-panel stroked tb-slide-toggle">
+              <mat-expansion-panel class="tb-settings"
+                                   [expanded]="getValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value"
+                                   [disabled]="!getValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value">
+                <mat-expansion-panel-header class="flex flex-row flex-wrap">
+                  <mat-panel-title>
+                    <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="requestPersistent" (click)="$event.stopPropagation()">
+                      {{ 'widgets.value-action.request-persistent' | translate }}
+                    </mat-slide-toggle>
+                  </mat-panel-title>
+                </mat-expansion-panel-header>
+                <ng-template matExpansionPanelContent>
+                  <div class="tb-form-row space-between">
+                    <div tb-hint-tooltip-icon="{{'widgets.value-action.persistent-polling-interval-hint' | translate}}">{{ 'widgets.value-action.persistent-polling-interval' | translate }}</div>
+                    <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+                      <input matInput formControlName="persistentPollingInterval" type="number" required min="1000" placeholder="{{ 'widget-config.set' | translate }}">
+                      @if (getValueSettingsFormGroup.get('executeRpc').get('persistentPollingInterval').touched &&
+                        getValueSettingsFormGroup.get('executeRpc').get('persistentPollingInterval').invalid) {
+                        <mat-icon matSuffix
+                                  matTooltipPosition="above"
+                                  matTooltipClass="tb-error-tooltip"
                               [matTooltip]="(getValueSettingsFormGroup.get('executeRpc').get('persistentPollingInterval').hasError('required')
                                           ? 'widgets.value-action.persistent-polling-interval-required' : 'widgets.value-action.min-persistent-polling-interval-error') | translate"
-                              *ngIf="getValueSettingsFormGroup.get('executeRpc').get('persistentPollingInterval').touched &&
-                                 getValueSettingsFormGroup.get('executeRpc').get('persistentPollingInterval').invalid"
-                              class="tb-error">
-                      warning
-                    </mat-icon>
-                  </mat-form-field>
-                </div>
-              </ng-template>
-            </mat-expansion-panel>
-          </div>
-        </ng-template>
-      </mat-expansion-panel>
-    </div>
+                          class="tb-error">
+                          warning
+                        </mat-icon>
+                      }
+                    </mat-form-field>
+                  </div>
+                </ng-template>
+              </mat-expansion-panel>
+            </div>
+          </ng-template>
+        </mat-expansion-panel>
+      </div>
+    }
   </div>
   <div class="tb-action-settings-panel-buttons">
     <button mat-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html
index cca04a69b1..026eef2bf4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html
@@ -20,19 +20,22 @@
     <div class="fixed-title-width">{{ 'widget-action.mobile.action-type' | translate }}*</div>
     <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select required formControlName="type" placeholder="{{ 'widget-action.mobile.select-action-type' | translate }}">
-        <mat-option *ngFor="let actionType of mobileActionTypes" [value]="actionType">
-          {{ mobileActionTypeTranslations.get(mobileActionType[actionType]) | translate }}
-        </mat-option>
+        @for (actionType of mobileActionTypes; track actionType) {
+          <mat-option [value]="actionType">
+            {{ mobileActionTypeTranslations.get(mobileActionType[actionType]) | translate }}
+          </mat-option>
+        }
       </mat-select>
-      <mat-icon matSuffix
-                matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
-                [matTooltip]="'widget-action.mobile.action-type-required' | translate"
-                *ngIf="mobileActionFormGroup.get('type').hasError('required')
-                       && mobileActionFormGroup.get('type').touched"
-                class="tb-error">
-        warning
-      </mat-icon>
+      @if (mobileActionFormGroup.get('type').hasError('required')
+        && mobileActionFormGroup.get('type').touched) {
+        <mat-icon matSuffix
+                  matTooltipPosition="above"
+                  matTooltipClass="tb-error-tooltip"
+                  [matTooltip]="'widget-action.mobile.action-type-required' | translate"
+                  class="tb-error">
+          warning
+        </mat-icon>
+      }
     </mat-form-field>
   </div>
   <ng-container [formGroup]="mobileActionTypeFormGroup">
@@ -50,9 +53,11 @@
         <div class="fixed-title-width">{{ 'widget-action.mobile.provision-type' | translate }}*</div>
         <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="provisionType">
-            <mat-option *ngFor="let type of provisionTypes" [value]="type">
-              {{ provisionTypeTranslationMap.get(type) | translate }}
-            </mat-option>
+            @for (type of provisionTypes; track type) {
+              <mat-option [value]="type">
+                {{  provisionTypeTranslationMap.get(type) | translate }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.ts
index b836fe2ade..3e6a55ead6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.ts
@@ -76,7 +76,7 @@ export class MobileActionEditorComponent implements ControlValueAccessor, OnInit
   actionConfig: ActionConfig[];
   commonActionConfig: ActionConfig[];
 
-  provisionTypes: string[] = Object.keys(ProvisionType);
+  provisionTypes = Object.values(ProvisionType);
   provisionTypeTranslationMap = provisionTypeTranslationMap;
 
   private requiredValue: boolean;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
index 001d2817ab..3b30491f8c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
@@ -22,39 +22,44 @@
       <div class="fixed-title-width" >{{ 'widgets.value-action.action' | translate }}</div>
       <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="action">
-          <mat-option *ngFor="let action of setValueActions" [value]="action">
-            {{ setValueActionTranslationsMap.get(action) | translate }}
-          </mat-option>
+          @for (action of setValueActions; track action) {
+            <mat-option [value]="action">
+              {{ setValueActionTranslationsMap.get(action) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
-    <ng-container [ngSwitch]="setValueSettingsFormGroup.get('action').value">
-      <ng-template [ngSwitchCase]="setValueAction.EXECUTE_RPC">
+    @switch (setValueSettingsFormGroup.get('action').value) {
+      @case (setValueAction.EXECUTE_RPC) {
         <div class="tb-form-row" formGroupName="executeRpc">
           <div class="fixed-title-width" >{{ 'widgets.value-action.method' | translate }}*</div>
           <mat-form-field class="tb-suffix-absolute flex" appearance="outline" subscriptSizing="dynamic">
             <input matInput required formControlName="method" placeholder="{{ 'widget-config.set' | translate }}">
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="'widgets.value-action.method-name-required' | translate"
-                      *ngIf="setValueSettingsFormGroup.get('executeRpc').get('method').hasError('required')
-                              && setValueSettingsFormGroup.get('executeRpc').get('method').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
+            @if (setValueSettingsFormGroup.get('executeRpc').get('method').hasError('required')
+              && setValueSettingsFormGroup.get('executeRpc').get('method').touched) {
+              <mat-icon matSuffix
+                        matTooltipPosition="above"
+                        matTooltipClass="tb-error-tooltip"
+                        [matTooltip]="'widgets.value-action.method-name-required' | translate"
+                        class="tb-error">
+                warning
+              </mat-icon>
+            }
           </mat-form-field>
         </div>
-      </ng-template>
-      <ng-template [ngSwitchCase]="setValueAction.SET_ATTRIBUTE">
+      }
+      @case (setValueAction.SET_ATTRIBUTE) {
         <ng-container formGroupName="setAttribute">
           <div class="tb-form-row">
             <div class="fixed-title-width">{{ 'widgets.value-action.attribute-scope' | translate }}</div>
             <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="scope">
-                <mat-option *ngFor="let scope of attributeScopes" [value]="scope">
-                  {{ telemetryTypeTranslationsMap.get(scope) | translate }}
-                </mat-option>
+                @for (scope of attributeScopes; track scope) {
+                  <mat-option [value]="scope">
+                    {{ telemetryTypeTranslationsMap.get(scope) | translate }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
           </div>
@@ -73,8 +78,8 @@
             </tb-device-key-autocomplete>
           </div>
         </ng-container>
-      </ng-template>
-      <ng-template [ngSwitchCase]="setValueAction.ADD_TIME_SERIES">
+      }
+      @case (setValueAction.ADD_TIME_SERIES) {
         <ng-container formGroupName="putTimeSeries">
           <div class="tb-form-row">
             <div class="fixed-title-width" >{{ 'widgets.value-action.time-series-key' | translate }}*</div>
@@ -90,99 +95,113 @@
             </tb-device-key-autocomplete>
           </div>
         </ng-container>
-      </ng-template>
-    </ng-container>
+      }
+    }
     <div class="tb-form-panel stroked" formGroupName="valueToData">
       <div class="tb-form-row no-padding no-border column-xs">
         <div class="fixed-title-width">{{ (setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC ?
-          'widgets.value-action.parameters' : 'widgets.value-action.value') | translate }}</div>
+        'widgets.value-action.parameters' : 'widgets.value-action.value') | translate }}</div>
         <tb-toggle-select class="flex-1" formControlName="type">
-          <tb-toggle-option *ngIf="valueType !== ValueType.BOOLEAN" [value]="valueToDataType.VALUE">{{ 'widgets.value-action.converter-value' | translate }}</tb-toggle-option>
-          <tb-toggle-option *ngIf="valueType === ValueType.BOOLEAN" [value]="valueToDataType.CONSTANT">{{ 'widgets.value-action.converter-constant' | translate }}</tb-toggle-option>
+          @if (valueType !== ValueType.BOOLEAN) {
+            <tb-toggle-option [value]="valueToDataType.VALUE">{{ 'widgets.value-action.converter-value' | translate }}</tb-toggle-option>
+          }
+          @if (valueType === ValueType.BOOLEAN) {
+            <tb-toggle-option [value]="valueToDataType.CONSTANT">{{ 'widgets.value-action.converter-constant' | translate }}</tb-toggle-option>
+          }
           <tb-toggle-option [value]="valueToDataType.FUNCTION">{{ 'widgets.value-action.converter-function' | translate }}</tb-toggle-option>
-          <tb-toggle-option *ngIf="setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC"
-                              [value]="valueToDataType.NONE">{{ 'widgets.value-action.converter-none' | translate }}</tb-toggle-option>
+          @if (setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC) {
+            <tb-toggle-option
+            [value]="valueToDataType.NONE">{{ 'widgets.value-action.converter-none' | translate }}</tb-toggle-option>
+          }
         </tb-toggle-select>
       </div>
-      <tb-value-input *ngIf="setValueSettingsFormGroup.get('valueToData').get('type').value === valueToDataType.CONSTANT"
-                      class="flex-1"
+      @if (setValueSettingsFormGroup.get('valueToData').get('type').value === valueToDataType.CONSTANT) {
+        <tb-value-input
+          class="flex-1"
                       [layout]="{
                               layout: 'row',
                               breakpoints: {xs: 'column'}
                           }"
-                      formControlName="constantValue">
-      </tb-value-input>
-      <tb-js-func *ngIf="setValueSettingsFormGroup.get('valueToData').get('type').value === valueToDataType.FUNCTION"
-                  formControlName="valueToDataFunction"
-                  withModules
-                  required
-                  [globalVariables]="functionScopeVariables"
-                  [functionArgs]="['value']"
-                  functionTitle="{{ 'widgets.value-action.convert-value-function' | translate }}"
-                  helpId="widget/lib/rpc/convert_value_fn">
-      </tb-js-func>
+          formControlName="constantValue">
+        </tb-value-input>
+      }
+      @if (setValueSettingsFormGroup.get('valueToData').get('type').value === valueToDataType.FUNCTION) {
+        <tb-js-func
+          formControlName="valueToDataFunction"
+          withModules
+          required
+          [globalVariables]="functionScopeVariables"
+          [functionArgs]="['value']"
+          functionTitle="{{ 'widgets.value-action.convert-value-function' | translate }}"
+          helpId="widget/lib/rpc/convert_value_fn">
+        </tb-js-func>
+      }
     </div>
-    <div *ngIf="setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC"
-         class="tb-form-panel no-border tb-slide-toggle" formGroupName="executeRpc">
-      <mat-expansion-panel class="tb-settings no-padding">
-        <mat-expansion-panel-header class="flex flex-row flex-wrap">
-          <mat-panel-title>
-          </mat-panel-title>
-          <mat-panel-description class="flex items-center justify-end" translate>
-            widget-config.advanced-settings
-          </mat-panel-description>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
-          <div class="tb-form-row space-between">
-            <div>{{ 'widgets.value-action.request-timeout-ms' | translate }}</div>
-            <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-              <input matInput formControlName="requestTimeout" type="number" required min="5000" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-              <mat-icon matSuffix
-                        matTooltipPosition="above"
-                        matTooltipClass="tb-error-tooltip"
+    @if (setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC) {
+      <div
+        class="tb-form-panel no-border tb-slide-toggle" formGroupName="executeRpc">
+        <mat-expansion-panel class="tb-settings no-padding">
+          <mat-expansion-panel-header class="flex flex-row flex-wrap">
+            <mat-panel-title>
+            </mat-panel-title>
+            <mat-panel-description class="flex items-center justify-end" translate>
+              widget-config.advanced-settings
+            </mat-panel-description>
+          </mat-expansion-panel-header>
+          <ng-template matExpansionPanelContent>
+            <div class="tb-form-row space-between">
+              <div>{{ 'widgets.value-action.request-timeout-ms' | translate }}</div>
+              <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+                <input matInput formControlName="requestTimeout" type="number" required min="5000" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+                @if (setValueSettingsFormGroup.get('executeRpc').get('requestTimeout').touched &&
+                  setValueSettingsFormGroup.get('executeRpc').get('requestTimeout').invalid) {
+                  <mat-icon matSuffix
+                            matTooltipPosition="above"
+                            matTooltipClass="tb-error-tooltip"
                         [matTooltip]="(setValueSettingsFormGroup.get('executeRpc').get('requestTimeout').hasError('required')
                                         ? 'widgets.value-action.request-timeout-required' : 'widgets.value-action.min-request-timeout-error') | translate"
-                        *ngIf="setValueSettingsFormGroup.get('executeRpc').get('requestTimeout').touched &&
-                               setValueSettingsFormGroup.get('executeRpc').get('requestTimeout').invalid"
-                        class="tb-error">
-                warning
-              </mat-icon>
-            </mat-form-field>
-          </div>
-          <div class="tb-form-panel stroked tb-slide-toggle">
-            <mat-expansion-panel class="tb-settings"
-                                 [expanded]="setValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value"
-                                 [disabled]="!setValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value">
-              <mat-expansion-panel-header class="flex flex-row flex-wrap">
-                <mat-panel-title>
-                  <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="requestPersistent" (click)="$event.stopPropagation()">
-                    {{ 'widgets.value-action.request-persistent' | translate }}
-                  </mat-slide-toggle>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <ng-template matExpansionPanelContent>
-                <div class="tb-form-row space-between">
-                  <div tb-hint-tooltip-icon="{{'widgets.value-action.persistent-polling-interval-hint' | translate}}">{{ 'widgets.value-action.persistent-polling-interval' | translate }}</div>
-                  <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-                    <input matInput formControlName="persistentPollingInterval" type="number" required min="1000" placeholder="{{ 'widget-config.set' | translate }}">
-                    <mat-icon matSuffix
-                              matTooltipPosition="above"
-                              matTooltipClass="tb-error-tooltip"
+                    class="tb-error">
+                    warning
+                  </mat-icon>
+                }
+              </mat-form-field>
+            </div>
+            <div class="tb-form-panel stroked tb-slide-toggle">
+              <mat-expansion-panel class="tb-settings"
+                                   [expanded]="setValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value"
+                                   [disabled]="!setValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value">
+                <mat-expansion-panel-header class="flex flex-row flex-wrap">
+                  <mat-panel-title>
+                    <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="requestPersistent" (click)="$event.stopPropagation()">
+                      {{ 'widgets.value-action.request-persistent' | translate }}
+                    </mat-slide-toggle>
+                  </mat-panel-title>
+                </mat-expansion-panel-header>
+                <ng-template matExpansionPanelContent>
+                  <div class="tb-form-row space-between">
+                    <div tb-hint-tooltip-icon="{{'widgets.value-action.persistent-polling-interval-hint' | translate}}">{{ 'widgets.value-action.persistent-polling-interval' | translate }}</div>
+                    <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+                      <input matInput formControlName="persistentPollingInterval" type="number" required min="1000" placeholder="{{ 'widget-config.set' | translate }}">
+                      @if (setValueSettingsFormGroup.get('executeRpc').get('persistentPollingInterval').touched &&
+                        setValueSettingsFormGroup.get('executeRpc').get('persistentPollingInterval').invalid) {
+                        <mat-icon matSuffix
+                                  matTooltipPosition="above"
+                                  matTooltipClass="tb-error-tooltip"
                               [matTooltip]="(setValueSettingsFormGroup.get('executeRpc').get('persistentPollingInterval').hasError('required')
                                             ? 'widgets.value-action.persistent-polling-interval-required' : 'widgets.value-action.min-persistent-polling-interval-error') | translate"
-                              *ngIf="setValueSettingsFormGroup.get('executeRpc').get('persistentPollingInterval').touched &&
-                                     setValueSettingsFormGroup.get('executeRpc').get('persistentPollingInterval').invalid"
-                              class="tb-error">
-                      warning
-                    </mat-icon>
-                  </mat-form-field>
-                </div>
-              </ng-template>
-            </mat-expansion-panel>
-          </div>
-        </ng-template>
-      </mat-expansion-panel>
-    </div>
+                          class="tb-error">
+                          warning
+                        </mat-icon>
+                      }
+                    </mat-form-field>
+                  </div>
+                </ng-template>
+              </mat-expansion-panel>
+            </div>
+          </ng-template>
+        </mat-expansion-panel>
+      </div>
+    }
   </div>
   <div class="tb-action-settings-panel-buttons">
     <button mat-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
index 06a7caa0f8..6b487eb616 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
@@ -16,238 +16,264 @@
 
 -->
 <div class="tb-form-panel no-padding no-border" [formGroup]="widgetActionFormGroup">
-  <div *ngIf="withName" class="tb-form-row">
-    <div class="fixed-title-width">{{'widget-config.action-name' | translate}}*</div>
-    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-      <input required matInput formControlName="name" placeholder="{{ 'widget-config.set' | translate }}">
-      <mat-icon matSuffix
-                matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
+  @if (withName) {
+    <div class="tb-form-row">
+      <div class="fixed-title-width">{{'widget-config.action-name' | translate}}*</div>
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+        <input required matInput formControlName="name" placeholder="{{ 'widget-config.set' | translate }}">
+        @if (widgetActionFormGroup.get('name').invalid
+          && (widgetActionFormGroup.get('name').touched || widgetActionFormGroup.get('name').hasError('actionNameNotUnique'))) {
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
                 [matTooltip]="(widgetActionFormGroup.get('name').hasError('required')
                                      ? 'widget-config.action-name-required'
                                      : 'widget-config.action-name-not-unique') | translate"
-                *ngIf="widgetActionFormGroup.get('name').invalid
-                       && (widgetActionFormGroup.get('name').touched || widgetActionFormGroup.get('name').hasError('actionNameNotUnique'))"
-                class="tb-error">
-        warning
-      </mat-icon>
-    </mat-form-field>
-  </div>
+            class="tb-error">
+            warning
+          </mat-icon>
+        }
+      </mat-form-field>
+    </div>
+  }
   <div class="tb-form-row">
     <div translate>widget-config.action</div>
     <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select required formControlName="type" placeholder="{{ 'widget-config.set' | translate }}">
-        <mat-option *ngFor="let actionType of actionTypes()" [value]="actionType">
-          {{ widgetActionTypeTranslations.get(widgetActionType[actionType]) | translate }}
-        </mat-option>
+        @for (actionType of actionTypes(); track actionType) {
+          <mat-option [value]="actionType">
+            {{ widgetActionTypeTranslations.get(widgetActionType[actionType]) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
   </div>
-  <ng-container [formGroup]="actionTypeFormGroup" [ngSwitch]="widgetActionFormGroup.get('type').value">
-    <ng-template [ngSwitchCase]="widgetActionType.openDashboard">
-      <div class="tb-form-row">
-        <div class="fixed-title-width">{{ 'widget-action.target-dashboard' | translate }}*</div>
-        <tb-dashboard-autocomplete class="flex-1"
-            formControlName="targetDashboardId"
-            required
-            requiredText="widget-action.target-dashboard-required"
-            placeholder="{{ 'widget-action.select-target-dashboard' | translate }}"
-            inlineField
-            [selectFirstDashboard]="true"
-        ></tb-dashboard-autocomplete>
-      </div>
-    </ng-template>
-    <ng-template [ngSwitchCase]="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState ||
-                                     widgetActionFormGroup.get('type').value === widgetActionType.updateDashboardState ||
-                                     widgetActionFormGroup.get('type').value === widgetActionType.openDashboard ?
-                                     widgetActionFormGroup.get('type').value : ''">
-      <div class="tb-form-row">
-        <div class="fixed-title-width">
-          <span>{{ 'widget-action.target-dashboard-state' | translate }}</span>
-          <span *ngIf="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState">*</span>
+  <ng-container [formGroup]="actionTypeFormGroup">
+    @switch (widgetActionFormGroup.get('type').value) {
+      @case (widgetActionType.openDashboard) {
+        <div class="tb-form-row">
+          <div class="fixed-title-width">{{ 'widget-action.target-dashboard' | translate }}*</div>
+          <tb-dashboard-autocomplete class="flex-1"
+                                     formControlName="targetDashboardId"
+                                     required
+                                     requiredText="widget-action.target-dashboard-required"
+                                     placeholder="{{ 'widget-action.select-target-dashboard' | translate }}"
+                                     inlineField
+                                     [selectFirstDashboard]="true"
+          ></tb-dashboard-autocomplete>
         </div>
-        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"
-                        [class.tb-suffix-absolute]="!actionTypeFormGroup.get('targetDashboardStateId').value">
-          <input matInput type="text" placeholder="{{ 'widget-action.target-dashboard-state' | translate }}"
-                 #dashboardStateInput
-                 formControlName="targetDashboardStateId"
-                 [required]="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState"
-                 (focusin)="onDashboardStateInputFocus()"
-                 [matAutocomplete]="targetDashboardStateAutocomplete">
-          <button *ngIf="actionTypeFormGroup.get('targetDashboardStateId').value"
-                  type="button"
-                  matSuffix mat-icon-button aria-label="Clear"
-                  (click)="clearTargetDashboardState()">
-            <mat-icon class="material-icons">close</mat-icon>
-          </button>
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
-                    [matTooltip]="'widget-action.target-dashboard-state-required' | translate"
-                    *ngIf="actionTypeFormGroup.get('targetDashboardStateId').hasError('required')
-                            && actionTypeFormGroup.get('targetDashboardStateId').touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
-          <mat-autocomplete
-              class="tb-autocomplete"
-              #targetDashboardStateAutocomplete="matAutocomplete">
-            <mat-option *ngFor="let state of filteredDashboardStates | async" [value]="state">
-              <span [innerHTML]="state | highlight:targetDashboardStateSearchText"></span>
-            </mat-option>
-          </mat-autocomplete>
-        </mat-form-field>
-      </div>
-    </ng-template>
-    <ng-template [ngSwitchCase]="widgetActionType.openURL">
-      <div class="tb-form-row">
-        <div class="tb-required">{{ 'widget-action.URL' | translate }}</div>
-        <mat-form-field class="flex-1" style="margin-left: 9px" appearance="outline" subscriptSizing="dynamic">
-          <input matInput placeholder="{{ 'widget-config.set' | translate }}" formControlName="url">
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
-                    [matTooltip]="'widget-action.url-required' | translate"
-                    *ngIf="actionTypeFormGroup.get('url').invalid && actionTypeFormGroup.get('url').touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
-        </mat-form-field>
-      </div>
-    </ng-template>
-    <ng-template [ngSwitchCase]="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState ||
-                                 widgetActionFormGroup.get('type').value === widgetActionType.updateDashboardState ?
-                                 widgetActionFormGroup.get('type').value : ''">
-      <div class="tb-form-row">
-        <mat-slide-toggle class="mat-slide" formControlName="openRightLayout">
-          {{ 'widget-action.open-right-layout' | translate }}
-        </mat-slide-toggle>
-      </div>
-    </ng-template>
-    <ng-template [ngSwitchCase]="widgetActionFormGroup.get('type').value === widgetActionType.openDashboard ||
-                                 widgetActionFormGroup.get('type').value === widgetActionType.openURL ?
-                                 widgetActionFormGroup.get('type').value : ''">
-      <div class="tb-form-row">
-        <mat-slide-toggle class="mat-slide" formControlName="openNewBrowserTab">
-          {{ 'widget-action.open-new-browser-tab' | translate }}
-        </mat-slide-toggle>
-      </div>
-    </ng-template>
-    <ng-template [ngSwitchCase]="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState ||
-                                 widgetActionFormGroup.get('type').value === widgetActionType.updateDashboardState ||
-                                 widgetActionFormGroup.get('type').value === widgetActionType.openDashboard ?
-                                 widgetActionFormGroup.get('type').value : ''">
-      <div class="tb-form-row" *ngIf="widgetType !== WidgetType.static">
-        <mat-slide-toggle class="mat-slide" formControlName="setEntityId">
-          {{ 'widget-action.set-entity-from-widget' | translate }}
-        </mat-slide-toggle>
-      </div>
-      <div class="tb-form-row" *ngIf="actionTypeFormGroup.get('setEntityId').value">
-        <div class="fixed-title-width">{{ 'alias.state-entity-parameter-name' | translate }}</div>
-        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-          <input matInput
-                 placeholder="{{ 'alias.default-entity-parameter-name' | translate }}"
-                 formControlName="stateEntityParamName">
-        </mat-form-field>
-      </div>
-    </ng-template>
-    <ng-template [ngSwitchCase]="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState ?
-                                 widgetActionFormGroup.get('type').value : ''">
-      <div class="tb-form-row">
-        <div class="fixed-title-width">{{ 'widget-action.state-display-type' | translate }}</div>
-        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-          <mat-select formControlName="stateDisplayType">
-            <mat-option *ngFor="let displayType of allStateDisplayTypes" [value]="displayType">
-              {{ stateDisplayTypeName(displayType) }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <ng-container [formGroup]="stateDisplayTypeFormGroup" [ngSwitch]="actionTypeFormGroup.get('stateDisplayType').value">
-        <ng-template [ngSwitchCase]="'separateDialog'">
-          <div class="tb-form-row">
-            <div class="fixed-title-width">{{ 'widget-action.dialog-title' | translate }}</div>
-            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-              <input matInput placeholder="{{ 'widget-config.set' | translate }}" formControlName="dialogTitle">
-            </mat-form-field>
-          </div>
-          <div class="tb-form-row">
-            <mat-slide-toggle class="mat-slide" formControlName="dialogHideDashboardToolbar">
-              {{ 'widget-action.dialog-hide-dashboard-toolbar' | translate }}
-            </mat-slide-toggle>
+      }
+      @case (widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState ||
+        widgetActionFormGroup.get('type').value === widgetActionType.updateDashboardState ||
+        widgetActionFormGroup.get('type').value === widgetActionType.openDashboard ?
+        widgetActionFormGroup.get('type').value : '') {
+        <div class="tb-form-row">
+          <div class="fixed-title-width">
+            <span>{{ 'widget-action.target-dashboard-state' | translate }}</span>
+            @if (widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState) {
+              <span>*</span>
+            }
           </div>
-          <div class="tb-form-row space-between">
-            <div>{{ 'widget-action.dialog-width' | translate }}</div>
-            <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-suffix-absolute number">
-              <input type="number" min="1" max="100" step="1" matInput formControlName="dialogWidth">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"
+                          [class.tb-suffix-absolute]="!actionTypeFormGroup.get('targetDashboardStateId').value">
+            <input matInput type="text" placeholder="{{ 'widget-action.target-dashboard-state' | translate }}"
+                   #dashboardStateInput
+                   formControlName="targetDashboardStateId"
+                   [required]="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState"
+                   (focusin)="onDashboardStateInputFocus()"
+                   [matAutocomplete]="targetDashboardStateAutocomplete">
+            @if (actionTypeFormGroup.get('targetDashboardStateId').value) {
+              <button
+                type="button"
+                matSuffix mat-icon-button aria-label="Clear"
+                (click)="clearTargetDashboardState()">
+                <mat-icon class="material-icons">close</mat-icon>
+              </button>
+            }
+            @if (actionTypeFormGroup.get('targetDashboardStateId').hasError('required')
+              && actionTypeFormGroup.get('targetDashboardStateId').touched) {
               <mat-icon matSuffix
                         matTooltipPosition="above"
                         matTooltipClass="tb-error-tooltip"
-                        [matTooltip]="'widget-action.dialog-size-range-error' | translate"
-                        *ngIf="stateDisplayTypeFormGroup.get('dialogWidth').invalid && stateDisplayTypeFormGroup.get('dialogWidth').touched"
+                        [matTooltip]="'widget-action.target-dashboard-state-required' | translate"
                         class="tb-error">
                 warning
               </mat-icon>
-            </mat-form-field>
-          </div>
-          <div class="tb-form-row space-between">
-            <div>{{ 'widget-action.dialog-height' | translate }}</div>
-            <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-suffix-absolute number">
-              <input type="number" min="1" max="100" step="1" matInput formControlName="dialogHeight">
+            }
+            <mat-autocomplete
+              class="tb-autocomplete"
+              #targetDashboardStateAutocomplete="matAutocomplete">
+              @for (state of filteredDashboardStates | async; track state) {
+                <mat-option [value]="state">
+                  <span [innerHTML]="state | highlight:targetDashboardStateSearchText"></span>
+                </mat-option>
+              }
+            </mat-autocomplete>
+          </mat-form-field>
+        </div>
+      }
+      @case (widgetActionType.openURL) {
+        <div class="tb-form-row">
+          <div class="tb-required">{{ 'widget-action.URL' | translate }}</div>
+          <mat-form-field class="flex-1" style="margin-left: 9px" appearance="outline" subscriptSizing="dynamic">
+            <input matInput placeholder="{{ 'widget-config.set' | translate }}" formControlName="url">
+            @if (actionTypeFormGroup.get('url').invalid && actionTypeFormGroup.get('url').touched) {
               <mat-icon matSuffix
                         matTooltipPosition="above"
                         matTooltipClass="tb-error-tooltip"
-                        [matTooltip]="'widget-action.dialog-size-range-error' | translate"
-                        *ngIf="stateDisplayTypeFormGroup.get('dialogHeight').invalid && stateDisplayTypeFormGroup.get('dialogHeight').touched"
+                        [matTooltip]="'widget-action.url-required' | translate"
                         class="tb-error">
                 warning
               </mat-icon>
-            </mat-form-field>
-          </div>
-        </ng-template>
-        <ng-template [ngSwitchCase]="'popover'">
-          <div class="tb-form-row">
-            <div class="fixed-title-width">{{ 'widget-action.popover-preferred-placement' | translate }}</div>
-            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-              <mat-select formControlName="popoverPreferredPlacement">
-                <mat-option *ngFor="let placement of allPopoverPlacements" [value]="placement">
-                  {{ popoverPlacementName(placement) }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
+            }
+          </mat-form-field>
+        </div>
+      }
+      @case (widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState ||
+        widgetActionFormGroup.get('type').value === widgetActionType.updateDashboardState ?
+        widgetActionFormGroup.get('type').value : '') {
+        <div class="tb-form-row">
+          <mat-slide-toggle class="mat-slide" formControlName="openRightLayout">
+            {{ 'widget-action.open-right-layout' | translate }}
+          </mat-slide-toggle>
+        </div>
+      }
+      @case (widgetActionFormGroup.get('type').value === widgetActionType.openDashboard ||
+        widgetActionFormGroup.get('type').value === widgetActionType.openURL ?
+        widgetActionFormGroup.get('type').value : '') {
+        <div class="tb-form-row">
+          <mat-slide-toggle class="mat-slide" formControlName="openNewBrowserTab">
+            {{ 'widget-action.open-new-browser-tab' | translate }}
+          </mat-slide-toggle>
+        </div>
+      }
+      @case (widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState ||
+        widgetActionFormGroup.get('type').value === widgetActionType.updateDashboardState ||
+        widgetActionFormGroup.get('type').value === widgetActionType.openDashboard ?
+        widgetActionFormGroup.get('type').value : '') {
+        @if (widgetType !== WidgetType.static) {
           <div class="tb-form-row">
-            <mat-slide-toggle class="mat-slide" formControlName="popoverHideOnClickOutside">
-              {{ 'widget-action.popover-hide-on-click-outside' | translate }}
+            <mat-slide-toggle class="mat-slide" formControlName="setEntityId">
+              {{ 'widget-action.set-entity-from-widget' | translate }}
             </mat-slide-toggle>
           </div>
+        }
+        @if (actionTypeFormGroup.get('setEntityId').value) {
           <div class="tb-form-row">
-            <mat-slide-toggle class="mat-slide" formControlName="popoverHideDashboardToolbar">
-              {{ 'widget-action.popover-hide-dashboard-toolbar' | translate }}
-            </mat-slide-toggle>
-          </div>
-          <div class="tb-form-row space-between">
-            <div>{{ 'widget-action.popover-width' | translate }}</div>
-            <tb-css-size-input formControlName="popoverWidth">
-            </tb-css-size-input>
-          </div>
-          <div class="tb-form-row space-between">
-            <div>{{ 'widget-action.popover-height' | translate }}</div>
-            <tb-css-size-input formControlName="popoverHeight">
-            </tb-css-size-input>
+            <div class="fixed-title-width">{{ 'alias.state-entity-parameter-name' | translate }}</div>
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+              <input matInput
+                     placeholder="{{ 'alias.default-entity-parameter-name' | translate }}"
+                     formControlName="stateEntityParamName">
+            </mat-form-field>
           </div>
-          <tb-json-object-edit
-              [editorStyle]="{minHeight: '100px'}"
-              label="{{ 'widget-action.popover-style' | translate }}"
-              formControlName="popoverStyle"
-          ></tb-json-object-edit>
-        </ng-template>
-        <ng-template [ngSwitchCase]="'normal'">
-        </ng-template>
-      </ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="widgetActionType.custom">
-      <tb-js-func
+        }
+      }
+      @case (widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState ?
+        widgetActionFormGroup.get('type').value : '') {
+        <div class="tb-form-row">
+          <div class="fixed-title-width">{{ 'widget-action.state-display-type' | translate }}</div>
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+            <mat-select formControlName="stateDisplayType">
+              @for (displayType of allStateDisplayTypes; track displayType) {
+                <mat-option [value]="displayType">
+                  {{ stateDisplayTypeName(displayType) }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <ng-container [formGroup]="stateDisplayTypeFormGroup">
+          @switch (actionTypeFormGroup.get('stateDisplayType').value) {
+            @case ('separateDialog') {
+              <div class="tb-form-row">
+                <div class="fixed-title-width">{{ 'widget-action.dialog-title' | translate }}</div>
+                <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+                  <input matInput placeholder="{{ 'widget-config.set' | translate }}" formControlName="dialogTitle">
+                </mat-form-field>
+              </div>
+              <div class="tb-form-row">
+                <mat-slide-toggle class="mat-slide" formControlName="dialogHideDashboardToolbar">
+                  {{ 'widget-action.dialog-hide-dashboard-toolbar' | translate }}
+                </mat-slide-toggle>
+              </div>
+              <div class="tb-form-row space-between">
+                <div>{{ 'widget-action.dialog-width' | translate }}</div>
+                <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-suffix-absolute number">
+                  <input type="number" min="1" max="100" step="1" matInput formControlName="dialogWidth">
+                  @if (stateDisplayTypeFormGroup.get('dialogWidth').invalid && stateDisplayTypeFormGroup.get('dialogWidth').touched) {
+                    <mat-icon matSuffix
+                              matTooltipPosition="above"
+                              matTooltipClass="tb-error-tooltip"
+                              [matTooltip]="'widget-action.dialog-size-range-error' | translate"
+                              class="tb-error">
+                      warning
+                    </mat-icon>
+                  }
+                </mat-form-field>
+              </div>
+              <div class="tb-form-row space-between">
+                <div>{{ 'widget-action.dialog-height' | translate }}</div>
+                <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-suffix-absolute number">
+                  <input type="number" min="1" max="100" step="1" matInput formControlName="dialogHeight">
+                  @if (stateDisplayTypeFormGroup.get('dialogHeight').invalid && stateDisplayTypeFormGroup.get('dialogHeight').touched) {
+                    <mat-icon matSuffix
+                              matTooltipPosition="above"
+                              matTooltipClass="tb-error-tooltip"
+                              [matTooltip]="'widget-action.dialog-size-range-error' | translate"
+                              class="tb-error">
+                      warning
+                    </mat-icon>
+                  }
+                </mat-form-field>
+              </div>
+            }
+            @case ('popover') {
+              <div class="tb-form-row">
+                <div class="fixed-title-width">{{ 'widget-action.popover-preferred-placement' | translate }}</div>
+                <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+                  <mat-select formControlName="popoverPreferredPlacement">
+                    @for (placement of allPopoverPlacements; track placement) {
+                      <mat-option [value]="placement">
+                        {{ popoverPlacementName(placement) }}
+                      </mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              </div>
+              <div class="tb-form-row">
+                <mat-slide-toggle class="mat-slide" formControlName="popoverHideOnClickOutside">
+                  {{ 'widget-action.popover-hide-on-click-outside' | translate }}
+                </mat-slide-toggle>
+              </div>
+              <div class="tb-form-row">
+                <mat-slide-toggle class="mat-slide" formControlName="popoverHideDashboardToolbar">
+                  {{ 'widget-action.popover-hide-dashboard-toolbar' | translate }}
+                </mat-slide-toggle>
+              </div>
+              <div class="tb-form-row space-between">
+                <div>{{ 'widget-action.popover-width' | translate }}</div>
+                <tb-css-size-input formControlName="popoverWidth">
+                </tb-css-size-input>
+              </div>
+              <div class="tb-form-row space-between">
+                <div>{{ 'widget-action.popover-height' | translate }}</div>
+                <tb-css-size-input formControlName="popoverHeight">
+                </tb-css-size-input>
+              </div>
+              <tb-json-object-edit
+                [editorStyle]="{minHeight: '100px'}"
+                label="{{ 'widget-action.popover-style' | translate }}"
+                formControlName="popoverStyle"
+              ></tb-json-object-edit>
+            }
+            @case ('normal') {
+            }
+          }
+        </ng-container>
+      }
+      @case (widgetActionType.custom) {
+        <tb-js-func
           formControlName="customFunction"
           functionTitle="{{ 'widget-action.custom-action-function' | translate }}"
           [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']"
@@ -257,35 +283,36 @@
           withModules
           helpId="widget/action/custom_action_fn"
           [helpPopupStyle]="{width: '900px'}"
-      ></tb-js-func>
-    </ng-template>
-    <ng-template [ngSwitchCase]="widgetActionType.placeMapItem">
-      <div class="tb-form-row">
-        <div class="fixed-title-width">{{ 'widget-action.map-item-type' | translate }}</div>
-        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-          <mat-select placeholder="{{ 'widget-config.set' | translate }}" formControlName="mapItemType">
-            @for(type of mapItemTypes; track type) {
-              <mat-option [value]="type">{{ mapItemTypeTranslationMap.get(type) | translate }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <tb-map-item-tooltips
-        [mapItemType]="actionTypeFormGroup.get('mapItemType').value"
-        formControlName="mapItemTooltips">
-      </tb-map-item-tooltips>
-    </ng-template>
-    <ng-template [ngSwitchCase]="widgetActionFormGroup.get('type').value === widgetActionType.customPretty
-                                  || widgetActionFormGroup.get('type').value === widgetActionType.placeMapItem
-                                  ? widgetActionFormGroup.get('type').value : ''">
-      <tb-custom-action-pretty-editor
-        [widgetActionType]="widgetActionFormGroup.get('type').value"
-        formControlName="customAction">
-      </tb-custom-action-pretty-editor>
-    </ng-template>
-    <ng-template [ngSwitchCase]="widgetActionType.mobileAction">
-      <tb-mobile-action-editor formControlName="mobileAction">
-      </tb-mobile-action-editor>
-    </ng-template>
+        ></tb-js-func>
+      }
+      @case (widgetActionType.placeMapItem) {
+        <div class="tb-form-row">
+          <div class="fixed-title-width">{{ 'widget-action.map-item-type' | translate }}</div>
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+            <mat-select placeholder="{{ 'widget-config.set' | translate }}" formControlName="mapItemType">
+              @for(type of mapItemTypes; track type) {
+                <mat-option [value]="type">{{ mapItemTypeTranslationMap.get(type) | translate }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <tb-map-item-tooltips
+          [mapItemType]="actionTypeFormGroup.get('mapItemType').value"
+          formControlName="mapItemTooltips">
+        </tb-map-item-tooltips>
+      }
+      @case (widgetActionFormGroup.get('type').value === widgetActionType.customPretty
+        || widgetActionFormGroup.get('type').value === widgetActionType.placeMapItem
+        ? widgetActionFormGroup.get('type').value : '') {
+        <tb-custom-action-pretty-editor
+          [widgetActionType]="widgetActionFormGroup.get('type').value"
+          formControlName="customAction">
+        </tb-custom-action-pretty-editor>
+      }
+      @case (widgetActionType.mobileAction) {
+        <tb-mobile-action-editor formControlName="mobileAction">
+        </tb-mobile-action-editor>
+      }
+    }
   </ng-container>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html
index a1d2ff2243..03548a16f5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html
@@ -45,12 +45,14 @@
                     formControlName="color">
     </tb-color-input>
   </div>
-  <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
-          type="button"
-          class="tb-box-button"
-          (click)="removeAdvancedRange.emit()"
-          matTooltip="{{ 'action.remove' | translate }}"
-          matTooltipPosition="above">
-    <mat-icon>delete</mat-icon>
-  </button>
+  @if (!disabled) {
+    <button mat-icon-button style="min-width: 40px;"
+            type="button"
+            class="tb-box-button"
+            (click)="removeAdvancedRange.emit()"
+            matTooltip="{{ 'action.remove' | translate }}"
+            matTooltipPosition="above">
+      <mat-icon>delete</mat-icon>
+    </button>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.html
index 4acda6d6b4..255003caa4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.html
@@ -21,7 +21,9 @@
                 class="mat-block"
                 [appearance]="inlineField ? 'outline' : appearance"
                 [subscriptSizing]="inlineField ? 'dynamic' : subscriptSizing">
-  <mat-label *ngIf="showLabel && !inlineField">{{ 'entity.entity-alias' | translate }}</mat-label>
+  @if (showLabel && !inlineField) {
+    <mat-label>{{ 'entity.entity-alias' | translate }}</mat-label>
+  }
   <input matInput type="text" placeholder="{{ (!showLabel || inlineField) ? ('entity.entity-alias' | translate) : ''}}"
          #entityAliasInput
          formControlName="entityAlias"
@@ -31,59 +33,73 @@
          (keypress)="entityAliasEnter($event)"
          [matAutocomplete]="entityAliasAutocomplete">
   <div matSuffix class="mat-mdc-form-field-icon-suffix flex flex-row">
-    <button *ngIf="selectEntityAliasFormGroup.get('entityAlias').value"
-            type="button"
-            mat-icon-button aria-label="Clear"
-            (click)="clear()">
-      <mat-icon class="material-icons">close</mat-icon>
-    </button>
-    <button *ngIf="selectEntityAliasFormGroup.get('entityAlias').value?.id"
-            type="button"
-            mat-icon-button aria-label="Edit"
-            matTooltip="{{ 'entity.edit-alias' | translate }}"
-            matTooltipPosition="above"
-            (click)="editEntityAlias($event)">
-      <mat-icon class="material-icons">edit</mat-icon>
-    </button>
-    <mat-icon matTooltipPosition="above"
-              matTooltipClass="tb-error-tooltip"
-              [matTooltip]="'entity.alias-required' | translate"
-              *ngIf="inlineField && !modelValue && tbRequired
-                            && selectEntityAliasFormGroup.get('entityAlias').touched"
-              class="tb-error">
-      warning
-    </mat-icon>
+    @if (selectEntityAliasFormGroup.get('entityAlias').value) {
+      <button
+        type="button"
+        mat-icon-button aria-label="Clear"
+        (click)="clear()">
+        <mat-icon class="material-icons">close</mat-icon>
+      </button>
+    }
+    @if (selectEntityAliasFormGroup.get('entityAlias').value?.id) {
+      <button
+        type="button"
+        mat-icon-button aria-label="Edit"
+        matTooltip="{{ 'entity.edit-alias' | translate }}"
+        matTooltipPosition="above"
+        (click)="editEntityAlias($event)">
+        <mat-icon class="material-icons">edit</mat-icon>
+      </button>
+    }
+    @if (inlineField && !modelValue && tbRequired
+      && selectEntityAliasFormGroup.get('entityAlias').touched) {
+      <mat-icon matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
+                [matTooltip]="'entity.alias-required' | translate"
+                class="tb-error">
+        warning
+      </mat-icon>
+    }
   </div>
-  <button *ngIf="!inlineField && !selectEntityAliasFormGroup.get('entityAlias').value && !disabled"
-          style="margin-right: 8px;"
-          type="button"
-          matSuffix mat-button color="primary"
-          (click)="createEntityAlias($event, searchText, false)">
-    {{ 'entity.create-new' | translate }}
-  </button>
+  @if (!inlineField && !selectEntityAliasFormGroup.get('entityAlias').value && !disabled) {
+    <button
+      style="margin-right: 8px;"
+      type="button"
+      matSuffix mat-button color="primary"
+      (click)="createEntityAlias($event, searchText, false)">
+      {{ 'entity.create-new' | translate }}
+    </button>
+  }
   <mat-autocomplete class="tb-autocomplete"
                     #entityAliasAutocomplete="matAutocomplete"
                     [displayWith]="displayEntityAliasFn">
-    <mat-option *ngFor="let entityAlias of filteredEntityAliases | async" [value]="entityAlias">
-      <span [innerHTML]="entityAlias.alias | highlight:searchText:true:'ig'"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredEntityAliases | async)?.length" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span translate>entity.no-aliases-found</span>
-        </div>
-        <ng-template #searchNotEmpty>
+    @for (entityAlias of filteredEntityAliases | async; track entityAlias) {
+      <mat-option [value]="entityAlias">
+        <span [innerHTML]="entityAlias.alias | highlight:searchText:true:'ig'"></span>
+      </mat-option>
+    }
+    @if (!(filteredEntityAliases | async)?.length) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span translate>entity.no-aliases-found</span>
+            </div>
+          } @else {
+            <span>
+              {{ 'entity.no-alias-matching' | translate : {alias: (searchText | truncate: true: 6: &apos;...&apos;)} }}
+            </span>
+          }
           <span>
-            {{ 'entity.no-alias-matching' | translate : {alias: (searchText | truncate: true: 6: &apos;...&apos;)} }}
+            <a translate (click)="createEntityAlias($event, searchText)">entity.create-new-alias</a>
           </span>
-        </ng-template>
-        <span>
-          <a translate (click)="createEntityAlias($event, searchText)">entity.create-new-alias</a>
-        </span>
-      </div>
-    </mat-option>
+        </div>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="!inlineField && !modelValue && tbRequired">
-    {{ 'entity.alias-required' | translate }}
-  </mat-error>
+  @if (!inlineField && !modelValue && tbRequired) {
+    <mat-error>
+      {{ 'entity.alias-required' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html
index 16cb7a8e19..9964e6b375 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html
@@ -18,17 +18,19 @@
 <div class="tb-auto-date-format-settings-panel" [formGroup]="autoDateFormatFormGroup">
   <div class="tb-auto-date-format-settings-title" translate>date.time-granularity-formats</div>
   <div class="tb-auto-date-format-settings-panel-content">
-    <div class="tb-form-row" *ngFor="let unit of formatTimeUnits">
-      <div class="fixed-title-width">{{ formatTimeUnitTranslations.get(unit) | translate }}</div>
-      <div class="flex flex-1 flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-4">
-        <mat-form-field class="tb-date-format-input flex" appearance="outline" subscriptSizing="dynamic">
-          <input required matInput [formControlName]="unit" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matIconSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div>
-        </mat-form-field>
-        <mat-divider class="lt-sm:!hidden" vertical></mat-divider>
-        <div class="preview-text flex-1">{{ previewText[unit] }}</div>
+    @for (unit of formatTimeUnits; track unit) {
+      <div class="tb-form-row">
+        <div class="fixed-title-width">{{ formatTimeUnitTranslations.get(unit) | translate }}</div>
+        <div class="flex flex-1 flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-4">
+          <mat-form-field class="tb-date-format-input flex" appearance="outline" subscriptSizing="dynamic">
+            <input required matInput [formControlName]="unit" placeholder="{{ 'widget-config.set' | translate }}">
+            <div matIconSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div>
+          </mat-form-field>
+          <mat-divider class="lt-sm:!hidden" vertical></mat-divider>
+          <div class="preview-text flex-1">{{ previewText[unit] }}</div>
+        </div>
       </div>
-    </div>
+    }
   </div>
   <div class="tb-auto-date-format-settings-panel-buttons">
     <button mat-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/axis-scale-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/axis-scale-row.component.html
index 986975b874..026ef7ecaf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/axis-scale-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/axis-scale-row.component.html
@@ -22,50 +22,57 @@
   <div class="flex-grow flex-shrink flex flex-col gap-2 gt-sm:flex-row gt-sm:gap-3" [class]="isPanelView ? 'basis-1/2' : 'basis-40%'">
     <mat-form-field class="tb-inline-field flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="type">
-        <mat-option *ngFor="let type of ValueSourceTypes" [value]="type">
-          {{ ValueSourceTypeTranslation.get(type) | translate }}
-        </mat-option>
+        @for (type of ValueSourceTypes; track type) {
+          <mat-option [value]="type">
+            {{ ValueSourceTypeTranslation.get(type) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
-    <tb-entity-alias-input
-      required
-      class="flex-1"
-      *ngIf="limitForm.get('type').value === ValueSourceType.entity"
-      [aliasController]="aliasController"
-      formControlName="entityAlias">
-    </tb-entity-alias-input>
+    @if (limitForm.get('type').value === ValueSourceType.entity) {
+      <tb-entity-alias-input
+        required
+        class="flex-1"
+        [aliasController]="aliasController"
+        formControlName="entityAlias">
+      </tb-entity-alias-input>
+    }
   </div>
   <div class="flex-grow flex-shrink max-w-5/12" [class]="isPanelView ? 'basis-1/2' : 'basis-40%'">
-    <mat-form-field *ngIf="limitForm.get('type').value === ValueSourceType.constant"
-                    appearance="outline" class="tb-inline-field !w-full number" subscriptSizing="dynamic"
-                    [class.tb-suffix-absolute]="!limitForm.get('value').value">
-      <input matInput formControlName="value" type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}">
-    </mat-form-field>
-    <tb-data-key-input
-      required
-      *ngIf="limitForm.get('type').value === ValueSourceType.latestKey"
-      requiredText="widgets.chart.chart-axis.key-required"
-      [datasourceType]="datasource?.type"
-      [entityAliasId]="datasource?.entityAliasId"
-      [deviceId]="datasource?.deviceId"
-      [aliasController]="aliasController"
-      [dataKeyType]="datasource?.type === DatasourceType.function ? DataKeyType.function : null"
-      [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
-      [callbacks]="callbacks"
-      [editable]="false"
-      [formControl]="latestKeyFormControl">
-    </tb-data-key-input>
-    <tb-data-key-input
-      required
-      *ngIf="limitForm.get('type').value === ValueSourceType.entity"
-      requiredText="widgets.chart.chart-axis.entity-key-required"
-      [datasourceType]="DatasourceType.entity"
-      [aliasController]="aliasController"
-      [entityAlias]="limitForm.get('entityAlias').value"
-      [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
-      [callbacks]="callbacks"
-      [editable]="false"
-      [formControl]="entityKeyFormControl">
-    </tb-data-key-input>
+    @if (limitForm.get('type').value === ValueSourceType.constant) {
+      <mat-form-field
+        appearance="outline" class="tb-inline-field !w-full number" subscriptSizing="dynamic"
+        [class.tb-suffix-absolute]="!limitForm.get('value').value">
+        <input matInput formControlName="value" type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}">
+      </mat-form-field>
+    }
+    @if (limitForm.get('type').value === ValueSourceType.latestKey) {
+      <tb-data-key-input
+        required
+        requiredText="widgets.chart.chart-axis.key-required"
+        [datasourceType]="datasource?.type"
+        [entityAliasId]="datasource?.entityAliasId"
+        [deviceId]="datasource?.deviceId"
+        [aliasController]="aliasController"
+        [dataKeyType]="datasource?.type === DatasourceType.function ? DataKeyType.function : null"
+        [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
+        [callbacks]="callbacks"
+        [editable]="false"
+        [formControl]="latestKeyFormControl">
+      </tb-data-key-input>
+    }
+    @if (limitForm.get('type').value === ValueSourceType.entity) {
+      <tb-data-key-input
+        required
+        requiredText="widgets.chart.chart-axis.entity-key-required"
+        [datasourceType]="DatasourceType.entity"
+        [aliasController]="aliasController"
+        [entityAlias]="limitForm.get('entityAlias').value"
+        [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
+        [callbacks]="callbacks"
+        [editable]="false"
+        [formControl]="entityKeyFormControl">
+      </tb-data-key-input>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
index d0cffac423..d9a69ad111 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
@@ -22,14 +22,16 @@
       <div class="flex flex-row items-center justify-start gap-4">
         <div class="tb-form-panel-title" translate>widgets.background.background</div>
         <tb-toggle-select formControlName="type" class="flex-1" selectMediaBreakpoint="xs">
-          <tb-toggle-option *ngFor="let type of backgroundTypes"
-                            [value]="type">
-            {{ backgroundTypeTranslationsMap.get(type) | translate }}
-          </tb-toggle-option>
+          @for (type of backgroundTypes; track type) {
+            <tb-toggle-option
+              [value]="type">
+              {{ backgroundTypeTranslationsMap.get(type) | translate }}
+            </tb-toggle-option>
+          }
         </tb-toggle-select>
       </div>
       <tb-gallery-image-input [class.!hidden]="backgroundSettingsFormGroup.get('type').value !== backgroundType.image"
-                              formControlName="imageUrl"></tb-gallery-image-input>
+      formControlName="imageUrl"></tb-gallery-image-input>
       <div [class.!hidden]="backgroundSettingsFormGroup.get('type').value !== backgroundType.color"
            class="tb-form-row space-between tb-background-color-field">
         <div translate>widgets.color.color</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
index 26835e857a..a9cfb92e70 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
@@ -21,18 +21,22 @@
                                     breakpoints: {
                                       'lt-sm': 1
                                     }}"
-                         label="{{ 'widgets.button.layout' | translate }}" formControlName="type">
-    <tb-image-cards-select-option *ngFor="let type of widgetButtonTypes"
-                                  [value]="type"
-                                  [image]="widgetButtonTypeImageMap.get(type)">
-      {{ widgetButtonTypeTranslationMap.get(type) | translate }}
-    </tb-image-cards-select-option>
+    label="{{ 'widgets.button.layout' | translate }}" formControlName="type">
+    @for (type of widgetButtonTypes; track type) {
+      <tb-image-cards-select-option
+        [value]="type"
+        [image]="widgetButtonTypeImageMap.get(type)">
+        {{ widgetButtonTypeTranslationMap.get(type) | translate }}
+      </tb-image-cards-select-option>
+    }
   </tb-image-cards-select>
-  <div *ngIf="withAutoScale" class="tb-form-row">
-    <mat-slide-toggle class="mat-slide" formControlName="autoScale">
-      {{ 'widgets.button.auto-scale' | translate }}
-    </mat-slide-toggle>
-  </div>
+  @if (withAutoScale) {
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide" formControlName="autoScale">
+        {{ 'widgets.button.auto-scale' | translate }}
+      </mat-slide-toggle>
+    </div>
+  }
   <div class="tb-form-row">
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
       {{ 'widgets.button.label' | translate }}
@@ -63,10 +67,12 @@
       </tb-material-icon-select>
     </div>
   </div>
-  <div *ngIf="withBorderRadius" class="tb-form-row">
-    <div class="fixed-title-width">{{ 'widgets.button.border-radius' | translate }}</div>
-    <tb-css-size-input flex formControlName="borderRadius"></tb-css-size-input>
-  </div>
+  @if (withBorderRadius) {
+    <div class="tb-form-row">
+      <div class="fixed-title-width">{{ 'widgets.button.border-radius' | translate }}</div>
+      <tb-css-size-input flex formControlName="borderRadius"></tb-css-size-input>
+    </div>
+  }
   <div class="tb-form-row space-between column-xs">
     <div>{{ 'widgets.button.color-palette' | translate }}</div>
     <div class="flex flex-row items-center justify-start gap-3">
@@ -93,16 +99,18 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="tb-form-row space-between" *ngFor="let state of widgetButtonStates">
-          <div>{{ widgetButtonStateTranslationMap.get(state) | translate }}</div>
-          <tb-widget-button-custom-style
-            [state]="state"
-            [appearance]="appearanceFormGroup.value"
-            [borderRadius]="borderRadius"
-            [autoScale]="autoScale"
-            [formControlName]="state">
-          </tb-widget-button-custom-style>
-        </div>
+        @for (state of widgetButtonStates; track state) {
+          <div class="tb-form-row space-between">
+            <div>{{ widgetButtonStateTranslationMap.get(state) | translate }}</div>
+            <tb-widget-button-custom-style
+              [state]="state"
+              [appearance]="appearanceFormGroup.value"
+              [borderRadius]="borderRadius"
+              [autoScale]="autoScale"
+              [formControlName]="state">
+            </tb-widget-button-custom-style>
+          </div>
+        }
       </ng-template>
     </mat-expansion-panel>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html
index 4307c8b90b..6333f0416b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html
@@ -61,19 +61,23 @@
     </div>
   </div>
   <div class="tb-widget-button-custom-style-panel-buttons">
-    <button *ngIf="copyFromStates?.length"
-            #copyStyleButton
-            class="tb-nowrap"
-            mat-stroked-button
-            color="primary"
-            type="button"
-            [matMenuTriggerFor]="styleSourcesMenu" [matMenuTriggerData]="{menuWidth: copyStyleButton._elementRef.nativeElement.clientWidth}">
-      {{ 'widgets.button.copy-style-from' | translate }}
-    </button>
+    @if (copyFromStates?.length) {
+      <button
+        #copyStyleButton
+        class="tb-nowrap"
+        mat-stroked-button
+        color="primary"
+        type="button"
+        [matMenuTriggerFor]="styleSourcesMenu" [matMenuTriggerData]="{menuWidth: copyStyleButton._elementRef.nativeElement.clientWidth}">
+        {{ 'widgets.button.copy-style-from' | translate }}
+      </button>
+    }
     <mat-menu #styleSourcesMenu="matMenu">
       <ng-template matMenuContent let-menuWidth="menuWidth">
         <div [style.min-width.px]="menuWidth">
-          <button mat-menu-item *ngFor="let state of copyFromStates" (click)="copyStyle(state)">{{ widgetButtonStateTranslationMap.get(state) | translate }}</button>
+          @for (state of copyFromStates; track state) {
+            <button mat-menu-item (click)="copyStyle(state)">{{ widgetButtonStateTranslationMap.get(state) | translate }}</button>
+          }
         </div>
       </ng-template>
     </mat-menu>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style.component.html
index 4c4544467c..f1bd3f92d2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style.component.html
@@ -27,14 +27,16 @@
       [activated]="state === widgetButtonState.activated"
       [disabled]="state === widgetButtonState.disabled">
     </tb-widget-button>
-    <button *ngIf="modelValue"
-            mat-icon-button
-            [matTooltip]="'widgets.button.clear-style' | translate"
-            matTooltipPosition="above"
-            class="tb-mat-32"
-            (click)="clearStyle()">
-      <tb-icon>mdi:broom</tb-icon>
-    </button>
+    @if (modelValue) {
+      <button
+        mat-icon-button
+        [matTooltip]="'widgets.button.clear-style' | translate"
+        matTooltipPosition="above"
+        class="tb-mat-32"
+        (click)="clearStyle()">
+        <tb-icon>mdi:broom</tb-icon>
+      </button>
+    }
   </div>
   <button mat-icon-button
           class="tb-mat-32"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-toggle-custom-style-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-toggle-custom-style-panel.component.html
index 0a947d83a3..670c51ecb6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-toggle-custom-style-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-toggle-custom-style-panel.component.html
@@ -58,19 +58,23 @@
     </div>
   </div>
   <div class="tb-widget-button-custom-style-panel-buttons">
-    <button *ngIf="copyFromStates?.length"
-            #copyStyleButton
-            class="tb-nowrap"
-            mat-stroked-button
-            color="primary"
-            type="button"
-            [matMenuTriggerFor]="styleSourcesMenu" [matMenuTriggerData]="{menuWidth: copyStyleButton._elementRef.nativeElement.clientWidth}">
-      {{ 'widgets.button.copy-style-from' | translate }}
-    </button>
+    @if (copyFromStates?.length) {
+      <button
+        #copyStyleButton
+        class="tb-nowrap"
+        mat-stroked-button
+        color="primary"
+        type="button"
+        [matMenuTriggerFor]="styleSourcesMenu" [matMenuTriggerData]="{menuWidth: copyStyleButton._elementRef.nativeElement.clientWidth}">
+        {{ 'widgets.button.copy-style-from' | translate }}
+      </button>
+    }
     <mat-menu #styleSourcesMenu="matMenu">
       <ng-template matMenuContent let-menuWidth="menuWidth">
         <div [style.min-width.px]="menuWidth">
-          <button mat-menu-item *ngFor="let state of copyFromStates" (click)="copyStyle(state)">{{ widgetButtonToggleStatesTranslationsMap.get(state) | translate }}</button>
+          @for (state of copyFromStates; track state) {
+            <button mat-menu-item (click)="copyStyle(state)">{{ widgetButtonToggleStatesTranslationsMap.get(state) | translate }}</button>
+          }
         </div>
       </ng-template>
     </mat-menu>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-toggle-custom-style.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-toggle-custom-style.component.html
index f750ffbd19..ba2c744211 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-toggle-custom-style.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-toggle-custom-style.component.html
@@ -26,14 +26,16 @@
       [hovered]="state === widgetButtonToggleState.hovered"
       [disabled]="state === widgetButtonToggleState.disabled">
     </tb-widget-button-toggle>
-    <button *ngIf="modelValue"
-            mat-icon-button
-            [matTooltip]="'widgets.button.clear-style' | translate"
-            matTooltipPosition="above"
-            class="tb-mat-32"
-            (click)="clearStyle()">
-      <tb-icon>mdi:broom</tb-icon>
-    </button>
+    @if (modelValue) {
+      <button
+        mat-icon-button
+        [matTooltip]="'widgets.button.clear-style' | translate"
+        matTooltipPosition="above"
+        class="tb-mat-32"
+        (click)="clearStyle()">
+        <tb-icon>mdi:broom</tb-icon>
+      </button>
+    }
   </div>
   <button mat-icon-button
           class="tb-mat-32"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html
index c8c4c9f65b..a72f8ac55e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html
@@ -45,9 +45,11 @@
           <div translate>widgets.chart.animation.animation-easing</div>
           <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="animationEasing">
-              <mat-option *ngFor="let easing of chartAnimationEasings" [value]="easing">
-                {{ easing }}
-              </mat-option>
+              @for (easing of chartAnimationEasings; track easing) {
+                <mat-option [value]="easing">
+                  {{ easing }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -69,9 +71,11 @@
           <div translate>widgets.chart.animation.update-animation-easing</div>
           <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="animationEasingUpdate">
-              <mat-option *ngFor="let easing of chartAnimationEasings" [value]="easing">
-                {{ easing }}
-              </mat-option>
+              @for (easing of chartAnimationEasings; track easing) {
+                <mat-option [value]="easing">
+                  {{ easing }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html
index dbfaa2a8fc..6ccc5d6834 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html
@@ -33,13 +33,15 @@
       <input matInput type="number" formControlName="borderRadius" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
     </mat-form-field>
   </div>
-  <div *ngIf="!series" class="tb-form-row space-between column-xs">
-    <div translate>widgets.chart.bar.bar-width</div>
-    <mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
-      <input matInput type="number" formControlName="barWidth" min="0" max="100" placeholder="{{ 'widget-config.set' | translate }}"/>
-      <div matSuffix>%</div>
-    </mat-form-field>
-  </div>
+  @if (!series) {
+    <div class="tb-form-row space-between column-xs">
+      <div translate>widgets.chart.bar.bar-width</div>
+      <mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
+        <input matInput type="number" formControlName="barWidth" min="0" max="100" placeholder="{{ 'widget-config.set' | translate }}"/>
+        <div matSuffix>%</div>
+      </mat-form-field>
+    </div>
+  }
   <div class="tb-form-row space-between column-lt-md">
     <mat-slide-toggle class="mat-slide" formControlName="showLabel">
       <div tb-hint-tooltip-icon="{{(series ? 'widgets.chart.bar.series-label-hint' : 'widgets.chart.bar.label-hint') | translate}}">
@@ -49,9 +51,11 @@
     <div class="flex lt-md:flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="labelPosition">
-          <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
-            {{ chartLabelPositionTranslations.get(position) | translate }}
-          </mat-option>
+          @for (position of chartLabelPositions; track position) {
+            <mat-option [value]="position">
+              {{ chartLabelPositionTranslations.get(position) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <tb-font-settings formControlName="labelFont"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html
index 1226eda814..95ced2bb6c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html
@@ -20,10 +20,12 @@
     <div class="tb-form-row no-border no-padding space-between">
       <div>{{ titleText | translate }}</div>
       <tb-toggle-select formControlName="type">
-        <tb-toggle-option *ngFor="let type of chartFillTypes" [value]="type">{{ chartFillTypeTranslationMap.get(type) | translate }}</tb-toggle-option>
+        @for (type of chartFillTypes; track type) {
+          <tb-toggle-option [value]="type">{{ chartFillTypeTranslationMap.get(type) | translate }}</tb-toggle-option>
+        }
       </tb-toggle-select>
     </div>
-    <ng-container *ngIf="fillSettingsFormGroup.get('type').value === ChartFillType.opacity">
+    @if (fillSettingsFormGroup.get('type').value === ChartFillType.opacity) {
       <div class="tb-form-row space-between column-xs">
         <div translate>widgets.chart.opacity</div>
         <mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
@@ -31,23 +33,25 @@
                  step="0.1" placeholder="{{ 'widget-config.set' | translate }}"/>
         </mat-form-field>
       </div>
-    </ng-container>
-    <ng-container *ngIf="fillSettingsFormGroup.get('type').value === ChartFillType.gradient" formGroupName="gradient">
-      <div class="tb-form-row space-between column-xs">
-        <div translate>widgets.chart.gradient-stops</div>
-        <div class="flex flex-row items-center justify-start gap-2">
-          <div class="tb-small-label" translate>widgets.chart.gradient-start</div>
-          <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-            <input matInput formControlName="start" min="0" max="100" step="1"
-                   type="number" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-          <div class="tb-small-label" translate>widgets.chart.gradient-end</div>
-          <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-            <input matInput formControlName="end" min="0" max="100" step="1"
-                   type="number" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
+    }
+    @if (fillSettingsFormGroup.get('type').value === ChartFillType.gradient) {
+      <ng-container formGroupName="gradient">
+        <div class="tb-form-row space-between column-xs">
+          <div translate>widgets.chart.gradient-stops</div>
+          <div class="flex flex-row items-center justify-start gap-2">
+            <div class="tb-small-label" translate>widgets.chart.gradient-start</div>
+            <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+              <input matInput formControlName="start" min="0" max="100" step="1"
+                     type="number" placeholder="{{ 'widget-config.set' | translate }}">
+            </mat-form-field>
+            <div class="tb-small-label" translate>widgets.chart.gradient-end</div>
+            <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+              <input matInput formControlName="end" min="0" max="100" step="1"
+                     type="number" placeholder="{{ 'widget-config.set' | translate }}">
+            </mat-form-field>
+          </div>
         </div>
-      </div>
-    </ng-container>
+      </ng-container>
+    }
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
index aa0d5b1204..64ea74bea8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
@@ -49,44 +49,54 @@
           <div translate>widgets.time-series-chart.axis.position</div>
           <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="position">
-              <mat-option *ngFor="let position of axisPositions" [value]="position">
-                {{ timeSeriesAxisPositionTranslations.get(position) | translate }}
-              </mat-option>
+              @for (position of axisPositions; track position) {
+                <mat-option [value]="position">
+                  {{ timeSeriesAxisPositionTranslations.get(position) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
-        <div *ngIf="axisType === 'yAxis' && !hideUnits" class="tb-form-row space-between">
-          <div translate>widget-config.units-short</div>
-          <tb-unit-input
-            supportsUnitConversion
-            formControlName="units">
-          </tb-unit-input>
-        </div>
-        <div *ngIf="axisType === 'yAxis' && !hideDecimals" class="tb-form-row space-between">
-          <div translate>widget-config.decimals-short</div>
-          <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-            <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-        </div>
-        <div *ngIf="axisType === 'yAxis' && advanced" class="tb-form-row">
-          <tb-js-func class="flex-1"
-                      formControlName="ticksGenerator"
-                      [globalVariables]="functionScopeVariables"
-                      [functionArgs]="['extent']"
-                      functionTitle="{{ 'widgets.time-series-chart.axis.ticks-generator-function' | translate }}"
-                      helpId="widget/lib/chart/ticks_generator_fn">
-          </tb-js-func>
-        </div>
+        @if (axisType === 'yAxis' && !hideUnits) {
+          <div class="tb-form-row space-between">
+            <div translate>widget-config.units-short</div>
+            <tb-unit-input
+              supportsUnitConversion
+              formControlName="units">
+            </tb-unit-input>
+          </div>
+        }
+        @if (axisType === 'yAxis' && !hideDecimals) {
+          <div class="tb-form-row space-between">
+            <div translate>widget-config.decimals-short</div>
+            <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+              <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+            </mat-form-field>
+          </div>
+        }
+        @if (axisType === 'yAxis' && advanced) {
+          <div class="tb-form-row">
+            <tb-js-func class="flex-1"
+                        formControlName="ticksGenerator"
+                        [globalVariables]="functionScopeVariables"
+                        [functionArgs]="['extent']"
+                        functionTitle="{{ 'widgets.time-series-chart.axis.ticks-generator-function' | translate }}"
+                        helpId="widget/lib/chart/ticks_generator_fn">
+            </tb-js-func>
+          </div>
+        }
         <div class="tb-form-panel no-padding stroked">
           <div class="tb-form-row no-border space-between column-xs">
             <mat-slide-toggle class="mat-slide" formControlName="showTickLabels">
               <div translate>widgets.time-series-chart.axis.tick-labels</div>
             </mat-slide-toggle>
             <div class="flex flex-row items-center justify-start gap-2">
-              <tb-auto-date-format-settings *ngIf="axisType === 'xAxis'"
-                                            formControlName="ticksFormat"
-                                            [defaultValues]="defaultXAxisTicksFormat">
-              </tb-auto-date-format-settings>
+              @if (axisType === 'xAxis') {
+                <tb-auto-date-format-settings
+                  formControlName="ticksFormat"
+                  [defaultValues]="defaultXAxisTicksFormat">
+                </tb-auto-date-format-settings>
+              }
               <tb-font-settings formControlName="tickLabelFont"
                                 clearButton
                                 disabledLineHeight
@@ -99,15 +109,17 @@
               </tb-color-input>
             </div>
           </div>
-          <div *ngIf="axisType === 'yAxis' && advanced" class="tb-form-row no-border">
-            <tb-js-func class="flex-1"
-              formControlName="ticksFormatter"
-              [globalVariables]="functionScopeVariables"
-              [functionArgs]="['value']"
-              functionTitle="{{ 'widgets.time-series-chart.axis.ticks-formatter-function' | translate }}"
-              helpId="widget/lib/flot/ticks_formatter_fn">
-            </tb-js-func>
-          </div>
+          @if (axisType === 'yAxis' && advanced) {
+            <div class="tb-form-row no-border">
+              <tb-js-func class="flex-1"
+                          formControlName="ticksFormatter"
+                          [globalVariables]="functionScopeVariables"
+                          [functionArgs]="['value']"
+                          functionTitle="{{ 'widgets.time-series-chart.axis.ticks-formatter-function' | translate }}"
+                          helpId="widget/lib/flot/ticks_formatter_fn">
+              </tb-js-func>
+            </div>
+          }
         </div>
         <div class="tb-form-row space-between">
           <mat-slide-toggle class="mat-slide" formControlName="showTicks">
@@ -139,55 +151,61 @@
                           formControlName="splitLinesColor">
           </tb-color-input>
         </div>
-        <div *ngIf="axisType === 'yAxis'" class="tb-form-row space-between">
-          <div tb-hint-tooltip-icon="{{ 'widgets.time-series-chart.axis.ticks-interval-hint' | translate }}">
-            {{ 'widgets.time-series-chart.axis.ticks-interval' | translate }}
+        @if (axisType === 'yAxis') {
+          <div class="tb-form-row space-between">
+            <div tb-hint-tooltip-icon="{{ 'widgets.time-series-chart.axis.ticks-interval-hint' | translate }}">
+              {{ 'widgets.time-series-chart.axis.ticks-interval' | translate }}
+            </div>
+            <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+              <input matInput formControlName="interval"
+                     type="number" min="0" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}">
+            </mat-form-field>
           </div>
-          <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-            <input matInput formControlName="interval"
-                   type="number" min="0" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}">
-          </mat-form-field>
-        </div>
-        <div *ngIf="axisType === 'yAxis'" class="tb-form-row space-between">
-          <div tb-hint-tooltip-icon="{{ 'widgets.time-series-chart.axis.split-number-hint' | translate }}">
-            {{ 'widgets.time-series-chart.axis.split-number' | translate }}
+        }
+        @if (axisType === 'yAxis') {
+          <div class="tb-form-row space-between">
+            <div tb-hint-tooltip-icon="{{ 'widgets.time-series-chart.axis.split-number-hint' | translate }}">
+              {{ 'widgets.time-series-chart.axis.split-number' | translate }}
+            </div>
+            <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+              <input matInput formControlName="splitNumber"
+                     type="number" min="1" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}">
+            </mat-form-field>
           </div>
-          <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-            <input matInput formControlName="splitNumber"
-                   type="number" min="1" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}">
-          </mat-form-field>
-        </div>
-        <div *ngIf="axisType === 'yAxis'" class="tb-form-panel stroked">
-          <div class="flex flex-col gap-2">
-            <div translate>widgets.chart.chart-axis.scale-limits</div>
-            <div class="tb-form-table">
-              <div class="tb-form-table-header">
-                <div class="tb-form-table-header-cell" [class]="alwaysExpanded ? 'basis-10' : 'basis-1/5'" translate>widgets.chart.chart-axis.limit</div>
-                <div class="tb-form-table-header-cell flex-grow flex-shrink" [class]="alwaysExpanded ? 'basis-1/2' : 'basis-40%'" translate>widgets.chart.chart-axis.source</div>
-                <div class="tb-form-table-header-cell flex-grow flex-shrink" [class]="alwaysExpanded ? 'basis-1/2' : 'basis-40%'" translate>widgets.chart.chart-axis.key-value</div>
-              </div>
-              <div class="tb-form-table-body">
-                <tb-axis-scale-row
-                  [isPanelView]="alwaysExpanded"
-                  [datasource]="datasource"
-                  [callbacks]="dataKeyCallbacks"
-                  [aliasController]="aliasController"
-                  formControlName="min"
-                  labelKey="widgets.chart.chart-axis.scale-min">
-                </tb-axis-scale-row>
-                <mat-divider class="mt-2 gt-sm:hidden"></mat-divider>
-                <tb-axis-scale-row
-                  [isPanelView]="alwaysExpanded"
-                  [datasource]="datasource"
-                  [callbacks]="dataKeyCallbacks"
-                  [aliasController]="aliasController"
-                  formControlName="max"
-                  labelKey="widgets.chart.chart-axis.scale-max">
-                </tb-axis-scale-row>
+        }
+        @if (axisType === 'yAxis') {
+          <div class="tb-form-panel stroked">
+            <div class="flex flex-col gap-2">
+              <div translate>widgets.chart.chart-axis.scale-limits</div>
+              <div class="tb-form-table">
+                <div class="tb-form-table-header">
+                  <div class="tb-form-table-header-cell" [class]="alwaysExpanded ? 'basis-10' : 'basis-1/5'" translate>widgets.chart.chart-axis.limit</div>
+                  <div class="tb-form-table-header-cell flex-grow flex-shrink" [class]="alwaysExpanded ? 'basis-1/2' : 'basis-40%'" translate>widgets.chart.chart-axis.source</div>
+                  <div class="tb-form-table-header-cell flex-grow flex-shrink" [class]="alwaysExpanded ? 'basis-1/2' : 'basis-40%'" translate>widgets.chart.chart-axis.key-value</div>
+                </div>
+                <div class="tb-form-table-body">
+                  <tb-axis-scale-row
+                    [isPanelView]="alwaysExpanded"
+                    [datasource]="datasource"
+                    [callbacks]="dataKeyCallbacks"
+                    [aliasController]="aliasController"
+                    formControlName="min"
+                    labelKey="widgets.chart.chart-axis.scale-min">
+                  </tb-axis-scale-row>
+                  <mat-divider class="mt-2 gt-sm:hidden"></mat-divider>
+                  <tb-axis-scale-row
+                    [isPanelView]="alwaysExpanded"
+                    [datasource]="datasource"
+                    [callbacks]="dataKeyCallbacks"
+                    [aliasController]="aliasController"
+                    formControlName="max"
+                    labelKey="widgets.chart.chart-axis.scale-max">
+                  </tb-axis-scale-row>
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        }
       </ng-template>
     </mat-expansion-panel>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html
index bde8d623d4..8027f4d689 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html
@@ -24,31 +24,36 @@
   </mat-form-field>
   <mat-form-field class="tb-inline-field tb-state-source-field" appearance="outline" subscriptSizing="dynamic">
     <mat-select formControlName="sourceType">
-      <mat-option *ngFor="let type of timeSeriesStateSourceTypes" [value]="type">
-        {{ timeSeriesStateSourceTypeTranslations.get(type) | translate }}
-      </mat-option>
+      @for (type of timeSeriesStateSourceTypes; track type) {
+        <mat-option [value]="type">
+          {{ timeSeriesStateSourceTypeTranslations.get(type) | translate }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <div class="tb-state-source-value-field">
-    <tb-value-input
-        *ngIf="stateFormGroup.get('sourceType').value === TimeSeriesChartStateSourceType.constant"
+    @if (stateFormGroup.get('sourceType').value === TimeSeriesChartStateSourceType.constant) {
+      <tb-value-input
         formControlName="sourceValue"
         class="flex-1"
         [layout]="{
                     layout: 'column',
                     breakpoints: {'gt-sm': 'row'}
                  }">
-    </tb-value-input>
-    <mat-form-field
-        *ngIf="stateFormGroup.get('sourceType').value === TimeSeriesChartStateSourceType.range"
+      </tb-value-input>
+    }
+    @if (stateFormGroup.get('sourceType').value === TimeSeriesChartStateSourceType.range) {
+      <mat-form-field
         appearance="outline" class="tb-inline-field number" subscriptSizing="dynamic">
-      <input matInput formControlName="sourceRangeFrom" type="number" placeholder="{{ 'widgets.time-series-chart.state.from' | translate }}">
-    </mat-form-field>
-    <mat-form-field
-        *ngIf="stateFormGroup.get('sourceType').value === TimeSeriesChartStateSourceType.range"
+        <input matInput formControlName="sourceRangeFrom" type="number" placeholder="{{ 'widgets.time-series-chart.state.from' | translate }}">
+      </mat-form-field>
+    }
+    @if (stateFormGroup.get('sourceType').value === TimeSeriesChartStateSourceType.range) {
+      <mat-form-field
         appearance="outline" class="tb-inline-field number" subscriptSizing="dynamic">
-      <input matInput formControlName="sourceRangeTo" type="number" placeholder="{{ 'widgets.time-series-chart.state.to' | translate }}">
-    </mat-form-field>
+        <input matInput formControlName="sourceRangeTo" type="number" placeholder="{{ 'widgets.time-series-chart.state.to' | translate }}">
+      </mat-form-field>
+    }
   </div>
   <div class="tb-form-table-row-cell-buttons">
     <button type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html
index 0c0d9a47f5..9b653290b4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html
@@ -25,15 +25,23 @@
       <div class="tb-form-table-header-cell tb-state-source-value-header" translate>widgets.time-series-chart.state.value-range</div>
       <div class="tb-form-table-header-cell tb-actions-header"></div>
     </div>
-    <div *ngIf="statesFormArray().controls.length; else noStates" class="tb-form-table-body">
-      <div *ngFor="let stateControl of statesFormArray().controls; trackBy: trackByState; let $index = index; let $last = last">
-        <tb-time-series-chart-state-row class="flex-1"
-                                        [formControl]="stateControl"
-                                        (stateRemoved)="removeState($index)">
-        </tb-time-series-chart-state-row>
-        <mat-divider *ngIf="!$last"></mat-divider>
+    @if (statesFormArray().controls.length) {
+      <div class="tb-form-table-body">
+        @for (stateControl of statesFormArray().controls; track trackByState($index, stateControl)) {
+          <div>
+            <tb-time-series-chart-state-row class="flex-1"
+                                            [formControl]="stateControl"
+                                            (stateRemoved)="removeState($index)">
+            </tb-time-series-chart-state-row>
+            @if (!$last) {
+              <mat-divider></mat-divider>
+            }
+          </div>
+        }
       </div>
-    </div>
+    } @else {
+      <span class="tb-prompt flex items-center justify-center">{{ 'widgets.time-series-chart.state.no-states' | translate }}</span>
+    }
   </div>
   <div>
     <button type="button" mat-stroked-button color="primary" (click)="addState()">
@@ -41,6 +49,3 @@
     </button>
   </div>
 </div>
-<ng-template #noStates>
-  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.time-series-chart.state.no-states' | translate }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-row.component.html
index b603a8ddaa..30ec805710 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-row.component.html
@@ -19,69 +19,81 @@
   <div class="tb-threshold-source-field">
     <mat-form-field class="tb-inline-field tb-threshold-type-field" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="type">
-        <mat-option *ngFor="let type of timeSeriesThresholdTypes" [value]="type">
-          {{ timeSeriesThresholdTypeTranslations.get(type) | translate }}
-        </mat-option>
+        @for (type of timeSeriesThresholdTypes; track type) {
+          <mat-option [value]="type">
+            {{ timeSeriesThresholdTypeTranslations.get(type) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
-    <tb-entity-alias-input
-      *ngIf="thresholdFormGroup.get('type').value === TimeSeriesChartThresholdType.entity"
-      [aliasController]="aliasController"
-      required
-      formControlName="entityAlias">
-    </tb-entity-alias-input>
+    @if (thresholdFormGroup.get('type').value === TimeSeriesChartThresholdType.entity) {
+      <tb-entity-alias-input
+        [aliasController]="aliasController"
+        required
+        formControlName="entityAlias">
+      </tb-entity-alias-input>
+    }
   </div>
   <div class="tb-threshold-key-value-field">
-    <mat-form-field *ngIf="thresholdFormGroup.get('type').value === TimeSeriesChartThresholdType.constant"
-                    appearance="outline" class="tb-inline-field number" subscriptSizing="dynamic"
-                    [class.tb-suffix-absolute]="!thresholdFormGroup.get('value').value">
-      <input required matInput formControlName="value" type="number" placeholder="{{ 'widget-config.set' | translate }}">
-      <mat-icon matSuffix
-                matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
-                [matTooltip]="'widgets.time-series-chart.threshold.threshold-value-required' | translate"
-                *ngIf="thresholdFormGroup.get('value').hasError('required')
-                       && thresholdFormGroup.get('value').touched"
-                class="tb-error">
-        warning
-      </mat-icon>
-    </mat-form-field>
-    <tb-data-key-input
-      *ngIf="thresholdFormGroup.get('type').value === TimeSeriesChartThresholdType.latestKey"
-      required
-      requiredText="widgets.time-series-chart.threshold.key-required"
-      [datasourceType]="datasource?.type"
-      [entityAliasId]="datasource?.entityAliasId"
-      [deviceId]="datasource?.deviceId"
-      [aliasController]="aliasController"
-      [dataKeyType]="datasource?.type === DatasourceType.function ? DataKeyType.function : null"
-      [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
-      [callbacks]="dataKeyCallbacks"
-      [editable]="false"
-      [formControl]="latestKeyFormControl">
-    </tb-data-key-input>
-    <tb-data-key-input
-      *ngIf="thresholdFormGroup.get('type').value === TimeSeriesChartThresholdType.entity"
-      required
-      requiredText="widgets.time-series-chart.threshold.entity-key-required"
-      [datasourceType]="DatasourceType.entity"
-      [aliasController]="aliasController"
-      [entityAlias]="thresholdFormGroup.get('entityAlias').value"
-      [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
-      [callbacks]="dataKeyCallbacks"
-      [editable]="false"
-      [formControl]="entityKeyFormControl">
-    </tb-data-key-input>
-  </div>
-  <div *ngIf="!hideYAxis" class="tb-y-axis-field">
-    <mat-form-field class="tb-inline-field fixed-height" appearance="outline" subscriptSizing="dynamic">
-      <mat-select formControlName="yAxisId">
-        <mat-option *ngFor="let yAxis of yAxisIds" [value]="yAxis">
-          {{ yAxis }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
+    @if (thresholdFormGroup.get('type').value === TimeSeriesChartThresholdType.constant) {
+      <mat-form-field
+        appearance="outline" class="tb-inline-field number" subscriptSizing="dynamic"
+        [class.tb-suffix-absolute]="!thresholdFormGroup.get('value').value">
+        <input required matInput formControlName="value" type="number" placeholder="{{ 'widget-config.set' | translate }}">
+        @if (thresholdFormGroup.get('value').hasError('required')
+          && thresholdFormGroup.get('value').touched) {
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="'widgets.time-series-chart.threshold.threshold-value-required' | translate"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        }
+      </mat-form-field>
+    }
+    @if (thresholdFormGroup.get('type').value === TimeSeriesChartThresholdType.latestKey) {
+      <tb-data-key-input
+        required
+        requiredText="widgets.time-series-chart.threshold.key-required"
+        [datasourceType]="datasource?.type"
+        [entityAliasId]="datasource?.entityAliasId"
+        [deviceId]="datasource?.deviceId"
+        [aliasController]="aliasController"
+        [dataKeyType]="datasource?.type === DatasourceType.function ? DataKeyType.function : null"
+        [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
+        [callbacks]="dataKeyCallbacks"
+        [editable]="false"
+        [formControl]="latestKeyFormControl">
+      </tb-data-key-input>
+    }
+    @if (thresholdFormGroup.get('type').value === TimeSeriesChartThresholdType.entity) {
+      <tb-data-key-input
+        required
+        requiredText="widgets.time-series-chart.threshold.entity-key-required"
+        [datasourceType]="DatasourceType.entity"
+        [aliasController]="aliasController"
+        [entityAlias]="thresholdFormGroup.get('entityAlias').value"
+        [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
+        [callbacks]="dataKeyCallbacks"
+        [editable]="false"
+        [formControl]="entityKeyFormControl">
+      </tb-data-key-input>
+    }
   </div>
+  @if (!hideYAxis) {
+    <div class="tb-y-axis-field">
+      <mat-form-field class="tb-inline-field fixed-height" appearance="outline" subscriptSizing="dynamic">
+        <mat-select formControlName="yAxisId">
+          @for (yAxis of yAxisIds; track yAxis) {
+            <mat-option [value]="yAxis">
+              {{ yAxis }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+  }
   <div class="tb-color-field">
     <tb-color-input asBoxInput
                     colorClearButton
@@ -100,11 +112,11 @@
   </div>
   <div class="tb-form-table-row-cell-buttons">
     <tb-time-series-chart-threshold-settings
-        [widgetConfig]="widgetConfig"
-        [yAxisIds]="yAxisIds"
-        [hideYAxis]="hideYAxis"
-        icon="settings"
-        [formControl]="thresholdSettingsFormControl">
+      [widgetConfig]="widgetConfig"
+      [yAxisIds]="yAxisIds"
+      [hideYAxis]="hideYAxis"
+      icon="settings"
+      [formControl]="thresholdSettingsFormControl">
     </tb-time-series-chart-threshold-settings>
     <button type="button"
             mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
index 0db9359d98..a84710d903 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
@@ -18,16 +18,20 @@
 <div class="tb-threshold-settings-panel" [formGroup]="thresholdSettingsFormGroup">
   <div class="tb-threshold-settings-title">{{ panelTitle | translate }}</div>
   <div class="tb-threshold-settings-panel-content">
-    <div *ngIf="!hideYAxis" class="tb-form-row space-between column-xs">
-      <div translate>widgets.time-series-chart.axis.y-axis</div>
-      <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
-        <mat-select formControlName="yAxisId">
-          <mat-option *ngFor="let yAxis of yAxisIds" [value]="yAxis">
-            {{ yAxis }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
+    @if (!hideYAxis) {
+      <div class="tb-form-row space-between column-xs">
+        <div translate>widgets.time-series-chart.axis.y-axis</div>
+        <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="yAxisId">
+            @for (yAxis of yAxisIds; track yAxis) {
+              <mat-option [value]="yAxis">
+                {{ yAxis }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+    }
     <div class="tb-form-row space-between">
       <div translate>widget-config.units-short</div>
       <tb-unit-input
@@ -48,9 +52,11 @@
       <div class="flex lt-md:flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="labelPosition">
-            <mat-option *ngFor="let position of timeSeriesThresholdLabelPositions" [value]="position">
-              {{ timeSeriesThresholdLabelPositionTranslations.get(position) | translate }}
-            </mat-option>
+            @for (position of timeSeriesThresholdLabelPositions; track position) {
+              <mat-option [value]="position">
+                {{ timeSeriesThresholdLabelPositionTranslations.get(position) | translate }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <tb-font-settings formControlName="labelFont"
@@ -87,9 +93,11 @@
         <div translate>widgets.time-series-chart.line-type</div>
         <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="lineType">
-            <mat-option *ngFor="let lineType of chartLineTypes" [value]="lineType">
-              {{ chartLineTypeTranslations.get(lineType) | translate }}
-            </mat-option>
+            @for (lineType of chartLineTypes; track lineType) {
+              <mat-option [value]="lineType">
+                {{ chartLineTypeTranslations.get(lineType) | translate }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
@@ -104,9 +112,11 @@
         <div class="tb-flex row flex-end">
           <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="startSymbol">
-              <mat-option *ngFor="let shape of chartShapes" [value]="shape">
-                {{ chartShapeTranslations.get(shape) | translate }}
-              </mat-option>
+              @for (shape of chartShapes; track shape) {
+                <mat-option [value]="shape">
+                  {{ chartShapeTranslations.get(shape) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
           <div class="tb-small-label" translate>widgets.time-series-chart.threshold.symbol-size</div>
@@ -121,9 +131,11 @@
         <div class="tb-flex row flex-end">
           <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="endSymbol">
-              <mat-option *ngFor="let shape of chartShapes" [value]="shape">
-                {{ chartShapeTranslations.get(shape) | translate }}
-              </mat-option>
+              @for (shape of chartShapes; track shape) {
+                <mat-option [value]="shape">
+                  {{ chartShapeTranslations.get(shape) | translate }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
           <div class="tb-small-label" translate>widgets.time-series-chart.threshold.symbol-size</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings.component.html
index ae4e34f0ad..efa79920a9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings.component.html
@@ -15,18 +15,19 @@
     limitations under the License.
 
 -->
-<button *ngIf="boxButton; else iconButton"
-        type="button"
-        mat-stroked-button
-        class="tb-box-button"
-        [disabled]="disabled"
-        #matButton
-        (click)="openThresholdSettingsPopup($event, matButton)"
-        matTooltip="{{ title | translate }}"
-        matTooltipPosition="above">
-  <tb-icon matButtonIcon>{{icon}}</tb-icon>
-</button>
-<ng-template #iconButton>
+@if (boxButton) {
+  <button
+    type="button"
+    mat-stroked-button
+    class="tb-box-button"
+    [disabled]="disabled"
+    #matButton
+    (click)="openThresholdSettingsPopup($event, matButton)"
+    matTooltip="{{ title | translate }}"
+    matTooltipPosition="above">
+    <tb-icon matButtonIcon>{{icon}}</tb-icon>
+  </button>
+} @else {
   <button type="button"
           mat-icon-button
           [disabled]="disabled"
@@ -36,4 +37,4 @@
           matTooltipPosition="above">
     <tb-icon>{{icon}}</tb-icon>
   </button>
-</ng-template>
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html
index 448a31fec0..c2dd3ffab4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html
@@ -21,24 +21,34 @@
     <div class="tb-form-table-header">
       <div class="tb-form-table-header-cell tb-threshold-source-header" translate>widgets.time-series-chart.threshold.source</div>
       <div class="tb-form-table-header-cell tb-threshold-key-value-header" translate>widgets.time-series-chart.threshold.key-value</div>
-      <div *ngIf="!hideYAxis" class="tb-form-table-header-cell tb-y-axis-header" translate>widgets.time-series-chart.axis.y-axis</div>
+      @if (!hideYAxis) {
+        <div class="tb-form-table-header-cell tb-y-axis-header" translate>widgets.time-series-chart.axis.y-axis</div>
+      }
       <div class="tb-form-table-header-cell tb-color-header" translate>widgets.color.color</div>
       <div class="tb-form-table-header-cell tb-units-header" translate>widget-config.units-short</div>
       <div class="tb-form-table-header-cell tb-decimals-header" translate>widget-config.decimals-short</div>
       <div class="tb-form-table-header-cell tb-actions-header"></div>
     </div>
-    <div *ngIf="thresholdsFormArray().controls.length; else noThresholds" class="tb-form-table-body">
-      <div *ngFor="let thresholdControl of thresholdsFormArray().controls; trackBy: trackByThreshold; let $index = index; let $last = last">
-        <tb-time-series-chart-threshold-row class="flex-1"
-                                    [formControl]="thresholdControl"
-                                    [hideYAxis]="hideYAxis"
-                                    [yAxisIds]="yAxisIds"
-                                    [supportsUnitConversion]="supportsUnitConversion"
-                                    (thresholdRemoved)="removeThreshold($index)">
-        </tb-time-series-chart-threshold-row>
-        <mat-divider *ngIf="!$last"></mat-divider>
+    @if (thresholdsFormArray().controls.length) {
+      <div class="tb-form-table-body">
+        @for (thresholdControl of thresholdsFormArray().controls; track trackByThreshold($index, thresholdControl)) {
+          <div>
+            <tb-time-series-chart-threshold-row class="flex-1"
+                                                [formControl]="thresholdControl"
+                                                [hideYAxis]="hideYAxis"
+                                                [yAxisIds]="yAxisIds"
+                                                [supportsUnitConversion]="supportsUnitConversion"
+                                                (thresholdRemoved)="removeThreshold($index)">
+            </tb-time-series-chart-threshold-row>
+            @if (!$last) {
+              <mat-divider></mat-divider>
+            }
+          </div>
+        }
       </div>
-    </div>
+    } @else {
+      <span class="tb-prompt flex items-center justify-center">{{ 'widgets.time-series-chart.threshold.no-thresholds' | translate }}</span>
+    }
   </div>
   <div>
     <button type="button" mat-stroked-button color="primary" (click)="addThreshold()">
@@ -46,6 +56,3 @@
     </button>
   </div>
 </div>
-<ng-template #noThresholds>
-  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.time-series-chart.threshold.no-thresholds' | translate }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html
index 0272dd60d2..86c54762c4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html
@@ -33,27 +33,29 @@
          cdkDropList cdkDropListOrientation="vertical"
          [cdkDropListDisabled]="!dragEnabled"
          (cdkDropListDropped)="axisDrop($event)">
-      <div cdkDrag [cdkDragDisabled]="!dragEnabled"
-           class="tb-draggable-form-table-row"
-           *ngFor="let axisControl of axesFormArray().controls; trackBy: trackByAxis; let $index = index;">
-        <tb-time-series-chart-y-axis-row class="flex-1"
-                                            [formControl]="axisControl"
-                                            [advanced]="advanced"
-                                            [supportsUnitConversion]="supportsUnitConversion"
-                                            (axisRemoved)="removeAxis($index)">
-        </tb-time-series-chart-y-axis-row>
-        <div class="tb-form-table-row-cell-buttons">
-          <button class="lt-lg:!hidden"
-                  [class.tb-hidden]="!dragEnabled"
-                  mat-icon-button
-                  type="button"
-                  cdkDragHandle
-                  matTooltip="{{ 'action.drag' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>drag_indicator</mat-icon>
-          </button>
+      @for (axisControl of axesFormArray().controls; track trackByAxis($index, axisControl)) {
+        <div cdkDrag [cdkDragDisabled]="!dragEnabled"
+             class="tb-draggable-form-table-row"
+             >
+          <tb-time-series-chart-y-axis-row class="flex-1"
+                                           [formControl]="axisControl"
+                                           [advanced]="advanced"
+                                           [supportsUnitConversion]="supportsUnitConversion"
+                                           (axisRemoved)="removeAxis($index)">
+          </tb-time-series-chart-y-axis-row>
+          <div class="tb-form-table-row-cell-buttons">
+            <button class="lt-lg:!hidden"
+                    [class.tb-hidden]="!dragEnabled"
+                    mat-icon-button
+                    type="button"
+                    cdkDragHandle
+                    matTooltip="{{ 'action.drag' | translate }}"
+                    matTooltipPosition="above">
+              <mat-icon>drag_indicator</mat-icon>
+            </button>
+          </div>
         </div>
-      </div>
+      }
     </div>
   </div>
   <div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.html
index 6d6f492619..ceb34f83c7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.html
@@ -25,9 +25,11 @@
   </mat-form-field>
   <mat-form-field class="tb-inline-field tb-position-field" appearance="outline" subscriptSizing="dynamic">
     <mat-select formControlName="position">
-      <mat-option *ngFor="let position of axisPositions" [value]="position">
-        {{ timeSeriesAxisPositionTranslations.get(position) | translate }}
-      </mat-option>
+      @for (position of axisPositions; track position) {
+        <mat-option [value]="position">
+          {{ timeSeriesAxisPositionTranslations.get(position) | translate }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <div class="tb-min-field" formGroupName="min">
@@ -59,14 +61,16 @@
       <mat-icon>settings</mat-icon>
     </button>
     <div class="tb-remove-button">
-      <button *ngIf="modelValue.id !== 'default'"
-              type="button"
-              mat-icon-button
-              (click)="axisRemoved.emit()"
-              matTooltip="{{ 'widgets.time-series-chart.axis.remove-y-axis' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>delete</mat-icon>
-      </button>
+      @if (modelValue.id !== 'default') {
+        <button
+          type="button"
+          mat-icon-button
+          (click)="axisRemoved.emit()"
+          matTooltip="{{ 'widgets.time-series-chart.axis.remove-y-axis' | translate }}"
+          matTooltipPosition="above">
+          <mat-icon>delete</mat-icon>
+        </button>
+      }
     </div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html
index eb3f84eb0e..58e1a108f0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html
@@ -19,12 +19,14 @@
   <div class="flex flex-row items-center justify-between">
     <div class="flex-1" translate>widgets.time-series-chart.no-aggregation-bar-width-strategy</div>
     <tb-toggle-select formControlName="strategy" selectMediaBreakpoint="xs">
-      <tb-toggle-option *ngFor="let strategy of timeSeriesChartNoAggregationBarWidthStrategies" [value]="strategy">
-        {{ timeSeriesChartNoAggregationBarWidthStrategyTranslations.get(strategy) | translate }}
-      </tb-toggle-option>
+      @for (strategy of timeSeriesChartNoAggregationBarWidthStrategies; track strategy) {
+        <tb-toggle-option [value]="strategy">
+          {{ timeSeriesChartNoAggregationBarWidthStrategyTranslations.get(strategy) | translate }}
+        </tb-toggle-option>
+      }
     </tb-toggle-select>
   </div>
-  <ng-container *ngIf="barWidthSettingsFormGroup.get('strategy').value === TimeSeriesChartNoAggregationBarWidthStrategy.group">
+  @if (barWidthSettingsFormGroup.get('strategy').value === TimeSeriesChartNoAggregationBarWidthStrategy.group) {
     <ng-container
       *ngTemplateOutlet="barWidth;
       context: {
@@ -32,8 +34,8 @@
         label: 'widgets.time-series-chart.bar-group-width'
       }">
     </ng-container>
-  </ng-container>
-  <ng-container *ngIf="barWidthSettingsFormGroup.get('strategy').value === TimeSeriesChartNoAggregationBarWidthStrategy.separate">
+  }
+  @if (barWidthSettingsFormGroup.get('strategy').value === TimeSeriesChartNoAggregationBarWidthStrategy.separate) {
     <ng-container
       *ngTemplateOutlet="barWidth;
       context: {
@@ -41,7 +43,7 @@
         label: 'widgets.time-series-chart.bar-width'
       }">
     </ng-container>
-  </ng-container>
+  }
 </div>
 <ng-template #barWidth let-label="label" let-formGroup="formGroup">
   <div class="tb-form-row space-between column-lt-md" [formGroup]="formGroup">
@@ -51,8 +53,8 @@
         <mat-select formControlName="relative">
           <mat-select-trigger>
             {{ (formGroup.get('relative').value ?
-               'widgets.time-series-chart.bar-width-relative' :
-               'widgets.time-series-chart.bar-width-absolute') | translate }}
+            'widgets.time-series-chart.bar-width-relative' :
+            'widgets.time-series-chart.bar-width-absolute') | translate }}
           </mat-select-trigger>
           <mat-option [value]="true">
             {{ 'widgets.time-series-chart.bar-width-relative' | translate }}
@@ -62,14 +64,18 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field *ngIf="formGroup.get('relative').value" class="number fixed-width" appearance="outline" subscriptSizing="dynamic">
-        <input required matInput type="number" formControlName="relativeWidth" min="0.1" max="100" placeholder="{{ 'widget-config.set' | translate }}"/>
-        <span matSuffix>%</span>
-      </mat-form-field>
-      <mat-form-field *ngIf="!formGroup.get('relative').value" class="number fixed-width" appearance="outline" subscriptSizing="dynamic">
-        <input required matInput type="number" formControlName="absoluteWidth" min="100" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
-        <span matSuffix>ms</span>
-      </mat-form-field>
+      @if (formGroup.get('relative').value) {
+        <mat-form-field class="number fixed-width" appearance="outline" subscriptSizing="dynamic">
+          <input required matInput type="number" formControlName="relativeWidth" min="0.1" max="100" placeholder="{{ 'widget-config.set' | translate }}"/>
+          <span matSuffix>%</span>
+        </mat-form-field>
+      }
+      @if (!formGroup.get('relative').value) {
+        <mat-form-field class="number fixed-width" appearance="outline" subscriptSizing="dynamic">
+          <input required matInput type="number" formControlName="absoluteWidth" min="100" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
+          <span matSuffix>ms</span>
+        </mat-form-field>
+      }
     </div>
   </div>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html
index 83aee39785..d92497ed52 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html
@@ -16,94 +16,96 @@
 
 -->
 <ng-container  [formGroup]="colorRangeListFormGroup">
-  <div class="flex flex-row items-center justify-start" *ngIf="advancedMode; else basicMode">
-    <div class="tb-form-panel-title flex-1" translate>widgets.color.settings-type</div>
-    <tb-toggle-select formControlName="advancedMode" class="flex-1">
-      <tb-toggle-option [value]="false">
-        {{ 'widgets.color.basic-mode' | translate }}
-      </tb-toggle-option>
-      <tb-toggle-option [value]="true">
-        {{ 'widgets.color.advanced-mode' | translate}}
-      </tb-toggle-option>
-    </tb-toggle-select>
-  </div>
-
-  <ng-template #basicMode>
+  @if (advancedMode) {
     <div class="flex flex-row items-center justify-start">
-      <div *ngIf="panelTitle" class="tb-form-panel-title flex-1">{{ panelTitle }}</div>
+      <div class="tb-form-panel-title flex-1" translate>widgets.color.settings-type</div>
+      <tb-toggle-select formControlName="advancedMode" class="flex-1">
+        <tb-toggle-option [value]="false">
+          {{ 'widgets.color.basic-mode' | translate }}
+        </tb-toggle-option>
+        <tb-toggle-option [value]="true">
+          {{ 'widgets.color.advanced-mode' | translate}}
+        </tb-toggle-option>
+      </tb-toggle-select>
     </div>
-  </ng-template>
-
-  <div class="tb-color-ranges" [ngSwitch]="colorRangeListFormGroup.get('advancedMode').value">
-    <ng-template [ngSwitchCase]="false">
-      <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
-           (cdkDropListDropped)="rangeDrop($event, 'range')">
-        <div cdkDrag class="tb-draggable tb-advanced-range-drag"
-             [formGroup]="rangeFormGroup"
-             *ngFor="let rangeFormGroup of rangeListFormGroups; trackBy: trackByRange; let $index = index; last as isLast;"
-             [class.pb-2]="!isLast">
-          <div class="flex flex-1 flex-row items-center justify-start">
-            <div class="tb-form-row range-container">
-              <div class="tb-value-range-text" translate>widgets.color.from</div>
-              <mat-form-field appearance="outline" class="center number flex-1" subscriptSizing="dynamic">
-                <input matInput type="number" formControlName="from" placeholder="{{ 'widget-config.set' | translate }}">
-              </mat-form-field>
+  } @else {
+    <div class="flex flex-row items-center justify-start">
+      @if (panelTitle) {
+        <div class="tb-form-panel-title flex-1">{{ panelTitle }}</div>
+      }
+    </div>
+  }
 
-              <div class="tb-value-range-text tb-value-range-text-to" translate>widgets.color.to</div>
-              <mat-form-field appearance="outline" class="center number flex-1" subscriptSizing="dynamic">
-                <input matInput type="number" formControlName="to" placeholder="{{ 'widget-config.set' | translate }}">
-              </mat-form-field>
 
-              <tb-color-input asBoxInput
-                              formControlName="color">
-              </tb-color-input>
+  <div class="tb-color-ranges">
+    @switch (colorRangeListFormGroup.get('advancedMode').value) {
+      @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) {
+            <div cdkDrag class="tb-draggable tb-advanced-range-drag"
+                 [formGroup]="rangeFormGroup"
+                 [class.pb-2]="!isLast">
+              <div class="flex flex-1 flex-row items-center justify-start">
+                <div class="tb-form-row range-container">
+                  <div class="tb-value-range-text" translate>widgets.color.from</div>
+                  <mat-form-field appearance="outline" class="center number flex-1" subscriptSizing="dynamic">
+                    <input matInput type="number" formControlName="from" placeholder="{{ 'widget-config.set' | translate }}">
+                  </mat-form-field>
+                  <div class="tb-value-range-text tb-value-range-text-to" translate>widgets.color.to</div>
+                  <mat-form-field appearance="outline" class="center number flex-1" subscriptSizing="dynamic">
+                    <input matInput type="number" formControlName="to" placeholder="{{ 'widget-config.set' | translate }}">
+                  </mat-form-field>
+                  <tb-color-input asBoxInput
+                                  formControlName="color">
+                  </tb-color-input>
+                </div>
+                <button type="button"
+                        mat-icon-button
+                        class="tb-box-button"
+                        (click)="removeRange($index)"
+                        matTooltip="{{ 'action.remove' | translate }}"
+                        matTooltipPosition="above">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </div>
+              <button class="tb-box-button"
+                      mat-icon-button
+                      type="button"
+                      cdkDragHandle
+                      matTooltip="{{ 'action.drag' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>drag_indicator</mat-icon>
+              </button>
             </div>
-            <button type="button"
-                    mat-icon-button
-                    class="tb-box-button"
-                    (click)="removeRange($index)"
-                    matTooltip="{{ 'action.remove' | translate }}"
-                    matTooltipPosition="above">
-              <mat-icon>delete</mat-icon>
-            </button>
-          </div>
-          <button class="tb-box-button"
-                  mat-icon-button
-                  type="button"
-                  cdkDragHandle
-                  matTooltip="{{ 'action.drag' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>drag_indicator</mat-icon>
-          </button>
+          }
         </div>
-      </div>
-    </ng-template>
-    <ng-template [ngSwitchCase]="true">
-
-      <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
-           (cdkDropListDropped)="rangeDrop($event, 'rangeAdvanced')">
-        <div cdkDrag class="tb-draggable tb-advanced-range-drag"
-             *ngFor="let advancedRangeControl of advancedRangeControls; trackBy: trackByAdvancedRange;let $index = index; last as isLast;"
-             [class.pb-2]="!isLast">
-          <tb-advanced-range [formControl]="advancedRangeControl"
-                             [aliasController]="aliasController"
-                             [dataKeyCallbacks]="dataKeyCallbacks"
-                             [datasource]="datasource"
-                             (removeAdvancedRange)="removeAdvancedRange($index)">
-          </tb-advanced-range>
-          <button class="tb-box-button"
-                  mat-icon-button
-                  type="button"
-                  cdkDragHandle
-                  matTooltip="{{ 'action.drag' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>drag_indicator</mat-icon>
-          </button>
+      }
+      @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) {
+            <div cdkDrag class="tb-draggable tb-advanced-range-drag"
+                 [class.pb-2]="!isLast">
+              <tb-advanced-range [formControl]="advancedRangeControl"
+                                 [aliasController]="aliasController"
+                                 [dataKeyCallbacks]="dataKeyCallbacks"
+                                 [datasource]="datasource"
+                                 (removeAdvancedRange)="removeAdvancedRange($index)">
+              </tb-advanced-range>
+              <button class="tb-box-button"
+                      mat-icon-button
+                      type="button"
+                      cdkDragHandle
+                      matTooltip="{{ 'action.drag' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>drag_indicator</mat-icon>
+              </button>
+            </div>
+          }
         </div>
-      </div>
-
-    </ng-template>
-
+      }
+    }
   </div>
   <div class="tb-add-color-range">
     <button mat-stroked-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html
index 8943690632..cd0c642119 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html
@@ -24,34 +24,38 @@
     </tb-color-range-list>
   </div>
   <div class="tb-color-settings-panel-buttons">
-      <button *ngIf="settingsComponents?.length"
-              #copySettingsButton
-              mat-stroked-button
-              color="primary"
-              type="button"
-              [matMenuTriggerFor]="settingsSourcesMenu" [matMenuTriggerData]="{menuWidth: copySettingsButton._elementRef.nativeElement.clientWidth}">
+    @if (settingsComponents?.length) {
+      <button
+        #copySettingsButton
+        mat-stroked-button
+        color="primary"
+        type="button"
+        [matMenuTriggerFor]="settingsSourcesMenu" [matMenuTriggerData]="{menuWidth: copySettingsButton._elementRef.nativeElement.clientWidth}">
         {{ 'widgets.color.copy-color-settings-from' | translate }}
       </button>
-      <mat-menu #settingsSourcesMenu="matMenu">
-        <ng-template matMenuContent let-menuWidth="menuWidth">
-          <div [style.min-width.px]="menuWidth">
-            <button mat-menu-item *ngFor="let comp of settingsComponents" (click)="copyColorSettings(comp)">{{ comp.settingsKey }}</button>
-          </div>
-        </ng-template>
-      </mat-menu>
-      <span class="flex-1"></span>
-      <button mat-button
-              color="primary"
-              type="button"
-              (click)="cancel()">
-        {{ 'action.cancel' | translate }}
-      </button>
-      <button mat-raised-button
-              color="primary"
-              type="button"
-              (click)="applyColorRangeSettings()"
-              [disabled]="colorRangeFormGroup.invalid || !colorRangeFormGroup.dirty">
-        {{ 'action.apply' | translate }}
-      </button>
+    }
+    <mat-menu #settingsSourcesMenu="matMenu">
+      <ng-template matMenuContent let-menuWidth="menuWidth">
+        <div [style.min-width.px]="menuWidth">
+          @for (comp of settingsComponents; track comp) {
+            <button mat-menu-item (click)="copyColorSettings(comp)">{{ comp.settingsKey }}</button>
+          }
+        </div>
+      </ng-template>
+    </mat-menu>
+    <span class="flex-1"></span>
+    <button mat-button
+            color="primary"
+            type="button"
+            (click)="cancel()">
+      {{ 'action.cancel' | translate }}
+    </button>
+    <button mat-raised-button
+            color="primary"
+            type="button"
+            (click)="applyColorRangeSettings()"
+            [disabled]="colorRangeFormGroup.invalid || !colorRangeFormGroup.dirty">
+      {{ 'action.apply' | translate }}
+    </button>
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
index f48319af75..2c69cf1fe6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
@@ -19,10 +19,12 @@
   <div class="tb-color-settings-title" translate>widgets.color.color-settings</div>
   <div class="flex flex-row">
     <tb-toggle-select formControlName="type" class="max-w-70% flex-full xs:flex-1">
-      <tb-toggle-option *ngFor="let type of colorTypes"
-                        [value]="type">
-        {{ colorTypeTranslationsMap.get(type) | translate }}
-      </tb-toggle-option>
+      @for (type of colorTypes; track type) {
+        <tb-toggle-option
+          [value]="type">
+          {{ colorTypeTranslationsMap.get(type) | translate }}
+        </tb-toggle-option>
+      }
     </tb-toggle-select>
   </div>
   <div class="tb-form-row space-between">
@@ -60,19 +62,23 @@
     <ng-container *ngTemplateOutlet="function"></ng-container>
   </div>
   <div class="tb-color-settings-panel-buttons">
-    <button *ngIf="settingsComponents?.length"
-            #copySettingsButton
-            mat-stroked-button
-            color="primary"
-            type="button"
-            [matMenuTriggerFor]="settingsSourcesMenu" [matMenuTriggerData]="{menuWidth: copySettingsButton._elementRef.nativeElement.clientWidth}">
-      <span class="xs:!hidden">{{ 'widgets.color.copy-color-settings-from' | translate }}</span>
-      <span class="gt-xs:!hidden">{{ 'widgets.color.copy-from' | translate }}</span>
-    </button>
+    @if (settingsComponents?.length) {
+      <button
+        #copySettingsButton
+        mat-stroked-button
+        color="primary"
+        type="button"
+        [matMenuTriggerFor]="settingsSourcesMenu" [matMenuTriggerData]="{menuWidth: copySettingsButton._elementRef.nativeElement.clientWidth}">
+        <span class="xs:!hidden">{{ 'widgets.color.copy-color-settings-from' | translate }}</span>
+        <span class="gt-xs:!hidden">{{ 'widgets.color.copy-from' | translate }}</span>
+      </button>
+    }
     <mat-menu #settingsSourcesMenu="matMenu">
       <ng-template matMenuContent let-menuWidth="menuWidth">
         <div [style.min-width.px]="menuWidth">
-          <button mat-menu-item *ngFor="let comp of settingsComponents" (click)="copyColorSettings(comp)">{{ comp.settingsKey }}</button>
+          @for (comp of settingsComponents; track comp) {
+            <button mat-menu-item (click)="copyColorSettings(comp)">{{ comp.settingsKey }}</button>
+          }
         </div>
       </ng-template>
     </mat-menu>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html
index 6306af7c15..101b022685 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html
@@ -21,10 +21,11 @@
         [disabled]="disabled"
         #matButton
         (click)="openColorSettingsPopup($event, matButton)">
-  <tb-icon matButtonIcon *ngIf="modelValue?.type === colorType.function; else colorPreview">mdi:function-variant</tb-icon>
+  @if (modelValue?.type === colorType.function) {
+    <tb-icon matButtonIcon>mdi:function-variant</tb-icon>
+  } @else {
+    <div class="tb-color-preview box" [class.disabled]="disabled">
+      <div class="tb-color-result" [style]="colorStyle"></div>
+    </div>
+  }
 </button>
-<ng-template #colorPreview>
-  <div class="tb-color-preview box" [class.disabled]="disabled">
-    <div class="tb-color-result" [style]="colorStyle"></div>
-  </div>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
index 08a0246217..993bea21a2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
@@ -21,12 +21,14 @@
                                     breakpoints: {
                                       'lt-md': 1
                                     }}"
-                         label="{{ 'widgets.count.layout' | translate }}" formControlName="layout">
-    <tb-image-cards-select-option *ngFor="let layout of countCardLayouts"
-                                  [value]="layout"
-                                  [image]="countCardLayoutImageMap.get(layout)">
-      {{ countCardLayoutTranslationMap.get(layout) | translate }}
-    </tb-image-cards-select-option>
+    label="{{ 'widgets.count.layout' | translate }}" formControlName="layout">
+    @for (layout of countCardLayouts; track layout) {
+      <tb-image-cards-select-option
+        [value]="layout"
+        [image]="countCardLayoutImageMap.get(layout)">
+        {{ countCardLayoutTranslationMap.get(layout) | translate }}
+      </tb-image-cards-select-option>
+    }
   </tb-image-cards-select>
   <div class="tb-form-row">
     <mat-slide-toggle class="mat-slide" formControlName="autoScale">
@@ -42,16 +44,16 @@
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-      }@else {
+        }@else {
         <tb-string-pattern-autocomplete class="flex-1"
-                                      appearance="outline"
-                                      brackets="curly"
-                                      subscriptSizing="dynamic"
-                                      predefinedValuesButton="true"
-                                      [disabled]="!countWidgetConfigForm.get('showLabel').value"
-                                      [predefinedValues]="predefinedValues"
-                                      placeholderText="{{ 'widget-config.set' | translate }}"
-                                      formControlName="label"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!countWidgetConfigForm.get('showLabel').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="label"
         ></tb-string-pattern-autocomplete>
       }
       <tb-font-settings formControlName="labelFont"
@@ -76,7 +78,7 @@
                                [backgroundColor]="countWidgetConfigForm.get('iconBackgroundColor').enabled
                                                           ? countWidgetConfigForm.get('iconBackgroundColor').value?.color
                                                           : ''"
-                               formControlName="icon">
+        formControlName="icon">
       </tb-material-icon-select>
       <tb-color-settings formControlName="iconColor" settingsKey="{{'widgets.count.icon' | translate }}">
       </tb-color-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html
index 1881fa7336..008f63544d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html
@@ -19,16 +19,17 @@
   <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute number" [class.flex]="flex">
     <input matInput [required]="required"
            type="number" min="0" formControlName="size" placeholder="{{ 'widget-config.set' | translate }}">
-    <mat-icon matSuffix
-              matTooltipPosition="above"
-              matTooltipClass="tb-error-tooltip"
+    @if (cssSizeFormGroup.get('size').invalid && cssSizeFormGroup.get('size').touched) {
+      <mat-icon matSuffix
+                matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
               [matTooltip]="cssSizeFormGroup.get('size').hasError('required') ? ((requiredText ? requiredText : 'css-size.size-value-required') | translate) :
                                ('css-size.invalid-size-value' | translate)"
-              *ngIf="cssSizeFormGroup.get('size').invalid && cssSizeFormGroup.get('size').touched"
-              class="tb-error">
-      warning
-    </mat-icon>
+        class="tb-error">
+        warning
+      </mat-icon>
+    }
   </mat-form-field>
   <tb-css-unit-select [allowEmpty]="allowEmptyUnit" [style.flex]="flex ? '1' : null"
-                      [width]="flex ? '100%' : ''" formControlName="unit"></tb-css-unit-select>
+  [width]="flex ? '100%' : ''" formControlName="unit"></tb-css-unit-select>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-unit-select.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-unit-select.component.html
index 3ca5657b2a..61d1d54684 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-unit-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-unit-select.component.html
@@ -17,8 +17,12 @@
 -->
 <mat-form-field appearance="outline" subscriptSizing="dynamic" [style.width]="width">
   <mat-select [formControl]="cssUnitFormControl" placeholder="{{ 'widget-config.set' | translate }}">
-    <mat-option *ngIf="allowEmpty" [value]="null">
-    </mat-option>
-    <mat-option *ngFor="let cssUnit of cssUnitsList" [value]="cssUnit">{{ cssUnit }}</mat-option>
+    @if (allowEmpty) {
+      <mat-option [value]="null">
+      </mat-option>
+    }
+    @for (cssUnit of cssUnitsList; track cssUnit) {
+      <mat-option [value]="cssUnit">{{ cssUnit }}</mat-option>
+    }
   </mat-select>
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.html
index 710d44774c..fbdb34748a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.html
@@ -17,15 +17,20 @@
 -->
 <mat-form-field appearance="outline" subscriptSizing="dynamic" style="width: 100%;">
   <mat-select [formControl]="dateFormatFormControl" [compareWith]="dateFormatsCompare" >
-    <mat-option *ngFor="let dateFormat of dateFormatList" [value]="dateFormat">{{ dateFormatDisplayValue(dateFormat) }}</mat-option>
+    @for (dateFormat of dateFormatList; track dateFormat) {
+      <mat-option [value]="dateFormat">{{ dateFormatDisplayValue(dateFormat) }}</mat-option>
+    }
   </mat-select>
-  <button #customFormatButton
-          *ngIf="dateFormatFormControl.value?.custom" matSuffix mat-icon-button (click)="openDateFormatSettingsPopup($event, customFormatButton)">
-    <tb-icon>edit</tb-icon>
-  </button>
-  <button #autoFormatButton
-          *ngIf="dateFormatFormControl.value?.auto && !dateFormatFormControl.value?.custom"
-          matSuffix mat-icon-button (click)="openAutoFormatSettingsPopup($event, autoFormatButton)">
-    <tb-icon>edit</tb-icon>
-  </button>
+  @if (dateFormatFormControl.value?.custom) {
+    <button #customFormatButton
+            matSuffix mat-icon-button (click)="openDateFormatSettingsPopup($event, customFormatButton)">
+      <tb-icon>edit</tb-icon>
+    </button>
+  }
+  @if (dateFormatFormControl.value?.auto && !dateFormatFormControl.value?.custom) {
+    <button #autoFormatButton
+            matSuffix mat-icon-button (click)="openAutoFormatSettingsPopup($event, autoFormatButton)">
+      <tb-icon>edit</tb-icon>
+    </button>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-array.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-array.component.html
index c7ece2becf..84aa13bccb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-array.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-array.component.html
@@ -23,52 +23,59 @@
       </mat-panel-title>
     </mat-expansion-panel-header>
     <ng-template matExpansionPanelContent>
-      <div *ngIf="propertiesFormArray().controls.length; else noProperties" class="tb-dynamic-form-array-body tb-drop-list"
-           cdkDropList cdkDropListOrientation="vertical"
-           [cdkDropListDisabled]="!dragEnabled"
-           (cdkDropListDropped)="propertyDrop($event)">
-        <div cdkDrag [cdkDragDisabled]="!dragEnabled"
-             class="tb-draggable tb-dynamic-form-array-row"
-             *ngFor="let propertyControl of propertiesFormArray().controls; trackBy: trackByProperty; let $index = index;">
-          <div class="tb-dynamic-form-item-index-container">
-            <div class="tb-dynamic-form-item-index">{{$index + 1}}</div>
-          </div>
-          <tb-dynamic-form class="flex-1"
-                           [properties]="[itemProperty]"
-                           [formControl]="propertyControl"
-                           isArrayItem noPadding noBorder>
-          </tb-dynamic-form>
-          <div class="tb-dynamic-form-array-buttons">
-            <button mat-icon-button
-                    *ngIf="!disabled"
-                    type="button"
-                    (click)="removeProperty($index)"
-                    matTooltip="{{ 'action.delete' | translate }}"
-                    matTooltipPosition="above">
-              <mat-icon>delete</mat-icon>
-            </button>
-            <button mat-icon-button
-                    *ngIf="!disabled"
-                    type="button"
-                    cdkDragHandle
-                    [class.tb-hidden]="!dragEnabled"
-                    matTooltip="{{ 'action.drag' | translate }}"
-                    matTooltipPosition="above">
-              <mat-icon>drag_indicator</mat-icon>
-            </button>
-          </div>
+      @if (propertiesFormArray().controls.length) {
+        <div class="tb-dynamic-form-array-body tb-drop-list"
+             cdkDropList cdkDropListOrientation="vertical"
+             [cdkDropListDisabled]="!dragEnabled"
+             (cdkDropListDropped)="propertyDrop($event)">
+          @for (propertyControl of propertiesFormArray().controls; track trackByProperty($index, propertyControl)) {
+            <div cdkDrag [cdkDragDisabled]="!dragEnabled"
+                 class="tb-draggable tb-dynamic-form-array-row"
+                 >
+              <div class="tb-dynamic-form-item-index-container">
+                <div class="tb-dynamic-form-item-index">{{$index + 1}}</div>
+              </div>
+              <tb-dynamic-form class="flex-1"
+                               [properties]="[itemProperty]"
+                               [formControl]="propertyControl"
+                               isArrayItem noPadding noBorder>
+              </tb-dynamic-form>
+              <div class="tb-dynamic-form-array-buttons">
+                @if (!disabled) {
+                  <button mat-icon-button
+                          type="button"
+                          (click)="removeProperty($index)"
+                          matTooltip="{{ 'action.delete' | translate }}"
+                          matTooltipPosition="above">
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                }
+                @if (!disabled) {
+                  <button mat-icon-button
+                          type="button"
+                          cdkDragHandle
+                          [class.tb-hidden]="!dragEnabled"
+                          matTooltip="{{ 'action.drag' | translate }}"
+                          matTooltipPosition="above">
+                    <mat-icon>drag_indicator</mat-icon>
+                  </button>
+                }
+              </div>
+            </div>
+          }
         </div>
-      </div>
-      <div *ngIf="!disabled || !propertiesFormArray().controls.length" [class.invisible]="disabled">
-        <button type="button" mat-stroked-button color="primary" (click)="addProperty()">
-          <mat-icon>add</mat-icon>
-          {{ 'action.add' | translate }}
-        </button>
-      </div>
+      } @else {
+        <span class="tb-prompt flex items-center justify-center">{{ 'dynamic-form.property.no-items' | translate }}</span>
+      }
+      @if (!disabled || !propertiesFormArray().controls.length) {
+        <div [class.invisible]="disabled">
+          <button type="button" mat-stroked-button color="primary" (click)="addProperty()">
+            <mat-icon>add</mat-icon>
+            {{ 'action.add' | translate }}
+          </button>
+        </div>
+      }
     </ng-template>
   </mat-expansion-panel>
 </div>
 
-<ng-template #noProperties>
-  <span class="tb-prompt flex items-center justify-center">{{ 'dynamic-form.property.no-items' | translate }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-properties.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-properties.component.html
index 885fa20ee4..062f300d6b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-properties.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-properties.component.html
@@ -22,72 +22,83 @@
       <div class="tb-form-table-header-cell tb-name-header" translate>dynamic-form.property.name</div>
       <div class="tb-form-table-header-cell tb-type-header" translate>dynamic-form.property.type</div>
       <div class="tb-form-table-header-cell tb-actions-header tb-form-table-row-cell-buttons justify-end" [class.disabled]="disabled">
-        <button mat-icon-button
-                *ngIf="!disabled && importExport"
-                type="button"
-                matTooltip="{{ 'dynamic-form.import-form' | translate }}"
-                matTooltipPosition="above"
-                (click)="import($event)">
-          <tb-icon>mdi:file-import</tb-icon>
-        </button>
-        <button mat-icon-button
-                *ngIf="!disabled && importExport"
-                [class.tb-hidden]="!propertiesFormArray().controls.length"
-                type="button"
-                [disabled]="!propertiesFormArray().controls.length"
-                matTooltip="{{ 'dynamic-form.export-form' | translate }}"
-                matTooltipPosition="above"
-                (click)="export($event)">
-          <tb-icon>mdi:file-export</tb-icon>
-        </button>
-        <button mat-icon-button
-                *ngIf="!disabled"
-                [class.tb-hidden]="!propertiesFormArray().controls.length"
-                type="button"
-                [disabled]="!propertiesFormArray().controls.length"
-                matTooltip="{{ 'dynamic-form.clear-form' | translate }}"
-                matTooltipPosition="above"
-                (click)="clear($event)">
-          <tb-icon>mdi:broom</tb-icon>
-        </button>
-      </div>
-    </div>
-    <div *ngIf="propertiesFormArray().controls.length; else noProperties" class="tb-form-table-body tb-drop-list"
-         cdkDropList cdkDropListOrientation="vertical"
-         [cdkDropListDisabled]="!dragEnabled"
-         (cdkDropListDropped)="propertyDrop($event)">
-      <div cdkDrag [cdkDragDisabled]="!dragEnabled"
-           [class.tb-draggable]="!disabled"
-           [class.tb-draggable-form-table-row]="!disabled"
-           *ngFor="let propertyControl of propertiesFormArray().controls; trackBy: trackByProperty; let $index = index;">
-        <tb-dynamic-form-property-row class="flex-1"
-                                      [index]="$index"
-                                      [booleanPropertyIds]="booleanPropertyIds"
-                                      [formControl]="propertyControl"
-                                      (propertyRemoved)="removeProperty($index)">
-        </tb-dynamic-form-property-row>
-        <div class="tb-form-table-row-cell-buttons">
+        @if (!disabled && importExport) {
+          <button mat-icon-button
+                  type="button"
+                  matTooltip="{{ 'dynamic-form.import-form' | translate }}"
+                  matTooltipPosition="above"
+                  (click)="import($event)">
+            <tb-icon>mdi:file-import</tb-icon>
+          </button>
+        }
+        @if (!disabled && importExport) {
           <button mat-icon-button
-                  *ngIf="!disabled"
+                  [class.tb-hidden]="!propertiesFormArray().controls.length"
                   type="button"
-                  cdkDragHandle
-                  [class.tb-hidden]="!dragEnabled"
-                  matTooltip="{{ 'action.drag' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>drag_indicator</mat-icon>
+                  [disabled]="!propertiesFormArray().controls.length"
+                  matTooltip="{{ 'dynamic-form.export-form' | translate }}"
+                  matTooltipPosition="above"
+                  (click)="export($event)">
+            <tb-icon>mdi:file-export</tb-icon>
           </button>
-        </div>
+        }
+        @if (!disabled) {
+          <button mat-icon-button
+                  [class.tb-hidden]="!propertiesFormArray().controls.length"
+                  type="button"
+                  [disabled]="!propertiesFormArray().controls.length"
+                  matTooltip="{{ 'dynamic-form.clear-form' | translate }}"
+                  matTooltipPosition="above"
+                  (click)="clear($event)">
+            <tb-icon>mdi:broom</tb-icon>
+          </button>
+        }
       </div>
     </div>
-    <tb-error *ngIf="errorText" noMargin [error]="errorText" style="padding-left: 12px;"></tb-error>
-  </div>
-  <div *ngIf="!disabled">
-    <button type="button" mat-stroked-button color="primary" (click)="addProperty()">
-      {{ 'dynamic-form.property.add-property' | translate }}
-    </button>
+    @if (propertiesFormArray().controls.length) {
+      <div class="tb-form-table-body tb-drop-list"
+           cdkDropList cdkDropListOrientation="vertical"
+           [cdkDropListDisabled]="!dragEnabled"
+           (cdkDropListDropped)="propertyDrop($event)">
+        @for (propertyControl of propertiesFormArray().controls; track trackByProperty($index, propertyControl)) {
+          <div cdkDrag [cdkDragDisabled]="!dragEnabled"
+               [class.tb-draggable]="!disabled"
+               [class.tb-draggable-form-table-row]="!disabled"
+               >
+            <tb-dynamic-form-property-row class="flex-1"
+                                          [index]="$index"
+                                          [booleanPropertyIds]="booleanPropertyIds"
+                                          [formControl]="propertyControl"
+                                          (propertyRemoved)="removeProperty($index)">
+            </tb-dynamic-form-property-row>
+            <div class="tb-form-table-row-cell-buttons">
+              @if (!disabled) {
+                <button mat-icon-button
+                        type="button"
+                        cdkDragHandle
+                        [class.tb-hidden]="!dragEnabled"
+                        matTooltip="{{ 'action.drag' | translate }}"
+                        matTooltipPosition="above">
+                  <mat-icon>drag_indicator</mat-icon>
+                </button>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    } @else {
+      <span class="tb-prompt flex items-center justify-center" [style]="fillHeight ? {height: '100%'} : {}">{{ 'dynamic-form.property.no-properties' | translate }}</span>
+    }
+    @if (errorText) {
+      <tb-error noMargin [error]="errorText" style="padding-left: 12px;"></tb-error>
+    }
   </div>
+  @if (!disabled) {
+    <div>
+      <button type="button" mat-stroked-button color="primary" (click)="addProperty()">
+        {{ 'dynamic-form.property.add-property' | translate }}
+      </button>
+    </div>
+  }
 </div>
 
-<ng-template #noProperties>
-  <span class="tb-prompt flex items-center justify-center" [style]="fillHeight ? {height: '100%'} : {}">{{ 'dynamic-form.property.no-properties' | translate }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-panel.component.html
index df90a75dba..00d5c32170 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-panel.component.html
@@ -46,42 +46,50 @@
       <div class="fixed-title-width" translate>dynamic-form.property.type</div>
       <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="type">
-          <mat-option *ngFor="let type of formPropertyTypes" [value]="type">
-            {{ formPropertyTypeTranslations.get(type) | translate }}
-          </mat-option>
+          @for (type of formPropertyTypes; track type) {
+            <mat-option [value]="type">
+              {{ formPropertyTypeTranslations.get(type) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
-    <div *ngIf="isArray" class="tb-form-panel stroked">
-      <div class="tb-form-panel-title" translate>dynamic-form.property.array-item</div>
-      <div class="tb-form-row">
-        <div class="fixed-title-width" translate>dynamic-form.property.item-type</div>
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <mat-select formControlName="arrayItemType">
-            <mat-option *ngFor="let type of arrayItemFormPropertyTypes" [value]="type">
-              {{ formPropertyTypeTranslations.get(type) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div class="tb-form-row">
-        <div class="fixed-title-width" translate>dynamic-form.property.item-name</div>
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="arrayItemName" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+    @if (isArray) {
+      <div class="tb-form-panel stroked">
+        <div class="tb-form-panel-title" translate>dynamic-form.property.array-item</div>
+        <div class="tb-form-row">
+          <div class="fixed-title-width" translate>dynamic-form.property.item-type</div>
+          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+            <mat-select formControlName="arrayItemType">
+              @for (type of arrayItemFormPropertyTypes; track type) {
+                <mat-option [value]="type">
+                  {{ formPropertyTypeTranslations.get(type) | translate }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="tb-form-row">
+          <div class="fixed-title-width" translate>dynamic-form.property.item-name</div>
+          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+            <input matInput formControlName="arrayItemName" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+        </div>
+        <ng-container *ngTemplateOutlet="itemSettings">
+        </ng-container>
       </div>
+    }
+    @if (!isArray) {
       <ng-container *ngTemplateOutlet="itemSettings">
       </ng-container>
-    </div>
-    <ng-container *ngIf="!isArray">
-      <ng-container *ngTemplateOutlet="itemSettings">
-      </ng-container>
-    </ng-container>
-    <div *ngIf="![FormPropertyType.fieldset, FormPropertyType.htmlSection, FormPropertyType.array].includes(propertyFormGroup.get('type').value)" class="tb-form-row space-between">
-      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="required">
-        {{ 'dynamic-form.property.value-required' | translate }}
-      </mat-slide-toggle>
-    </div>
+    }
+    @if (![FormPropertyType.fieldset, FormPropertyType.htmlSection, FormPropertyType.array].includes(propertyFormGroup.get('type').value)) {
+      <div class="tb-form-row space-between">
+        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="required">
+          {{ 'dynamic-form.property.value-required' | translate }}
+        </mat-slide-toggle>
+      </div>
+    }
     <div class="tb-form-panel stroked">
       <mat-expansion-panel class="tb-settings">
         <mat-expansion-panel-header class="flex flex-row flex-wrap">
@@ -90,7 +98,7 @@
           </mat-panel-title>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <ng-container *ngIf="isPropertyTypeAllowedForRow(propertyFormGroup.get('type').value)">
+          @if (isPropertyTypeAllowedForRow(propertyFormGroup.get('type').value)) {
             <div class="tb-form-row space-between">
               <div class="fixed-title-width" translate>dynamic-form.property.sub-label</div>
               <mat-form-field  class="flex"
@@ -103,26 +111,32 @@
                 {{ 'dynamic-form.property.vertical-divider-after' | translate }}
               </mat-slide-toggle>
             </div>
-          </ng-container>
-          <div *ngIf="[FormPropertyType.number, FormPropertyType.text, FormPropertyType.password].includes(propertyItemType)"
-               class="tb-form-row space-between">
-            <div class="fixed-title-width" translate>dynamic-form.property.input-field-suffix</div>
-            <mat-form-field  class="flex"
-                             appearance="outline" subscriptSizing="dynamic">
-              <input matInput formControlName="fieldSuffix" placeholder="{{ 'widget-config.set' | translate }}">
-            </mat-form-field>
-          </div>
-          <div *ngIf="propertyFormGroup.get('type').value !== FormPropertyType.htmlSection" class="tb-form-row space-between">
-            <div class="fixed-title-width" translate>dynamic-form.property.disable-on-property</div>
-            <mat-form-field  class="flex" appearance="outline" subscriptSizing="dynamic">
-              <mat-select formControlName="disableOnProperty" placeholder="{{ 'widget-config.set' | translate }}">
-                <mat-option [value]="null">{{ 'dynamic-form.property.disable-on-property-none' | translate }}</mat-option>
-                <mat-option *ngFor="let prop of booleanPropertyIds" [value]="prop">
-                  {{ prop }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
+          }
+          @if ([FormPropertyType.number, FormPropertyType.text, FormPropertyType.password].includes(propertyItemType)) {
+            <div
+              class="tb-form-row space-between">
+              <div class="fixed-title-width" translate>dynamic-form.property.input-field-suffix</div>
+              <mat-form-field  class="flex"
+                               appearance="outline" subscriptSizing="dynamic">
+                <input matInput formControlName="fieldSuffix" placeholder="{{ 'widget-config.set' | translate }}">
+              </mat-form-field>
+            </div>
+          }
+          @if (propertyFormGroup.get('type').value !== FormPropertyType.htmlSection) {
+            <div class="tb-form-row space-between">
+              <div class="fixed-title-width" translate>dynamic-form.property.disable-on-property</div>
+              <mat-form-field  class="flex" appearance="outline" subscriptSizing="dynamic">
+                <mat-select formControlName="disableOnProperty" placeholder="{{ 'widget-config.set' | translate }}">
+                  <mat-option [value]="null">{{ 'dynamic-form.property.disable-on-property-none' | translate }}</mat-option>
+                  @for (prop of booleanPropertyIds; track prop) {
+                    <mat-option [value]="prop">
+                      {{ prop }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            </div>
+          }
           <div class="tb-form-row">
             <tb-js-func
               class="flex-1"
@@ -131,28 +145,32 @@
               functionTitle="{{ 'dynamic-form.property.display-condition-function' | translate }}">
             </tb-js-func>
           </div>
-          <tb-string-items-list *ngIf="isPropertyTypeAllowedForRow(propertyFormGroup.get('type').value)"
-                                class="flex-1"
-                                fieldClass="flex"
-                                floatLabel="always"
-                                label="{{ 'dynamic-form.property.property-row-classes' | translate }}"
-                                placeholder="{{ 'widget-config.set' | translate }}"
-                                [predefinedValues]="formPropertyRowClasses"
-                                formControlName="rowClass"
-                                appearance="outline"
-                                subscriptSizing="dynamic">
-          </tb-string-items-list>
-          <tb-string-items-list *ngIf="isPropertyTypeAllowedForRow(propertyFormGroup.get('type').value) && FormPropertyType.switch !== propertyFormGroup.get('type').value"
-                                class="flex-1"
-                                fieldClass="flex"
-                                floatLabel="always"
-                                label="{{ 'dynamic-form.property.property-field-classes' | translate }}"
-                                placeholder="{{ 'widget-config.set' | translate }}"
-                                [predefinedValues]="formPropertyFieldClasses"
-                                formControlName="fieldClass"
-                                appearance="outline"
-                                subscriptSizing="dynamic">
-          </tb-string-items-list>
+          @if (isPropertyTypeAllowedForRow(propertyFormGroup.get('type').value)) {
+            <tb-string-items-list
+              class="flex-1"
+              fieldClass="flex"
+              floatLabel="always"
+              label="{{ 'dynamic-form.property.property-row-classes' | translate }}"
+              placeholder="{{ 'widget-config.set' | translate }}"
+              [predefinedValues]="formPropertyRowClasses"
+              formControlName="rowClass"
+              appearance="outline"
+              subscriptSizing="dynamic">
+            </tb-string-items-list>
+          }
+          @if (isPropertyTypeAllowedForRow(propertyFormGroup.get('type').value) && FormPropertyType.switch !== propertyFormGroup.get('type').value) {
+            <tb-string-items-list
+              class="flex-1"
+              fieldClass="flex"
+              floatLabel="always"
+              label="{{ 'dynamic-form.property.property-field-classes' | translate }}"
+              placeholder="{{ 'widget-config.set' | translate }}"
+              [predefinedValues]="formPropertyFieldClasses"
+              formControlName="fieldClass"
+              appearance="outline"
+              subscriptSizing="dynamic">
+            </tb-string-items-list>
+          }
         </ng-template>
       </mat-expansion-panel>
     </div>
@@ -164,154 +182,174 @@
             (click)="cancel()">
       {{ (disabled ? 'action.close' : 'action.cancel') | translate }}
     </button>
-    <button *ngIf="!disabled"
-            mat-raised-button
-            color="primary"
-            type="button"
-            (click)="applyPropertySettings()"
-            [disabled]="propertyFormGroup.invalid || !propertyFormGroup.dirty">
-      {{ (isAdd ? 'action.add' : 'action.apply') | translate }}
-    </button>
+    @if (!disabled) {
+      <button
+        mat-raised-button
+        color="primary"
+        type="button"
+        (click)="applyPropertySettings()"
+        [disabled]="propertyFormGroup.invalid || !propertyFormGroup.dirty">
+        {{ (isAdd ? 'action.add' : 'action.apply') | translate }}
+      </button>
+    }
   </div>
 </div>
 
 <ng-template #itemSettings>
   <ng-container [formGroup]="propertyFormGroup">
-    <div *ngIf="propertyItemType === FormPropertyType.textarea" class="tb-form-row space-between">
-      <div translate>dynamic-form.property.textarea-rows</div>
-      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-        <input matInput formControlName="rows" min="1" step="1"
-               type="number" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-    </div>
-    <div *ngIf="propertyItemType === FormPropertyType.number" class="tb-form-row space-between">
-      <div translate>dynamic-form.property.number-settings</div>
-      <div class="flex flex-1 flex-row items-center justify-end gap-2">
-        <div class="tb-small-label" translate>dynamic-form.property.min</div>
-        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
-          <input matInput formControlName="min"
-                 type="number" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
-        <mat-divider vertical></mat-divider>
-        <div class="tb-small-label" translate>dynamic-form.property.max</div>
-        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
-          <input matInput formControlName="max"
-                 type="number" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
-        <mat-divider vertical></mat-divider>
-        <div class="tb-small-label" translate>dynamic-form.property.step</div>
-        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
-          <input matInput formControlName="step" min="0"
+    @if (propertyItemType === FormPropertyType.textarea) {
+      <div class="tb-form-row space-between">
+        <div translate>dynamic-form.property.textarea-rows</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="rows" min="1" step="1"
                  type="number" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
       </div>
-    </div>
-    <div *ngIf="propertyItemType === FormPropertyType.fieldset" class="tb-form-panel stroked">
-      <mat-expansion-panel class="tb-settings" expanded>
-        <mat-expansion-panel-header class="flex flex-row flex-wrap">
-          <mat-panel-title>
-            {{ 'dynamic-form.property.properties' | translate }}
-          </mat-panel-title>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
-          <tb-dynamic-form-properties formControlName="properties" noBorder noMargin>
-          </tb-dynamic-form-properties>
-        </ng-template>
-      </mat-expansion-panel>
-    </div>
-    <div *ngIf="propertyItemType === FormPropertyType.htmlSection" class="tb-form-panel stroked">
-      <mat-expansion-panel class="tb-settings" expanded>
-        <mat-expansion-panel-header class="flex flex-row flex-wrap">
-          <mat-panel-title>
-            {{ 'dynamic-form.property.html-section-settings' | translate }}
-          </mat-panel-title>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
-          <div class="tb-form-row">
-            <tb-html
-              class="flex-1"
-              formControlName="htmlContent"
-              label="{{ 'dynamic-form.property.html-section-content' | translate }}">
-            </tb-html>
-          </div>
-          <tb-string-items-list class="flex-1"
-                                fieldClass="flex"
-                                floatLabel="always"
-                                label="{{ 'dynamic-form.property.html-section-classes' | translate }}"
-                                formControlName="htmlClassList"
-                                appearance="outline"
-                                subscriptSizing="dynamic">
-          </tb-string-items-list>
-        </ng-template>
-      </mat-expansion-panel>
-    </div>
-    <ng-container *ngIf="[FormPropertyType.select, FormPropertyType.radios].includes(propertyItemType)">
+    }
+    @if (propertyItemType === FormPropertyType.number) {
+      <div class="tb-form-row space-between">
+        <div translate>dynamic-form.property.number-settings</div>
+        <div class="flex flex-1 flex-row items-center justify-end gap-2">
+          <div class="tb-small-label" translate>dynamic-form.property.min</div>
+          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+            <input matInput formControlName="min"
+                   type="number" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+          <mat-divider vertical></mat-divider>
+          <div class="tb-small-label" translate>dynamic-form.property.max</div>
+          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+            <input matInput formControlName="max"
+                   type="number" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+          <mat-divider vertical></mat-divider>
+          <div class="tb-small-label" translate>dynamic-form.property.step</div>
+          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+            <input matInput formControlName="step" min="0"
+                   type="number" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+        </div>
+      </div>
+    }
+    @if (propertyItemType === FormPropertyType.fieldset) {
       <div class="tb-form-panel stroked">
         <mat-expansion-panel class="tb-settings" expanded>
           <mat-expansion-panel-header class="flex flex-row flex-wrap">
             <mat-panel-title>
-              {{ (propertyFormGroup.get('type').value === FormPropertyType.select ? 'dynamic-form.property.select-options' : 'dynamic-form.property.radio-button-options') | translate }}
+              {{ 'dynamic-form.property.properties' | translate }}
             </mat-panel-title>
           </mat-expansion-panel-header>
           <ng-template matExpansionPanelContent>
-            <div *ngIf="propertyItemType === FormPropertyType.radios" class="tb-form-row space-between">
-              <div translate>dynamic-form.property.buttons-direction</div>
-              <mat-chip-listbox class="center-stretch" formControlName="direction">
-                <mat-chip-option [selectable]="propertyFormGroup.get('direction').value !== 'column'"
-                                 value="column">{{ 'dynamic-form.property.direction-column' | translate }}</mat-chip-option>
-                <mat-chip-option [selectable]="propertyFormGroup.get('direction').value !== 'row'"
-                                 value="row">{{ 'dynamic-form.property.direction-row' | translate }}</mat-chip-option>
-              </mat-chip-listbox>
-            </div>
-            <div *ngIf="propertyItemType === FormPropertyType.select" class="tb-form-row space-between">
-              <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="multiple">
-                {{ 'dynamic-form.property.enable-multiple-select' | translate }}
-              </mat-slide-toggle>
-            </div>
-            <div *ngIf="propertyItemType === FormPropertyType.select && !propertyFormGroup.get('multiple').value" class="tb-form-row space-between">
-              <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="allowEmptyOption">
-                {{ 'dynamic-form.property.allow-empty-select-option' | translate }}
-              </mat-slide-toggle>
+            <tb-dynamic-form-properties formControlName="properties" noBorder noMargin>
+            </tb-dynamic-form-properties>
+          </ng-template>
+        </mat-expansion-panel>
+      </div>
+    }
+    @if (propertyItemType === FormPropertyType.htmlSection) {
+      <div class="tb-form-panel stroked">
+        <mat-expansion-panel class="tb-settings" expanded>
+          <mat-expansion-panel-header class="flex flex-row flex-wrap">
+            <mat-panel-title>
+              {{ 'dynamic-form.property.html-section-settings' | translate }}
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <ng-template matExpansionPanelContent>
+            <div class="tb-form-row">
+              <tb-html
+                class="flex-1"
+                formControlName="htmlContent"
+                label="{{ 'dynamic-form.property.html-section-content' | translate }}">
+              </tb-html>
             </div>
-            <div *ngIf="propertyItemType === FormPropertyType.select && propertyFormGroup.get('multiple').value" class="tb-form-row space-between">
-              <div translate>dynamic-form.property.selected-options-limit</div>
-              <div class="flex flex-1 flex-row items-center justify-end gap-2">
-                <div class="tb-small-label" translate>dynamic-form.property.min</div>
-                <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
-                  <input matInput formControlName="minItems"
-                         type="number" placeholder="{{ 'widget-config.set' | translate }}">
-                </mat-form-field>
-                <mat-divider vertical></mat-divider>
-                <div class="tb-small-label" translate>dynamic-form.property.max</div>
-                <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
-                  <input matInput formControlName="maxItems"
-                         type="number" placeholder="{{ 'widget-config.set' | translate }}">
-                </mat-form-field>
+            <tb-string-items-list class="flex-1"
+                                  fieldClass="flex"
+                                  floatLabel="always"
+                                  label="{{ 'dynamic-form.property.html-section-classes' | translate }}"
+                                  formControlName="htmlClassList"
+                                  appearance="outline"
+                                  subscriptSizing="dynamic">
+            </tb-string-items-list>
+          </ng-template>
+        </mat-expansion-panel>
+      </div>
+    }
+    @if ([FormPropertyType.select, FormPropertyType.radios].includes(propertyItemType)) {
+      <div class="tb-form-panel stroked">
+        <mat-expansion-panel class="tb-settings" expanded>
+          <mat-expansion-panel-header class="flex flex-row flex-wrap">
+            <mat-panel-title>
+              {{ (propertyFormGroup.get('type').value === FormPropertyType.select ? 'dynamic-form.property.select-options' : 'dynamic-form.property.radio-button-options') | translate }}
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <ng-template matExpansionPanelContent>
+            @if (propertyItemType === FormPropertyType.radios) {
+              <div class="tb-form-row space-between">
+                <div translate>dynamic-form.property.buttons-direction</div>
+                <mat-chip-listbox class="center-stretch" formControlName="direction">
+                  <mat-chip-option [selectable]="propertyFormGroup.get('direction').value !== 'column'"
+                  value="column">{{ 'dynamic-form.property.direction-column' | translate }}</mat-chip-option>
+                  <mat-chip-option [selectable]="propertyFormGroup.get('direction').value !== 'row'"
+                  value="row">{{ 'dynamic-form.property.direction-row' | translate }}</mat-chip-option>
+                </mat-chip-listbox>
               </div>
-            </div>
+            }
+            @if (propertyItemType === FormPropertyType.select) {
+              <div class="tb-form-row space-between">
+                <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="multiple">
+                  {{ 'dynamic-form.property.enable-multiple-select' | translate }}
+                </mat-slide-toggle>
+              </div>
+            }
+            @if (propertyItemType === FormPropertyType.select && !propertyFormGroup.get('multiple').value) {
+              <div class="tb-form-row space-between">
+                <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="allowEmptyOption">
+                  {{ 'dynamic-form.property.allow-empty-select-option' | translate }}
+                </mat-slide-toggle>
+              </div>
+            }
+            @if (propertyItemType === FormPropertyType.select && propertyFormGroup.get('multiple').value) {
+              <div class="tb-form-row space-between">
+                <div translate>dynamic-form.property.selected-options-limit</div>
+                <div class="flex flex-1 flex-row items-center justify-end gap-2">
+                  <div class="tb-small-label" translate>dynamic-form.property.min</div>
+                  <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+                    <input matInput formControlName="minItems"
+                           type="number" placeholder="{{ 'widget-config.set' | translate }}">
+                  </mat-form-field>
+                  <mat-divider vertical></mat-divider>
+                  <div class="tb-small-label" translate>dynamic-form.property.max</div>
+                  <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+                    <input matInput formControlName="maxItems"
+                           type="number" placeholder="{{ 'widget-config.set' | translate }}">
+                  </mat-form-field>
+                </div>
+              </div>
+            }
             <tb-dynamic-form-select-items
               formControlName="items">
             </tb-dynamic-form-select-items>
           </ng-template>
         </mat-expansion-panel>
       </div>
-    </ng-container>
-    <div *ngIf="[FormPropertyType.javascript, FormPropertyType.markdown].includes(propertyItemType)" class="tb-form-row">
-      <div class="fixed-title-width" translate>dynamic-form.property.help-id</div>
-      <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="helpId" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-    </div>
-    <ng-container *ngIf="propertyItemType === FormPropertyType.datetime">
+    }
+    @if ([FormPropertyType.javascript, FormPropertyType.markdown].includes(propertyItemType)) {
+      <div class="tb-form-row">
+        <div class="fixed-title-width" translate>dynamic-form.property.help-id</div>
+        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="helpId" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
+    }
+    @if (propertyItemType === FormPropertyType.datetime) {
       <div class="tb-form-row space-between">
         <div translate>dynamic-form.property.datetime-type</div>
         <mat-chip-listbox class="center-stretch" formControlName="dateTimeType">
           <mat-chip-option [selectable]="propertyFormGroup.get('dateTimeType').value !== 'date'"
-                           value="date">{{ 'dynamic-form.property.datetime-type-date' | translate }}</mat-chip-option>
+          value="date">{{ 'dynamic-form.property.datetime-type-date' | translate }}</mat-chip-option>
           <mat-chip-option [selectable]="propertyFormGroup.get('dateTimeType').value !== 'time'"
-                           value="time">{{ 'dynamic-form.property.datetime-type-time' | translate }}</mat-chip-option>
+          value="time">{{ 'dynamic-form.property.datetime-type-time' | translate }}</mat-chip-option>
           <mat-chip-option [selectable]="propertyFormGroup.get('dateTimeType').value !== 'datetime'"
-                           value="datetime">{{ 'dynamic-form.property.datetime-type-datetime' | translate }}</mat-chip-option>
+          value="datetime">{{ 'dynamic-form.property.datetime-type-datetime' | translate }}</mat-chip-option>
         </mat-chip-listbox>
       </div>
       <div class="tb-form-row space-between">
@@ -319,165 +357,221 @@
           {{ 'dynamic-form.property.enable-clear-button' | translate }}
         </mat-slide-toggle>
       </div>
-    </ng-container>
-    <div *ngIf="propertyItemType === FormPropertyType.textarea" class="tb-form-row no-border no-padding">
-      <mat-form-field  class="flex"
-                       floatLabel="always"
-                       appearance="outline" subscriptSizing="dynamic">
-        <mat-label translate>dynamic-form.property.default-value</mat-label>
-        <textarea matInput
-                  [rows]="propertyFormGroup.get('rows').value || 2"
-                  formControlName="default" placeholder="{{ 'widget-config.set' | translate }}"></textarea>
-      </mat-form-field>
-    </div>
-    <div *ngIf="propertyItemType === FormPropertyType.javascript" class="tb-form-row" >
-      <tb-js-func
-        class="flex-1"
-        disableUndefinedCheck
-        formControlName="default"
-        [helpId]="propertyFormGroup.get('helpId').value"
-        label="{{ 'dynamic-form.property.default-value' | translate }}">
-      </tb-js-func>
-    </div>
-    <div *ngIf="propertyItemType === FormPropertyType.json" class="tb-form-row" >
-      <tb-json-content
-        class="flex-1"
-        formControlName="default"
-        [contentType]="ContentType.JSON"
-        label="{{ 'dynamic-form.property.default-value' | translate }}">
-      </tb-json-content>
-    </div>
-    <div *ngIf="propertyItemType === FormPropertyType.html" class="tb-form-row" >
-      <tb-html
-        class="flex-1"
-        formControlName="default"
-        label="{{ 'dynamic-form.property.default-value' | translate }}">
-      </tb-html>
-    </div>
-    <div *ngIf="propertyItemType === FormPropertyType.css" class="tb-form-row" >
-      <tb-css
-        class="flex-1"
-        formControlName="default"
-        label="{{ 'dynamic-form.property.default-value' | translate }}">
-      </tb-css>
-    </div>
-    <div *ngIf="propertyItemType === FormPropertyType.markdown" class="tb-form-row" >
-      <tb-markdown-editor
-        class="flex-1"
-        formControlName="default"
-        [helpId]="propertyFormGroup.get('helpId').value"
-        label="{{ 'dynamic-form.property.default-value' | translate }}">
-      </tb-markdown-editor>
-    </div>
-    <div *ngIf="propertyItemType === FormPropertyType.image && !isArray" class="tb-form-row" >
-      <tb-gallery-image-input
-        class="flex-1"
-        formControlName="default"
-        label="{{ 'dynamic-form.property.default-value' | translate }}">
-      </tb-gallery-image-input>
-    </div>
-    <div *ngIf="propertyItemType === FormPropertyType.radios"
-         class="tb-form-row tb-radios-property" [class.direction-column]="propertyFormGroup.get('direction').value === 'column'">
-      <div tbTruncateWithTooltip translate class="fixed-title-height">dynamic-form.property.default-value</div>
-      <mat-radio-group class="flex flex-1 flex-wrap" [class.flex-col]="propertyFormGroup.get('direction').value === 'column'"
-                       formControlName="default">
-        <mat-radio-button *ngFor="let item of propertyFormGroup.get('items').value" [value]="item.value">
-          <div tbTruncateWithTooltip>{{ item.label | customTranslate }}</div>
-        </mat-radio-button>
-      </mat-radio-group>
-    </div>
-    <div *ngIf="propertyItemType === FormPropertyType.units" class="tb-form-row space-between">
-      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="supportsUnitConversion">
-        {{ 'dynamic-form.property.support-unit-conversion' | translate }}
-      </mat-slide-toggle>
-    </div>
-    <div *ngIf="isPropertyTypeAllowedForRow(propertyItemType)" class="tb-form-row space-between">
-      <div class="fixed-title-width" translate>dynamic-form.property.default-value</div>
-      <mat-form-field  *ngIf="[FormPropertyType.text, FormPropertyType.password].includes(propertyItemType)"
-                       class="flex"
-                       appearance="outline" subscriptSizing="dynamic">
-        <input matInput [type]="propertyFormGroup.get('type').value" formControlName="default" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-      <tb-color-input *ngIf="propertyItemType === FormPropertyType.color"
-                      asBoxInput
-                      colorClearButton
-                      formControlName="default">
-      </tb-color-input>
-      <tb-color-settings *ngIf="propertyItemType === FormPropertyType.color_settings"
-                         formControlName="default"
-                         settingsKey="{{ propertyFormGroup.get('id').value }}">
-      </tb-color-settings>
-      <mat-form-field  *ngIf="propertyItemType === FormPropertyType.number"
-                       appearance="outline"
-                       class="number"
-                       subscriptSizing="dynamic">
-        <input matInput formControlName="default"
-               [min]="propertyFormGroup.get('min').value"
-               [max]="propertyFormGroup.get('max').value"
-               [step]="propertyFormGroup.get('step').value"
-               type="number" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-      <tb-font-settings *ngIf="propertyItemType === FormPropertyType.font"
-                        formControlName="default"
-                        clearButton
-                        disabledLineHeight>
-      </tb-font-settings>
-      <tb-unit-input *ngIf="propertyItemType === FormPropertyType.units"
-                     [supportsUnitConversion]="propertyFormGroup.get('supportsUnitConversion').value"
-                     formControlName="default"></tb-unit-input>
-      <tb-value-input *ngIf="propertyItemType === FormPropertyType.switch"
-                      [valueType]="ValueType.BOOLEAN"
-                      formControlName="default"></tb-value-input>
-      <tb-material-icon-select *ngIf="propertyItemType === FormPropertyType.icon"
-                               asBoxInput
-                               formControlName="default">
-      </tb-material-icon-select>
-      <mat-form-field *ngIf="propertyItemType === FormPropertyType.select" class="medium-width"
-                      appearance="outline" subscriptSizing="dynamic">
-        <mat-select *ngIf="!propertyFormGroup.get('multiple').value" formControlName="default">
-          <mat-option *ngIf="propertyFormGroup.get('allowEmptyOption').value" [value]="null"></mat-option>
-          <mat-option *ngFor="let item of propertyFormGroup.get('items').value" [value]="item.value">
-            {{ item.label | customTranslate }}
-          </mat-option>
-        </mat-select>
-        <mat-select *ngIf="propertyFormGroup.get('multiple').value" formControlName="default" multiple>
-          <mat-option *ngFor="let item of propertyFormGroup.get('items').value" [value]="item.value">
-            {{ item.label | customTranslate }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <ng-container *ngIf="propertyItemType === FormPropertyType.datetime">
-        <tb-datetime *ngIf="propertyFormGroup.get('dateTimeType').value === 'date'"
-                     class="flex-1"
-                     showLabel="false"
-                     fieldClass="flex"
-                     [allowClear]="propertyFormGroup.get('allowClear').value"
-                     appearance="outline"
-                     subscriptSizing="dynamic"
-                     type="date"
-                     formControlName="default"
-        ></tb-datetime>
-        <tb-datetime *ngIf="propertyFormGroup.get('dateTimeType').value === 'time'"
-                     class="flex-1"
-                     showLabel="false"
-                     fieldClass="flex"
-                     [allowClear]="propertyFormGroup.get('allowClear').value"
-                     appearance="outline"
-                     subscriptSizing="dynamic"
-                     type="time"
-                     formControlName="default"
-        ></tb-datetime>
-        <tb-datetime *ngIf="propertyFormGroup.get('dateTimeType').value === 'datetime'"
-                     class="flex-1"
-                     showLabel="false"
-                     fieldClass="flex"
-                     [allowClear]="propertyFormGroup.get('allowClear').value"
-                     appearance="outline"
-                     subscriptSizing="dynamic"
-                     type="datetime"
-                     formControlName="default"
-        ></tb-datetime>
-      </ng-container>
-    </div>
+    }
+    @if (propertyItemType === FormPropertyType.textarea) {
+      <div class="tb-form-row no-border no-padding">
+        <mat-form-field  class="flex"
+                         floatLabel="always"
+                         appearance="outline" subscriptSizing="dynamic">
+          <mat-label translate>dynamic-form.property.default-value</mat-label>
+          <textarea matInput
+                    [rows]="propertyFormGroup.get('rows').value || 2"
+          formControlName="default" placeholder="{{ 'widget-config.set' | translate }}"></textarea>
+        </mat-form-field>
+      </div>
+    }
+    @if (propertyItemType === FormPropertyType.javascript) {
+      <div class="tb-form-row" >
+        <tb-js-func
+          class="flex-1"
+          disableUndefinedCheck
+          formControlName="default"
+          [helpId]="propertyFormGroup.get('helpId').value"
+          label="{{ 'dynamic-form.property.default-value' | translate }}">
+        </tb-js-func>
+      </div>
+    }
+    @if (propertyItemType === FormPropertyType.json) {
+      <div class="tb-form-row" >
+        <tb-json-content
+          class="flex-1"
+          formControlName="default"
+          [contentType]="ContentType.JSON"
+          label="{{ 'dynamic-form.property.default-value' | translate }}">
+        </tb-json-content>
+      </div>
+    }
+    @if (propertyItemType === FormPropertyType.html) {
+      <div class="tb-form-row" >
+        <tb-html
+          class="flex-1"
+          formControlName="default"
+          label="{{ 'dynamic-form.property.default-value' | translate }}">
+        </tb-html>
+      </div>
+    }
+    @if (propertyItemType === FormPropertyType.css) {
+      <div class="tb-form-row" >
+        <tb-css
+          class="flex-1"
+          formControlName="default"
+          label="{{ 'dynamic-form.property.default-value' | translate }}">
+        </tb-css>
+      </div>
+    }
+    @if (propertyItemType === FormPropertyType.markdown) {
+      <div class="tb-form-row" >
+        <tb-markdown-editor
+          class="flex-1"
+          formControlName="default"
+          [helpId]="propertyFormGroup.get('helpId').value"
+          label="{{ 'dynamic-form.property.default-value' | translate }}">
+        </tb-markdown-editor>
+      </div>
+    }
+    @if (propertyItemType === FormPropertyType.image && !isArray) {
+      <div class="tb-form-row" >
+        <tb-gallery-image-input
+          class="flex-1"
+          formControlName="default"
+          label="{{ 'dynamic-form.property.default-value' | translate }}">
+        </tb-gallery-image-input>
+      </div>
+    }
+    @if (propertyItemType === FormPropertyType.radios) {
+      <div
+        class="tb-form-row tb-radios-property" [class.direction-column]="propertyFormGroup.get('direction').value === 'column'">
+        <div tbTruncateWithTooltip translate class="fixed-title-height">dynamic-form.property.default-value</div>
+        <mat-radio-group class="flex flex-1 flex-wrap" [class.flex-col]="propertyFormGroup.get('direction').value === 'column'"
+                         formControlName="default">
+          @for (item of propertyFormGroup.get('items').value; track item) {
+            <mat-radio-button [value]="item.value">
+              <div tbTruncateWithTooltip>{{ item.label | customTranslate }}</div>
+            </mat-radio-button>
+          }
+        </mat-radio-group>
+      </div>
+    }
+    @if (propertyItemType === FormPropertyType.units) {
+      <div class="tb-form-row space-between">
+        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="supportsUnitConversion">
+          {{ 'dynamic-form.property.support-unit-conversion' | translate }}
+        </mat-slide-toggle>
+      </div>
+    }
+    @if (isPropertyTypeAllowedForRow(propertyItemType)) {
+      <div class="tb-form-row space-between">
+        <div class="fixed-title-width" translate>dynamic-form.property.default-value</div>
+        @if ([FormPropertyType.text, FormPropertyType.password].includes(propertyItemType)) {
+          <mat-form-field
+            class="flex"
+            appearance="outline" subscriptSizing="dynamic">
+            <input matInput [type]="propertyFormGroup.get('type').value" formControlName="default" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+        }
+        @if (propertyItemType === FormPropertyType.color) {
+          <tb-color-input
+            asBoxInput
+            colorClearButton
+            formControlName="default">
+          </tb-color-input>
+        }
+        @if (propertyItemType === FormPropertyType.color_settings) {
+          <tb-color-settings
+            formControlName="default"
+            settingsKey="{{ propertyFormGroup.get('id').value }}">
+          </tb-color-settings>
+        }
+        @if (propertyItemType === FormPropertyType.number) {
+          <mat-form-field
+            appearance="outline"
+            class="number"
+            subscriptSizing="dynamic">
+            <input matInput formControlName="default"
+                   [min]="propertyFormGroup.get('min').value"
+                   [max]="propertyFormGroup.get('max').value"
+                   [step]="propertyFormGroup.get('step').value"
+                   type="number" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+        }
+        @if (propertyItemType === FormPropertyType.font) {
+          <tb-font-settings
+            formControlName="default"
+            clearButton
+            disabledLineHeight>
+          </tb-font-settings>
+        }
+        @if (propertyItemType === FormPropertyType.units) {
+          <tb-unit-input
+            [supportsUnitConversion]="propertyFormGroup.get('supportsUnitConversion').value"
+          formControlName="default"></tb-unit-input>
+        }
+        @if (propertyItemType === FormPropertyType.switch) {
+          <tb-value-input
+            [valueType]="ValueType.BOOLEAN"
+          formControlName="default"></tb-value-input>
+        }
+        @if (propertyItemType === FormPropertyType.icon) {
+          <tb-material-icon-select
+            asBoxInput
+            formControlName="default">
+          </tb-material-icon-select>
+        }
+        @if (propertyItemType === FormPropertyType.select) {
+          <mat-form-field class="medium-width"
+                          appearance="outline" subscriptSizing="dynamic">
+            @if (!propertyFormGroup.get('multiple').value) {
+              <mat-select formControlName="default">
+                @if (propertyFormGroup.get('allowEmptyOption').value) {
+                  <mat-option [value]="null"></mat-option>
+                }
+                @for (item of propertyFormGroup.get('items').value; track item) {
+                  <mat-option [value]="item.value">
+                    {{ item.label | customTranslate }}
+                  </mat-option>
+                }
+              </mat-select>
+            }
+            @if (propertyFormGroup.get('multiple').value) {
+              <mat-select formControlName="default" multiple>
+                @for (item of propertyFormGroup.get('items').value; track item) {
+                  <mat-option [value]="item.value">
+                    {{ item.label | customTranslate }}
+                  </mat-option>
+                }
+              </mat-select>
+            }
+          </mat-form-field>
+        }
+        @if (propertyItemType === FormPropertyType.datetime) {
+          @if (propertyFormGroup.get('dateTimeType').value === 'date') {
+            <tb-datetime
+              class="flex-1"
+              showLabel="false"
+              fieldClass="flex"
+              [allowClear]="propertyFormGroup.get('allowClear').value"
+              appearance="outline"
+              subscriptSizing="dynamic"
+              type="date"
+              formControlName="default"
+            ></tb-datetime>
+          }
+          @if (propertyFormGroup.get('dateTimeType').value === 'time') {
+            <tb-datetime
+              class="flex-1"
+              showLabel="false"
+              fieldClass="flex"
+              [allowClear]="propertyFormGroup.get('allowClear').value"
+              appearance="outline"
+              subscriptSizing="dynamic"
+              type="time"
+              formControlName="default"
+            ></tb-datetime>
+          }
+          @if (propertyFormGroup.get('dateTimeType').value === 'datetime') {
+            <tb-datetime
+              class="flex-1"
+              showLabel="false"
+              fieldClass="flex"
+              [allowClear]="propertyFormGroup.get('allowClear').value"
+              appearance="outline"
+              subscriptSizing="dynamic"
+              type="datetime"
+              formControlName="default"
+            ></tb-datetime>
+          }
+        }
+      </div>
+    }
   </ng-container>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-row.component.html
index eae448d2a5..1d14969e74 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-row.component.html
@@ -24,9 +24,11 @@
   </mat-form-field>
   <mat-form-field class="tb-inline-field tb-type-field fixed-height" appearance="outline" subscriptSizing="dynamic">
     <mat-select formControlName="type">
-      <mat-option *ngFor="let type of formPropertyTypes" [value]="type">
-        {{ formPropertyTypeTranslations.get(type) | translate }}
-      </mat-option>
+      @for (type of formPropertyTypes; track type) {
+        <mat-option [value]="type">
+          {{ formPropertyTypeTranslations.get(type) | translate }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <div class="tb-form-table-row-cell-buttons">
@@ -38,13 +40,15 @@
             matTooltipPosition="above">
       <mat-icon>settings</mat-icon>
     </button>
-    <button *ngIf="!disabled"
-            type="button"
-            mat-icon-button
-            (click)="propertyRemoved.emit()"
-            matTooltip="{{ 'dynamic-form.property.remove-property' | translate }}"
-            matTooltipPosition="above">
-      <mat-icon>delete</mat-icon>
-    </button>
+    @if (!disabled) {
+      <button
+        type="button"
+        mat-icon-button
+        (click)="propertyRemoved.emit()"
+        matTooltip="{{ 'dynamic-form.property.remove-property' | translate }}"
+        matTooltipPosition="above">
+        <mat-icon>delete</mat-icon>
+      </button>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-select-item-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-select-item-row.component.html
index a15c256745..bcff604829 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-select-item-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-select-item-row.component.html
@@ -25,13 +25,15 @@
     <input required matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
   </mat-form-field>
   <div class="tb-form-table-row-cell-buttons">
-    <button *ngIf="!disabled"
-            type="button"
-            mat-icon-button
-            (click)="selectItemRemoved.emit()"
-            matTooltip="{{ 'dynamic-form.property.remove-option' | translate }}"
-            matTooltipPosition="above">
-      <mat-icon>delete</mat-icon>
-    </button>
+    @if (!disabled) {
+      <button
+        type="button"
+        mat-icon-button
+        (click)="selectItemRemoved.emit()"
+        matTooltip="{{ 'dynamic-form.property.remove-option' | translate }}"
+        matTooltipPosition="above">
+        <mat-icon>delete</mat-icon>
+      </button>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-select-items.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-select-items.component.html
index cfb179fe4d..f0096cff5c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-select-items.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-select-items.component.html
@@ -22,41 +22,49 @@
       <div class="tb-form-table-header-cell tb-label-header" translate>dynamic-form.property.label</div>
       <div class="tb-form-table-header-cell tb-actions-header" [class.disabled]="disabled"></div>
     </div>
-    <div *ngIf="selectItemsFormArray().controls.length; else noSelectItems" class="tb-form-table-body tb-drop-list"
-         cdkDropList cdkDropListOrientation="vertical"
-         [cdkDropListDisabled]="!dragEnabled"
-         (cdkDropListDropped)="selectItemDrop($event)">
-      <div cdkDrag [cdkDragDisabled]="!dragEnabled"
-           [class.tb-draggable]="!disabled"
-           [class.tb-draggable-form-table-row]="!disabled"
-           *ngFor="let selectItemControl of selectItemsFormArray().controls; trackBy: trackBySelectItem; let $index = index;">
-        <tb-dynamic-form-select-item-row class="flex-1"
-                                         [index]="$index"
-                                         [formControl]="selectItemControl"
-                                         (selectItemRemoved)="removeSelectItem($index)">
-        </tb-dynamic-form-select-item-row>
-        <div class="tb-form-table-row-cell-buttons">
-          <button mat-icon-button
-                  *ngIf="!disabled"
-                  type="button"
-                  cdkDragHandle
-                  [class.tb-hidden]="!dragEnabled"
-                  matTooltip="{{ 'action.drag' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>drag_indicator</mat-icon>
-          </button>
-        </div>
+    @if (selectItemsFormArray().controls.length) {
+      <div class="tb-form-table-body tb-drop-list"
+           cdkDropList cdkDropListOrientation="vertical"
+           [cdkDropListDisabled]="!dragEnabled"
+           (cdkDropListDropped)="selectItemDrop($event)">
+        @for (selectItemControl of selectItemsFormArray().controls; track trackBySelectItem($index, selectItemControl)) {
+          <div cdkDrag [cdkDragDisabled]="!dragEnabled"
+               [class.tb-draggable]="!disabled"
+               [class.tb-draggable-form-table-row]="!disabled"
+               >
+            <tb-dynamic-form-select-item-row class="flex-1"
+                                             [index]="$index"
+                                             [formControl]="selectItemControl"
+                                             (selectItemRemoved)="removeSelectItem($index)">
+            </tb-dynamic-form-select-item-row>
+            <div class="tb-form-table-row-cell-buttons">
+              @if (!disabled) {
+                <button mat-icon-button
+                        type="button"
+                        cdkDragHandle
+                        [class.tb-hidden]="!dragEnabled"
+                        matTooltip="{{ 'action.drag' | translate }}"
+                        matTooltipPosition="above">
+                  <mat-icon>drag_indicator</mat-icon>
+                </button>
+              }
+            </div>
+          </div>
+        }
       </div>
-    </div>
-    <tb-error *ngIf="errorText" noMargin [error]="errorText" style="padding-left: 12px;"></tb-error>
-  </div>
-  <div *ngIf="!disabled">
-    <button type="button" mat-stroked-button color="primary" (click)="addSelectItem()">
-      {{ 'dynamic-form.property.add-option' | translate }}
-    </button>
+    } @else {
+      <span class="tb-prompt flex items-center justify-center">{{ 'dynamic-form.property.no-options' | translate }}</span>
+    }
+    @if (errorText) {
+      <tb-error noMargin [error]="errorText" style="padding-left: 12px;"></tb-error>
+    }
   </div>
+  @if (!disabled) {
+    <div>
+      <button type="button" mat-stroked-button color="primary" (click)="addSelectItem()">
+        {{ 'dynamic-form.property.add-option' | translate }}
+      </button>
+    </div>
+  }
 </div>
 
-<ng-template #noSelectItems>
-  <span class="tb-prompt flex items-center justify-center">{{ 'dynamic-form.property.no-options' | translate }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form.component.html
index cb1cb71750..c8014dabef 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form.component.html
@@ -18,66 +18,78 @@
 <div [class.!hidden]="!propertyGroups?.length && !propertiesContent.children?.length" class="tb-form-panel"
      [class.stroked]="stroked" [class.no-padding]="noPadding" [class.no-border]="noBorder"
      [formGroup]="propertiesFormGroup">
-  <div *ngIf="title" class="tb-form-panel-title">{{ title }}</div>
+  @if (title) {
+    <div class="tb-form-panel-title">{{ title }}</div>
+  }
   <ng-container #propertiesContent><ng-content select=".tb-properties-content"></ng-content></ng-container>
-  <ng-container *ngFor="let propertyGroup of propertyGroups">
-    <ng-container *ngIf="propertyGroup.visible">
-      <div *ngIf="propertyGroup.title" class="tb-form-panel stroked">
-        <mat-expansion-panel class="tb-settings" expanded>
-          <mat-expansion-panel-header class="flex flex-row flex-wrap">
-            <mat-panel-title>
-              <div class="tb-form-panel-title">{{ propertyGroup.title | customTranslate }}</div>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
-          <ng-template matExpansionPanelContent>
-            <ng-container *ngTemplateOutlet="propertyContainersTpl; context:{propertyContainers: propertyGroup.containers}"></ng-container>
-          </ng-template>
-        </mat-expansion-panel>
-      </div>
-      <ng-container *ngIf="!propertyGroup.title">
+  @for (propertyGroup of propertyGroups; track propertyGroup) {
+    @if (propertyGroup.visible) {
+      @if (propertyGroup.title) {
+        <div class="tb-form-panel stroked">
+          <mat-expansion-panel class="tb-settings" expanded>
+            <mat-expansion-panel-header class="flex flex-row flex-wrap">
+              <mat-panel-title>
+                <div class="tb-form-panel-title">{{ propertyGroup.title | customTranslate }}</div>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <ng-template matExpansionPanelContent>
+              <ng-container *ngTemplateOutlet="propertyContainersTpl; context:{propertyContainers: propertyGroup.containers}"></ng-container>
+            </ng-template>
+          </mat-expansion-panel>
+        </div>
+      }
+      @if (!propertyGroup.title) {
         <ng-container *ngTemplateOutlet="propertyContainersTpl; context:{propertyContainers: propertyGroup.containers}"></ng-container>
-      </ng-container>
-    </ng-container>
-  </ng-container>
+      }
+    }
+  }
 </div>
 
 <ng-template #propertyContainersTpl let-propertyContainers="propertyContainers">
-  <ng-container *ngFor="let propertyContainer of propertyContainers" [formGroup]="propertiesFormGroup">
-    <ng-container *ngIf="propertyContainer.visible">
-      <ng-container *ngIf="propertyContainer.type === FormPropertyContainerType.field">
-        <ng-container *ngTemplateOutlet="propertyFieldTpl;context:{property: propertyContainer.property}">
-        </ng-container>
-      </ng-container>
-      <ng-container *ngIf="propertyContainer.type === FormPropertyContainerType.row">
-        <ng-container *ngTemplateOutlet="propertyRowTpl;context:{propertyRow: propertyContainer}">
-        </ng-container>
-      </ng-container>
-      <tb-dynamic-form *ngIf="propertyContainer.type === FormPropertyContainerType.fieldset"
-                       formControlName="{{ propertyContainer.property.id }}"
-                       title="{{ propertyContainer.label | customTranslate }}"
-                       stroked
-                       [properties]="propertyContainer.properties">
-      </tb-dynamic-form>
-      <ng-container *ngIf="propertyContainer.type === FormPropertyContainerType.array">
-        <div *ngIf="propertyContainer.arrayItemProperty.type === FormPropertyType.image" class="tb-form-row flex-1">
-          <tb-multiple-gallery-image-input
-            class="flex-1"
-            label="{{ propertyContainer.property.name | customTranslate }}"
+  @for (propertyContainer of propertyContainers; track propertyContainer) {
+    <ng-container [formGroup]="propertiesFormGroup">
+      @if (propertyContainer.visible) {
+        @if (propertyContainer.type === FormPropertyContainerType.field) {
+          <ng-container *ngTemplateOutlet="propertyFieldTpl;context:{property: propertyContainer.property}">
+          </ng-container>
+        }
+        @if (propertyContainer.type === FormPropertyContainerType.row) {
+          <ng-container *ngTemplateOutlet="propertyRowTpl;context:{propertyRow: propertyContainer}">
+          </ng-container>
+        }
+        @if (propertyContainer.type === FormPropertyContainerType.fieldset) {
+          <tb-dynamic-form
             formControlName="{{ propertyContainer.property.id }}"
-            [required]="propertyContainer.property.required">
-          </tb-multiple-gallery-image-input>
-        </div>
-        <tb-dynamic-form-array *ngIf="propertyContainer.arrayItemProperty.type !== FormPropertyType.image"
-                       formControlName="{{ propertyContainer.property.id }}"
-                       [itemProperty]="propertyContainer.arrayItemProperty"
-                       title="{{ propertyContainer.label | customTranslate }}">
-        </tb-dynamic-form-array>
-      </ng-container>
-      <ng-container *ngIf="propertyContainer.type === FormPropertyContainerType.htmlSection">
-        <div [innerHTML]="propertyContainer.safeHtml" [class]="propertyContainer.htmlClass"></div>
-      </ng-container>
+            title="{{ propertyContainer.label | customTranslate }}"
+            stroked
+            [properties]="propertyContainer.properties">
+          </tb-dynamic-form>
+        }
+        @if (propertyContainer.type === FormPropertyContainerType.array) {
+          @if (propertyContainer.arrayItemProperty.type === FormPropertyType.image) {
+            <div class="tb-form-row flex-1">
+              <tb-multiple-gallery-image-input
+                class="flex-1"
+                label="{{ propertyContainer.property.name | customTranslate }}"
+                formControlName="{{ propertyContainer.property.id }}"
+                [required]="propertyContainer.property.required">
+              </tb-multiple-gallery-image-input>
+            </div>
+          }
+          @if (propertyContainer.arrayItemProperty.type !== FormPropertyType.image) {
+            <tb-dynamic-form-array
+              formControlName="{{ propertyContainer.property.id }}"
+              [itemProperty]="propertyContainer.arrayItemProperty"
+              title="{{ propertyContainer.label | customTranslate }}">
+            </tb-dynamic-form-array>
+          }
+        }
+        @if (propertyContainer.type === FormPropertyContainerType.htmlSection) {
+          <div [innerHTML]="propertyContainer.safeHtml" [class]="propertyContainer.htmlClass"></div>
+        }
+      }
     </ng-container>
-  </ng-container>
+  }
 </ng-template>
 
 <ng-template #propertyFieldTpl let-property="property">
@@ -89,185 +101,247 @@
 
 <ng-template #propertyRowTpl let-propertyRow="propertyRow">
   <div [formGroup]="propertiesFormGroup" class="tb-form-row space-between overflow-auto" [class]="propertyRow.rowClass">
-    <mat-slide-toggle *ngIf="propertyRow.switch && propertyRow.switch.visible"
-                      class="mat-slide fixed-title-width margin" formControlName="{{ propertyRow.switch.id }}">
-      <div tb-hint-tooltip-icon="{{ propertyRow.hint | customTranslate }}">
-        {{ propertyRow.label | customTranslate }}
+    @if (propertyRow.switch && propertyRow.switch.visible) {
+      <mat-slide-toggle
+        class="mat-slide fixed-title-width margin" formControlName="{{ propertyRow.switch.id }}">
+        <div tb-hint-tooltip-icon="{{ propertyRow.hint | customTranslate }}">
+          {{ propertyRow.label | customTranslate }}
+        </div>
+      </mat-slide-toggle>
+    }
+    @if (!propertyRow.switch) {
+      <div class="fixed-title-width fixed-title-height">
+        <div tb-hint-tooltip-icon="{{ propertyRow.hint | customTranslate }}">
+          {{ propertyRow.label | customTranslate }}
+        </div>
       </div>
-    </mat-slide-toggle>
-    <div *ngIf="!propertyRow.switch" class="fixed-title-width fixed-title-height">
-      <div tb-hint-tooltip-icon="{{ propertyRow.hint | customTranslate }}">
-        {{ propertyRow.label | customTranslate }}
+    }
+    @if (propertyRow.properties.length) {
+      <div class="tb-flex" [class]="propertyRow.propertiesRowClass">
+        @for (property of propertyRow.properties; track property) {
+          @if (property.visible) {
+            @if (property.subLabel) {
+              <div class="tb-small-label">{{ property.subLabel | customTranslate }}</div>
+            }
+            @if (isInputFieldPropertyType(property.type)) {
+              <ng-container *ngTemplateOutlet="inputFieldTpl;context:{property: property, singleField: false}">
+              </ng-container>
+            }
+            @if (property.type === FormPropertyType.color) {
+              <tb-color-input
+                [required]="property.required"
+                [class]="property.fieldClass"
+                asBoxInput
+                colorClearButton
+                formControlName="{{ property.id }}">
+              </tb-color-input>
+            }
+            @if (property.type === FormPropertyType.color_settings) {
+              <tb-color-settings
+                [class]="property.fieldClass"
+                formControlName="{{ property.id }}"
+                settingsKey="{{ property.name | customTranslate }}">
+              </tb-color-settings>
+            }
+            @if (property.type === FormPropertyType.font) {
+              <tb-font-settings
+                [class]="property.fieldClass"
+                formControlName="{{ property.id }}"
+                clearButton
+                disabledLineHeight>
+              </tb-font-settings>
+            }
+            @if (property.type === FormPropertyType.units) {
+              <tb-unit-input
+                [class]="property.fieldClass"
+                [required]="property.required"
+                [supportsUnitConversion]="property.supportsUnitConversion"
+              formControlName="{{ property.id }}"></tb-unit-input>
+            }
+            @if (property.type === FormPropertyType.icon) {
+              <tb-material-icon-select
+                [required]="property.required"
+                asBoxInput
+                formControlName="{{ property.id }}">
+              </tb-material-icon-select>
+            }
+            @if (property.divider) {
+              <mat-divider vertical></mat-divider>
+            }
+          }
+        }
       </div>
-    </div>
-    <div *ngIf="propertyRow.properties.length" class="tb-flex" [class]="propertyRow.propertiesRowClass">
-      <ng-container *ngFor="let property of propertyRow.properties">
-        <ng-container *ngIf="property.visible">
-          <div *ngIf="property.subLabel" class="tb-small-label">{{ property.subLabel | customTranslate }}</div>
-          <ng-container *ngIf="isInputFieldPropertyType(property.type)">
-            <ng-container *ngTemplateOutlet="inputFieldTpl;context:{property: property, singleField: false}">
-            </ng-container>
-          </ng-container>
-          <tb-color-input *ngIf="property.type === FormPropertyType.color"
-                          [required]="property.required"
-                          [class]="property.fieldClass"
-                          asBoxInput
-                          colorClearButton
-                          formControlName="{{ property.id }}">
-          </tb-color-input>
-          <tb-color-settings *ngIf="property.type === FormPropertyType.color_settings"
-                             [class]="property.fieldClass"
-                             formControlName="{{ property.id }}"
-                             settingsKey="{{ property.name | customTranslate }}">
-          </tb-color-settings>
-          <tb-font-settings *ngIf="property.type === FormPropertyType.font"
-                            [class]="property.fieldClass"
-                            formControlName="{{ property.id }}"
-                            clearButton
-                            disabledLineHeight>
-          </tb-font-settings>
-          <tb-unit-input *ngIf="property.type === FormPropertyType.units"
-                         [class]="property.fieldClass"
-                         [required]="property.required"
-                         [supportsUnitConversion]="property.supportsUnitConversion"
-                         formControlName="{{ property.id }}"></tb-unit-input>
-          <tb-material-icon-select *ngIf="property.type === FormPropertyType.icon"
-                                   [required]="property.required"
-                                   asBoxInput
-                                   formControlName="{{ property.id }}">
-          </tb-material-icon-select>
-          <mat-divider *ngIf="property.divider" vertical></mat-divider>
-        </ng-container>
-      </ng-container>
-    </div>
+    }
   </div>
 </ng-template>
 
 <ng-template #inputFieldTpl let-property="property" let-singleField="singleField">
   <ng-container [formGroup]="propertiesFormGroup">
-    <mat-form-field  *ngIf="property.type === FormPropertyType.textarea"
-                     [class]="singleField ? 'flex' : property.fieldClass"
-                     [floatLabel]="singleField ? 'always' : 'auto'"
-                     appearance="outline" subscriptSizing="dynamic">
-      <mat-label *ngIf="singleField">{{ property.name | customTranslate }}</mat-label>
-      <textarea matInput
-                [rows]="property.rows || 2"
-                formControlName="{{ property.id }}"
-                [required]="property.required"
-                placeholder="{{ 'widget-config.set' | translate }}"></textarea>
-    </mat-form-field>
-    <mat-form-field *ngIf="[FormPropertyType.text, FormPropertyType.password].includes(property.type)"
-                    [class]="singleField ? 'flex' : property.fieldClass"
-                    [floatLabel]="singleField ? 'always' : 'auto'"
-                    appearance="outline" subscriptSizing="dynamic">
-      <mat-label *ngIf="singleField">{{ property.name | customTranslate }}</mat-label>
-      <input matInput
-             [type]="property.type"
-             formControlName="{{ property.id }}"
-             [required]="property.required"
-             placeholder="{{ 'widget-config.set' | translate }}">
-      <div class="lt-md:!hidden" matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
-    </mat-form-field>
-    <mat-form-field *ngIf="property.type === FormPropertyType.number"
-                    [class]="singleField ? 'flex' : property.fieldClass"
-                    class="number"
-                    [floatLabel]="singleField ? 'always' : 'auto'"
-                    appearance="outline" subscriptSizing="dynamic">
-      <mat-label *ngIf="singleField">{{ property.name | customTranslate }}</mat-label>
-      <input matInput
-             type="number"
-             formControlName="{{ property.id }}"
-             [required]="property.required"
-             [min]="property.min"
-             [max]="property.max"
-             [step]="property.step"
-             placeholder="{{ 'widget-config.set' | translate }}">
-      <div class="lt-md:!hidden" matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
-    </mat-form-field>
-    <mat-form-field *ngIf="property.type === FormPropertyType.select"
-                    [class]="singleField ? 'flex' : (property.fieldClass || 'medium-width')"
-                    [floatLabel]="singleField ? 'always' : 'auto'"
-                    appearance="outline" subscriptSizing="dynamic">
-      <mat-label *ngIf="singleField">{{ property.name | customTranslate }}</mat-label>
-      <mat-select formControlName="{{ property.id }}"
+    @if (property.type === FormPropertyType.textarea) {
+      <mat-form-field
+        [class]="singleField ? 'flex' : property.fieldClass"
+        [floatLabel]="singleField ? 'always' : 'auto'"
+        appearance="outline" subscriptSizing="dynamic">
+        @if (singleField) {
+          <mat-label>{{ property.name | customTranslate }}</mat-label>
+        }
+        <textarea matInput
+                  [rows]="property.rows || 2"
+                  formControlName="{{ property.id }}"
                   [required]="property.required"
-                  [multiple]="property.multiple">
-        <mat-option *ngIf="!property.multiple && property.allowEmptyOption" [value]="null"></mat-option>
-        <mat-option *ngFor="let item of property.items" [value]="item.value">
-          {{ item.label | customTranslate }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-    <tb-datetime *ngIf="property.type === FormPropertyType.datetime"
-                 [fieldClass]="singleField ? 'flex' : property.fieldClass"
-                 [class.flex-1]="singleField || property.fieldClass?.includes('flex')"
-                 [floatLabel]="singleField ? 'always' : 'auto'"
-                 [showLabel]="singleField"
-                 [dateText]="singleField ? (property.name | customTranslate) : ''"
-                 [allowClear]="property.allowClear"
+        placeholder="{{ 'widget-config.set' | translate }}"></textarea>
+      </mat-form-field>
+    }
+    @if ([FormPropertyType.text, FormPropertyType.password].includes(property.type)) {
+      <mat-form-field
+        [class]="singleField ? 'flex' : property.fieldClass"
+        [floatLabel]="singleField ? 'always' : 'auto'"
+        appearance="outline" subscriptSizing="dynamic">
+        @if (singleField) {
+          <mat-label>{{ property.name | customTranslate }}</mat-label>
+        }
+        <input matInput
+               [type]="property.type"
+               formControlName="{{ property.id }}"
+               [required]="property.required"
+               placeholder="{{ 'widget-config.set' | translate }}">
+        @if (property.fieldSuffix) {
+          <div class="lt-md:!hidden" matSuffix>{{ property.fieldSuffix | customTranslate }}</div>
+        }
+      </mat-form-field>
+    }
+    @if (property.type === FormPropertyType.number) {
+      <mat-form-field
+        [class]="singleField ? 'flex' : property.fieldClass"
+        class="number"
+        [floatLabel]="singleField ? 'always' : 'auto'"
+        appearance="outline" subscriptSizing="dynamic">
+        @if (singleField) {
+          <mat-label>{{ property.name | customTranslate }}</mat-label>
+        }
+        <input matInput
+               type="number"
+               formControlName="{{ property.id }}"
+               [required]="property.required"
+               [min]="property.min"
+               [max]="property.max"
+               [step]="property.step"
+               placeholder="{{ 'widget-config.set' | translate }}">
+        @if (property.fieldSuffix) {
+          <div class="lt-md:!hidden" matSuffix>{{ property.fieldSuffix | customTranslate }}</div>
+        }
+      </mat-form-field>
+    }
+    @if (property.type === FormPropertyType.select) {
+      <mat-form-field
+        [class]="singleField ? 'flex' : (property.fieldClass || 'medium-width')"
+        [floatLabel]="singleField ? 'always' : 'auto'"
+        appearance="outline" subscriptSizing="dynamic">
+        @if (singleField) {
+          <mat-label>{{ property.name | customTranslate }}</mat-label>
+        }
+        <mat-select formControlName="{{ property.id }}"
+                    [required]="property.required"
+                    [multiple]="property.multiple">
+          @if (!property.multiple && property.allowEmptyOption) {
+            <mat-option [value]="null"></mat-option>
+          }
+          @for (item of property.items; track item) {
+            <mat-option [value]="item.value">
+              {{ item.label | customTranslate }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    }
+    @if (property.type === FormPropertyType.datetime) {
+      <tb-datetime
+        [fieldClass]="singleField ? 'flex' : property.fieldClass"
+        [class.flex-1]="singleField || property.fieldClass?.includes('flex')"
+        [floatLabel]="singleField ? 'always' : 'auto'"
+        [showLabel]="singleField"
+        [dateText]="singleField ? (property.name | customTranslate) : ''"
+        [allowClear]="property.allowClear"
+        [required]="property.required"
+        appearance="outline"
+        subscriptSizing="dynamic"
+        [type]="property.dateTimeType"
+        formControlName="{{ property.id }}">
+      </tb-datetime>
+    }
+    @if (property.type === FormPropertyType.javascript) {
+      <div class="tb-form-row flex-1">
+        <tb-js-func class="flex-1"
+                    label="{{ property.name | customTranslate }}"
+                    disableUndefinedCheck
+                    [required]="property.required"
+                    [helpId]="property.helpId"
+                    formControlName="{{ property.id }}">
+        </tb-js-func>
+      </div>
+    }
+    @if (property.type === FormPropertyType.json) {
+      <div class="tb-form-row flex-1">
+        <tb-json-content class="flex-1"
+                         label="{{ property.name | customTranslate }}"
+                         [required]="property.required"
+                         [contentType]="ContentType.JSON"
+                         formControlName="{{ property.id }}">
+        </tb-json-content>
+      </div>
+    }
+    @if (property.type === FormPropertyType.html) {
+      <div class="tb-form-row flex-1">
+        <tb-html class="flex-1"
+                 label="{{ property.name | customTranslate }}"
                  [required]="property.required"
-                 appearance="outline"
-                 subscriptSizing="dynamic"
-                 [type]="property.dateTimeType"
                  formControlName="{{ property.id }}">
-    </tb-datetime>
-    <div *ngIf="property.type === FormPropertyType.javascript" class="tb-form-row flex-1">
-      <tb-js-func class="flex-1"
-                  label="{{ property.name | customTranslate }}"
-                  disableUndefinedCheck
-                  [required]="property.required"
-                  [helpId]="property.helpId"
-                  formControlName="{{ property.id }}">
-      </tb-js-func>
-    </div>
-    <div *ngIf="property.type === FormPropertyType.json" class="tb-form-row flex-1">
-      <tb-json-content class="flex-1"
-                       label="{{ property.name | customTranslate }}"
-                       [required]="property.required"
-                       [contentType]="ContentType.JSON"
-                       formControlName="{{ property.id }}">
-      </tb-json-content>
-    </div>
-    <div *ngIf="property.type === FormPropertyType.html" class="tb-form-row flex-1">
-      <tb-html class="flex-1"
-               label="{{ property.name | customTranslate }}"
-               [required]="property.required"
-               formControlName="{{ property.id }}">
-      </tb-html>
-    </div>
-    <div *ngIf="property.type === FormPropertyType.css" class="tb-form-row flex-1">
-      <tb-css class="flex-1"
-              label="{{ property.name | customTranslate }}"
-              [required]="property.required"
-              formControlName="{{ property.id }}">
-      </tb-css>
-    </div>
-    <div *ngIf="property.type === FormPropertyType.markdown" class="tb-form-row flex-1">
-      <tb-markdown-editor class="flex-1"
-                          label="{{ property.name | customTranslate }}"
-                          [required]="property.required"
-                          [helpId]="property.helpId"
-                          formControlName="{{ property.id }}">
-      </tb-markdown-editor>
-    </div>
-    <div *ngIf="property.type === FormPropertyType.image" class="tb-form-row flex-1">
-      <tb-gallery-image-input
-        class="flex-1"
-        label="{{ property.name | customTranslate }}"
-        formControlName="{{ property.id }}"
-        [required]="property.required">
-      </tb-gallery-image-input>
-    </div>
-    <div *ngIf="property.type === FormPropertyType.radios"
-         class="tb-form-row tb-radios-property column-xs flex-1" [class.direction-column]="property.direction === 'column'">
-      <div tbTruncateWithTooltip class="fixed-title-width fixed-title-height">{{ property.name | customTranslate }}</div>
-      <mat-radio-group class="flex flex-1 flex-wrap" [class.flex-col]="property.direction === 'column'"
-                       [required]="property.required"
-                       formControlName="{{ property.id }}">
-        <mat-radio-button *ngFor="let item of property.items" [value]="item.value">
-          <div tbTruncateWithTooltip>{{ item.label | customTranslate }}</div>
-        </mat-radio-button>
-      </mat-radio-group>
-    </div>
+        </tb-html>
+      </div>
+    }
+    @if (property.type === FormPropertyType.css) {
+      <div class="tb-form-row flex-1">
+        <tb-css class="flex-1"
+                label="{{ property.name | customTranslate }}"
+                [required]="property.required"
+                formControlName="{{ property.id }}">
+        </tb-css>
+      </div>
+    }
+    @if (property.type === FormPropertyType.markdown) {
+      <div class="tb-form-row flex-1">
+        <tb-markdown-editor class="flex-1"
+                            label="{{ property.name | customTranslate }}"
+                            [required]="property.required"
+                            [helpId]="property.helpId"
+                            formControlName="{{ property.id }}">
+        </tb-markdown-editor>
+      </div>
+    }
+    @if (property.type === FormPropertyType.image) {
+      <div class="tb-form-row flex-1">
+        <tb-gallery-image-input
+          class="flex-1"
+          label="{{ property.name | customTranslate }}"
+          formControlName="{{ property.id }}"
+          [required]="property.required">
+        </tb-gallery-image-input>
+      </div>
+    }
+    @if (property.type === FormPropertyType.radios) {
+      <div
+        class="tb-form-row tb-radios-property column-xs flex-1" [class.direction-column]="property.direction === 'column'">
+        <div tbTruncateWithTooltip class="fixed-title-width fixed-title-height">{{ property.name | customTranslate }}</div>
+        <mat-radio-group class="flex flex-1 flex-wrap" [class.flex-col]="property.direction === 'column'"
+                         [required]="property.required"
+                         formControlName="{{ property.id }}">
+          @for (item of property.items; track item) {
+            <mat-radio-button [value]="item.value">
+              <div tbTruncateWithTooltip>{{ item.label | customTranslate }}</div>
+            </mat-radio-button>
+          }
+        </mat-radio-group>
+      </div>
+    }
   </ng-container>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/entity-alias-input.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/entity-alias-input.component.html
index 329a6aaf97..c11e528911 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/entity-alias-input.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/entity-alias-input.component.html
@@ -24,26 +24,31 @@
          [formControl]="entityAliasFormControl"
          (focusin)="onEntityAliasFocus()"
          [matAutocomplete]="entityAliasAutocomplete">
-  <mat-icon matSuffix
-            matTooltipPosition="above"
-            matTooltipClass="tb-error-tooltip"
-            [matTooltip]="'entity.alias-required' | translate"
-            *ngIf="required && entityAliasFormControl.hasError('required')
-                       && entityAliasFormControl.touched"
-            class="tb-error">
-    warning
-  </mat-icon>
-  <button *ngIf="entityAliasFormControl.value && !entityAliasFormControl.disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clearEntityAlias()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (required && entityAliasFormControl.hasError('required')
+    && entityAliasFormControl.touched) {
+    <mat-icon matSuffix
+              matTooltipPosition="above"
+              matTooltipClass="tb-error-tooltip"
+              [matTooltip]="'entity.alias-required' | translate"
+              class="tb-error">
+      warning
+    </mat-icon>
+  }
+  @if (entityAliasFormControl.value && !entityAliasFormControl.disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clearEntityAlias()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete
     class="tb-autocomplete"
     #entityAliasAutocomplete="matAutocomplete">
-    <mat-option *ngFor="let entityAlias of filteredEntityAliases | async" [value]="entityAlias">
-      <span [innerHTML]="entityAlias | highlight:aliasSearchText"></span>
-    </mat-option>
+    @for (entityAlias of filteredEntityAliases | async; track entityAlias) {
+      <mat-option [value]="entityAlias">
+        <span [innerHTML]="entityAlias | highlight:aliasSearchText"></span>
+      </mat-option>
+    }
   </mat-autocomplete>
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html
index 9ca50c55f0..326832d34e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html
@@ -21,7 +21,9 @@
                 class="mat-block"
                 [appearance]="inlineField ? 'outline' : appearance"
                 [subscriptSizing]="inlineField ? 'dynamic' : subscriptSizing">
-  <mat-label *ngIf="showLabel && !inlineField">{{ 'filter.filter' | translate }}</mat-label>
+  @if (showLabel && !inlineField) {
+    <mat-label>{{ 'filter.filter' | translate }}</mat-label>
+  }
   <input matInput type="text" placeholder="{{  (!showLabel || inlineField) ? ('filter.filter' | translate) : ''}}"
          #filterInput
          formControlName="filter"
@@ -31,51 +33,63 @@
          (keypress)="filterEnter($event)"
          [matAutocomplete]="filterAutocomplete">
   <div matSuffix class="mat-mdc-form-field-icon-suffix flex flex-row">
-    <button *ngIf="selectFilterFormGroup.get('filter').value && !disabled"
-            type="button"
-            mat-icon-button aria-label="Clear"
-            (click)="clear()">
-      <mat-icon class="material-icons">close</mat-icon>
-    </button>
-    <mat-icon matTooltipPosition="above"
-              matTooltipClass="tb-error-tooltip"
-              [matTooltip]="'filter.filter-required' | translate"
-              *ngIf="inlineField && !modelValue && tbRequired
-                            && selectFilterFormGroup.get('filter').touched"
-              class="tb-error">
-      warning
-    </mat-icon>
+    @if (selectFilterFormGroup.get('filter').value && !disabled) {
+      <button
+        type="button"
+        mat-icon-button aria-label="Clear"
+        (click)="clear()">
+        <mat-icon class="material-icons">close</mat-icon>
+      </button>
+    }
+    @if (inlineField && !modelValue && tbRequired
+      && selectFilterFormGroup.get('filter').touched) {
+      <mat-icon matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
+                [matTooltip]="'filter.filter-required' | translate"
+                class="tb-error">
+        warning
+      </mat-icon>
+    }
   </div>
-  <button *ngIf="!inlineField && !selectFilterFormGroup.get('filter').value && !disabled"
-          style="margin-right: 8px;"
-          type="button"
-          matSuffix mat-button color="primary"
-          (click)="createFilter($event, searchText, false)">
-    {{ 'filter.create-new' | translate }}
-  </button>
+  @if (!inlineField && !selectFilterFormGroup.get('filter').value && !disabled) {
+    <button
+      style="margin-right: 8px;"
+      type="button"
+      matSuffix mat-button color="primary"
+      (click)="createFilter($event, searchText, false)">
+      {{ 'filter.create-new' | translate }}
+    </button>
+  }
   <mat-autocomplete class="tb-autocomplete"
                     #filterAutocomplete="matAutocomplete"
                     [displayWith]="displayFilterFn">
-    <mat-option *ngFor="let filter of filteredFilters | async" [value]="filter">
-      <span [innerHTML]="filter.filter | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredFilters | async)?.length" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span translate>filter.no-filters-found</span>
-        </div>
-        <ng-template #searchNotEmpty>
+    @for (filter of filteredFilters | async; track filter) {
+      <mat-option [value]="filter">
+        <span [innerHTML]="filter.filter | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if (!(filteredFilters | async)?.length) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span translate>filter.no-filters-found</span>
+            </div>
+          } @else {
+            <span>
+              {{ 'filter.no-filter-matching' | translate : {filter: (searchText | truncate: true: 6: &apos;...&apos;)} }}
+            </span>
+          }
           <span>
-            {{ 'filter.no-filter-matching' | translate : {filter: (searchText | truncate: true: 6: &apos;...&apos;)} }}
+            <a translate (click)="createFilter($event, searchText)">filter.create-new-filter</a>
           </span>
-        </ng-template>
-        <span>
-          <a translate (click)="createFilter($event, searchText)">filter.create-new-filter</a>
-        </span>
-      </div>
-    </mat-option>
+        </div>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="!inlineField && !modelValue && tbRequired">
-    {{ 'filter.filter-required' | translate }}
-  </mat-error>
+  @if (!inlineField && !modelValue && tbRequired) {
+    <mat-error>
+      {{ 'filter.filter-required' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html
index f0bf2aa5cf..b795dfe25b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html
@@ -19,13 +19,17 @@
   <div class="tb-font-settings-title" translate>widgets.widget-font.font-settings</div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.size</div>
-    <div *ngIf="!autoScale" class="flex flex-1 flex-row items-center justify-start gap-3">
-      <mat-form-field appearance="outline" class="number flex-1" subscriptSizing="dynamic">
-        <input matInput type="number" min="0" formControlName="size" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-      <tb-css-unit-select class="flex-1" formControlName="sizeUnit"></tb-css-unit-select>
-    </div>
-    <div *ngIf="autoScale" class="tb-font-settings-auto" translate>widgets.widget-font.auto</div>
+    @if (!autoScale) {
+      <div class="flex flex-1 flex-row items-center justify-start gap-3">
+        <mat-form-field appearance="outline" class="number flex-1" subscriptSizing="dynamic">
+          <input matInput type="number" min="0" formControlName="size" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-css-unit-select class="flex-1" formControlName="sizeUnit"></tb-css-unit-select>
+      </div>
+    }
+    @if (autoScale) {
+      <div class="tb-font-settings-auto" translate>widgets.widget-font.auto</div>
+    }
   </div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.font-family</div>
@@ -33,19 +37,23 @@
       <input matInput #familyInput
              formControlName="family" placeholder="{{ 'widget-config.set' | translate }}"
              [matAutocomplete]="familyAutocomplete">
-      <button *ngIf="fontFormGroup.get('family').value"
-              type="button"
-              matSuffix mat-icon-button aria-label="Clear"
-              (click)="clearFamily()">
-        <mat-icon class="material-icons">close</mat-icon>
-      </button>
+      @if (fontFormGroup.get('family').value) {
+        <button
+          type="button"
+          matSuffix mat-icon-button aria-label="Clear"
+          (click)="clearFamily()">
+          <mat-icon class="material-icons">close</mat-icon>
+        </button>
+      }
       <mat-autocomplete
         #familyAutocomplete="matAutocomplete"
         class="tb-autocomplete"
         panelWidth="fit-content">
-        <mat-option *ngFor="let family of filteredFontFamilies | async" [value]="family">
-          <span [innerHTML]="family | highlight:familySearchText:true:'ig'"></span>
-        </mat-option>
+        @for (family of filteredFontFamilies | async; track family) {
+          <mat-option [value]="family">
+            <span [innerHTML]="family | highlight:familySearchText:true:'ig'"></span>
+          </mat-option>
+        }
       </mat-autocomplete>
     </mat-form-field>
   </div>
@@ -55,9 +63,11 @@
       <mat-select formControlName="weight" placeholder="{{ 'widget-config.set' | translate }}">
         <mat-option [value]="null">
         </mat-option>
-        <mat-option *ngFor="let weight of fontWeightsList" [value]="weight">
-          {{ fontWeightTranslationsMap.has(weight) ? (fontWeightTranslationsMap.get(weight) | translate) : weight }}
-        </mat-option>
+        @for (weight of fontWeightsList; track weight) {
+          <mat-option [value]="weight">
+            {{ fontWeightTranslationsMap.has(weight) ? (fontWeightTranslationsMap.get(weight) | translate) : weight }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
   </div>
@@ -67,33 +77,45 @@
       <mat-select formControlName="style" placeholder="{{ 'widget-config.set' | translate }}">
         <mat-option [value]="null">
         </mat-option>
-        <mat-option *ngFor="let style of fontStylesList" [value]="style">
-          {{ fontStyleTranslationsMap.get(style) | translate }}
-        </mat-option>
+        @for (style of fontStylesList; track style) {
+          <mat-option [value]="style">
+            {{ fontStyleTranslationsMap.get(style) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
   </div>
-  <div class="tb-form-row no-border no-padding" *ngIf="!disabledLineHeight">
-    <div class="fixed-title-width" translate>widgets.widget-font.line-height</div>
-    <mat-form-field *ngIf="!autoScale" class="flex-1" appearance="outline" subscriptSizing="dynamic">
-      <input matInput formControlName="lineHeight" placeholder="{{ 'widget-config.set' | translate }}">
-    </mat-form-field>
-    <div *ngIf="autoScale" class="tb-font-settings-auto" translate>widgets.widget-font.auto</div>
-  </div>
+  @if (!disabledLineHeight) {
+    <div class="tb-form-row no-border no-padding">
+      <div class="fixed-title-width" translate>widgets.widget-font.line-height</div>
+      @if (!autoScale) {
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="lineHeight" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      }
+      @if (autoScale) {
+        <div class="tb-font-settings-auto" translate>widgets.widget-font.auto</div>
+      }
+    </div>
+  }
   <mat-divider></mat-divider>
   <div class="tb-form-row no-border no-padding font-preview">
     <div class="fixed-title-width" translate>widgets.widget-font.preview</div>
     <div class="preview-text flex-1" [style]="previewStyle" [innerHTML]="previewText | safe:'html'"></div>
   </div>
   <div class="tb-font-settings-panel-buttons">
-    <button *ngIf="clearButton"
-            mat-button
-            type="button"
-            (click)="clearFont()"
-            [disabled]="clearDisabled()">
-      {{ 'action.clear' | translate }}
-    </button>
-    <span *ngIf="clearButton" class="flex-1"></span>
+    @if (clearButton) {
+      <button
+        mat-button
+        type="button"
+        (click)="clearFont()"
+        [disabled]="clearDisabled()">
+        {{ 'action.clear' | translate }}
+      </button>
+    }
+    @if (clearButton) {
+      <span class="flex-1"></span>
+    }
     <button mat-button
             color="primary"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html
index 3634ad6c8f..143104b5f0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html
@@ -17,194 +17,200 @@
 -->
 <ng-container [formGroup]="gradientFormGroup">
 
-  <div class="flex flex-row items-center justify-start" *ngIf="advancedMode">
-    <div class="tb-form-panel-title flex-1 xs:!hidden" translate>widgets.color.gradient-type</div>
-    <tb-toggle-select formControlName="advancedMode" class="flex-1">
-      <tb-toggle-option [value]="false">
-        {{ 'widgets.color.basic-mode' | translate }}
-      </tb-toggle-option>
-      <tb-toggle-option [value]="true">
-        {{ 'widgets.color.advanced-mode' | translate}}
-      </tb-toggle-option>
-    </tb-toggle-select>
-  </div>
+  @if (advancedMode) {
+    <div class="flex flex-row items-center justify-start">
+      <div class="tb-form-panel-title flex-1 xs:!hidden" translate>widgets.color.gradient-type</div>
+      <tb-toggle-select formControlName="advancedMode" class="flex-1">
+        <tb-toggle-option [value]="false">
+          {{ 'widgets.color.basic-mode' | translate }}
+        </tb-toggle-option>
+        <tb-toggle-option [value]="true">
+          {{ 'widgets.color.advanced-mode' | translate}}
+        </tb-toggle-option>
+      </tb-toggle-select>
+    </div>
+  }
 
   <div class="gradient-preview">
     <div [style]="linearGradient" class="gradient-background" [innerHtml]="(generatePointers | safe: 'html')">
     </div>
   </div>
 
-  <div class="gradient-settings" [ngSwitch]="gradientFormGroup.get('advancedMode').value">
-    <ng-template [ngSwitchCase]="false">
-      <div class="gradient">
-        <div class="gradient-container gradient-container-start">
-          <div translate>widgets.color.gradient-start</div>
-          <div class="start-gradient-container">
-            <div class="tb-form-row no-border no-padding">
-              <div class="gradient-text xs:!hidden" translate>widgets.color.start-value</div>
-              <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-                <input matInput type="number" formControlName="minValue" placeholder="{{ 'widget-config.set' | translate }}">
-              </mat-form-field>
+  <div class="gradient-settings">
+    @switch (gradientFormGroup.get('advancedMode').value) {
+      @case (false) {
+        <div class="gradient">
+          <div class="gradient-container gradient-container-start">
+            <div translate>widgets.color.gradient-start</div>
+            <div class="start-gradient-container">
+              <div class="tb-form-row no-border no-padding">
+                <div class="gradient-text xs:!hidden" translate>widgets.color.start-value</div>
+                <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+                  <input matInput type="number" formControlName="minValue" placeholder="{{ 'widget-config.set' | translate }}">
+                </mat-form-field>
+              </div>
+              <ng-container formGroupName="gradient">
+                <tb-color-input asBoxInput
+                                formControlName="start">
+                </tb-color-input>
+              </ng-container>
             </div>
-            <ng-container formGroupName="gradient">
-              <tb-color-input asBoxInput
-                              formControlName="start">
-              </tb-color-input>
-            </ng-container>
           </div>
         </div>
-      </div>
-
-      <div class="tb-colors-gradient" *ngIf="gradientListFormGroups.length">
-        <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
-             (cdkDropListDropped)="gradientDrop($event)">
-          <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
-               [formGroup]="gradientFormGroup"
-               *ngFor="let gradientFormGroup of gradientListFormGroups; trackBy: trackByGradient; let $index = index; last as isLast;"
-               [class.pb-2]="!isLast">
-            <div class="gradient">
-              <div class="gradient-container">
-                <div translate>widgets.color.gradient-color</div>
+        @if (gradientListFormGroups.length) {
+          <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) {
+                <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
+                     [formGroup]="gradientFormGroup"
+                     [class.pb-2]="!isLast">
+                  <div class="gradient">
+                    <div class="gradient-container">
+                      <div translate>widgets.color.gradient-color</div>
+                      <tb-color-input asBoxInput
+                                      formControlName="color">
+                      </tb-color-input>
+                    </div>
+                    <button type="button"
+                            mat-icon-button
+                            class="tb-box-button"
+                            (click)="removeGradient($index)"
+                            matTooltip="{{ 'action.remove' | translate }}"
+                            matTooltipPosition="above">
+                      <mat-icon>delete</mat-icon>
+                    </button>
+                    <button class="tb-box-button lt-lg:!hidden"
+                            mat-icon-button
+                            type="button"
+                            cdkDragHandle
+                            matTooltip="{{ 'action.drag' | translate }}"
+                            matTooltipPosition="above">
+                      <mat-icon>drag_indicator</mat-icon>
+                    </button>
+                  </div>
+                </div>
+              }
+            </div>
+          </div>
+        }
+        <button class="tb-add-gradient"
+                mat-stroked-button
+                (click)="addGradient()">
+          <mat-icon>add</mat-icon>
+        </button>
+        <div class="gradient">
+          <div class="gradient-container gradient-container-end">
+            <div translate>widgets.color.gradient-end</div>
+            <div class="end-gradient-container">
+              <div class="tb-form-row no-border no-padding">
+                <div class="gradient-text xs:!hidden" translate>widgets.color.end-value</div>
+                <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+                  <input matInput type="number" formControlName="maxValue" placeholder="{{ 'widget-config.set' | translate }}">
+                </mat-form-field>
+              </div>
+              <ng-container formGroupName="gradient">
                 <tb-color-input asBoxInput
-                                formControlName="color">
+                                formControlName="end">
                 </tb-color-input>
-              </div>
-              <button type="button"
-                      mat-icon-button
-                      class="tb-box-button"
-                      (click)="removeGradient($index)"
-                      matTooltip="{{ 'action.remove' | translate }}"
-                      matTooltipPosition="above">
-                <mat-icon>delete</mat-icon>
-              </button>
-              <button class="tb-box-button lt-lg:!hidden"
-                      mat-icon-button
-                      type="button"
-                      cdkDragHandle
-                      matTooltip="{{ 'action.drag' | translate }}"
-                      matTooltipPosition="above">
-                <mat-icon>drag_indicator</mat-icon>
-              </button>
+              </ng-container>
             </div>
           </div>
         </div>
-      </div>
-      <button class="tb-add-gradient"
-              mat-stroked-button
-              (click)="addGradient()">
-        <mat-icon>add</mat-icon>
-      </button>
-
-      <div class="gradient">
-        <div class="gradient-container gradient-container-end">
-          <div translate>widgets.color.gradient-end</div>
-          <div class="end-gradient-container">
-            <div class="tb-form-row no-border no-padding">
-              <div class="gradient-text xs:!hidden" translate>widgets.color.end-value</div>
-              <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-                <input matInput type="number" formControlName="maxValue" placeholder="{{ 'widget-config.set' | translate }}">
-              </mat-form-field>
+      }
+      @case (true) {
+        <div class="gradient" formGroupName="gradientAdvanced">
+          <div class="gradient-container gradient-container-start" formGroupName="start">
+            <div class="tb-gradient-text">
+              <span class="xs:!hidden" translate>widgets.color.gradient-start</span>
+              <span class="gt-xs:!hidden" translate>widgets.color.gradient-start-min</span>
             </div>
-            <ng-container formGroupName="gradient">
+            <div class="tb-form-row no-border no-padding start-gradient-container start-gradient-container-advanced">
+              <tb-value-source-data-key class="flex-1"
+                                        formControlName="source"
+                                        [aliasController]="aliasController"
+                                        [dataKeyCallbacks]="dataKeyCallbacks"
+                                        [datasource]="datasource">
+              </tb-value-source-data-key>
               <tb-color-input asBoxInput
-                              formControlName="end">
+                              formControlName="color">
               </tb-color-input>
-            </ng-container>
-          </div>
-        </div>
-      </div>
-    </ng-template>
-    <ng-template [ngSwitchCase]="true">
-      <div class="gradient" formGroupName="gradientAdvanced">
-        <div class="gradient-container gradient-container-start" formGroupName="start">
-          <div class="tb-gradient-text">
-            <span class="xs:!hidden" translate>widgets.color.gradient-start</span>
-            <span class="gt-xs:!hidden" translate>widgets.color.gradient-start-min</span>
-          </div>
-          <div class="tb-form-row no-border no-padding start-gradient-container start-gradient-container-advanced">
-            <tb-value-source-data-key class="flex-1"
-                                      formControlName="source"
-                                      [aliasController]="aliasController"
-                                      [dataKeyCallbacks]="dataKeyCallbacks"
-                                      [datasource]="datasource">
-            </tb-value-source-data-key>
-            <tb-color-input asBoxInput
-                            formControlName="color">
-            </tb-color-input>
+            </div>
           </div>
         </div>
-      </div>
-
-      <div class="tb-colors-gradient" *ngIf="advancedGradientListFormGroups.length">
-        <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
-             (cdkDropListDropped)="gradientDrop($event, true)">
-          <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
-               [formGroup]="gradientFormGroup"
-               *ngFor="let gradientFormGroup of advancedGradientListFormGroups; trackBy: trackByGradient; let $index = index; last as isLast;"
-               [class.pb-2]="!isLast">
-            <div class="gradient">
-              <div class="gradient-container">
-                <div class="tb-gradient-text">
-                  <span class="xs:!hidden" translate>widgets.color.gradient-color</span>
-                  <span class="gt-xs:!hidden" translate>widgets.color.gradient-color-min</span>
-                </div>
-                <div class="list-gradient-container list-gradient-container-advanced">
-                  <tb-value-source-data-key class="flex-1"
-                                            formControlName="source"
-                                            [aliasController]="aliasController"
-                                            [dataKeyCallbacks]="dataKeyCallbacks"
-                                            [datasource]="datasource">
-                  </tb-value-source-data-key>
-                  <tb-color-input asBoxInput
-                                  formControlName="color">
-                  </tb-color-input>
+        @if (advancedGradientListFormGroups.length) {
+          <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) {
+                <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
+                     [formGroup]="gradientFormGroup"
+                     [class.pb-2]="!isLast">
+                  <div class="gradient">
+                    <div class="gradient-container">
+                      <div class="tb-gradient-text">
+                        <span class="xs:!hidden" translate>widgets.color.gradient-color</span>
+                        <span class="gt-xs:!hidden" translate>widgets.color.gradient-color-min</span>
+                      </div>
+                      <div class="list-gradient-container list-gradient-container-advanced">
+                        <tb-value-source-data-key class="flex-1"
+                                                  formControlName="source"
+                                                  [aliasController]="aliasController"
+                                                  [dataKeyCallbacks]="dataKeyCallbacks"
+                                                  [datasource]="datasource">
+                        </tb-value-source-data-key>
+                        <tb-color-input asBoxInput
+                                        formControlName="color">
+                        </tb-color-input>
+                      </div>
+                    </div>
+                    <button type="button"
+                            mat-icon-button
+                            class="tb-box-button"
+                            (click)="removeGradient($index, true)"
+                            matTooltip="{{ 'action.remove' | translate }}"
+                            matTooltipPosition="above">
+                      <mat-icon>delete</mat-icon>
+                    </button>
+                    <button class="tb-box-button lt-lg:!hidden"
+                            mat-icon-button
+                            type="button"
+                            cdkDragHandle
+                            matTooltip="{{ 'action.drag' | translate }}"
+                            matTooltipPosition="above">
+                      <mat-icon>drag_indicator</mat-icon>
+                    </button>
+                  </div>
                 </div>
-              </div>
-              <button type="button"
-                      mat-icon-button
-                      class="tb-box-button"
-                      (click)="removeGradient($index, true)"
-                      matTooltip="{{ 'action.remove' | translate }}"
-                      matTooltipPosition="above">
-                <mat-icon>delete</mat-icon>
-              </button>
-              <button class="tb-box-button lt-lg:!hidden"
-                      mat-icon-button
-                      type="button"
-                      cdkDragHandle
-                      matTooltip="{{ 'action.drag' | translate }}"
-                      matTooltipPosition="above">
-                <mat-icon>drag_indicator</mat-icon>
-              </button>
+              }
             </div>
           </div>
-        </div>
-      </div>
-      <button class="tb-add-gradient"
-              mat-stroked-button
-              (click)="addGradient(true)">
-        <mat-icon>add</mat-icon>
-      </button>
-
-      <div class="gradient" formGroupName="gradientAdvanced">
-        <div class="gradient-container gradient-container-end" formGroupName="end">
-          <div class="tb-gradient-text">
-            <span class="xs:!hidden" translate>widgets.color.gradient-end</span>
-            <span class="gt-xs:!hidden" translate>widgets.color.gradient-end-min</span>
-          </div>
-          <div class="tb-form-row no-border no-padding end-gradient-container end-gradient-container-advanced">
-            <tb-value-source-data-key class="flex-1"
-                                      formControlName="source"
-                                      [aliasController]="aliasController"
-                                      [dataKeyCallbacks]="dataKeyCallbacks"
-                                      [datasource]="datasource">
-            </tb-value-source-data-key>
-            <tb-color-input asBoxInput
-                            formControlName="color">
-            </tb-color-input>
+        }
+        <button class="tb-add-gradient"
+                mat-stroked-button
+                (click)="addGradient(true)">
+          <mat-icon>add</mat-icon>
+        </button>
+        <div class="gradient" formGroupName="gradientAdvanced">
+          <div class="gradient-container gradient-container-end" formGroupName="end">
+            <div class="tb-gradient-text">
+              <span class="xs:!hidden" translate>widgets.color.gradient-end</span>
+              <span class="gt-xs:!hidden" translate>widgets.color.gradient-end-min</span>
+            </div>
+            <div class="tb-form-row no-border no-padding end-gradient-container end-gradient-container-advanced">
+              <tb-value-source-data-key class="flex-1"
+                                        formControlName="source"
+                                        [aliasController]="aliasController"
+                                        [dataKeyCallbacks]="dataKeyCallbacks"
+                                        [datasource]="datasource">
+              </tb-value-source-data-key>
+              <tb-color-input asBoxInput
+                              formControlName="color">
+              </tb-color-input>
+            </div>
           </div>
         </div>
-      </div>
-    </ng-template>
+      }
+    }
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
index b8cbb8ba82..93a1ed6adc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
@@ -28,15 +28,17 @@
     </mat-expansion-panel-header>
     <ng-template matExpansionPanelContent>
       <mat-grid-list class="tb-image-cards-options" [cols]="cols$ | async" [rowHeight]="rowHeight" gutterSize="8">
-        <mat-grid-tile *ngFor="let option of options" (click)="updateModel(option.value)">
-          <div class="tb-image-cards-option" [class.selected]="modelValue === option.value">
-            <div class="tb-image-cards-option-background"></div>
-            <div class="tb-image-cards-option-title">{{ option.name }}</div>
-            <div class="tb-image-cards-option-image-container">
-              <img class="tb-image-cards-option-image" [src]="option.image"/>
+        @for (option of options; track option) {
+          <mat-grid-tile (click)="updateModel(option.value)">
+            <div class="tb-image-cards-option" [class.selected]="modelValue === option.value">
+              <div class="tb-image-cards-option-background"></div>
+              <div class="tb-image-cards-option-title">{{ option.name }}</div>
+              <div class="tb-image-cards-option-image-container">
+                <img class="tb-image-cards-option-image" [src]="option.image"/>
+              </div>
             </div>
-          </div>
-        </mat-grid-tile>
+          </mat-grid-tile>
+        }
       </mat-grid-list>
     </ng-template>
   </mat-expansion-panel>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
index 485f6d0af4..f89fde663a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
@@ -16,39 +16,43 @@
 
 -->
 <ng-container [formGroup]="stateSettingsFormGroup">
-  <div *ngIf="layout !== StatusWidgetLayout.icon" class="tb-form-row column-xs">
-    <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
-      {{ 'widgets.status-widget.label' | translate }}
-    </mat-slide-toggle>
-    <div class="flex flex-1 flex-row items-center justify-start gap-2">
-      <tb-string-pattern-autocomplete class="flex-1"
-                                      appearance="outline"
-                                      brackets="curly"
-                                      subscriptSizing="dynamic"
-                                      predefinedValuesButton="true"
-                                      [disabled]="!stateSettingsFormGroup.get('showLabel').value"
-                                      [predefinedValues]="predefinedValues"
-                                      placeholderText="{{ 'widget-config.set' | translate }}"
-                                      formControlName="label"
-      ></tb-string-pattern-autocomplete>
-      <tb-font-settings formControlName="labelFont"
-                        [previewText]="stateSettingsFormGroup.get('label').value">
-      </tb-font-settings>
+  @if (layout !== StatusWidgetLayout.icon) {
+    <div class="tb-form-row column-xs">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
+        {{ 'widgets.status-widget.label' | translate }}
+      </mat-slide-toggle>
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!stateSettingsFormGroup.get('showLabel').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="label"
+        ></tb-string-pattern-autocomplete>
+        <tb-font-settings formControlName="labelFont"
+                          [previewText]="stateSettingsFormGroup.get('label').value">
+        </tb-font-settings>
+      </div>
     </div>
-  </div>
-  <div *ngIf="layout !== StatusWidgetLayout.icon" class="tb-form-row column-xs">
-    <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showStatus">
-      {{ 'widgets.status-widget.status' | translate }}
-    </mat-slide-toggle>
-    <div class="flex flex-1 flex-row items-center justify-start gap-2">
-      <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="status" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-      <tb-font-settings formControlName="statusFont"
-                        [previewText]="stateSettingsFormGroup.get('status').value">
-      </tb-font-settings>
+  }
+  @if (layout !== StatusWidgetLayout.icon) {
+    <div class="tb-form-row column-xs">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showStatus">
+        {{ 'widgets.status-widget.status' | translate }}
+      </mat-slide-toggle>
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="status" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-font-settings formControlName="statusFont"
+                          [previewText]="stateSettingsFormGroup.get('status').value">
+        </tb-font-settings>
+      </div>
     </div>
-  </div>
+  }
   <div class="tb-form-row">
     <div class="fixed-title-width">
       {{ 'widgets.status-widget.icon' | translate }}
@@ -74,13 +78,17 @@
                         formControlName="primaryColor">
         </tb-color-input>
       </div>
-      <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical class="lt-md:!hidden"></mat-divider>
-      <div *ngIf="layout !== StatusWidgetLayout.icon" class="flex flex-row items-center justify-start gap-2">
-        <div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}" translate>widgets.status-widget.secondary</div>
-        <tb-color-input asBoxInput
-                        formControlName="secondaryColor">
-        </tb-color-input>
-      </div>
+      @if (layout !== StatusWidgetLayout.icon) {
+        <mat-divider vertical class="lt-md:!hidden"></mat-divider>
+      }
+      @if (layout !== StatusWidgetLayout.icon) {
+        <div class="flex flex-row items-center justify-start gap-2">
+          <div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}" translate>widgets.status-widget.secondary</div>
+          <tb-color-input asBoxInput
+                          formControlName="secondaryColor">
+          </tb-color-input>
+        </div>
+      }
       <mat-divider vertical class="lt-sm:!hidden" [class.lt-md:!hidden]="layout !== StatusWidgetLayout.icon"></mat-divider>
       <div class="flex flex-row items-center justify-start gap-2">
         <div translate>widgets.status-widget.background</div>
@@ -100,13 +108,17 @@
                         formControlName="primaryColorDisabled">
         </tb-color-input>
       </div>
-      <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical class="lt-md:!hidden"></mat-divider>
-      <div *ngIf="layout !== StatusWidgetLayout.icon" class="flex flex-row items-center justify-start gap-2">
-        <div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}" translate>widgets.status-widget.secondary</div>
-        <tb-color-input asBoxInput
-                        formControlName="secondaryColorDisabled">
-        </tb-color-input>
-      </div>
+      @if (layout !== StatusWidgetLayout.icon) {
+        <mat-divider vertical class="lt-md:!hidden"></mat-divider>
+      }
+      @if (layout !== StatusWidgetLayout.icon) {
+        <div class="flex flex-row items-center justify-start gap-2">
+          <div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}" translate>widgets.status-widget.secondary</div>
+          <tb-color-input asBoxInput
+                          formControlName="secondaryColorDisabled">
+          </tb-color-input>
+        </div>
+      }
       <mat-divider vertical class="lt-sm:!hidden" [class.lt-md:!hidden]="layout !== StatusWidgetLayout.icon"></mat-divider>
       <div class="flex flex-row items-center justify-start gap-2">
         <div translate>widgets.status-widget.background</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config-dialog.component.html
index 5b91e07224..802adb5211 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config-dialog.component.html
@@ -19,40 +19,45 @@
   <mat-toolbar color="primary">
     <h2>{{ 'datakey.configuration' | translate }}</h2>
     <span class="flex-1"></span>
-    <tb-toggle-select *ngIf="hasAdvanced"
-                      appearance="fill-invert" selectMediaBreakpoint="xs" [options]="dataKeyConfigHeaderOptions"
-                      [(ngModel)]="dataKeyConfigMode" [ngModelOptions]="{ standalone: true }">
-    </tb-toggle-select>
+    @if (hasAdvanced) {
+      <tb-toggle-select
+        appearance="fill-invert" selectMediaBreakpoint="xs" [options]="dataKeyConfigHeaderOptions"
+        [(ngModel)]="dataKeyConfigMode" [ngModelOptions]="{ standalone: true }">
+      </tb-toggle-select>
+    }
     <button mat-icon-button
             (click)="cancel()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content style="padding: 0; height: 800px; overflow: auto;">
     <tb-data-key-config #dataKeyConfig
-      [dataKeyConfigMode]="dataKeyConfigMode"
-      [dataKeySettingsForm]="data.dataKeySettingsForm"
-      [dataKeySettingsDirective]="data.dataKeySettingsDirective"
-      [deviceId]="data.deviceId"
-      [entityAliasId]="data.entityAliasId"
-      [dashboard]="data.dashboard"
-      [aliasController]="data.aliasController"
-      [widget]="data.widget"
-      [widgetType]="data.widgetType"
-      [showPostProcessing]="data.showPostProcessing"
-      [callbacks]="data.callbacks"
-      [hideDataKeyName]="data.hideDataKeyName"
-      [hideDataKeyLabel]="data.hideDataKeyLabel"
-      [hideDataKeyColor]="data.hideDataKeyColor"
-      [hideDataKeyUnits]="data.hideDataKeyUnits"
-      [hideDataKeyDecimals]="data.hideDataKeyDecimals"
-      [hideDataKeyAggregation]="data.hideDataKeyAggregation"
-      [supportsUnitConversion]="data.supportsUnitConversion"
-      formControlName="dataKey">
+                        [dataKeyConfigMode]="dataKeyConfigMode"
+                        [dataKeySettingsForm]="data.dataKeySettingsForm"
+                        [dataKeySettingsDirective]="data.dataKeySettingsDirective"
+                        [deviceId]="data.deviceId"
+                        [entityAliasId]="data.entityAliasId"
+                        [dashboard]="data.dashboard"
+                        [aliasController]="data.aliasController"
+                        [widget]="data.widget"
+                        [widgetType]="data.widgetType"
+                        [showPostProcessing]="data.showPostProcessing"
+                        [callbacks]="data.callbacks"
+                        [hideDataKeyName]="data.hideDataKeyName"
+                        [hideDataKeyLabel]="data.hideDataKeyLabel"
+                        [hideDataKeyColor]="data.hideDataKeyColor"
+                        [hideDataKeyUnits]="data.hideDataKeyUnits"
+                        [hideDataKeyDecimals]="data.hideDataKeyDecimals"
+                        [hideDataKeyAggregation]="data.hideDataKeyAggregation"
+                        [supportsUnitConversion]="data.supportsUnitConversion"
+                        formControlName="dataKey">
     </tb-data-key-config>
   </div>
   <div mat-dialog-actions class="flex items-center justify-end">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config.component.html
index 85acdab5cf..d5aa8967c7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config.component.html
@@ -15,185 +15,218 @@
     limitations under the License.
 
 -->
-<div *ngIf="dataKeyConfigMode === dataKeyConfigModes.general; else advanced"
-     [formGroup]="dataKeyFormGroup">
-  <div class="mat-padding flex flex-col gap-4">
-    <div class="tb-form-panel">
-      <div class="tb-form-panel-title" translate>datakey.general</div>
-      <mat-form-field *ngIf="modelValue.type !== dataKeyTypes.function && !hideDataKeyName" subscriptSizing="dynamic">
-        <mat-label>{{ 'entity.key' | translate }}</mat-label>
-        <input matInput type="text" placeholder="{{ 'entity.key-name' | translate }}"
-               #keyInput
-               formControlName="name"
-               required
-               [matAutocomplete]="keyAutocomplete">
-        <button *ngIf="dataKeyFormGroup.get('name').value && !dataKeyFormGroup.get('name').disabled"
+@if (dataKeyConfigMode === dataKeyConfigModes.general) {
+  <div
+    [formGroup]="dataKeyFormGroup">
+    <div class="mat-padding flex flex-col gap-4">
+      <div class="tb-form-panel">
+        <div class="tb-form-panel-title" translate>datakey.general</div>
+        @if (modelValue.type !== dataKeyTypes.function && !hideDataKeyName) {
+          <mat-form-field subscriptSizing="dynamic">
+            <mat-label>{{ 'entity.key' | translate }}</mat-label>
+            <input matInput type="text" placeholder="{{ 'entity.key-name' | translate }}"
+                   #keyInput
+                   formControlName="name"
+                   required
+                   [matAutocomplete]="keyAutocomplete">
+            @if (dataKeyFormGroup.get('name').value && !dataKeyFormGroup.get('name').disabled) {
+              <button
                 type="button"
                 matSuffix mat-icon-button aria-label="Clear"
                 (click)="clearKey()">
-          <mat-icon class="material-icons">close</mat-icon>
-        </button>
-        <mat-autocomplete
-          class="tb-autocomplete"
-          #keyAutocomplete="matAutocomplete">
-          <mat-option *ngFor="let key of filteredKeys | async" [value]="key">
-            <span [innerHTML]="key | highlight:keySearchText"></span>
-          </mat-option>
-        </mat-autocomplete>
-      </mat-form-field>
-      <mat-form-field *ngIf="!hideDataKeyLabel" subscriptSizing="dynamic">
-        <mat-label translate>datakey.label</mat-label>
-        <input matInput formControlName="label" required>
-      </mat-form-field>
-      <ng-container *ngIf="modelValue.type !== dataKeyTypes.alarm">
-        <div class="tb-form-row space-between" *ngIf="!hideDataKeyUnits">
-          <div translate>widget-config.units-short</div>
-          <tb-unit-input
-            [supportsUnitConversion]="supportsUnitConversion"
-            formControlName="units">
-          </tb-unit-input>
-        </div>
-        <div class="tb-form-row space-between" *ngIf="!hideDataKeyDecimals">
-          <div translate>widget-config.decimals-short</div>
-          <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-            <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-        </div>
-      </ng-container>
-      <div class="tb-form-row space-between" *ngIf="!hideDataKeyColor">
-        <div>{{ 'datakey.color' | translate }}</div>
-        <tb-color-input asBoxInput
-                        formControlName="color">
-        </tb-color-input>
-      </div>
-      <section class="flex flex-col" *ngIf="modelValue.type === dataKeyTypes.function">
-        <span translate>datakey.data-generation-func</span>
-        <br/>
-        <tb-js-func #funcBodyEdit
-                    [functionArgs]="['time', 'prevValue']"
-                    [globalVariables]="functionScopeVariables"
-                    [validationArgs]="[[1, 1],[1, '1']]"
-                    withModules
-                    resultType="any"
-                    helpId="widget/config/datakey_generation_fn"
-                    formControlName="funcBody">
-        </tb-js-func>
-      </section>
-      <ng-container *ngIf="!hideDataKeyAggregation && widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries">
-        <div class="tb-form-row column">
-          <div class="tb-form-row space-between no-border no-padding">
-            <div>{{ 'datakey.aggregation' | translate }}</div>
-            <mat-form-field class="medium-width" subscriptSizing="dynamic" appearance="outline">
-              <mat-select formControlName="aggregationType">
-                <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
-                  {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
+                <mat-icon class="material-icons">close</mat-icon>
+              </button>
+            }
+            <mat-autocomplete
+              class="tb-autocomplete"
+              #keyAutocomplete="matAutocomplete">
+              @for (key of filteredKeys | async; track key) {
+                <mat-option [value]="key">
+                  <span [innerHTML]="key | highlight:keySearchText"></span>
                 </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
-          <div class="tb-form-hint tb-primary-fill">
-            {{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }}
-            <section *ngIf="dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE">
-              {{ 'datakey.aggregation-type-hint-common' | translate }}
-            </section>
-          </div>
-        </div>
-      </ng-container>
-    </div>
-    <div *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE"
-         class="tb-form-panel">
-      <div class="tb-form-panel-title" translate>datakey.delta-calculation</div>
-      <div class="tb-form-panel stroked tb-slide-toggle">
-        <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value">
-        <mat-expansion-panel-header class="flex flex-row flex-wrap">
-          <mat-panel-title class="flex flex-col items-start justify-center gap-2">
-            <mat-slide-toggle class="mat-slide" formControlName="comparisonEnabled" (click)="$event.stopPropagation()">
-              {{ 'datakey.enable-delta-calculation' | translate }}
-            </mat-slide-toggle>
-            <mat-hint class="tb-form-hint tb-primary-fill">{{ 'datakey.enable-delta-calculation-hint' | translate }}</mat-hint>
-          </mat-panel-title>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
-          <ng-container *ngIf="dataKeyFormGroup.get('comparisonEnabled').value">
+              }
+            </mat-autocomplete>
+          </mat-form-field>
+        }
+        @if (!hideDataKeyLabel) {
+          <mat-form-field subscriptSizing="dynamic">
+            <mat-label translate>datakey.label</mat-label>
+            <input matInput formControlName="label" required>
+          </mat-form-field>
+        }
+        @if (modelValue.type !== dataKeyTypes.alarm) {
+          @if (!hideDataKeyUnits) {
             <div class="tb-form-row space-between">
-              <div>{{ 'widgets.chart.time-for-comparison' | translate }}</div>
-              <mat-form-field class="medium-width" subscriptSizing="dynamic" appearance="outline">
-                <mat-select formControlName="timeForComparison">
-                  <mat-option [value]="'previousInterval'">
-                    {{ 'widgets.chart.time-for-comparison-previous-interval' | translate }}
-                  </mat-option>
-                  <mat-option [value]="'days'">
-                    {{ 'widgets.chart.time-for-comparison-days' | translate }}
-                  </mat-option>
-                  <mat-option [value]="'weeks'">
-                    {{ 'widgets.chart.time-for-comparison-weeks' | translate }}
-                  </mat-option>
-                  <mat-option [value]="'months'">
-                    {{ 'widgets.chart.time-for-comparison-months' | translate }}
-                  </mat-option>
-                  <mat-option [value]="'years'">
-                    {{ 'widgets.chart.time-for-comparison-years' | translate }}
-                  </mat-option>
-                  <mat-option [value]="'customInterval'">
-                    {{ 'widgets.chart.time-for-comparison-custom-interval' | translate }}
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
+              <div translate>widget-config.units-short</div>
+              <tb-unit-input
+                [supportsUnitConversion]="supportsUnitConversion"
+                formControlName="units">
+              </tb-unit-input>
             </div>
-            <div *ngIf="dataKeyFormGroup.get('timeForComparison').value === 'customInterval'" class="tb-form-row space-between">
-              <div>{{ 'widgets.chart.custom-interval-value' | translate }}</div>
-              <mat-form-field class="medium-width number" subscriptSizing="dynamic" appearance="outline">
-                <input required matInput type="number" min="0" formControlName="comparisonCustomIntervalValue">
+          }
+          @if (!hideDataKeyDecimals) {
+            <div class="tb-form-row space-between">
+              <div translate>widget-config.decimals-short</div>
+              <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+                <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
             </div>
-            <div class="tb-form-row space-between">
-              <div>{{ 'datakey.delta-calculation-result' | translate }}</div>
+          }
+        }
+        @if (!hideDataKeyColor) {
+          <div class="tb-form-row space-between">
+            <div>{{ 'datakey.color' | translate }}</div>
+            <tb-color-input asBoxInput
+                            formControlName="color">
+            </tb-color-input>
+          </div>
+        }
+        @if (modelValue.type === dataKeyTypes.function) {
+          <section class="flex flex-col">
+            <span translate>datakey.data-generation-func</span>
+            <br/>
+            <tb-js-func #funcBodyEdit
+                        [functionArgs]="['time', 'prevValue']"
+                        [globalVariables]="functionScopeVariables"
+                        [validationArgs]="[[1, 1],[1, '1']]"
+                        withModules
+                        resultType="any"
+                        helpId="widget/config/datakey_generation_fn"
+                        formControlName="funcBody">
+            </tb-js-func>
+          </section>
+        }
+        @if (!hideDataKeyAggregation && widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries) {
+          <div class="tb-form-row column">
+            <div class="tb-form-row space-between no-border no-padding">
+              <div>{{ 'datakey.aggregation' | translate }}</div>
               <mat-form-field class="medium-width" subscriptSizing="dynamic" appearance="outline">
-                <mat-select formControlName="comparisonResultType" style="min-width: 150px;">
-                  <mat-option *ngFor="let comparisonResultType of comparisonResults" [value]="comparisonResultType">
-                    {{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }}
-                  </mat-option>
+                <mat-select formControlName="aggregationType">
+                  @for (aggregation of aggregations; track aggregation) {
+                    <mat-option [value]="aggregation">
+                      {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
+                    </mat-option>
+                  }
                 </mat-select>
               </mat-form-field>
             </div>
-          </ng-container>
-        </ng-template>
-      </mat-expansion-panel>
+            <div class="tb-form-hint tb-primary-fill">
+              {{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }}
+              @if (dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE) {
+                <section>
+                  {{ 'datakey.aggregation-type-hint-common' | translate }}
+                </section>
+              }
+            </div>
+          </div>
+        }
       </div>
-    </div>
-    <div class="tb-form-panel tb-slide-toggle"
-         *ngIf="(modelValue.type === dataKeyTypes.timeseries || modelValue.type === dataKeyTypes.attribute || modelValue.type === dataKeyTypes.count) && showPostProcessing">
-      <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('usePostProcessing').value" [disabled]="!dataKeyFormGroup.get('usePostProcessing').value">
-        <mat-expansion-panel-header class="flex flex-row flex-wrap">
-          <mat-panel-title>
-            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="usePostProcessing" (click)="$event.stopPropagation()">
-              {{ 'datakey.use-data-post-processing-func' | translate }}
-            </mat-slide-toggle>
-          </mat-panel-title>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
-          <tb-js-func *ngIf="dataKeyFormGroup.get('usePostProcessing').value" #postFuncBodyEdit
-                      [functionArgs]="['time', 'value', 'prevValue', 'timePrev', 'prevOrigValue']"
-                      [globalVariables]="functionScopeVariables"
-                      [validationArgs]="[[1, 1, 1, 1, 1],[1, '1', '1', 1, '1']]"
-                      withModules
-                      resultType="any"
-                      helpId="widget/config/datakey_postprocess_fn"
-                      formControlName="postFuncBody">
-          </tb-js-func>
-          <label *ngIf="dataKeyFormGroup.get('usePostProcessing').value" class="tb-title" style="margin-left: 15px;">
-            time - {{ 'datakey.time-description' | translate }}<br/>
-            value - {{ 'datakey.value-description' | translate }}<br/>
-            prevValue - {{ 'datakey.prev-value-description' | translate }}<br/>
-            timePrev - {{ 'datakey.time-prev-description' | translate }}<br/>
-            prevOrigValue - {{ 'datakey.prev-orig-value-description' | translate }}
-          </label>
-        </ng-template>
-      </mat-expansion-panel>
+      @if (dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE) {
+        <div
+          class="tb-form-panel">
+          <div class="tb-form-panel-title" translate>datakey.delta-calculation</div>
+          <div class="tb-form-panel stroked tb-slide-toggle">
+            <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value">
+              <mat-expansion-panel-header class="flex flex-row flex-wrap">
+                <mat-panel-title class="flex flex-col items-start justify-center gap-2">
+                  <mat-slide-toggle class="mat-slide" formControlName="comparisonEnabled" (click)="$event.stopPropagation()">
+                    {{ 'datakey.enable-delta-calculation' | translate }}
+                  </mat-slide-toggle>
+                  <mat-hint class="tb-form-hint tb-primary-fill">{{ 'datakey.enable-delta-calculation-hint' | translate }}</mat-hint>
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <ng-template matExpansionPanelContent>
+                @if (dataKeyFormGroup.get('comparisonEnabled').value) {
+                  <div class="tb-form-row space-between">
+                    <div>{{ 'widgets.chart.time-for-comparison' | translate }}</div>
+                    <mat-form-field class="medium-width" subscriptSizing="dynamic" appearance="outline">
+                      <mat-select formControlName="timeForComparison">
+                        <mat-option [value]="'previousInterval'">
+                          {{ 'widgets.chart.time-for-comparison-previous-interval' | translate }}
+                        </mat-option>
+                        <mat-option [value]="'days'">
+                          {{ 'widgets.chart.time-for-comparison-days' | translate }}
+                        </mat-option>
+                        <mat-option [value]="'weeks'">
+                          {{ 'widgets.chart.time-for-comparison-weeks' | translate }}
+                        </mat-option>
+                        <mat-option [value]="'months'">
+                          {{ 'widgets.chart.time-for-comparison-months' | translate }}
+                        </mat-option>
+                        <mat-option [value]="'years'">
+                          {{ 'widgets.chart.time-for-comparison-years' | translate }}
+                        </mat-option>
+                        <mat-option [value]="'customInterval'">
+                          {{ 'widgets.chart.time-for-comparison-custom-interval' | translate }}
+                        </mat-option>
+                      </mat-select>
+                    </mat-form-field>
+                  </div>
+                  @if (dataKeyFormGroup.get('timeForComparison').value === 'customInterval') {
+                    <div class="tb-form-row space-between">
+                      <div>{{ 'widgets.chart.custom-interval-value' | translate }}</div>
+                      <mat-form-field class="medium-width number" subscriptSizing="dynamic" appearance="outline">
+                        <input required matInput type="number" min="0" formControlName="comparisonCustomIntervalValue">
+                      </mat-form-field>
+                    </div>
+                  }
+                  <div class="tb-form-row space-between">
+                    <div>{{ 'datakey.delta-calculation-result' | translate }}</div>
+                    <mat-form-field class="medium-width" subscriptSizing="dynamic" appearance="outline">
+                      <mat-select formControlName="comparisonResultType" style="min-width: 150px;">
+                        @for (comparisonResultType of comparisonResults; track comparisonResultType) {
+                          <mat-option [value]="comparisonResultType">
+                            {{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }}
+                          </mat-option>
+                        }
+                      </mat-select>
+                    </mat-form-field>
+                  </div>
+                }
+              </ng-template>
+            </mat-expansion-panel>
+          </div>
+        </div>
+      }
+      @if ((modelValue.type === dataKeyTypes.timeseries || modelValue.type === dataKeyTypes.attribute || modelValue.type === dataKeyTypes.count) && showPostProcessing) {
+        <div class="tb-form-panel tb-slide-toggle"
+             >
+          <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('usePostProcessing').value" [disabled]="!dataKeyFormGroup.get('usePostProcessing').value">
+            <mat-expansion-panel-header class="flex flex-row flex-wrap">
+              <mat-panel-title>
+                <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="usePostProcessing" (click)="$event.stopPropagation()">
+                  {{ 'datakey.use-data-post-processing-func' | translate }}
+                </mat-slide-toggle>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <ng-template matExpansionPanelContent>
+              @if (dataKeyFormGroup.get('usePostProcessing').value) {
+                <tb-js-func #postFuncBodyEdit
+                            [functionArgs]="['time', 'value', 'prevValue', 'timePrev', 'prevOrigValue']"
+                            [globalVariables]="functionScopeVariables"
+                            [validationArgs]="[[1, 1, 1, 1, 1],[1, '1', '1', 1, '1']]"
+                            withModules
+                            resultType="any"
+                            helpId="widget/config/datakey_postprocess_fn"
+                            formControlName="postFuncBody">
+                </tb-js-func>
+              }
+              @if (dataKeyFormGroup.get('usePostProcessing').value) {
+                <label class="tb-title" style="margin-left: 15px;">
+                  time - {{ 'datakey.time-description' | translate }}<br/>
+                  value - {{ 'datakey.value-description' | translate }}<br/>
+                  prevValue - {{ 'datakey.prev-value-description' | translate }}<br/>
+                  timePrev - {{ 'datakey.time-prev-description' | translate }}<br/>
+                  prevOrigValue - {{ 'datakey.prev-orig-value-description' | translate }}
+                </label>
+              }
+            </ng-template>
+          </mat-expansion-panel>
+        </div>
+      }
     </div>
   </div>
-</div>
-<ng-template #advanced>
+} @else {
   <div class="mat-padding flex flex-col" [formGroup]="dataKeySettingsFormGroup">
     <tb-widget-settings
       [dashboard]="dashboard"
@@ -204,4 +237,4 @@
       formControlName="settings">
     </tb-widget-settings>
   </div>
-</ng-template>
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/legend-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/legend-config.component.html
index 545c944ec7..f1e494ff21 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/legend-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/legend-config.component.html
@@ -16,26 +16,32 @@
 
 -->
 <ng-container [formGroup]="legendConfigForm">
-  <div *ngIf="!hideDirection" class="tb-form-row space-between">
-    <div>{{ 'legend.direction' | translate }}</div>
-    <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
-      <mat-select formControlName="direction">
-        <mat-option *ngFor="let direction of legendDirections" [value]="direction">
-          {{ legendDirectionTranslations.get(legendDirection[direction]) | translate }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-  </div>
+  @if (!hideDirection) {
+    <div class="tb-form-row space-between">
+      <div>{{ 'legend.direction' | translate }}</div>
+      <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
+        <mat-select formControlName="direction">
+          @for (direction of legendDirections; track direction) {
+            <mat-option [value]="direction">
+              {{ legendDirectionTranslations.get(legendDirection[direction]) | translate }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+  }
   <div class="tb-form-row space-between">
     <div>{{ 'legend.position' | translate }}</div>
     <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="position">
-        <mat-option *ngFor="let pos of legendPositions" [value]="pos"
+        @for (pos of legendPositions; track pos) {
+          <mat-option [value]="pos"
                     [disabled]="!hideDirection &&
                                  legendConfigForm.get('direction').value === legendDirection.row &&
                                  (pos === legendPosition.left || pos === legendPosition.right)">
-          {{ legendPositionTranslations.get(legendPosition[pos]) | translate }}
-        </mat-option>
+            {{ legendPositionTranslations.get(legendPosition[pos]) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/additional-map-data-source-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/additional-map-data-source-row.component.html
index b79c6ec5a0..7989ee86e8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/additional-map-data-source-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/additional-map-data-source-row.component.html
@@ -19,34 +19,39 @@
   <div class="tb-source-field">
     <mat-form-field class="tb-ds-type-field tb-inline-field" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="dsType">
-        <mat-option *ngFor="let type of datasourceTypes" [value]="type">
-          {{ datasourceTypesTranslations.get(type) | translate }}
-        </mat-option>
+        @for (type of datasourceTypes; track type) {
+          <mat-option [value]="type">
+            {{ datasourceTypesTranslations.get(type) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
-    <mat-form-field
-      *ngIf="dataSourceFormGroup.get('dsType').value === DatasourceType.function"
-      class="tb-label-field tb-inline-field" appearance="outline" subscriptSizing="dynamic">
-      <input matInput formControlName="dsLabel" placeholder="{{ 'widget-config.set' | translate }}">
-    </mat-form-field>
-    <tb-entity-autocomplete
-      class="tb-device-field"
-      *ngIf="dataSourceFormGroup.get('dsType').value === DatasourceType.device"
-      required
-      inlineField
-      placeholder="{{ 'device.select-device' | translate }}"
-      [entityType]="EntityType.DEVICE"
-      formControlName="dsDeviceId">
-    </tb-entity-autocomplete>
-    <tb-entity-alias-select
-      class="tb-entity-alias-field"
-      *ngIf="dataSourceFormGroup.get('dsType').value === DatasourceType.entity"
-      inlineField
-      tbRequired
-      [aliasController]="context.aliasController"
-      formControlName="dsEntityAliasId"
-      [callbacks]="context.callbacks">
-    </tb-entity-alias-select>
+    @if (dataSourceFormGroup.get('dsType').value === DatasourceType.function) {
+      <mat-form-field
+        class="tb-label-field tb-inline-field" appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="dsLabel" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    }
+    @if (dataSourceFormGroup.get('dsType').value === DatasourceType.device) {
+      <tb-entity-autocomplete
+        class="tb-device-field"
+        required
+        inlineField
+        placeholder="{{ 'device.select-device' | translate }}"
+        [entityType]="EntityType.DEVICE"
+        formControlName="dsDeviceId">
+      </tb-entity-autocomplete>
+    }
+    @if (dataSourceFormGroup.get('dsType').value === DatasourceType.entity) {
+      <tb-entity-alias-select
+        class="tb-entity-alias-field"
+        inlineField
+        tbRequired
+        [aliasController]="context.aliasController"
+        formControlName="dsEntityAliasId"
+        [callbacks]="context.callbacks">
+      </tb-entity-alias-select>
+    }
   </div>
   <tb-data-keys
     class="tb-data-keys-field"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/additional-map-data-sources.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/additional-map-data-sources.component.html
index c409ea0d8c..932f00f12e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/additional-map-data-sources.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/additional-map-data-sources.component.html
@@ -22,15 +22,21 @@
       <div class="tb-form-table-header-cell tb-data-keys-header" translate>widgets.maps.data-layer.data-keys</div>
       <div class="tb-form-table-header-cell tb-actions-header"></div>
     </div>
-    <div *ngIf="dataSourcesFormArray().controls.length; else noDataSources" class="tb-form-table-body">
-      <div *ngFor="let dataSourceControl of dataSourcesFormArray().controls; trackBy: trackByDataSource; let $index = index;">
-        <tb-additional-map-data-source-row class="flex-1"
-                               [context]="context"
-                               [formControl]="dataSourceControl"
-                               (dataSourceRemoved)="removeDataSource($index)">
-        </tb-additional-map-data-source-row>
+    @if (dataSourcesFormArray().controls.length) {
+      <div class="tb-form-table-body">
+        @for (dataSourceControl of dataSourcesFormArray().controls; track trackByDataSource($index, dataSourceControl)) {
+          <div>
+            <tb-additional-map-data-source-row class="flex-1"
+                                               [context]="context"
+                                               [formControl]="dataSourceControl"
+                                               (dataSourceRemoved)="removeDataSource($index)">
+            </tb-additional-map-data-source-row>
+          </div>
+        }
       </div>
-    </div>
+    } @else {
+      <span class="tb-prompt flex items-center justify-center">{{ 'widgets.maps.data-layer.no-datasources' | translate }}</span>
+    }
   </div>
   <div>
     <button type="button" mat-stroked-button color="primary" (click)="addDataSource()">
@@ -38,6 +44,3 @@
     </button>
   </div>
 </div>
-<ng-template #noDataSources>
-  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.maps.data-layer.no-datasources' | translate }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings.component.html
index 360461b1ce..b4a8555f97 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings.component.html
@@ -21,10 +21,11 @@
         [disabled]="disabled"
         #matButton
         (click)="openColorSettingsPopup($event, matButton)">
-  <tb-icon matButtonIcon *ngIf="modelValue?.type === DataLayerColorType.function; else colorPreview">mdi:function-variant</tb-icon>
+  @if (modelValue?.type === DataLayerColorType.function) {
+    <tb-icon matButtonIcon>mdi:function-variant</tb-icon>
+  } @else {
+    <div class="tb-color-preview box" [class.disabled]="disabled">
+      <div class="tb-color-result" [style]="colorStyle"></div>
+    </div>
+  }
 </button>
-<ng-template #colorPreview>
-  <div class="tb-color-preview box" [class.disabled]="disabled">
-    <div class="tb-color-result" [style]="colorStyle"></div>
-  </div>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-pattern-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-pattern-settings.component.html
index 4429957983..3941753d57 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-pattern-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-pattern-settings.component.html
@@ -33,30 +33,36 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <tb-html *ngIf="patternSettingsFormGroup.get('type').value === DataLayerPatternType.pattern"
-                 formControlName="pattern"
-                 required
-                 minHeight="100px"
-                 label="{{ (patternType === 'label' ? 'widgets.maps.data-layer.label-pattern' : 'widgets.maps.data-layer.tooltip-pattern') | translate }}">
-        </tb-html>
-        <tb-js-func *ngIf="patternSettingsFormGroup.get('type').value === DataLayerPatternType.function"
-                    formControlName="patternFunction"
-                    required
-                    withModules
-                    [globalVariables]="functionScopeVariables"
-                    [functionArgs]="['data', 'dsData', 'ctx']"
-                    functionTitle="{{ (patternType === 'label' ? 'widgets.maps.data-layer.label-function' : 'widgets.maps.data-layer.tooltip-function') | translate }}"
-                    [helpId]="helpId"
-                    [helpPopupStyle]="{width: '900px'}">
-        </tb-js-func>
-        <ng-container *ngIf="patternType === 'tooltip'">
+        @if (patternSettingsFormGroup.get('type').value === DataLayerPatternType.pattern) {
+          <tb-html
+            formControlName="pattern"
+            required
+            minHeight="100px"
+            label="{{ (patternType === 'label' ? 'widgets.maps.data-layer.label-pattern' : 'widgets.maps.data-layer.tooltip-pattern') | translate }}">
+          </tb-html>
+        }
+        @if (patternSettingsFormGroup.get('type').value === DataLayerPatternType.function) {
+          <tb-js-func
+            formControlName="patternFunction"
+            required
+            withModules
+            [globalVariables]="functionScopeVariables"
+            [functionArgs]="['data', 'dsData', 'ctx']"
+            functionTitle="{{ (patternType === 'label' ? 'widgets.maps.data-layer.label-function' : 'widgets.maps.data-layer.tooltip-function') | translate }}"
+            [helpId]="helpId"
+            [helpPopupStyle]="{width: '900px'}">
+          </tb-js-func>
+        }
+        @if (patternType === 'tooltip') {
           <div class="tb-form-row space-between column-xs">
             <div translate>widgets.maps.data-layer.tooltip-trigger</div>
             <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="trigger">
-                <mat-option *ngFor="let trigger of dataLayerTooltipTriggers" [value]="trigger">
-                  {{ dataLayerTooltipTriggerTranslationMap.get(trigger) | translate }}
-                </mat-option>
+                @for (trigger of dataLayerTooltipTriggers; track trigger) {
+                  <mat-option [value]="trigger">
+                    {{ dataLayerTooltipTriggerTranslationMap.get(trigger) | translate }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
           </div>
@@ -65,30 +71,32 @@
               {{ 'widgets.maps.data-layer.auto-close-tooltips' | translate }}
             </mat-slide-toggle>
           </div>
-          <div *ngIf="hasTooltipOffset" class="tb-form-row space-between column-lt-md">
-            <div translate>widgets.maps.data-layer.tooltip-offset</div>
-            <div class="flex flex-row items-center justify-start gap-2 xs:flex-1 xs:flex-col xs:items-stretch">
-              <div class="flex flex-row items-center justify-start gap-2 xs:flex-1">
-                <div class="tb-small-label xs:min-w-20" translate>widgets.maps.data-layer.tooltip-offset-horizontal</div>
-                <mat-form-field appearance="outline" class="number xs:flex-1" subscriptSizing="dynamic">
-                  <input matInput formControlName="offsetX"
-                         type="number" placeholder="{{ 'widget-config.set' | translate }}">
-                </mat-form-field>
-              </div>
-              <div class="flex flex-row items-center justify-start gap-2 xs:flex-1">
-                <div class="tb-small-label xs:min-w-20" translate>widgets.maps.data-layer.tooltip-offset-vertical</div>
-                <mat-form-field appearance="outline" class="number xs:flex-1" subscriptSizing="dynamic">
-                  <input matInput formControlName="offsetY"
-                         type="number" placeholder="{{ 'widget-config.set' | translate }}">
-                </mat-form-field>
+          @if (hasTooltipOffset) {
+            <div class="tb-form-row space-between column-lt-md">
+              <div translate>widgets.maps.data-layer.tooltip-offset</div>
+              <div class="flex flex-row items-center justify-start gap-2 xs:flex-1 xs:flex-col xs:items-stretch">
+                <div class="flex flex-row items-center justify-start gap-2 xs:flex-1">
+                  <div class="tb-small-label xs:min-w-20" translate>widgets.maps.data-layer.tooltip-offset-horizontal</div>
+                  <mat-form-field appearance="outline" class="number xs:flex-1" subscriptSizing="dynamic">
+                    <input matInput formControlName="offsetX"
+                           type="number" placeholder="{{ 'widget-config.set' | translate }}">
+                  </mat-form-field>
+                </div>
+                <div class="flex flex-row items-center justify-start gap-2 xs:flex-1">
+                  <div class="tb-small-label xs:min-w-20" translate>widgets.maps.data-layer.tooltip-offset-vertical</div>
+                  <mat-form-field appearance="outline" class="number xs:flex-1" subscriptSizing="dynamic">
+                    <input matInput formControlName="offsetY"
+                           type="number" placeholder="{{ 'widget-config.set' | translate }}">
+                  </mat-form-field>
+                </div>
               </div>
             </div>
-          </div>
+          }
           <tb-map-tooltip-tag-actions-panel
             [context]="context"
             formControlName="tagActions">
           </tb-map-tooltip-tag-actions-panel>
-        </ng-container>
+        }
       </ng-template>
     </mat-expansion-panel>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/image-map-source-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/image-map-source-settings.component.html
index 0d83a4e423..9d9f4377e8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/image-map-source-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/image-map-source-settings.component.html
@@ -25,11 +25,13 @@
       <tb-toggle-option [value]="ImageSourceType.entityKey">{{ 'widgets.maps.image.image-source-entity-key' | translate }}</tb-toggle-option>
     </tb-toggle-select>
   </div>
-  <tb-gallery-image-input *ngIf="ImageSourceType.image === imageMapSourceFormGroup.get('sourceType').value"
-                          required
-                          formControlName="url">
-  </tb-gallery-image-input>
-  <ng-container *ngIf="ImageSourceType.entityKey === imageMapSourceFormGroup.get('sourceType').value">
+  @if (ImageSourceType.image === imageMapSourceFormGroup.get('sourceType').value) {
+    <tb-gallery-image-input
+      required
+      formControlName="url">
+    </tb-gallery-image-input>
+  }
+  @if (ImageSourceType.entityKey === imageMapSourceFormGroup.get('sourceType').value) {
     <div class="tb-form-row column-xs">
       <div class="fixed-title-width" translate>widgets.maps.image.source-entity-alias</div>
       <tb-entity-alias-select
@@ -58,5 +60,5 @@
         formControlName="entityKey">
       </tb-data-key-input>
     </div>
-  </ng-container>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-action-button-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-action-button-row.component.html
index 421d518a90..6cab6208f3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-action-button-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-action-button-row.component.html
@@ -18,14 +18,15 @@
 <div [formGroup]="mapActionButton" class="tb-form-table-row">
   <mat-form-field class="tb-inline-field tb-label-field min-w-32" style="flex: 1 1 40%" appearance="outline" subscriptSizing="dynamic">
     <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-    <mat-icon matSuffix
-              matTooltipPosition="above"
-              matTooltipClass="tb-error-tooltip"
-              matTooltip="{{ 'widgets.maps.map-action.button-requires' | translate }}"
-              *ngIf="mapActionButton.hasError('invalidButtonConfig')"
-              class="tb-error">
-      warning
-    </mat-icon>
+    @if (mapActionButton.hasError('invalidButtonConfig')) {
+      <mat-icon matSuffix
+                matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
+                matTooltip="{{ 'widgets.maps.map-action.button-requires' | translate }}"
+                class="tb-error">
+        warning
+      </mat-icon>
+    }
   </mat-form-field>
   <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>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html
index 886c9fb681..8e484c8e3d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html
@@ -30,159 +30,172 @@
       <div class="flex flex-row items-center justify-between xs:flex-col xs:items-start xs:gap-3">
         <div class="tb-form-panel-title">{{ 'widget-config.datasource' | translate }}</div>
         <tb-toggle-select formControlName="dsType">
-          <tb-toggle-option *ngFor="let type of datasourceTypes" [value]="type">{{ datasourceTypesTranslations.get(type) | translate }}</tb-toggle-option>
+          @for (type of datasourceTypes; track type) {
+            <tb-toggle-option [value]="type">{{ datasourceTypesTranslations.get(type) | translate }}</tb-toggle-option>
+          }
         </tb-toggle-select>
       </div>
       <div class="flex flex-col">
-        <mat-form-field
-          *ngIf="dataLayerFormGroup.get('dsType').value === DatasourceType.function"
-          appearance="outline">
-          <mat-label translate>datasource.label</mat-label>
-          <input matInput formControlName="dsLabel" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
-        <tb-entity-autocomplete
-          *ngIf="dataLayerFormGroup.get('dsType').value === DatasourceType.device"
-          required
-          appearance="outline"
-          placeholder="{{ 'device.select-device' | translate }}"
-          [entityType]="EntityType.DEVICE"
-          formControlName="dsDeviceId">
-        </tb-entity-autocomplete>
-        <tb-entity-alias-select
-          *ngIf="dataLayerFormGroup.get('dsType').value === DatasourceType.entity"
-          tbRequired
-          appearance="outline"
-          [aliasController]="context.aliasController"
-          formControlName="dsEntityAliasId"
-          [callbacks]="context.callbacks">
-        </tb-entity-alias-select>
-        <tb-filter-select
-          *ngIf="[DatasourceType.device, DatasourceType.entity].includes(dataLayerFormGroup.get('dsType').value)"
-          showLabel
-          appearance="outline"
-          [aliasController]="context.aliasController"
-          formControlName="dsFilterId"
-          [callbacks]="context.callbacks">
-        </tb-filter-select>
+        @if (dataLayerFormGroup.get('dsType').value === DatasourceType.function) {
+          <mat-form-field
+            appearance="outline">
+            <mat-label translate>datasource.label</mat-label>
+            <input matInput formControlName="dsLabel" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+        }
+        @if (dataLayerFormGroup.get('dsType').value === DatasourceType.device) {
+          <tb-entity-autocomplete
+            required
+            appearance="outline"
+            placeholder="{{ 'device.select-device' | translate }}"
+            [entityType]="EntityType.DEVICE"
+            formControlName="dsDeviceId">
+          </tb-entity-autocomplete>
+        }
+        @if (dataLayerFormGroup.get('dsType').value === DatasourceType.entity) {
+          <tb-entity-alias-select
+            tbRequired
+            appearance="outline"
+            [aliasController]="context.aliasController"
+            formControlName="dsEntityAliasId"
+            [callbacks]="context.callbacks">
+          </tb-entity-alias-select>
+        }
+        @if ([DatasourceType.device, DatasourceType.entity].includes(dataLayerFormGroup.get('dsType').value)) {
+          <tb-filter-select
+            showLabel
+            appearance="outline"
+            [aliasController]="context.aliasController"
+            formControlName="dsFilterId"
+            [callbacks]="context.callbacks">
+          </tb-filter-select>
+        }
       </div>
-      <mat-expansion-panel *ngIf="dataLayerFormGroup.get('dsType').value !== DatasourceType.function" class="tb-settings">
-        <mat-expansion-panel-header>
-          <mat-panel-description class="flex items-stretch justify-start" translate>
-            widgets.maps.data-layer.more-datasources
-          </mat-panel-description>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
-          <tb-map-data-sources formControlName="additionalDataSources"
-                               [context]="context">
-          </tb-map-data-sources>
-        </ng-template>
-      </mat-expansion-panel>
+      @if (dataLayerFormGroup.get('dsType').value !== DatasourceType.function) {
+        <mat-expansion-panel class="tb-settings">
+          <mat-expansion-panel-header>
+            <mat-panel-description class="flex items-stretch justify-start" translate>
+              widgets.maps.data-layer.more-datasources
+            </mat-panel-description>
+          </mat-expansion-panel-header>
+          <ng-template matExpansionPanelContent>
+            <tb-map-data-sources formControlName="additionalDataSources"
+                                 [context]="context">
+            </tb-map-data-sources>
+          </ng-template>
+        </mat-expansion-panel>
+      }
     </div>
     <div class="tb-form-panel">
       <div class="tb-form-panel-title">{{ 'datakey.keys' | translate }}</div>
       <div class="flex flex-col">
-        <div *ngIf="['trips', 'markers'].includes(dataLayerType)" class="flex flex-row gap-3">
+        @if (['trips', 'markers'].includes(dataLayerType)) {
+          <div class="flex flex-row gap-3">
+            <tb-data-key-input
+              class="min-w-0 flex-1"
+              inlineField="false"
+              appearance="outline"
+              subscriptSizing="fixed"
+              label="{{ (mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.latitude-key' : 'widgets.maps.data-layer.marker.x-pos-key') | translate }}"
+              required
+              requiredText="{{ mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.latitude-key-required' : 'widgets.maps.data-layer.marker.x-pos-key-required' }}"
+              [datasourceType]="dataLayerFormGroup.get('dsType').value"
+              [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
+              [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
+              [aliasController]="context.aliasController"
+              [widgetType]="dataLayerType === 'trips' ? widgetType.timeseries : widgetType.latest"
+              [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
+              [dataKeyTypes]="dataLayerType === 'trips' ? [DataKeyType.timeseries] : [DataKeyType.attribute, DataKeyType.timeseries]"
+              [callbacks]="context.callbacks"
+              [generateKey]="context.generateDataKey"
+              (keyEdit)="editKey('xKey')"
+              formControlName="xKey">
+            </tb-data-key-input>
+            <tb-data-key-input
+              class="min-w-0 flex-1"
+              inlineField="false"
+              appearance="outline"
+              subscriptSizing="fixed"
+              label="{{ (mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.longitude-key' : 'widgets.maps.data-layer.marker.y-pos-key') | translate }}"
+              required
+              requiredText="{{ mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.longitude-key-required' : 'widgets.maps.data-layer.marker.y-pos-key-required' }}"
+              [datasourceType]="dataLayerFormGroup.get('dsType').value"
+              [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
+              [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
+              [aliasController]="context.aliasController"
+              [widgetType]="dataLayerType === 'trips' ? widgetType.timeseries : widgetType.latest"
+              [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
+              [dataKeyTypes]="dataLayerType === 'trips' ? [DataKeyType.timeseries] : [DataKeyType.attribute, DataKeyType.timeseries]"
+              [callbacks]="context.callbacks"
+              [generateKey]="context.generateDataKey"
+              (keyEdit)="editKey('yKey')"
+              formControlName="yKey">
+            </tb-data-key-input>
+          </div>
+        }
+        @if (dataLayerType === 'polygons') {
           <tb-data-key-input
-            class="min-w-0 flex-1"
             inlineField="false"
             appearance="outline"
             subscriptSizing="fixed"
-            label="{{ (mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.latitude-key' : 'widgets.maps.data-layer.marker.x-pos-key') | translate }}"
+            label="{{ 'widgets.maps.data-layer.polygon.polygon-key' | translate }}"
             required
-            requiredText="{{ mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.latitude-key-required' : 'widgets.maps.data-layer.marker.x-pos-key-required' }}"
+            requiredText="widgets.maps.data-layer.polygon.polygon-key-required"
             [datasourceType]="dataLayerFormGroup.get('dsType').value"
             [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
             [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
             [aliasController]="context.aliasController"
-            [widgetType]="dataLayerType === 'trips' ? widgetType.timeseries : widgetType.latest"
+            [widgetType]="widgetType.latest"
             [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
-            [dataKeyTypes]="dataLayerType === 'trips' ? [DataKeyType.timeseries] : [DataKeyType.attribute, DataKeyType.timeseries]"
+            [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
             [callbacks]="context.callbacks"
             [generateKey]="context.generateDataKey"
-            (keyEdit)="editKey('xKey')"
-            formControlName="xKey">
+            (keyEdit)="editKey('polygonKey')"
+            formControlName="polygonKey">
           </tb-data-key-input>
+        }
+        @if (dataLayerType === 'circles') {
           <tb-data-key-input
-            class="min-w-0 flex-1"
             inlineField="false"
             appearance="outline"
             subscriptSizing="fixed"
-            label="{{ (mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.longitude-key' : 'widgets.maps.data-layer.marker.y-pos-key') | translate }}"
+            label="{{ 'widgets.maps.data-layer.circle.circle-key' | translate }}"
             required
-            requiredText="{{ mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.longitude-key-required' : 'widgets.maps.data-layer.marker.y-pos-key-required' }}"
+            requiredText="widgets.maps.data-layer.circle.circle-key-required"
             [datasourceType]="dataLayerFormGroup.get('dsType').value"
             [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
             [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
             [aliasController]="context.aliasController"
-            [widgetType]="dataLayerType === 'trips' ? widgetType.timeseries : widgetType.latest"
+            [widgetType]="widgetType.latest"
             [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
-            [dataKeyTypes]="dataLayerType === 'trips' ? [DataKeyType.timeseries] : [DataKeyType.attribute, DataKeyType.timeseries]"
+            [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
             [callbacks]="context.callbacks"
             [generateKey]="context.generateDataKey"
-            (keyEdit)="editKey('yKey')"
-            formControlName="yKey">
+            (keyEdit)="editKey('circleKey')"
+            formControlName="circleKey">
           </tb-data-key-input>
-        </div>
-        <tb-data-key-input
-          *ngIf="dataLayerType === 'polygons'"
-          inlineField="false"
-          appearance="outline"
-          subscriptSizing="fixed"
-          label="{{ 'widgets.maps.data-layer.polygon.polygon-key' | translate }}"
-          required
-          requiredText="widgets.maps.data-layer.polygon.polygon-key-required"
-          [datasourceType]="dataLayerFormGroup.get('dsType').value"
-          [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
-          [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
-          [aliasController]="context.aliasController"
-          [widgetType]="widgetType.latest"
-          [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
-          [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
-          [callbacks]="context.callbacks"
-          [generateKey]="context.generateDataKey"
-          (keyEdit)="editKey('polygonKey')"
-          formControlName="polygonKey">
-        </tb-data-key-input>
-        <tb-data-key-input
-          *ngIf="dataLayerType === 'circles'"
-          inlineField="false"
-          appearance="outline"
-          subscriptSizing="fixed"
-          label="{{ 'widgets.maps.data-layer.circle.circle-key' | translate }}"
-          required
-          requiredText="widgets.maps.data-layer.circle.circle-key-required"
-          [datasourceType]="dataLayerFormGroup.get('dsType').value"
-          [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
-          [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
-          [aliasController]="context.aliasController"
-          [widgetType]="widgetType.latest"
-          [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
-          [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
-          [callbacks]="context.callbacks"
-          [generateKey]="context.generateDataKey"
-          (keyEdit)="editKey('circleKey')"
-          formControlName="circleKey">
-        </tb-data-key-input>
-        <tb-data-key-input
-          *ngIf="dataLayerType === 'polylines'"
-          inlineField="false"
-          appearance="outline"
-          subscriptSizing="fixed"
-          label="{{ 'widgets.maps.data-layer.polyline.polyline-key' | translate }}"
-          required
-          requiredText="widgets.maps.data-layer.polyline.polyline-key-required"
-          [datasourceType]="dataLayerFormGroup.get('dsType').value"
-          [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
-          [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
-          [aliasController]="context.aliasController"
-          [widgetType]="widgetType.latest"
-          [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
-          [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
-          [callbacks]="context.callbacks"
-          [generateKey]="context.generateDataKey"
-          (keyEdit)="editKey('polylineKey')"
-          formControlName="polylineKey">
-        </tb-data-key-input>
+        }
+        @if (dataLayerType === 'polylines') {
+          <tb-data-key-input
+            inlineField="false"
+            appearance="outline"
+            subscriptSizing="fixed"
+            label="{{ 'widgets.maps.data-layer.polyline.polyline-key' | translate }}"
+            required
+            requiredText="widgets.maps.data-layer.polyline.polyline-key-required"
+            [datasourceType]="dataLayerFormGroup.get('dsType').value"
+            [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
+            [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
+            [aliasController]="context.aliasController"
+            [widgetType]="widgetType.latest"
+            [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
+            [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
+            [callbacks]="context.callbacks"
+            [generateKey]="context.generateDataKey"
+            (keyEdit)="editKey('polylineKey')"
+            formControlName="polylineKey">
+          </tb-data-key-input>
+        }
         <tb-data-keys
           formControlName="additionalDataKeys"
           appearance="outline"
@@ -207,7 +220,7 @@
     </div>
     <div class="tb-form-panel">
       <div class="tb-form-panel-title">{{ 'widget-config.appearance' | translate }}</div>
-      <ng-container *ngIf="['trips', 'markers'].includes(dataLayerType)">
+      @if (['trips', 'markers'].includes(dataLayerType)) {
         <div class="tb-form-panel tb-slide-toggle stroked">
           <mat-expansion-panel #markerExpansionPanel class="tb-settings" [expanded]="dataLayerType === 'markers' || dataLayerFormGroup.get('showMarker').value"
                                [disabled]="dataLayerType === 'trips' && !dataLayerFormGroup.get('showMarker').value">
@@ -230,28 +243,34 @@
               </mat-panel-title>
             </mat-expansion-panel-header>
             <ng-template matExpansionPanelContent>
-              <div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.shape" class="tb-form-row space-between column-xs">
-                <div translate>widgets.maps.data-layer.marker.shape</div>
-                <tb-marker-shape-settings formControlName="markerShape"
-                                          [context]="context"
-                                          [dsType]="dataLayerFormGroup.get('dsType').value"
-                                          [dsEntityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
-                                          [dsDeviceId]="dataLayerFormGroup.get('dsDeviceId').value"
-                                          [trip]="dataLayerType === 'trips'" [markerType]="MarkerType.shape"></tb-marker-shape-settings>
-              </div>
-              <div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.icon" class="tb-form-row space-between column-xs">
-                <div translate>widgets.maps.data-layer.marker.icon</div>
-                <tb-marker-shape-settings formControlName="markerIcon"
-                                          [context]="context"
-                                          [dsType]="dataLayerFormGroup.get('dsType').value"
-                                          [dsEntityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
-                                          [dsDeviceId]="dataLayerFormGroup.get('dsDeviceId').value"
-                                          [trip]="dataLayerType === 'trips'" [markerType]="MarkerType.icon"></tb-marker-shape-settings>
-              </div>
-              <div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.image" class="tb-form-row space-between">
-                <div translate>widgets.maps.data-layer.marker.image</div>
-                <tb-marker-image-settings formControlName="markerImage"></tb-marker-image-settings>
-              </div>
+              @if (dataLayerFormGroup.get('markerType').value === MarkerType.shape) {
+                <div class="tb-form-row space-between column-xs">
+                  <div translate>widgets.maps.data-layer.marker.shape</div>
+                  <tb-marker-shape-settings formControlName="markerShape"
+                                            [context]="context"
+                                            [dsType]="dataLayerFormGroup.get('dsType').value"
+                                            [dsEntityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
+                                            [dsDeviceId]="dataLayerFormGroup.get('dsDeviceId').value"
+                  [trip]="dataLayerType === 'trips'" [markerType]="MarkerType.shape"></tb-marker-shape-settings>
+                </div>
+              }
+              @if (dataLayerFormGroup.get('markerType').value === MarkerType.icon) {
+                <div class="tb-form-row space-between column-xs">
+                  <div translate>widgets.maps.data-layer.marker.icon</div>
+                  <tb-marker-shape-settings formControlName="markerIcon"
+                                            [context]="context"
+                                            [dsType]="dataLayerFormGroup.get('dsType').value"
+                                            [dsEntityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
+                                            [dsDeviceId]="dataLayerFormGroup.get('dsDeviceId').value"
+                  [trip]="dataLayerType === 'trips'" [markerType]="MarkerType.icon"></tb-marker-shape-settings>
+                </div>
+              }
+              @if (dataLayerFormGroup.get('markerType').value === MarkerType.image) {
+                <div class="tb-form-row space-between">
+                  <div translate>widgets.maps.data-layer.marker.image</div>
+                  <tb-marker-image-settings formControlName="markerImage"></tb-marker-image-settings>
+                </div>
+              }
               <div class="tb-form-row space-between column-lt-md">
                 <div translate>widgets.maps.data-layer.marker.marker-offset</div>
                 <div class="flex flex-row items-center justify-start gap-2">
@@ -267,18 +286,20 @@
                   </mat-form-field>
                 </div>
               </div>
-              <div *ngIf="dataLayerType === 'trips'" class="tb-form-row space-between column-xs">
-                <mat-slide-toggle class="mat-slide" formControlName="rotateMarker">
-                  {{ 'widgets.maps.data-layer.marker.rotate-marker' | translate }}
-                </mat-slide-toggle>
-                <div class="flex flex-row items-center justify-start gap-2">
-                  <div class="tb-small-label" translate>widgets.maps.data-layer.marker.offset-angle</div>
-                  <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-                    <input matInput formControlName="offsetAngle" type="number" min="0" max="360" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-                    <div matSuffix>deg</div>
-                  </mat-form-field>
+              @if (dataLayerType === 'trips') {
+                <div class="tb-form-row space-between column-xs">
+                  <mat-slide-toggle class="mat-slide" formControlName="rotateMarker">
+                    {{ 'widgets.maps.data-layer.marker.rotate-marker' | translate }}
+                  </mat-slide-toggle>
+                  <div class="flex flex-row items-center justify-start gap-2">
+                    <div class="tb-small-label" translate>widgets.maps.data-layer.marker.offset-angle</div>
+                    <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+                      <input matInput formControlName="offsetAngle" type="number" min="0" max="360" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+                      <div matSuffix>deg</div>
+                    </mat-form-field>
+                  </div>
                 </div>
-              </div>
+              }
               @if (dataLayerType === 'trips') {
                 <ng-container *ngTemplateOutlet="dataLayerLabelAndTooltip; context: {expand: false}"></ng-container>
                 <ng-container *ngTemplateOutlet="behavior; context: {stroked: true}"></ng-container>
@@ -286,19 +307,21 @@
             </ng-template>
           </mat-expansion-panel>
         </div>
-        <div *ngIf="mapType === MapType.image" class="tb-form-panel stroked">
-          <div class="tb-form-panel-title" translate>widgets.maps.data-layer.marker.position-conversion</div>
-          <tb-js-func formControlName="positionFunction"
-                      withModules
-                      minHeight="100px"
-                      [globalVariables]="functionScopeVariables"
-                      [functionArgs]="['origXPos', 'origYPos', 'data', 'dsData', 'aspect']"
-                      functionTitle="{{ 'widgets.maps.data-layer.marker.position-conversion-function' | translate }}"
-                      helpId="widget/lib/map/position_fn">
-          </tb-js-func>
-        </div>
-      </ng-container>
-      <ng-container *ngIf="dataLayerType === 'trips'">
+        @if (mapType === MapType.image) {
+          <div class="tb-form-panel stroked">
+            <div class="tb-form-panel-title" translate>widgets.maps.data-layer.marker.position-conversion</div>
+            <tb-js-func formControlName="positionFunction"
+                        withModules
+                        minHeight="100px"
+                        [globalVariables]="functionScopeVariables"
+                        [functionArgs]="['origXPos', 'origYPos', 'data', 'dsData', 'aspect']"
+                        functionTitle="{{ 'widgets.maps.data-layer.marker.position-conversion-function' | translate }}"
+                        helpId="widget/lib/map/position_fn">
+            </tb-js-func>
+          </div>
+        }
+      }
+      @if (dataLayerType === 'trips') {
         <div class="tb-form-panel tb-slide-toggle stroked">
           <mat-expansion-panel class="tb-settings" [expanded]="dataLayerFormGroup.get('showPath').value"
                                [disabled]="!dataLayerFormGroup.get('showPath').value">
@@ -322,7 +345,7 @@
                     [dsType]="dataLayerFormGroup.get('dsType').value"
                     [dsEntityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
                     [dsDeviceId]="dataLayerFormGroup.get('dsDeviceId').value"
-                    helpId="widget/lib/map/path_color_fn" formControlName="pathStrokeColor"></tb-data-layer-color-settings>
+                  helpId="widget/lib/map/path_color_fn" formControlName="pathStrokeColor"></tb-data-layer-color-settings>
                 </div>
               </div>
               <div class="tb-form-panel tb-slide-toggle stroked">
@@ -341,9 +364,11 @@
                       <div class="flex flex-1 flex-row items-center justify-start gap-2 lt-md:flex-col lt-md:items-stretch">
                         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
                           <mat-select formControlName="pathDecoratorSymbol">
-                            <mat-option *ngFor="let symbol of pathDecoratorSymbols" [value]="symbol">
-                              {{ pathDecoratorSymbolTranslationMap.get(symbol) | translate }}
-                            </mat-option>
+                            @for (symbol of pathDecoratorSymbols; track symbol) {
+                              <mat-option [value]="symbol">
+                                {{ pathDecoratorSymbolTranslationMap.get(symbol) | translate }}
+                              </mat-option>
+                            }
                           </mat-select>
                         </mat-form-field>
                         <div class="flex flex-1 flex-row items-center justify-start gap-2">
@@ -413,7 +438,7 @@
                     [dsType]="dataLayerFormGroup.get('dsType').value"
                     [dsEntityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
                     [dsDeviceId]="dataLayerFormGroup.get('dsDeviceId').value"
-                    helpId="widget/lib/map/path_point_color_fn" formControlName="pointColor"></tb-data-layer-color-settings>
+                  helpId="widget/lib/map/path_point_color_fn" formControlName="pointColor"></tb-data-layer-color-settings>
                 </div>
               </div>
               <tb-data-layer-pattern-settings
@@ -427,8 +452,8 @@
             </ng-template>
           </mat-expansion-panel>
         </div>
-      </ng-container>
-      <ng-container *ngIf="['polygons', 'circles'].includes(dataLayerType)">
+      }
+      @if (['polygons', 'circles'].includes(dataLayerType)) {
         <div class="tb-form-panel stroked">
           <div class="flex flex-1 flex-row items-center justify-between xs:flex-col xs:items-start xs:gap-3">
             <div class="tb-form-panel-title">{{ 'widgets.maps.data-layer.shape.fill' | translate }}</div>
@@ -438,33 +463,39 @@
               <tb-toggle-option [value]="ShapeFillType.image">{{ 'widgets.maps.data-layer.shape.fill-type-image' | translate }}</tb-toggle-option>
             </tb-toggle-select>
           </div>
-          <div *ngIf="dataLayerFormGroup.get('fillType').value === ShapeFillType.color" class="tb-form-row space-between">
-            <div translate>widgets.maps.data-layer.shape.color</div>
-            <tb-data-layer-color-settings
-              [context]="context"
-              [dsType]="dataLayerFormGroup.get('dsType').value"
-              [dsEntityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
-              [dsDeviceId]="dataLayerFormGroup.get('dsDeviceId').value"
+          @if (dataLayerFormGroup.get('fillType').value === ShapeFillType.color) {
+            <div class="tb-form-row space-between">
+              <div translate>widgets.maps.data-layer.shape.color</div>
+              <tb-data-layer-color-settings
+                [context]="context"
+                [dsType]="dataLayerFormGroup.get('dsType').value"
+                [dsEntityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
+                [dsDeviceId]="dataLayerFormGroup.get('dsDeviceId').value"
               helpId="{{ dataLayerType === 'polygons' ? 'widget/lib/map/polygon_fill_color_fn' : 'widget/lib/map/circle_fill_color_fn' }}" formControlName="fillColor"></tb-data-layer-color-settings>
-          </div>
-          <div *ngIf="dataLayerFormGroup.get('fillType').value === ShapeFillType.stripe" class="tb-form-row space-between">
-            <div translate>widgets.maps.data-layer.shape.stripe-pattern</div>
-            <tb-shape-fill-stripe-settings
-              [context]="context"
-              [dsType]="dataLayerFormGroup.get('dsType').value"
-              [dsEntityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
-              [dsDeviceId]="dataLayerFormGroup.get('dsDeviceId').value"
-              [dataLayerType]="dataLayerType"
-              formControlName="fillStripe">
-            </tb-shape-fill-stripe-settings>
-          </div>
-          <div *ngIf="dataLayerFormGroup.get('fillType').value === ShapeFillType.image" class="tb-form-row space-between">
-            <div translate>widgets.maps.data-layer.shape.image</div>
-            <tb-shape-fill-image-settings formControlName="fillImage"></tb-shape-fill-image-settings>
-          </div>
+            </div>
+          }
+          @if (dataLayerFormGroup.get('fillType').value === ShapeFillType.stripe) {
+            <div class="tb-form-row space-between">
+              <div translate>widgets.maps.data-layer.shape.stripe-pattern</div>
+              <tb-shape-fill-stripe-settings
+                [context]="context"
+                [dsType]="dataLayerFormGroup.get('dsType').value"
+                [dsEntityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
+                [dsDeviceId]="dataLayerFormGroup.get('dsDeviceId').value"
+                [dataLayerType]="dataLayerType"
+                formControlName="fillStripe">
+              </tb-shape-fill-stripe-settings>
+            </div>
+          }
+          @if (dataLayerFormGroup.get('fillType').value === ShapeFillType.image) {
+            <div class="tb-form-row space-between">
+              <div translate>widgets.maps.data-layer.shape.image</div>
+              <tb-shape-fill-image-settings formControlName="fillImage"></tb-shape-fill-image-settings>
+            </div>
+          }
         </div>
-        </ng-container>
-      <ng-container *ngIf="['polygons', 'circles', 'polylines'].includes(dataLayerType)">
+      }
+      @if (['polygons', 'circles', 'polylines'].includes(dataLayerType)) {
         <div class="tb-form-row space-between">
           <div translate>widgets.maps.data-layer.shape.stroke</div>
           <div class="flex flex-row items-center gap-2">
@@ -479,10 +510,10 @@
               [dsDeviceId]="dataLayerFormGroup.get('dsDeviceId').value"
               helpId="{{ dataLayerType === 'polygons' ? 'widget/lib/map/polygon_stroke_color_fn' :
                 (dataLayerType === 'circles' ? 'widget/lib/map/polygon_stroke_color_fn' : 'widget/lib/map/polyline_stroke_color_fn') }}"
-              formControlName="strokeColor"></tb-data-layer-color-settings>
+            formControlName="strokeColor"></tb-data-layer-color-settings>
           </div>
         </div>
-      </ng-container>
+      }
       @if (dataLayerType !== 'trips') {
         <ng-container *ngTemplateOutlet="dataLayerLabelAndTooltip; context: {expand: true}"></ng-container>
       }
@@ -500,39 +531,46 @@
                             formControlName="groups">
       </tb-string-items-list>
     </div>
-    <div *ngIf="dataLayerType !== 'trips'" class="tb-form-panel" formGroupName="edit">
-      <div class="tb-form-panel-title">{{ dataLayerEditTitle | translate }}</div>
-      <div class="tb-form-row space-between column-lt-md">
-        <div translate>widgets.maps.data-layer.edit-instruments</div>
-        <mat-chip-listbox multiple formControlName="enabledActions">
-          <mat-chip-option *ngFor="let action of dataLayerEditActions" [value]="action">
-            {{ dataLayerEditActionTranslationMap.get(action) | translate }}
-          </mat-chip-option>
-        </mat-chip-listbox>
-      </div>
-      <div *ngIf="showEditAttributeScope" class="tb-form-row space-between column-lt-md">
-        <div translate>widgets.maps.data-layer.persist-location-attribute-scope</div>
-        <tb-toggle-select formControlName="attributeScope" appearance="fill">
-          <tb-toggle-option [value]="AttributeScope.SERVER_SCOPE">
-            {{ telemetryTypeTranslationsShort.get(AttributeScope.SERVER_SCOPE) | translate }}
-          </tb-toggle-option>
-          <tb-toggle-option [value]="AttributeScope.SHARED_SCOPE">
-            {{ telemetryTypeTranslationsShort.get(AttributeScope.SHARED_SCOPE) | translate }}
-          </tb-toggle-option>
-        </tb-toggle-select>
-      </div>
-      <div class="tb-form-row">
-        <mat-slide-toggle class="mat-slide" formControlName="snappable">
-          <span tb-hint-tooltip-icon="{{ 'widgets.maps.data-layer.enable-snapping-hint' | translate }}">
-            {{ 'widgets.maps.data-layer.enable-snapping' | translate }}
-          </span>
-        </mat-slide-toggle>
+    @if (dataLayerType !== 'trips') {
+      <div class="tb-form-panel" formGroupName="edit">
+        <div class="tb-form-panel-title">{{ dataLayerEditTitle | translate }}</div>
+        <div class="tb-form-row space-between column-lt-md">
+          <div translate>widgets.maps.data-layer.edit-instruments</div>
+          <mat-chip-listbox multiple formControlName="enabledActions">
+            @for (action of dataLayerEditActions; track action) {
+              <mat-chip-option [value]="action">
+                {{ dataLayerEditActionTranslationMap.get(action) | translate }}
+              </mat-chip-option>
+            }
+          </mat-chip-listbox>
+        </div>
+        @if (showEditAttributeScope) {
+          <div class="tb-form-row space-between column-lt-md">
+            <div translate>widgets.maps.data-layer.persist-location-attribute-scope</div>
+            <tb-toggle-select formControlName="attributeScope" appearance="fill">
+              <tb-toggle-option [value]="AttributeScope.SERVER_SCOPE">
+                {{ telemetryTypeTranslationsShort.get(AttributeScope.SERVER_SCOPE) | translate }}
+              </tb-toggle-option>
+              <tb-toggle-option [value]="AttributeScope.SHARED_SCOPE">
+                {{ telemetryTypeTranslationsShort.get(AttributeScope.SHARED_SCOPE) | translate }}
+              </tb-toggle-option>
+            </tb-toggle-select>
+          </div>
+        }
+        <div class="tb-form-row">
+          <mat-slide-toggle class="mat-slide" formControlName="snappable">
+            <span tb-hint-tooltip-icon="{{ 'widgets.maps.data-layer.enable-snapping-hint' | translate }}">
+              {{ 'widgets.maps.data-layer.enable-snapping' | translate }}
+            </span>
+          </mat-slide-toggle>
+        </div>
       </div>
-    </div>
-    <tb-marker-clustering-settings
-      *ngIf="dataLayerType === 'markers'"
-      formControlName="markerClustering">
-    </tb-marker-clustering-settings>
+    }
+    @if (dataLayerType === 'markers') {
+      <tb-marker-clustering-settings
+        formControlName="markerClustering">
+      </tb-marker-clustering-settings>
+    }
   </div>
   <div mat-dialog-actions class="flex items-center justify-between">
     <button mat-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-row.component.html
index b934254057..b9273f545b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-row.component.html
@@ -19,120 +19,130 @@
   <div class="tb-source-field">
     <mat-form-field class="tb-ds-type-field tb-inline-field" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="dsType">
-        <mat-option *ngFor="let type of datasourceTypes" [value]="type">
-          {{ datasourceTypesTranslations.get(type) | translate }}
-        </mat-option>
+        @for (type of datasourceTypes; track type) {
+          <mat-option [value]="type">
+            {{ datasourceTypesTranslations.get(type) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
-    <mat-form-field
-      *ngIf="dataLayerFormGroup.get('dsType').value === DatasourceType.function"
-      class="tb-label-field tb-inline-field" appearance="outline" subscriptSizing="dynamic">
-      <input matInput formControlName="dsLabel" placeholder="{{ 'widget-config.set' | translate }}">
-    </mat-form-field>
-    <tb-entity-autocomplete
-      class="tb-device-field"
-      *ngIf="dataLayerFormGroup.get('dsType').value === DatasourceType.device"
+    @if (dataLayerFormGroup.get('dsType').value === DatasourceType.function) {
+      <mat-form-field
+        class="tb-label-field tb-inline-field" appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="dsLabel" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    }
+    @if (dataLayerFormGroup.get('dsType').value === DatasourceType.device) {
+      <tb-entity-autocomplete
+        class="tb-device-field"
+        required
+        inlineField
+        placeholder="{{ 'device.select-device' | translate }}"
+        [entityType]="EntityType.DEVICE"
+        formControlName="dsDeviceId">
+      </tb-entity-autocomplete>
+    }
+    @if (dataLayerFormGroup.get('dsType').value === DatasourceType.entity) {
+      <tb-entity-alias-select
+        class="tb-entity-alias-field"
+        inlineField
+        tbRequired
+        [aliasController]="context.aliasController"
+        formControlName="dsEntityAliasId"
+        [callbacks]="context.callbacks">
+      </tb-entity-alias-select>
+    }
+  </div>
+  @if (['trips', 'markers'].includes(dataLayerType)) {
+    <tb-data-key-input
+      class="tb-x-pos-field"
       required
-      inlineField
-      placeholder="{{ 'device.select-device' | translate }}"
-      [entityType]="EntityType.DEVICE"
-      formControlName="dsDeviceId">
-    </tb-entity-autocomplete>
-    <tb-entity-alias-select
-      class="tb-entity-alias-field"
-      *ngIf="dataLayerFormGroup.get('dsType').value === DatasourceType.entity"
-      inlineField
-      tbRequired
+      requiredText="{{ mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.latitude-key-required' : 'widgets.maps.data-layer.marker.x-pos-key-required' }}"
+      [datasourceType]="dataLayerFormGroup.get('dsType').value"
+      [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
+      [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
       [aliasController]="context.aliasController"
-      formControlName="dsEntityAliasId"
-      [callbacks]="context.callbacks">
-    </tb-entity-alias-select>
-  </div>
-  <tb-data-key-input
-    class="tb-x-pos-field"
-    *ngIf="['trips', 'markers'].includes(dataLayerType)"
-    required
-    requiredText="{{ mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.latitude-key-required' : 'widgets.maps.data-layer.marker.x-pos-key-required' }}"
-    [datasourceType]="dataLayerFormGroup.get('dsType').value"
-    [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
-    [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
-    [aliasController]="context.aliasController"
-    [widgetType]="dataLayerType === 'trips' ? widgetType.timeseries : widgetType.latest"
-    [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
-    [dataKeyTypes]="dataLayerType === 'trips' ? [DataKeyType.timeseries] : [DataKeyType.attribute, DataKeyType.timeseries]"
-    [callbacks]="context.callbacks"
-    [generateKey]="context.generateDataKey"
-    (keyEdit)="editKey('xKey')"
-    formControlName="xKey">
-  </tb-data-key-input>
-  <tb-data-key-input
-    class="tb-y-pos-field"
-    *ngIf="['trips', 'markers'].includes(dataLayerType)"
-    required
-    requiredText="{{ mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.longitude-key-required' : 'widgets.maps.data-layer.marker.y-pos-key-required' }}"
-    [datasourceType]="dataLayerFormGroup.get('dsType').value"
-    [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
-    [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
-    [aliasController]="context.aliasController"
-    [widgetType]="dataLayerType === 'trips' ? widgetType.timeseries : widgetType.latest"
-    [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
-    [dataKeyTypes]="dataLayerType === 'trips' ? [DataKeyType.timeseries] : [DataKeyType.attribute, DataKeyType.timeseries]"
-    [callbacks]="context.callbacks"
-    [generateKey]="context.generateDataKey"
-    (keyEdit)="editKey('yKey')"
-    formControlName="yKey">
-  </tb-data-key-input>
-  <tb-data-key-input
-    class="tb-key-field"
-    *ngIf="dataLayerType === 'polygons'"
-    required
-    requiredText="widgets.maps.data-layer.polygon.polygon-key-required"
-    [datasourceType]="dataLayerFormGroup.get('dsType').value"
-    [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
-    [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
-    [aliasController]="context.aliasController"
-    [widgetType]="widgetType.latest"
-    [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
-    [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
-    [callbacks]="context.callbacks"
-    [generateKey]="context.generateDataKey"
-    (keyEdit)="editKey('polygonKey')"
-    formControlName="polygonKey">
-  </tb-data-key-input>
-  <tb-data-key-input
-    class="tb-key-field"
-    *ngIf="dataLayerType === 'circles'"
-    required
-    requiredText="widgets.maps.data-layer.circle.circle-key-required"
-    [datasourceType]="dataLayerFormGroup.get('dsType').value"
-    [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
-    [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
-    [aliasController]="context.aliasController"
-    [widgetType]="widgetType.latest"
-    [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
-    [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
-    [callbacks]="context.callbacks"
-    [generateKey]="context.generateDataKey"
-    (keyEdit)="editKey('circleKey')"
-    formControlName="circleKey">
-  </tb-data-key-input>
-  <tb-data-key-input
-    class="tb-key-field"
-    *ngIf="dataLayerType === 'polylines'"
-    required
-    requiredText="widgets.maps.data-layer.polyline.polyline-key-required"
-    [datasourceType]="dataLayerFormGroup.get('dsType').value"
-    [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
-    [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
-    [aliasController]="context.aliasController"
-    [widgetType]="widgetType.latest"
-    [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
-    [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
-    [callbacks]="context.callbacks"
-    [generateKey]="context.generateDataKey"
-    (keyEdit)="editKey('polylineKey')"
-    formControlName="polylineKey">
-  </tb-data-key-input>
+      [widgetType]="dataLayerType === 'trips' ? widgetType.timeseries : widgetType.latest"
+      [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
+      [dataKeyTypes]="dataLayerType === 'trips' ? [DataKeyType.timeseries] : [DataKeyType.attribute, DataKeyType.timeseries]"
+      [callbacks]="context.callbacks"
+      [generateKey]="context.generateDataKey"
+      (keyEdit)="editKey('xKey')"
+      formControlName="xKey">
+    </tb-data-key-input>
+  }
+  @if (['trips', 'markers'].includes(dataLayerType)) {
+    <tb-data-key-input
+      class="tb-y-pos-field"
+      required
+      requiredText="{{ mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.longitude-key-required' : 'widgets.maps.data-layer.marker.y-pos-key-required' }}"
+      [datasourceType]="dataLayerFormGroup.get('dsType').value"
+      [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
+      [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
+      [aliasController]="context.aliasController"
+      [widgetType]="dataLayerType === 'trips' ? widgetType.timeseries : widgetType.latest"
+      [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
+      [dataKeyTypes]="dataLayerType === 'trips' ? [DataKeyType.timeseries] : [DataKeyType.attribute, DataKeyType.timeseries]"
+      [callbacks]="context.callbacks"
+      [generateKey]="context.generateDataKey"
+      (keyEdit)="editKey('yKey')"
+      formControlName="yKey">
+    </tb-data-key-input>
+  }
+  @if (dataLayerType === 'polygons') {
+    <tb-data-key-input
+      class="tb-key-field"
+      required
+      requiredText="widgets.maps.data-layer.polygon.polygon-key-required"
+      [datasourceType]="dataLayerFormGroup.get('dsType').value"
+      [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
+      [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
+      [aliasController]="context.aliasController"
+      [widgetType]="widgetType.latest"
+      [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
+      [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
+      [callbacks]="context.callbacks"
+      [generateKey]="context.generateDataKey"
+      (keyEdit)="editKey('polygonKey')"
+      formControlName="polygonKey">
+    </tb-data-key-input>
+  }
+  @if (dataLayerType === 'circles') {
+    <tb-data-key-input
+      class="tb-key-field"
+      required
+      requiredText="widgets.maps.data-layer.circle.circle-key-required"
+      [datasourceType]="dataLayerFormGroup.get('dsType').value"
+      [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
+      [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
+      [aliasController]="context.aliasController"
+      [widgetType]="widgetType.latest"
+      [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
+      [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
+      [callbacks]="context.callbacks"
+      [generateKey]="context.generateDataKey"
+      (keyEdit)="editKey('circleKey')"
+      formControlName="circleKey">
+    </tb-data-key-input>
+  }
+  @if (dataLayerType === 'polylines') {
+    <tb-data-key-input
+      class="tb-key-field"
+      required
+      requiredText="widgets.maps.data-layer.polyline.polyline-key-required"
+      [datasourceType]="dataLayerFormGroup.get('dsType').value"
+      [entityAliasId]="dataLayerFormGroup.get('dsEntityAliasId').value"
+      [deviceId]="dataLayerFormGroup.get('dsDeviceId').value"
+      [aliasController]="context.aliasController"
+      [widgetType]="widgetType.latest"
+      [dataKeyType]="context.functionsOnly ? DataKeyType.function : null"
+      [dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]"
+      [callbacks]="context.callbacks"
+      [generateKey]="context.generateDataKey"
+      (keyEdit)="editKey('polylineKey')"
+      formControlName="polylineKey">
+    </tb-data-key-input>
+  }
 
   <div class="tb-form-table-row-cell-buttons">
     <button type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layers.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layers.component.html
index 268883fa3d..5c3036eb7f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layers.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layers.component.html
@@ -19,43 +19,59 @@
   <div class="tb-form-table tb-map-data-layers">
     <div class="tb-form-table-header no-padding-right">
       <div class="tb-form-table-header-cell tb-source-header" translate>widgets.maps.data-layer.source</div>
-      <div *ngIf="['trips', 'markers'].includes(dataLayerType)" class="tb-form-table-header-cell tb-x-pos-header">
-        {{ (mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.latitude-key' : 'widgets.maps.data-layer.marker.x-pos-key') | translate }}
-      </div>
-      <div *ngIf="['trips', 'markers'].includes(dataLayerType)" class="tb-form-table-header-cell tb-y-pos-header">
-        {{ (mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.longitude-key' : 'widgets.maps.data-layer.marker.y-pos-key') | translate }}
-      </div>
-      <div *ngIf="dataLayerType === 'polygons'" class="tb-form-table-header-cell tb-key-header" translate>widgets.maps.data-layer.polygon.polygon-key</div>
-      <div *ngIf="dataLayerType === 'circles'" class="tb-form-table-header-cell tb-key-header" translate>widgets.maps.data-layer.circle.circle-key</div>
-      <div *ngIf="dataLayerType === 'polylines'" class="tb-form-table-header-cell tb-key-header" translate>widgets.maps.data-layer.polyline.polyline-key</div>
+      @if (['trips', 'markers'].includes(dataLayerType)) {
+        <div class="tb-form-table-header-cell tb-x-pos-header">
+          {{ (mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.latitude-key' : 'widgets.maps.data-layer.marker.x-pos-key') | translate }}
+        </div>
+      }
+      @if (['trips', 'markers'].includes(dataLayerType)) {
+        <div class="tb-form-table-header-cell tb-y-pos-header">
+          {{ (mapType === MapType.geoMap ? 'widgets.maps.data-layer.marker.longitude-key' : 'widgets.maps.data-layer.marker.y-pos-key') | translate }}
+        </div>
+      }
+      @if (dataLayerType === 'polygons') {
+        <div class="tb-form-table-header-cell tb-key-header" translate>widgets.maps.data-layer.polygon.polygon-key</div>
+      }
+      @if (dataLayerType === 'circles') {
+        <div class="tb-form-table-header-cell tb-key-header" translate>widgets.maps.data-layer.circle.circle-key</div>
+      }
+      @if (dataLayerType === 'polylines') {
+        <div class="tb-form-table-header-cell tb-key-header" translate>widgets.maps.data-layer.polyline.polyline-key</div>
+      }
       <div class="tb-form-table-header-cell tb-actions-header"></div>
     </div>
-    <div *ngIf="dataLayersFormArray().controls.length; else noDataLayers" class="tb-form-table-body tb-drop-list max-h-64 overflow-y-auto"
-         cdkDropList cdkDropListOrientation="vertical"
-         [cdkDropListDisabled]="!dragEnabled"
-         (cdkDropListDropped)="layerDrop($event)">
-      <div cdkDrag [cdkDragDisabled]="!dragEnabled"
-           class="tb-draggable-form-table-row" 
-           *ngFor="let dataLayerControl of dataLayersFormArray().controls; trackBy: trackByDataLayer; let $index = index;">
-        <tb-map-data-layer-row class="flex-1"
-                               [mapType]="mapType"
-                               [dataLayerType]="dataLayerType"
-                               [context]="context"
-                               [formControl]="dataLayerControl"
-                               (dataLayerRemoved)="removeDataLayer($index)">
-        </tb-map-data-layer-row>
-        <div class="tb-form-table-row-cell-buttons">
-          <button [class.tb-hidden]="!dragEnabled"
-                  mat-icon-button
-                  type="button"
-                  cdkDragHandle
-                  matTooltip="{{ 'action.drag' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>drag_indicator</mat-icon>
-          </button>
-        </div>
+    @if (dataLayersFormArray().controls.length) {
+      <div class="tb-form-table-body tb-drop-list max-h-64 overflow-y-auto"
+           cdkDropList cdkDropListOrientation="vertical"
+           [cdkDropListDisabled]="!dragEnabled"
+           (cdkDropListDropped)="layerDrop($event)">
+        @for (dataLayerControl of dataLayersFormArray().controls; track trackByDataLayer($index, dataLayerControl)) {
+          <div cdkDrag [cdkDragDisabled]="!dragEnabled"
+               class="tb-draggable-form-table-row"
+               >
+            <tb-map-data-layer-row class="flex-1"
+                                   [mapType]="mapType"
+                                   [dataLayerType]="dataLayerType"
+                                   [context]="context"
+                                   [formControl]="dataLayerControl"
+                                   (dataLayerRemoved)="removeDataLayer($index)">
+            </tb-map-data-layer-row>
+            <div class="tb-form-table-row-cell-buttons">
+              <button [class.tb-hidden]="!dragEnabled"
+                      mat-icon-button
+                      type="button"
+                      cdkDragHandle
+                      matTooltip="{{ 'action.drag' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>drag_indicator</mat-icon>
+              </button>
+            </div>
+          </div>
+        }
       </div>
-    </div>
+    } @else {
+      <span class="tb-prompt flex items-center justify-center">{{ noDataLayersText | translate }}</span>
+    }
   </div>
   <div>
     <button type="button" mat-stroked-button color="primary" (click)="addDataLayer()">
@@ -63,6 +79,3 @@
     </button>
   </div>
 </div>
-<ng-template #noDataLayers>
-  <span class="tb-prompt flex items-center justify-center">{{ noDataLayersText | translate }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-source-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-source-row.component.html
index fcec47bc2b..2a2b6c27a2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-source-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-source-row.component.html
@@ -19,29 +19,33 @@
   <div class="tb-source-field">
     <mat-form-field class="tb-ds-type-field tb-inline-field" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="dsType">
-        <mat-option *ngFor="let type of datasourceTypes" [value]="type">
-          {{ datasourceTypesTranslations.get(type) | translate }}
-        </mat-option>
+        @for (type of datasourceTypes; track type) {
+          <mat-option [value]="type">
+            {{ datasourceTypesTranslations.get(type) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
-    <tb-entity-autocomplete
-      class="tb-device-field"
-      *ngIf="dataSourceFormGroup.get('dsType').value === DatasourceType.device"
-      required
-      inlineField
-      placeholder="{{ 'device.select-device' | translate }}"
-      [entityType]="EntityType.DEVICE"
-      formControlName="dsDeviceId">
-    </tb-entity-autocomplete>
-    <tb-entity-alias-select
-      class="tb-entity-alias-field"
-      *ngIf="dataSourceFormGroup.get('dsType').value === DatasourceType.entity"
-      inlineField
-      tbRequired
-      [aliasController]="context.aliasController"
-      formControlName="dsEntityAliasId"
-      [callbacks]="context.callbacks">
-    </tb-entity-alias-select>
+    @if (dataSourceFormGroup.get('dsType').value === DatasourceType.device) {
+      <tb-entity-autocomplete
+        class="tb-device-field"
+        required
+        inlineField
+        placeholder="{{ 'device.select-device' | translate }}"
+        [entityType]="EntityType.DEVICE"
+        formControlName="dsDeviceId">
+      </tb-entity-autocomplete>
+    }
+    @if (dataSourceFormGroup.get('dsType').value === DatasourceType.entity) {
+      <tb-entity-alias-select
+        class="tb-entity-alias-field"
+        inlineField
+        tbRequired
+        [aliasController]="context.aliasController"
+        formControlName="dsEntityAliasId"
+        [callbacks]="context.callbacks">
+      </tb-entity-alias-select>
+    }
   </div>
   <tb-filter-select
     class="tb-filter-field"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-sources.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-sources.component.html
index 0c8ae060ce..252c7b7f96 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-sources.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-sources.component.html
@@ -22,15 +22,21 @@
       <div class="tb-form-table-header-cell tb-filter-header" translate>widgets.maps.data-layer.filter</div>
       <div class="tb-form-table-header-cell tb-actions-header"></div>
     </div>
-    <div *ngIf="dataSourcesFormArray().controls.length; else noDataSources" class="tb-form-table-body">
-      <div *ngFor="let dataSourceControl of dataSourcesFormArray().controls; trackBy: trackByDataSource; let $index = index;">
-        <tb-map-data-source-row class="flex-1"
-                                [context]="context"
-                                [formControl]="dataSourceControl"
-                                (dataSourceRemoved)="removeDataSource($index)">
-        </tb-map-data-source-row>
+    @if (dataSourcesFormArray().controls.length) {
+      <div class="tb-form-table-body">
+        @for (dataSourceControl of dataSourcesFormArray().controls; track trackByDataSource($index, dataSourceControl)) {
+          <div>
+            <tb-map-data-source-row class="flex-1"
+                                    [context]="context"
+                                    [formControl]="dataSourceControl"
+                                    (dataSourceRemoved)="removeDataSource($index)">
+            </tb-map-data-source-row>
+          </div>
+        }
       </div>
-    </div>
+    } @else {
+      <span class="tb-prompt flex items-center justify-center">{{ 'widgets.maps.data-layer.no-datasources' | translate }}</span>
+    }
   </div>
   <div>
     <button type="button" mat-stroked-button color="primary" (click)="addDataSource()">
@@ -38,6 +44,3 @@
     </button>
   </div>
 </div>
-<ng-template #noDataSources>
-  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.maps.data-layer.no-datasources' | translate }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-row.component.html
index d59fe2d283..4416ab2d6c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-row.component.html
@@ -21,47 +21,67 @@
   </mat-form-field>
   <mat-form-field class="tb-inline-field tb-provider-field" appearance="outline" subscriptSizing="dynamic">
     <mat-select formControlName="provider" required>
-      <mat-option *ngFor="let provider of mapProviders" [value]="provider">
-        {{ mapProviderTranslationMap.get(provider) | translate }}
-      </mat-option>
+      @for (provider of mapProviders; track provider) {
+        <mat-option [value]="provider">
+          {{ mapProviderTranslationMap.get(provider) | translate }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
-  <mat-form-field *ngIf="MapProvider.openstreet === layerFormGroup.get('provider').value"
-                  class="tb-inline-field tb-layer-field" appearance="outline" subscriptSizing="dynamic">
-    <mat-select formControlName="layerType" required>
-      <mat-option *ngFor="let layerType of openStreetLayerTypes" [value]="layerType">
-        {{ openStreetMapLayerTranslationMap.get(layerType) | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-  <mat-form-field *ngIf="MapProvider.google === layerFormGroup.get('provider').value"
-                  class="tb-inline-field tb-layer-field" appearance="outline" subscriptSizing="dynamic">
-    <mat-select formControlName="layerType" required>
-      <mat-option *ngFor="let layerType of googleMapLayerTypes" [value]="layerType">
-        {{ googleMapLayerTranslationMap.get(layerType) | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-  <mat-form-field *ngIf="MapProvider.here === layerFormGroup.get('provider').value"
-                  class="tb-inline-field tb-layer-field" appearance="outline" subscriptSizing="dynamic">
-    <mat-select formControlName="layerType" required>
-      <mat-option *ngFor="let layerType of hereLayerTypes" [value]="layerType">
-        {{ hereLayerTranslationMap.get(layerType) | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-  <mat-form-field *ngIf="MapProvider.tencent === layerFormGroup.get('provider').value"
-                  class="tb-inline-field tb-layer-field" appearance="outline" subscriptSizing="dynamic">
-    <mat-select formControlName="layerType" required>
-      <mat-option *ngFor="let layerType of tencentLayerTypes" [value]="layerType">
-        {{ tencentLayerTranslationMap.get(layerType) | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-  <mat-form-field *ngIf="MapProvider.custom === layerFormGroup.get('provider').value"
-                  class="tb-inline-field tb-layer-field" appearance="outline" subscriptSizing="dynamic">
-    <input matInput formControlName="tileUrl" required placeholder="{{ 'widget-config.set' | translate }}">
-  </mat-form-field>
+  @if (MapProvider.openstreet === layerFormGroup.get('provider').value) {
+    <mat-form-field
+      class="tb-inline-field tb-layer-field" appearance="outline" subscriptSizing="dynamic">
+      <mat-select formControlName="layerType" required>
+        @for (layerType of openStreetLayerTypes; track layerType) {
+          <mat-option [value]="layerType">
+            {{ openStreetMapLayerTranslationMap.get(layerType) | translate }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  }
+  @if (MapProvider.google === layerFormGroup.get('provider').value) {
+    <mat-form-field
+      class="tb-inline-field tb-layer-field" appearance="outline" subscriptSizing="dynamic">
+      <mat-select formControlName="layerType" required>
+        @for (layerType of googleMapLayerTypes; track layerType) {
+          <mat-option [value]="layerType">
+            {{ googleMapLayerTranslationMap.get(layerType) | translate }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  }
+  @if (MapProvider.here === layerFormGroup.get('provider').value) {
+    <mat-form-field
+      class="tb-inline-field tb-layer-field" appearance="outline" subscriptSizing="dynamic">
+      <mat-select formControlName="layerType" required>
+        @for (layerType of hereLayerTypes; track layerType) {
+          <mat-option [value]="layerType">
+            {{ hereLayerTranslationMap.get(layerType) | translate }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  }
+  @if (MapProvider.tencent === layerFormGroup.get('provider').value) {
+    <mat-form-field
+      class="tb-inline-field tb-layer-field" appearance="outline" subscriptSizing="dynamic">
+      <mat-select formControlName="layerType" required>
+        @for (layerType of tencentLayerTypes; track layerType) {
+          <mat-option [value]="layerType">
+            {{ tencentLayerTranslationMap.get(layerType) | translate }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  }
+  @if (MapProvider.custom === layerFormGroup.get('provider').value) {
+    <mat-form-field
+      class="tb-inline-field tb-layer-field" appearance="outline" subscriptSizing="dynamic">
+      <input matInput formControlName="tileUrl" required placeholder="{{ 'widget-config.set' | translate }}">
+    </mat-form-field>
+  }
   <div class="tb-form-table-row-cell-buttons">
     <button type="button"
             mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-settings-panel.component.html
index e68d243136..28957d4b6a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-settings-panel.component.html
@@ -28,68 +28,92 @@
       <div class="fixed-title-width" translate>widgets.maps.layer.provider.provider</div>
       <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="provider" required>
-          <mat-option *ngFor="let provider of mapProviders" [value]="provider">
-            {{ mapProviderTranslationMap.get(provider) | translate }}
-          </mat-option>
+          @for (provider of mapProviders; track provider) {
+            <mat-option [value]="provider">
+              {{ mapProviderTranslationMap.get(provider) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
     <div class="tb-form-row space-between column-xs">
       <div class="fixed-title-width"> {{ (MapProvider.custom === layerFormGroup.get('provider').value ? 'widgets.maps.layer.provider.custom.tile-url' : 'widgets.maps.layer.layer') | translate }}</div>
-      <mat-form-field *ngIf="MapProvider.openstreet === layerFormGroup.get('provider').value"
-                      class="flex"  appearance="outline" subscriptSizing="dynamic">
-        <mat-select formControlName="layerType" required>
-          <mat-option *ngFor="let layerType of openStreetLayerTypes" [value]="layerType">
-            {{ openStreetMapLayerTranslationMap.get(layerType) | translate }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field *ngIf="MapProvider.google === layerFormGroup.get('provider').value"
-                      class="flex"  appearance="outline" subscriptSizing="dynamic">
-        <mat-select formControlName="layerType" required>
-          <mat-option *ngFor="let layerType of googleMapLayerTypes" [value]="layerType">
-            {{ googleMapLayerTranslationMap.get(layerType) | translate }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field *ngIf="MapProvider.here === layerFormGroup.get('provider').value"
-                      class="flex"  appearance="outline" subscriptSizing="dynamic">
-        <mat-select formControlName="layerType" required>
-          <mat-option *ngFor="let layerType of hereLayerTypes" [value]="layerType">
-            {{ hereLayerTranslationMap.get(layerType) | translate }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field *ngIf="MapProvider.tencent === layerFormGroup.get('provider').value"
-                      class="flex"  appearance="outline" subscriptSizing="dynamic">
-        <mat-select formControlName="layerType" required>
-          <mat-option *ngFor="let layerType of tencentLayerTypes" [value]="layerType">
-            {{ tencentLayerTranslationMap.get(layerType) | translate }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field *ngIf="MapProvider.custom === layerFormGroup.get('provider').value"
-                      class="flex" appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="tileUrl" required placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-    </div>
-    <div *ngIf="[MapProvider.google, MapProvider.here].includes(layerFormGroup.get('provider').value)" class="tb-form-panel stroked">
-      <div class="tb-form-panel-title" translate>widgets.maps.layer.credentials.credentials</div>
-      <div class="tb-form-row space-between column-xs">
-        <div class="fixed-title-width" translate>widgets.maps.layer.credentials.api-key</div>
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="apiKey" required placeholder="{{ 'widget-config.set' | translate }}">
+      @if (MapProvider.openstreet === layerFormGroup.get('provider').value) {
+        <mat-form-field
+          class="flex"  appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="layerType" required>
+            @for (layerType of openStreetLayerTypes; track layerType) {
+              <mat-option [value]="layerType">
+                {{ openStreetMapLayerTranslationMap.get(layerType) | translate }}
+              </mat-option>
+            }
+          </mat-select>
         </mat-form-field>
-      </div>
+      }
+      @if (MapProvider.google === layerFormGroup.get('provider').value) {
+        <mat-form-field
+          class="flex"  appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="layerType" required>
+            @for (layerType of googleMapLayerTypes; track layerType) {
+              <mat-option [value]="layerType">
+                {{ googleMapLayerTranslationMap.get(layerType) | translate }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
+      @if (MapProvider.here === layerFormGroup.get('provider').value) {
+        <mat-form-field
+          class="flex"  appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="layerType" required>
+            @for (layerType of hereLayerTypes; track layerType) {
+              <mat-option [value]="layerType">
+                {{ hereLayerTranslationMap.get(layerType) | translate }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
+      @if (MapProvider.tencent === layerFormGroup.get('provider').value) {
+        <mat-form-field
+          class="flex"  appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="layerType" required>
+            @for (layerType of tencentLayerTypes; track layerType) {
+              <mat-option [value]="layerType">
+                {{ tencentLayerTranslationMap.get(layerType) | translate }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
+      @if (MapProvider.custom === layerFormGroup.get('provider').value) {
+        <mat-form-field
+          class="flex" appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="tileUrl" required placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      }
     </div>
+    @if ([MapProvider.google, MapProvider.here].includes(layerFormGroup.get('provider').value)) {
+      <div class="tb-form-panel stroked">
+        <div class="tb-form-panel-title" translate>widgets.maps.layer.credentials.credentials</div>
+        <div class="tb-form-row space-between column-xs">
+          <div class="fixed-title-width" translate>widgets.maps.layer.credentials.api-key</div>
+          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+            <input matInput formControlName="apiKey" required placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+        </div>
+      </div>
+    }
     <div class="tb-form-row space-between column-xs">
       <div class="fixed-title-width" translate>widgets.maps.layer.reference.reference-layer</div>
       <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="referenceLayer" placeholder="{{'widgets.maps.layer.reference.no-layer' | translate}}">
           <mat-option [value]="null">{{ 'widgets.maps.layer.reference.no-layer' | translate }}</mat-option>
-          <mat-option *ngFor="let layer of referenceLayerTypes" [value]="layer">
-            {{ referenceLayerTypeTranslationMap.get(layer) | translate }}
-          </mat-option>
+          @for (layer of referenceLayerTypes; track layer) {
+            <mat-option [value]="layer">
+              {{ referenceLayerTypeTranslationMap.get(layer) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layers.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layers.component.html
index 9f4072fc12..9c824c71c4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layers.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layers.component.html
@@ -23,28 +23,34 @@
       <div class="tb-form-table-header-cell tb-layer-header" translate>widgets.maps.layer.layer</div>
       <div class="tb-form-table-header-cell tb-actions-header"></div>
     </div>
-    <div *ngIf="layersFormArray().controls.length; else noLayers" class="tb-form-table-body tb-drop-list max-h-64 overflow-y-auto"
-         cdkDropList cdkDropListOrientation="vertical"
-         [cdkDropListDisabled]="!dragEnabled"
-         (cdkDropListDropped)="layerDrop($event)">
-      <div cdkDrag [cdkDragDisabled]="!dragEnabled"
-           class="tb-draggable-form-table-row"
-           *ngFor="let layerControl of layersFormArray().controls; trackBy: trackByLayer; let $index = index;">
-        <tb-map-layer-row class="flex-1"
-                          [formControl]="layerControl"
-                          (layerRemoved)="removeLayer($index)"></tb-map-layer-row>
-        <div class="tb-form-table-row-cell-buttons">
-          <button [class.tb-hidden]="!dragEnabled"
-                  mat-icon-button
-                  type="button"
-                  cdkDragHandle
-                  matTooltip="{{ 'action.drag' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>drag_indicator</mat-icon>
-          </button>
-        </div>
+    @if (layersFormArray().controls.length) {
+      <div class="tb-form-table-body tb-drop-list max-h-64 overflow-y-auto"
+           cdkDropList cdkDropListOrientation="vertical"
+           [cdkDropListDisabled]="!dragEnabled"
+           (cdkDropListDropped)="layerDrop($event)">
+        @for (layerControl of layersFormArray().controls; track trackByLayer($index, layerControl)) {
+          <div cdkDrag [cdkDragDisabled]="!dragEnabled"
+               class="tb-draggable-form-table-row"
+               >
+            <tb-map-layer-row class="flex-1"
+                              [formControl]="layerControl"
+            (layerRemoved)="removeLayer($index)"></tb-map-layer-row>
+            <div class="tb-form-table-row-cell-buttons">
+              <button [class.tb-hidden]="!dragEnabled"
+                      mat-icon-button
+                      type="button"
+                      cdkDragHandle
+                      matTooltip="{{ 'action.drag' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>drag_indicator</mat-icon>
+              </button>
+            </div>
+          </div>
+        }
       </div>
-    </div>
+    } @else {
+      <span class="tb-prompt flex items-center justify-center">{{ 'widgets.maps.layer.no-layers' | translate }}</span>
+    }
   </div>
   <div>
     <button type="button" mat-stroked-button color="primary" (click)="addLayer()">
@@ -52,6 +58,3 @@
     </button>
   </div>
 </div>
-<ng-template #noLayers>
-  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.maps.layer.no-layers' | translate }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html
index 083178ddb3..943d166a0b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html
@@ -26,13 +26,17 @@
         <tb-toggle-option [value]="MapType.image">{{ 'widgets.maps.map-type.image' | translate }}</tb-toggle-option>
       </tb-toggle-select>
     </div>
-    <tb-map-layers *ngIf="MapType.geoMap === mapSettingsFormGroup.get('mapType').value"
-                   formControlName="layers">
-    </tb-map-layers>
-    <tb-image-map-source-settings *ngIf="MapType.image === mapSettingsFormGroup.get('mapType').value"
-                                  [context]="context"
-                                  formControlName="imageSource">
-    </tb-image-map-source-settings>
+    @if (MapType.geoMap === mapSettingsFormGroup.get('mapType').value) {
+      <tb-map-layers
+        formControlName="layers">
+      </tb-map-layers>
+    }
+    @if (MapType.image === mapSettingsFormGroup.get('mapType').value) {
+      <tb-image-map-source-settings
+        [context]="context"
+        formControlName="imageSource">
+      </tb-image-map-source-settings>
+    }
   </div>
   <div class="tb-form-panel">
     <div class="flex flex-row items-center justify-between xs:flex-col xs:items-start xs:gap-3">
@@ -41,46 +45,50 @@
       </div>
       <tb-toggle-select [(ngModel)]="dataLayerMode"
                         [ngModelOptions]="{ standalone: true }">
-        <tb-toggle-option *ngIf="trip" value="trips" [error]="mapSettingsFormGroup.get('trips').invalid ? ('common.required-fields' | translate) : null">{{ 'widgets.maps.overlays.trips' | translate }}</tb-toggle-option>
+        @if (trip) {
+          <tb-toggle-option value="trips" [error]="mapSettingsFormGroup.get('trips').invalid ? ('common.required-fields' | translate) : null">{{ 'widgets.maps.overlays.trips' | translate }}</tb-toggle-option>
+        }
         <tb-toggle-option value="markers" [error]="mapSettingsFormGroup.get('markers').invalid ? ('common.required-fields' | translate) : null">{{ 'widgets.maps.overlays.markers' | translate }}</tb-toggle-option>
         <tb-toggle-option value="polygons" [error]="mapSettingsFormGroup.get('polygons').invalid ? ('common.required-fields' | translate) : null">{{ 'widgets.maps.overlays.polygons' | translate }}</tb-toggle-option>
         <tb-toggle-option value="circles" [error]="mapSettingsFormGroup.get('circles').invalid ? ('common.required-fields' | translate) : null">{{ 'widgets.maps.overlays.circles' | translate }}</tb-toggle-option>
         <tb-toggle-option value="polylines" [error]="mapSettingsFormGroup.get('polylines').invalid ? ('common.required-fields' | translate) : null">{{ 'widgets.maps.overlays.polylines' | translate }}</tb-toggle-option>
       </tb-toggle-select>
     </div>
-    <tb-map-data-layers *ngIf="trip"
-                        [class.!hidden]="dataLayerMode !== 'trips'"
-                        formControlName="trips"
-                        dataLayerType="trips"
-                        [context]="context"
-                        [mapType]="mapSettingsFormGroup.get('mapType').value"></tb-map-data-layers>
+    @if (trip) {
+      <tb-map-data-layers
+        [class.!hidden]="dataLayerMode !== 'trips'"
+        formControlName="trips"
+        dataLayerType="trips"
+        [context]="context"
+      [mapType]="mapSettingsFormGroup.get('mapType').value"></tb-map-data-layers>
+    }
     <tb-map-data-layers [class.!hidden]="dataLayerMode !== 'markers'"
                         formControlName="markers"
                         dataLayerType="markers"
                         [context]="context"
-                        [mapType]="mapSettingsFormGroup.get('mapType').value"></tb-map-data-layers>
+    [mapType]="mapSettingsFormGroup.get('mapType').value"></tb-map-data-layers>
     <tb-map-data-layers [class.!hidden]="dataLayerMode !== 'polygons'"
                         formControlName="polygons"
                         dataLayerType="polygons"
                         [context]="context"
-                        [mapType]="mapSettingsFormGroup.get('mapType').value"></tb-map-data-layers>
+    [mapType]="mapSettingsFormGroup.get('mapType').value"></tb-map-data-layers>
     <tb-map-data-layers [class.!hidden]="dataLayerMode !== 'circles'"
                         formControlName="circles"
                         dataLayerType="circles"
                         [context]="context"
-                        [mapType]="mapSettingsFormGroup.get('mapType').value"></tb-map-data-layers>
+    [mapType]="mapSettingsFormGroup.get('mapType').value"></tb-map-data-layers>
     <tb-map-data-layers [class.!hidden]="dataLayerMode !== 'polylines'"
                         formControlName="polylines"
                         dataLayerType="polylines"
                         [context]="context"
-                        [mapType]="mapSettingsFormGroup.get('mapType').value"></tb-map-data-layers>
+    [mapType]="mapSettingsFormGroup.get('mapType').value"></tb-map-data-layers>
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" tb-hint-tooltip-icon="{{ 'widgets.maps.data-layer.additional-datasources-hint' | translate }}">
       {{ 'widgets.maps.data-layer.additional-datasources' | translate }}
     </div>
     <tb-additional-map-data-sources formControlName="additionalDataSources"
-                         [context]="context">
+                                    [context]="context">
     </tb-additional-map-data-sources>
   </div>
   <div class="tb-form-panel">
@@ -91,35 +99,45 @@
       <div translate>widgets.maps.control.position</div>
       <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="controlsPosition">
-          <mat-option *ngFor="let position of mapControlPositions" [value]="position">
-            {{ mapControlsPositionTranslationMap.get(position) | translate }}
-          </mat-option>
+          @for (position of mapControlPositions; track position) {
+            <mat-option [value]="position">
+              {{ mapControlsPositionTranslationMap.get(position) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
     <div class="tb-form-row space-between column-lt-md">
       <div translate>widgets.maps.control.zoom-actions</div>
       <mat-chip-listbox multiple formControlName="zoomActions">
-        <mat-chip-option *ngFor="let action of mapZoomActions" [value]="action">
-          {{ mapZoomActionTranslationMap.get(action) | translate }}
-        </mat-chip-option>
+        @for (action of mapZoomActions; track action) {
+          <mat-chip-option [value]="action">
+            {{ mapZoomActionTranslationMap.get(action) | translate }}
+          </mat-chip-option>
+        }
       </mat-chip-listbox>
     </div>
     <div class="tb-form-row space-between column-lt-md">
       <div translate>widgets.maps.control.scale</div>
       <mat-chip-listbox multiple formControlName="scales">
-        <mat-chip-option *ngFor="let scale of mapScales" [value]="scale">
-          {{ mapScaleTranslationMap.get(scale) | translate }}
-        </mat-chip-option>
+        @for (scale of mapScales; track scale) {
+          <mat-chip-option [value]="scale">
+            {{ mapScaleTranslationMap.get(scale) | translate }}
+          </mat-chip-option>
+        }
       </mat-chip-listbox>
     </div>
-    <div *ngIf="showDragButtonModeButtonSettings" class="tb-form-row">
-      <mat-slide-toggle class="mat-slide" formControlName="dragModeButton">
-        {{ 'widgets.maps.control.switch-to-drag-mode-using-button' | translate }}
-      </mat-slide-toggle>
-    </div>
-    <tb-trip-timeline-settings *ngIf="trip"
-                               formControlName="tripTimeline"></tb-trip-timeline-settings>
+    @if (showDragButtonModeButtonSettings) {
+      <div class="tb-form-row">
+        <mat-slide-toggle class="mat-slide" formControlName="dragModeButton">
+          {{ 'widgets.maps.control.switch-to-drag-mode-using-button' | translate }}
+        </mat-slide-toggle>
+      </div>
+    }
+    @if (trip) {
+      <tb-trip-timeline-settings
+      formControlName="tripTimeline"></tb-trip-timeline-settings>
+    }
   </div>
   <tb-map-action-button-settings formControlName="mapActionButtons">
   </tb-map-action-button-settings>
@@ -127,7 +145,7 @@
     <div class="tb-form-panel-title">
       {{ 'widgets.maps.common.common-map-settings' | translate }}
     </div>
-    <ng-container *ngIf="MapType.geoMap === mapSettingsFormGroup.get('mapType').value">
+    @if (MapType.geoMap === mapSettingsFormGroup.get('mapType').value) {
       <div class="tb-form-row">
         <mat-slide-toggle class="mat-slide" formControlName="fitMapBounds">
           {{ 'widgets.maps.common.fit-map-bounds' | translate }}
@@ -147,7 +165,7 @@
           <input matInput type="number" min="0" max="20" step="1" formControlName="defaultZoomLevel" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
       </div>
-    </ng-container>
+    }
     <div class="tb-form-row space-between">
       <div translate>widgets.maps.common.entities-limit</div>
       <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-tooltip-tag-actions.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-tooltip-tag-actions.component.html
index 1ca905dbe7..2c3d443378 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-tooltip-tag-actions.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-tooltip-tag-actions.component.html
@@ -19,49 +19,57 @@
   <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 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">
-          <div class="tb-chip-labels">
-            <div class="tb-chip-label tb-chip-text">
-              <strong>
-                {{ action.name }}
-              </strong>
+      @for (action of actionsFormGroup.get('actions').value; track action) {
+        <mat-chip
+          class="tb-tag-action-chip"
+          [removable]="!disabled" (removed)="removeAction($index)">
+          <div class="flex flex-row items-center justify-start gap-1">
+            <div class="tb-chip-labels">
+              <div class="tb-chip-label tb-chip-text">
+                <strong>
+                  {{ action.name }}
+                </strong>
+              </div>
             </div>
+            @if (!disabled) {
+              <button
+                #editButton
+                type="button"
+                mat-icon-button
+                class="tb-mat-24"
+                matTooltip="{{ 'widgets.maps.data-layer.edit-tooltip-tag-action' | translate }}"
+                matTooltipPosition="above"
+                (click)="editAction($event, editButton, $index)">
+                <mat-icon class="tb-mat-18">edit</mat-icon>
+              </button>
+            }
+            @if (!disabled) {
+              <button
+                matChipRemove
+                type="button"
+                mat-icon-button
+                class="tb-mat-24"
+                matTooltip="{{ 'widgets.maps.data-layer.remove-tooltip-tag-action' | translate }}"
+                matTooltipPosition="above">
+                <mat-icon class="tb-mat-18">close</mat-icon>
+              </button>
+            }
           </div>
-          <button *ngIf="!disabled"
-                  #editButton
-                  type="button"
-                  mat-icon-button
-                  class="tb-mat-24"
-                  matTooltip="{{ 'widgets.maps.data-layer.edit-tooltip-tag-action' | translate }}"
-                  matTooltipPosition="above"
-                  (click)="editAction($event, editButton, $index)">
-            <mat-icon class="tb-mat-18">edit</mat-icon>
-          </button>
-          <button *ngIf="!disabled"
-                  matChipRemove
-                  type="button"
-                  mat-icon-button
-                  class="tb-mat-24"
-                  matTooltip="{{ 'widgets.maps.data-layer.remove-tooltip-tag-action' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon class="tb-mat-18">close</mat-icon>
-          </button>
-        </div>
-      </mat-chip>
+        </mat-chip>
+      }
     </mat-chip-listbox>
-    <button *ngIf="!disabled"
-            #addButton
-            type="button"
-            mat-icon-button
-            class="tb-mat-40"
-            color="primary"
-            matTooltip="{{ 'widgets.maps.data-layer.add-tooltip-tag-action' | translate }}"
-            matTooltipPosition="above"
-            (click)="addAction($event, addButton)">
-      <mat-icon>add</mat-icon>
-    </button>
+    @if (!disabled) {
+      <button
+        #addButton
+        type="button"
+        mat-icon-button
+        class="tb-mat-40"
+        color="primary"
+        matTooltip="{{ 'widgets.maps.data-layer.add-tooltip-tag-action' | translate }}"
+        matTooltipPosition="above"
+        (click)="addAction($event, addButton)">
+        <mat-icon>add</mat-icon>
+      </button>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-icon-shapes.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-icon-shapes.component.html
index 150789ffbd..c6b8d4eefd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-icon-shapes.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-icon-shapes.component.html
@@ -18,10 +18,10 @@
 <div class="tb-marker-icon-shapes-panel">
   <div class="tb-marker-icon-shapes-title" translate>widgets.maps.data-layer.marker.marker-icon</div>
   <tb-material-icons [selectedIcon]="icon" [iconClearButton]="false" [showTitle]="false"
-                     [popover]="popover" (iconSelected)="selectIcon($event)"></tb-material-icons>
+  [popover]="popover" (iconSelected)="selectIcon($event)"></tb-material-icons>
   <div class="tb-marker-icon-shapes-title" translate>widgets.maps.data-layer.marker.marker-appearance</div>
   <div class="flex flex-row flex-wrap gap-3">
-    <ng-container *ngFor="let containerInfo of iconContainers">
+    @for (containerInfo of iconContainers; track containerInfo) {
       @if (containerInfo.iconContainer === iconContainer) {
         <button class="tb-select-shape-button"
                 mat-raised-button
@@ -39,7 +39,7 @@
           </div>
         </button>
       }
-    </ng-container>
+    }
   </div>
   <div class="tb-marker-icon-shapes-panel-buttons">
     <span class="flex-1"></span>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-image-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-image-settings.component.html
index 22d7a09f48..2a3d3fd812 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-image-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-image-settings.component.html
@@ -21,8 +21,9 @@
         [disabled]="disabled"
         #matButton
         (click)="openImageSettingsPopup($event, matButton)">
-  <tb-icon matButtonIcon *ngIf="modelValue?.type === MarkerImageType.function; else imagePreview">mdi:function-variant</tb-icon>
+  @if (modelValue?.type === MarkerImageType.function) {
+    <tb-icon matButtonIcon>mdi:function-variant</tb-icon>
+  } @else {
+    <img width="24px" height="24px" style="object-fit: contain;" [src]="modelValue?.image | image : {preview: true} | async" [class.disabled]="disabled"/>
+  }
 </button>
-<ng-template #imagePreview>
-  <img width="24px" height="24px" style="object-fit: contain;" [src]="modelValue?.image | image : {preview: true} | async" [class.disabled]="disabled"/>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-shape-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-shape-settings.component.html
index 0c76ad3fe5..5961577162 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-shape-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-shape-settings.component.html
@@ -26,13 +26,17 @@
           [disabled]="disabled"
           #matButton
           (click)="openShapePopup($event, matButton)">
-    <img *ngIf="markerType === MarkerType.shape" matButtonIcon width="24px" height="24px" style="object-fit: contain;" [src]="shapePreview$ | async" [class.disabled]="disabled"/>
-    <div *ngIf="markerType === MarkerType.icon" matButtonIcon style="object-fit: contain; width: 24px; height: 24px;" [innerHTML]="iconPreview$ | async" [class.disabled]="disabled">
-    </div>
+    @if (markerType === MarkerType.shape) {
+      <img matButtonIcon width="24px" height="24px" style="object-fit: contain;" [src]="shapePreview$ | async" [class.disabled]="disabled"/>
+    }
+    @if (markerType === MarkerType.icon) {
+      <div matButtonIcon style="object-fit: contain; width: 24px; height: 24px;" [innerHTML]="iconPreview$ | async" [class.disabled]="disabled">
+      </div>
+    }
   </button>
   <tb-data-layer-color-settings [context]="context"
                                 [dsType]="dsType"
                                 [dsEntityAliasId]="dsEntityAliasId"
                                 [dsDeviceId]="dsDeviceId"
-                                helpId="widget/lib/map/color_fn" formControlName="color"></tb-data-layer-color-settings>
+  helpId="widget/lib/map/color_fn" formControlName="color"></tb-data-layer-color-settings>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-shapes.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-shapes.component.html
index e9611bf955..2e94accae9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-shapes.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-shapes.component.html
@@ -18,21 +18,25 @@
 <div class="tb-marker-shapes-panel">
   <div class="tb-marker-shapes-title" translate>widgets.maps.data-layer.marker.marker-shapes</div>
   <div class="flex flex-row flex-wrap gap-3">
-    <ng-container *ngFor="let shapeInfo of shapes">
-      <button *ngIf="shapeInfo.shape === shape"
-              class="tb-select-shape-button"
-              mat-raised-button
-              (click)="selectShape(shapeInfo.shape)"
-              type="button">
-        <img matButtonIcon class="tb-marker-shape" [src]="shapeInfo.url$ | async"/>
-      </button>
-      <button *ngIf="shapeInfo.shape !== shape"
-              class="tb-select-shape-button"
-              mat-button
-              (click)="selectShape(shapeInfo.shape)"
-              type="button">
-        <img matButtonIcon class="tb-marker-shape" [src]="shapeInfo.url$ | async"/>
-      </button>
-    </ng-container>
+    @for (shapeInfo of shapes; track shapeInfo) {
+      @if (shapeInfo.shape === shape) {
+        <button
+          class="tb-select-shape-button"
+          mat-raised-button
+          (click)="selectShape(shapeInfo.shape)"
+          type="button">
+          <img matButtonIcon class="tb-marker-shape" [src]="shapeInfo.url$ | async"/>
+        </button>
+      }
+      @if (shapeInfo.shape !== shape) {
+        <button
+          class="tb-select-shape-button"
+          mat-button
+          (click)="selectShape(shapeInfo.shape)"
+          type="button">
+          <img matButtonIcon class="tb-marker-shape" [src]="shapeInfo.url$ | async"/>
+        </button>
+      }
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/shape-fill-image-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/shape-fill-image-settings.component.html
index f890575008..e5157f09ea 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/shape-fill-image-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/shape-fill-image-settings.component.html
@@ -21,9 +21,10 @@
         [disabled]="disabled"
         #matButton
         (click)="openImageSettingsPopup($event, matButton)">
-  <tb-icon matButtonIcon *ngIf="modelValue?.type === ShapeFillImageType.function; else imagePreview">mdi:function-variant</tb-icon>
+  @if (modelValue?.type === ShapeFillImageType.function) {
+    <tb-icon matButtonIcon>mdi:function-variant</tb-icon>
+  } @else {
+    <img width="24px" height="24px" [style.transform]="modelValue?.angle ? ('rotate('+modelValue.angle+'deg)') : ''" [style.opacity]="modelValue?.opacity"
+         style="object-fit: contain;" [src]="modelValue?.image | image : {preview: true} | async" [class.disabled]="disabled"/>
+  }
 </button>
-<ng-template #imagePreview>
-  <img width="24px" height="24px" [style.transform]="modelValue?.angle ? ('rotate('+modelValue.angle+'deg)') : ''" [style.opacity]="modelValue?.opacity"
-       style="object-fit: contain;" [src]="modelValue?.image | image : {preview: true} | async" [class.disabled]="disabled"/>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/trip-timeline-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/trip-timeline-settings.component.html
index 966cef8c3f..36b6ed86fb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/trip-timeline-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/trip-timeline-settings.component.html
@@ -38,9 +38,11 @@
           <div class="fixed-title-width" translate>widgets.maps.timeline.speed-options</div>
           <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="speedOptions" multiple>
-              <mat-option *ngFor="let speed of [1,5,10,15,25]" [value]="speed">
-                {{ speed }}
-              </mat-option>
+              @for (speed of [1,5,10,15,25]; track speed) {
+                <mat-option [value]="speed">
+                  {{ speed }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -50,7 +52,7 @@
           </mat-slide-toggle>
           <tb-date-format-select class="flex-1"
                                  excludeLastUpdateAgo
-                                 formControlName="timestampFormat"></tb-date-format-select>
+          formControlName="timestampFormat"></tb-date-format-select>
         </div>
         <div class="tb-form-panel tb-slide-toggle stroked">
           <mat-expansion-panel class="tb-settings" [expanded]="tripTimelineSettingsFormGroup.get('snapToRealLocation').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html
index d0a1ef44c0..56ed28abd8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html
@@ -16,26 +16,30 @@
 
 -->
 <ng-container [formGroup]="scadaSymbolObjectSettingsFormGroup">
-  <div *ngIf="behaviorGroups?.length" class="tb-form-panel" formGroupName="behavior">
-    <div class="tb-form-panel-title" translate>scada.behavior.behavior</div>
-    <ng-container *ngFor="let behaviorGroup of behaviorGroups">
-      <div *ngIf="behaviorGroup.title" class="tb-form-panel stroked">
-        <mat-expansion-panel class="tb-settings" expanded>
-          <mat-expansion-panel-header class="flex flex-row flex-wrap">
-            <mat-panel-title>
-              <div class="tb-form-panel-title">{{ behaviorGroup.title | customTranslate }}</div>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
-          <ng-template matExpansionPanelContent>
-            <ng-container *ngTemplateOutlet="behaviorsTpl; context:{behaviors: behaviorGroup.behaviors}"></ng-container>
-          </ng-template>
-        </mat-expansion-panel>
-      </div>
-      <ng-container *ngIf="!behaviorGroup.title">
-        <ng-container *ngTemplateOutlet="behaviorsTpl; context:{behaviors: behaviorGroup.behaviors}"></ng-container>
-      </ng-container>
-    </ng-container>
-  </div>
+  @if (behaviorGroups?.length) {
+    <div class="tb-form-panel" formGroupName="behavior">
+      <div class="tb-form-panel-title" translate>scada.behavior.behavior</div>
+      @for (behaviorGroup of behaviorGroups; track behaviorGroup) {
+        @if (behaviorGroup.title) {
+          <div class="tb-form-panel stroked">
+            <mat-expansion-panel class="tb-settings" expanded>
+              <mat-expansion-panel-header class="flex flex-row flex-wrap">
+                <mat-panel-title>
+                  <div class="tb-form-panel-title">{{ behaviorGroup.title | customTranslate }}</div>
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <ng-template matExpansionPanelContent>
+                <ng-container *ngTemplateOutlet="behaviorsTpl; context:{behaviors: behaviorGroup.behaviors}"></ng-container>
+              </ng-template>
+            </mat-expansion-panel>
+          </div>
+        }
+        @if (!behaviorGroup.title) {
+          <ng-container *ngTemplateOutlet="behaviorsTpl; context:{behaviors: behaviorGroup.behaviors}"></ng-container>
+        }
+      }
+    </div>
+  }
   <tb-dynamic-form formControlName="properties"
                    title="{{ 'widget-config.appearance' | translate }}"
                    [properties]="metadata?.properties">
@@ -44,43 +48,49 @@
 </ng-container>
 
 <ng-template #behaviorsTpl let-behaviors="behaviors">
-  <ng-container *ngFor="let behavior of behaviors">
+  @for (behavior of behaviors; track behavior) {
     <ng-container *ngTemplateOutlet="behaviorTpl; context:{behavior: behavior}"></ng-container>
-  </ng-container>
+  }
 </ng-template>
 
 <ng-template #behaviorTpl let-behavior="behavior">
   <ng-container [formGroup]="scadaSymbolObjectSettingsFormGroup">
     <div class="tb-form-row flex-wrap overflow-auto" formGroupName="behavior">
       <div class="fixed-title-width fixed-title-height" tb-hint-tooltip-icon="{{ behavior.hint | customTranslate }}">{{ behavior.name | customTranslate }}</div>
-      <tb-get-value-action-settings *ngIf="behavior.type === ScadaSymbolBehaviorType.value"
-                                    class="tb-flex"
-                                    panelTitle="{{ behavior.name | customTranslate }}"
-                                    [valueType]="behavior.valueType"
-                                    [trueLabel]="behavior.trueLabel | customTranslate"
-                                    [falseLabel]="behavior.falseLabel | customTranslate"
-                                    [stateLabel]="behavior.stateLabel | customTranslate"
-                                    [aliasController]="aliasController"
-                                    [targetDevice]="targetDevice"
-                                    [widgetType]="widgetType"
-                                    formControlName="{{ behavior.id }}">
-      </tb-get-value-action-settings>
-      <tb-set-value-action-settings *ngIf="behavior.type === ScadaSymbolBehaviorType.action"
-                                    class="tb-flex"
-                                    panelTitle="{{ behavior.name | customTranslate }}"
-                                    [valueType]="behavior.valueType"
-                                    [aliasController]="aliasController"
-                                    [targetDevice]="targetDevice"
-                                    [widgetType]="widgetType"
-                                    formControlName="{{ behavior.id }}">
-      </tb-set-value-action-settings>
-      <tb-widget-action-settings *ngIf="behavior.type === ScadaSymbolBehaviorType.widgetAction"
-                                 class="tb-flex"
-                                 panelTitle="{{ behavior.name | customTranslate }}"
-                                 [callbacks]="callbacks"
-                                 [widgetType]="widgetType"
-                                 formControlName="{{ behavior.id }}">
-      </tb-widget-action-settings>
+      @if (behavior.type === ScadaSymbolBehaviorType.value) {
+        <tb-get-value-action-settings
+          class="tb-flex"
+          panelTitle="{{ behavior.name | customTranslate }}"
+          [valueType]="behavior.valueType"
+          [trueLabel]="behavior.trueLabel | customTranslate"
+          [falseLabel]="behavior.falseLabel | customTranslate"
+          [stateLabel]="behavior.stateLabel | customTranslate"
+          [aliasController]="aliasController"
+          [targetDevice]="targetDevice"
+          [widgetType]="widgetType"
+          formControlName="{{ behavior.id }}">
+        </tb-get-value-action-settings>
+      }
+      @if (behavior.type === ScadaSymbolBehaviorType.action) {
+        <tb-set-value-action-settings
+          class="tb-flex"
+          panelTitle="{{ behavior.name | customTranslate }}"
+          [valueType]="behavior.valueType"
+          [aliasController]="aliasController"
+          [targetDevice]="targetDevice"
+          [widgetType]="widgetType"
+          formControlName="{{ behavior.id }}">
+        </tb-set-value-action-settings>
+      }
+      @if (behavior.type === ScadaSymbolBehaviorType.widgetAction) {
+        <tb-widget-action-settings
+          class="tb-flex"
+          panelTitle="{{ behavior.name | customTranslate }}"
+          [callbacks]="callbacks"
+          [widgetType]="widgetType"
+          formControlName="{{ behavior.id }}">
+        </tb-widget-action-settings>
+      }
     </div>
   </ng-container>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source-data-key.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source-data-key.component.html
index c24ff79466..a2e07002a1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source-data-key.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source-data-key.component.html
@@ -19,59 +19,67 @@
   <div class="tb-source-field">
     <mat-form-field class="tb-type-field" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="type">
-        <mat-option *ngFor="let type of valueSourceDataKeyTypes" [value]="type">
-          {{ valueSourceDataKeyTypeTranslation.get(type) | translate }}
-        </mat-option>
+        @for (type of valueSourceDataKeyTypes; track type) {
+          <mat-option [value]="type">
+            {{ valueSourceDataKeyTypeTranslation.get(type) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
-    <tb-entity-alias-input
-      class="tb-entity-alias-field"
-      *ngIf="valueSourceFormGroup.get('type').value === valueSourceDataKeyType.entity"
-      [aliasController]="aliasController"
-      required
-      formControlName="entityAlias">
-    </tb-entity-alias-input>
+    @if (valueSourceFormGroup.get('type').value === valueSourceDataKeyType.entity) {
+      <tb-entity-alias-input
+        class="tb-entity-alias-field"
+        [aliasController]="aliasController"
+        required
+        formControlName="entityAlias">
+      </tb-entity-alias-input>
+    }
   </div>
   <div class="tb-key-value-field">
-    <mat-form-field *ngIf="valueSourceFormGroup.get('type').value === valueSourceDataKeyType.constant"
-                    appearance="outline" class="tb-constant-field number" subscriptSizing="dynamic"
-                    [class.tb-suffix-absolute]="!valueSourceFormGroup.get('value').value">
-      <input required matInput formControlName="value" type="number" placeholder="{{ 'widget-config.set' | translate }}">
-      <mat-icon matSuffix
-                matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
-                [matTooltip]="'widgets.value-source.value-required' | translate"
-                *ngIf="valueSourceFormGroup.get('value').hasError('required')
-                       && valueSourceFormGroup.get('value').touched"
-                class="tb-error">
-        warning
-      </mat-icon>
-    </mat-form-field>
-    <tb-data-key-input
-      *ngIf="valueSourceFormGroup.get('type').value === valueSourceDataKeyType.latestKey"
-      required
-      requiredText="widgets.value-source.key-required"
-      [datasourceType]="datasource?.type"
-      [entityAliasId]="datasource?.entityAliasId"
-      [deviceId]="datasource?.deviceId"
-      [aliasController]="aliasController"
-      [dataKeyType]="datasource?.type === datasourceType.function ? dataKeyType.function : null"
-      [dataKeyTypes]="[dataKeyType.attribute, dataKeyType.timeseries]"
-      [callbacks]="dataKeyCallbacks"
-      [editable]="false"
-      [formControl]="latestKeyFormControl">
-    </tb-data-key-input>
-    <tb-data-key-input
-      *ngIf="valueSourceFormGroup.get('type').value === valueSourceDataKeyType.entity"
-      required
-      requiredText="widgets.value-source.entity-key-required"
-      [datasourceType]="datasourceType.entity"
-      [aliasController]="aliasController"
-      [entityAlias]="valueSourceFormGroup.get('entityAlias').value"
-      [dataKeyTypes]="[dataKeyType.attribute, dataKeyType.timeseries]"
-      [callbacks]="dataKeyCallbacks"
-      [editable]="false"
-      [formControl]="entityKeyFormControl">
-    </tb-data-key-input>
+    @if (valueSourceFormGroup.get('type').value === valueSourceDataKeyType.constant) {
+      <mat-form-field
+        appearance="outline" class="tb-constant-field number" subscriptSizing="dynamic"
+        [class.tb-suffix-absolute]="!valueSourceFormGroup.get('value').value">
+        <input required matInput formControlName="value" type="number" placeholder="{{ 'widget-config.set' | translate }}">
+        @if (valueSourceFormGroup.get('value').hasError('required')
+          && valueSourceFormGroup.get('value').touched) {
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="'widgets.value-source.value-required' | translate"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        }
+      </mat-form-field>
+    }
+    @if (valueSourceFormGroup.get('type').value === valueSourceDataKeyType.latestKey) {
+      <tb-data-key-input
+        required
+        requiredText="widgets.value-source.key-required"
+        [datasourceType]="datasource?.type"
+        [entityAliasId]="datasource?.entityAliasId"
+        [deviceId]="datasource?.deviceId"
+        [aliasController]="aliasController"
+        [dataKeyType]="datasource?.type === datasourceType.function ? dataKeyType.function : null"
+        [dataKeyTypes]="[dataKeyType.attribute, dataKeyType.timeseries]"
+        [callbacks]="dataKeyCallbacks"
+        [editable]="false"
+        [formControl]="latestKeyFormControl">
+      </tb-data-key-input>
+    }
+    @if (valueSourceFormGroup.get('type').value === valueSourceDataKeyType.entity) {
+      <tb-data-key-input
+        required
+        requiredText="widgets.value-source.entity-key-required"
+        [datasourceType]="datasourceType.entity"
+        [aliasController]="aliasController"
+        [entityAlias]="valueSourceFormGroup.get('entityAlias').value"
+        [dataKeyTypes]="[dataKeyType.attribute, dataKeyType.timeseries]"
+        [callbacks]="dataKeyCallbacks"
+        [editable]="false"
+        [formControl]="entityKeyFormControl">
+      </tb-data-key-input>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
index b088489cc9..8721b060f7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
@@ -40,16 +40,20 @@
            #entityAliasInput
            formControlName="entityAlias"
            [matAutocomplete]="entityAliasAutocomplete">
-    <button *ngIf="valueSourceFormGroup.get('entityAlias').value && !valueSourceFormGroup.get('entityAlias').disabled"
-            type="button"
-            matSuffix mat-icon-button aria-label="Clear"
-            (click)="clearEntityAlias()">
-      <mat-icon class="material-icons">close</mat-icon>
-    </button>
+    @if (valueSourceFormGroup.get('entityAlias').value && !valueSourceFormGroup.get('entityAlias').disabled) {
+      <button
+        type="button"
+        matSuffix mat-icon-button aria-label="Clear"
+        (click)="clearEntityAlias()">
+        <mat-icon class="material-icons">close</mat-icon>
+      </button>
+    }
     <mat-autocomplete class="tb-autocomplete" #entityAliasAutocomplete="matAutocomplete">
-      <mat-option *ngFor="let entityAlias of filteredEntityAliases | async" [value]="entityAlias">
-        <span [innerHTML]="entityAlias | highlight:aliasSearchText"></span>
-      </mat-option>
+      @for (entityAlias of filteredEntityAliases | async; track entityAlias) {
+        <mat-option [value]="entityAlias">
+          <span [innerHTML]="entityAlias | highlight:aliasSearchText"></span>
+        </mat-option>
+      }
     </mat-autocomplete>
   </mat-form-field>
   <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" [class.!hidden]="valueSourceFormGroup.get('valueSource').value !== 'entityAttribute'">
@@ -57,16 +61,20 @@
            #keyInput
            formControlName="attribute"
            [matAutocomplete]="keyAutocomplete">
-    <button *ngIf="valueSourceFormGroup.get('attribute').value && !valueSourceFormGroup.get('attribute').disabled"
-            type="button"
-            matSuffix mat-icon-button aria-label="Clear"
-            (click)="clearKey()">
-      <mat-icon class="material-icons">close</mat-icon>
-    </button>
+    @if (valueSourceFormGroup.get('attribute').value && !valueSourceFormGroup.get('attribute').disabled) {
+      <button
+        type="button"
+        matSuffix mat-icon-button aria-label="Clear"
+        (click)="clearKey()">
+        <mat-icon class="material-icons">close</mat-icon>
+      </button>
+    }
     <mat-autocomplete class="tb-autocomplete" #keyAutocomplete="matAutocomplete">
-      <mat-option *ngFor="let key of filteredKeys | async" [value]="key">
-        <span [innerHTML]="key | highlight:keySearchText"></span>
-      </mat-option>
+      @for (key of filteredKeys | async; track key) {
+        <mat-option [value]="key">
+          <span [innerHTML]="key | highlight:keySearchText"></span>
+        </mat-option>
+      }
     </mat-autocomplete>
   </mat-form-field>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
index edba87c0db..4768ed4920 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
@@ -75,12 +75,13 @@
       icon="format_color_fill"
       label="{{ 'widgets.widget-font.color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
-    <tb-color-input
-      *ngIf="hasShadowColor"
-      class="flex-1"
-      formControlName="shadowColor"
-      icon="format_color_fill"
-      label="{{ 'widgets.widget-font.shadow-color' | translate }}" openOnInput colorClearButton>
-    </tb-color-input>
+    @if (hasShadowColor) {
+      <tb-color-input
+        class="flex-1"
+        formControlName="shadowColor"
+        icon="format_color_fill"
+        label="{{ 'widgets.widget-font.shadow-color' | translate }}" openOnInput colorClearButton>
+      </tb-color-input>
+    }
   </section>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget/widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget/widget-settings.component.html
index 65f2044a7b..219ef4485c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget/widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget/widget-settings.component.html
@@ -17,9 +17,13 @@
 -->
 <div [formGroup]="widgetSettingsFormGroup">
   <ng-container #definedSettingsContent></ng-container>
-  <div class="tb-settings-directive-error" *ngIf="definedDirectiveError">{{definedDirectiveError}}</div>
-  <tb-dynamic-form *ngIf="useDynamicForm()"
-    [properties]="settingsForm"
-    formControlName="settings">
-  </tb-dynamic-form>
+  @if (definedDirectiveError) {
+    <div class="tb-settings-directive-error">{{definedDirectiveError}}</div>
+  }
+  @if (useDynamicForm()) {
+    <tb-dynamic-form
+      [properties]="settingsForm"
+      formControlName="settings">
+    </tb-dynamic-form>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
index 5882b18996..41931d50cf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
@@ -19,39 +19,48 @@
                 [subscriptSizing]="inlineField ? 'dynamic' : 'fixed'"
                 [class]="{'tb-inline-field': inlineField, 'flex': inlineField,
                           'tb-suffix-absolute': (inlineField && !deviceKeyFormGroup.get('key').value)}"
-                [formGroup]="deviceKeyFormGroup">
-  <mat-label *ngIf="!inlineField">{{ (keyType === dataKeyType.attribute
-    ? attributeLabel
+  [formGroup]="deviceKeyFormGroup">
+  @if (!inlineField) {
+    <mat-label>{{ (keyType === dataKeyType.attribute
+      ? attributeLabel
     : timeseriesLabel) | translate }}</mat-label>
+  }
   <input [required]="required" matInput
          type="text" placeholder="{{ 'entity.key-name' | translate }}"
          #keyInput
          (focusin)="onFocus()"
          formControlName="key"
          [matAutocomplete]="keyAutocomplete">
-  <button *ngIf="deviceKeyFormGroup.get('key').value && !deviceKeyFormGroup.get('key').disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clearKey()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
-  <mat-icon matSuffix
-            matTooltipPosition="above"
-            matTooltipClass="tb-error-tooltip"
-            [matTooltip]="requiredText | translate"
-            *ngIf="inlineField && requiredText && deviceKeyFormGroup.get('key').hasError('required')
-                            && deviceKeyFormGroup.get('key').touched"
-            class="tb-error">
-    warning
-  </mat-icon>
+  @if (deviceKeyFormGroup.get('key').value && !deviceKeyFormGroup.get('key').disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clearKey()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
+  @if (inlineField && requiredText && deviceKeyFormGroup.get('key').hasError('required')
+    && deviceKeyFormGroup.get('key').touched) {
+    <mat-icon matSuffix
+              matTooltipPosition="above"
+              matTooltipClass="tb-error-tooltip"
+              [matTooltip]="requiredText | translate"
+              class="tb-error">
+      warning
+    </mat-icon>
+  }
   <mat-autocomplete
     class="tb-autocomplete"
     #keyAutocomplete="matAutocomplete">
-    <mat-option *ngFor="let key of filteredKeys | async" [value]="key">
-      <span [innerHTML]="key | highlight:keySearchText"></span>
-    </mat-option>
+    @for (key of filteredKeys | async; track key) {
+      <mat-option [value]="key">
+        <span [innerHTML]="key | highlight:keySearchText"></span>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="!inlineField && requiredText && deviceKeyFormGroup.get('key').hasError('required')">
-    {{ requiredText | translate }}
-  </mat-error>
+  @if (!inlineField && requiredText && deviceKeyFormGroup.get('key').hasError('required')) {
+    <mat-error>
+      {{ requiredText | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
index 76929a5394..4dda766e04 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
@@ -55,34 +55,36 @@
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="pageStepIncrement" type="number" min="1" step="1" required
                      placeholder="{{ 'widget-config.set' | translate }}">
-              <mat-icon matSuffix
-                        matTooltipPosition="above"
-                        matTooltipClass="tb-error-tooltip"
+              @if (persistentTableWidgetSettingsForm.get('pageStepIncrement').invalid
+                && persistentTableWidgetSettingsForm.get('pageStepIncrement').touched) {
+                <mat-icon matSuffix
+                          matTooltipPosition="above"
+                          matTooltipClass="tb-error-tooltip"
                         [matTooltip]="(persistentTableWidgetSettingsForm.get('pageStepIncrement').hasError('required')
                                      ? 'widgets.value-source.value-required'
                                      : 'widgets.table.page-step-increment-format-message') | translate"
-                        *ngIf="persistentTableWidgetSettingsForm.get('pageStepIncrement').invalid
-                        && persistentTableWidgetSettingsForm.get('pageStepIncrement').touched"
-                        class="tb-error">
-                warning
-              </mat-icon>
+                  class="tb-error">
+                  warning
+                </mat-icon>
+              }
             </mat-form-field>
             <mat-divider vertical class="xs:hidden"></mat-divider>
             <div class="tb-small-label" translate>widgets.table.page-step-count</div>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
                      placeholder="{{ 'widget-config.set' | translate }}">
-              <mat-icon matSuffix
-                        matTooltipPosition="above"
-                        matTooltipClass="tb-error-tooltip"
+              @if (persistentTableWidgetSettingsForm.get('pageStepCount').invalid
+                && persistentTableWidgetSettingsForm.get('pageStepCount').touched) {
+                <mat-icon matSuffix
+                          matTooltipPosition="above"
+                          matTooltipClass="tb-error-tooltip"
                         [matTooltip]="(persistentTableWidgetSettingsForm.get('pageStepCount').hasError('required')
                                      ? 'widgets.value-source.value-required'
                                      : 'widgets.table.page-step-count-format-message') | translate"
-                        *ngIf="persistentTableWidgetSettingsForm.get('pageStepCount').invalid
-                        && persistentTableWidgetSettingsForm.get('pageStepCount').touched"
-                        class="tb-error">
-                warning
-              </mat-icon>
+                  class="tb-error">
+                  warning
+                </mat-icon>
+              }
             </mat-form-field>
           </div>
         </div>
@@ -90,9 +92,11 @@
           <div translate>widgets.table.default-page-size</div>
           <mat-form-field appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="defaultPageSize" placeholder="{{ 'widget-config.set' | translate }}">
-              <mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
-                {{ size }}
-              </mat-option>
+              @for (size of pageStepSizeValues; track size) {
+                <mat-option [value]="size">
+                  {{ size }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -112,11 +116,13 @@
                      cdkDropList
                      cdkDropListOrientation="horizontal"
                      (cdkDropListDropped)="columnDrop($event)">
-        <mat-chip-row class="tb-draggable" cdkDrag *ngFor="let column of persistentTableWidgetSettingsForm.get('displayColumns').value"
-                  [removable]="true" (removed)="onColumnRemoved(column)">
-          {{ displayColumnFromValue(column)?.name }}
-          <mat-icon matChipRemove>cancel</mat-icon>
-        </mat-chip-row>
+        @for (column of persistentTableWidgetSettingsForm.get('displayColumns').value; track column) {
+          <mat-chip-row class="tb-draggable" cdkDrag
+                        [removable]="true" (removed)="onColumnRemoved(column)">
+            {{ displayColumnFromValue(column)?.name }}
+            <mat-icon matChipRemove>cancel</mat-icon>
+          </mat-chip-row>
+        }
         <input matInput type="text" placeholder="{{ 'widgets.persistent-table.column' | translate }}"
                style="max-width: 200px;"
                #columnInput
@@ -134,22 +140,27 @@
                         class="tb-autocomplete"
                         (optionSelected)="columnSelected($event)"
                         [displayWith]="displayColumnFn">
-        <mat-option *ngFor="let column of filteredDisplayColumns | async" [value]="column">
-          <span [innerHTML]="column.name | highlight:columnSearchText"></span>
-        </mat-option>
-        <mat-option *ngIf="(filteredDisplayColumns | async)?.length === 0" [value]="null" class="tb-not-found">
-          <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-            <div *ngIf="!textIsNotEmpty(columnSearchText); else searchNotEmpty">
-              <span translate>widgets.persistent-table.no-columns-found</span>
-            </div>
-            <ng-template #searchNotEmpty>
+        @for (column of filteredDisplayColumns | async; track column) {
+          <mat-option [value]="column">
+            <span [innerHTML]="column.name | highlight:columnSearchText"></span>
+          </mat-option>
+        }
+        @if ((filteredDisplayColumns | async)?.length === 0) {
+          <mat-option [value]="null" class="tb-not-found">
+            <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+              @if (!textIsNotEmpty(columnSearchText)) {
+                <div>
+                  <span translate>widgets.persistent-table.no-columns-found</span>
+                </div>
+              } @else {
                 <span>
                   {{ translate.get('widgets.persistent-table.no-columns-matching',
                   {column: truncate.transform(columnSearchText, true, 6, &apos;...&apos;)}) | async }}
                 </span>
-            </ng-template>
-          </div>
-        </mat-option>
+              }
+            </div>
+          </mat-option>
+        }
       </mat-autocomplete>
     </mat-form-field>
   </fieldset>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
index 330433141e..e34b9ae2a0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
@@ -29,7 +29,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="initialState"></tb-get-value-action-settings>
+      formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-on-hint' | translate}}" translate>widgets.rpc-state.turn-on</div>
@@ -38,7 +38,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="onUpdateState"></tb-set-value-action-settings>
+      formControlName="onUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-off-hint' | translate}}" translate>widgets.rpc-state.turn-off</div>
@@ -47,7 +47,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="offUpdateState"></tb-set-value-action-settings>
+      formControlName="offUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
@@ -58,7 +58,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="disabledState"></tb-get-value-action-settings>
+      formControlName="disabledState"></tb-get-value-action-settings>
     </div>
   </div>
   <div class="tb-form-panel">
@@ -69,12 +69,14 @@
                                       'lt-sm': 1,
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.single-switch.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of singleSwitchLayouts"
-                                    [value]="layout"
-                                    [image]="singleSwitchLayoutImageMap.get(layout)">
-        {{ singleSwitchLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.single-switch.layout' | translate }}" formControlName="layout">
+      @for (layout of singleSwitchLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="singleSwitchLayoutImageMap.get(layout)">
+          {{ singleSwitchLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="autoScale">
@@ -87,15 +89,15 @@
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-string-pattern-autocomplete class="flex flex-1"
-                                      appearance="outline"
-                                      brackets="curly"
-                                      subscriptSizing="dynamic"
-                                      predefinedValuesButton="true"
-                                      [disabled]="!singleSwitchWidgetSettingsForm.get('showLabel').value"
-                                      [predefinedValues]="predefinedValues"
-                                      placeholderText="{{ 'widget-config.set' | translate }}"
-                                      formControlName="label"
-       ></tb-string-pattern-autocomplete>
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!singleSwitchWidgetSettingsForm.get('showLabel').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="label"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="labelFont"
                           [previewText]="singleSwitchWidgetSettingsForm.get('label').value">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
index 5d1d987a76..01edd30eb3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
@@ -26,7 +26,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="initialState"></tb-get-value-action-settings>
+      formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}" translate>widgets.slider.on-value-change</div>
@@ -36,7 +36,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="valueChange"></tb-set-value-action-settings>
+      formControlName="valueChange"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
@@ -47,7 +47,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="disabledState"></tb-get-value-action-settings>
+      formControlName="disabledState"></tb-get-value-action-settings>
     </div>
   </div>
   <div class="tb-form-panel">
@@ -58,12 +58,14 @@
                                       'lt-sm': 1,
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.slider.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of sliderLayouts"
-                                    [value]="layout"
-                                    [image]="sliderLayoutImageMap.get(layout)">
-        {{ sliderLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.slider.layout' | translate }}" formControlName="layout">
+      @for (layout of sliderLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="sliderLayoutImageMap.get(layout)">
+          {{ sliderLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="autoScale">
@@ -84,25 +86,27 @@
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.slider.slider</div>
-    <div *ngIf="sliderWidgetSettingsForm.get('layout').value !== sliderLayout.simplified" class="tb-form-row column-xs">
-      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
-        {{ 'widgets.slider.value' | translate }}
-      </mat-slide-toggle>
-      <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <tb-unit-input class="flex" formControlName="valueUnits" supportsUnitConversion></tb-unit-input>
-        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
-          <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
-        </mat-form-field>
-        <tb-font-settings formControlName="valueFont"
-                          [previewText]="valuePreviewFn">
-        </tb-font-settings>
-        <tb-color-input asBoxInput
-                        colorClearButton
-                        formControlName="valueColor">
-        </tb-color-input>
+    @if (sliderWidgetSettingsForm.get('layout').value !== sliderLayout.simplified) {
+      <div class="tb-form-row column-xs">
+        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
+          {{ 'widgets.slider.value' | translate }}
+        </mat-slide-toggle>
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
+          <tb-unit-input class="flex" formControlName="valueUnits" supportsUnitConversion></tb-unit-input>
+          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+            <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+            <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
+          </mat-form-field>
+          <tb-font-settings formControlName="valueFont"
+                            [previewText]="valuePreviewFn">
+          </tb-font-settings>
+          <tb-color-input asBoxInput
+                          colorClearButton
+                          formControlName="valueColor">
+          </tb-color-input>
+        </div>
       </div>
-    </div>
+    }
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.slider.range' | translate }}</div>
       <div class="flex flex-row items-center justify-start gap-2">
@@ -180,43 +184,47 @@
         </div>
       </div>
     </div>
-    <div *ngIf="sliderWidgetSettingsForm.get('layout').value === sliderLayout.extended"
-         class="tb-form-row column-xs">
-      <div class="fixed-title-width">
-        {{ 'widgets.slider.left-icon' | translate }}
-      </div>
-      <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
-          <input matInput type="number" min="0" formControlName="leftIconSize" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
-        <tb-css-unit-select class="flex-1" formControlName="leftIconSizeUnit"></tb-css-unit-select>
-        <tb-material-icon-select asBoxInput
-                                 [color]="sliderWidgetSettingsForm.get('leftIconColor').value"
-                                 formControlName="leftIcon">
-        </tb-material-icon-select>
-        <tb-color-input asBoxInput
-                        formControlName="leftIconColor">
-        </tb-color-input>
-      </div>
-    </div>
-    <div *ngIf="sliderWidgetSettingsForm.get('layout').value === sliderLayout.extended"
-         class="tb-form-row column-xs">
-      <div class="fixed-title-width">
-        {{ 'widgets.slider.right-icon' | translate }}
+    @if (sliderWidgetSettingsForm.get('layout').value === sliderLayout.extended) {
+      <div
+        class="tb-form-row column-xs">
+        <div class="fixed-title-width">
+          {{ 'widgets.slider.left-icon' | translate }}
+        </div>
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
+          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+            <input matInput type="number" min="0" formControlName="leftIconSize" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+          <tb-css-unit-select class="flex-1" formControlName="leftIconSizeUnit"></tb-css-unit-select>
+          <tb-material-icon-select asBoxInput
+                                   [color]="sliderWidgetSettingsForm.get('leftIconColor').value"
+                                   formControlName="leftIcon">
+          </tb-material-icon-select>
+          <tb-color-input asBoxInput
+                          formControlName="leftIconColor">
+          </tb-color-input>
+        </div>
       </div>
-      <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
-          <input matInput type="number" min="0" formControlName="rightIconSize" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
-        <tb-css-unit-select class="flex-1" formControlName="rightIconSizeUnit"></tb-css-unit-select>
-        <tb-material-icon-select asBoxInput
-                                 [color]="sliderWidgetSettingsForm.get('rightIconColor').value"
-                                 formControlName="rightIcon">
-        </tb-material-icon-select>
-        <tb-color-input asBoxInput
-                        formControlName="rightIconColor">
-        </tb-color-input>
+    }
+    @if (sliderWidgetSettingsForm.get('layout').value === sliderLayout.extended) {
+      <div
+        class="tb-form-row column-xs">
+        <div class="fixed-title-width">
+          {{ 'widgets.slider.right-icon' | translate }}
+        </div>
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
+          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+            <input matInput type="number" min="0" formControlName="rightIconSize" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+          <tb-css-unit-select class="flex-1" formControlName="rightIconSizeUnit"></tb-css-unit-select>
+          <tb-material-icon-select asBoxInput
+                                   [color]="sliderWidgetSettingsForm.get('rightIconColor').value"
+                                   formControlName="rightIcon">
+          </tb-material-icon-select>
+          <tb-color-input asBoxInput
+                          formControlName="rightIconColor">
+          </tb-color-input>
+        </div>
       </div>
-    </div>
+    }
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/value-stepper-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/value-stepper-widget-settings.component.html
index bb81b8d5c2..0f30cc1434 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/value-stepper-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/value-stepper-widget-settings.component.html
@@ -26,7 +26,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="initialState"></tb-get-value-action-settings>
+      formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.value-stepper.left-button-click-hint' | translate}}" translate>widgets.value-stepper.left-button-click</div>
@@ -36,7 +36,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="leftButtonClick"></tb-set-value-action-settings>
+      formControlName="leftButtonClick"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.value-stepper.right-button-click-hint' | translate}}" translate>widgets.value-stepper.right-button-click</div>
@@ -46,7 +46,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="rightButtonClick"></tb-set-value-action-settings>
+      formControlName="rightButtonClick"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
@@ -57,7 +57,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="disabledState"></tb-get-value-action-settings>
+      formControlName="disabledState"></tb-get-value-action-settings>
     </div>
   </div>
   <div class="tb-form-panel" formGroupName="appearance">
@@ -67,12 +67,14 @@
                                     breakpoints: {
                                       'lt-sm': 1
                                     }}"
-                           label="{{ 'widgets.button.layout' | translate }}" formControlName="type">
-      <tb-image-cards-select-option *ngFor="let type of valueStepperTypes"
-                                    [value]="type"
-                                    [image]="valueStepperTypeImageMap.get(type)">
-        {{ valueStepperTypeTranslationMap.get(type) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.button.layout' | translate }}" formControlName="type">
+      @for (type of valueStepperTypes; track type) {
+        <tb-image-cards-select-option
+          [value]="type"
+          [image]="valueStepperTypeImageMap.get(type)">
+          {{ valueStepperTypeTranslationMap.get(type) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="autoScale">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
index eb36eafb06..8950de48f2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
@@ -20,14 +20,14 @@
     <div class="tb-form-panel-title" translate>widgets.table.table-header</div>
     <div class="tb-form-row">
       <div class="fixed-title-width">{{ 'widgets.table.entities-table-title' | translate }}</div>
-      <tb-string-pattern-autocomplete class="flex-1" 
-                                        appearance="outline"
-                                        brackets="curly" 
-                                        subscriptSizing="dynamic"
-                                        predefinedValuesButton="true"
-                                        [predefinedValues]="predefinedValues"
-                                        placeholderText="{{ 'widget-config.set' | translate }}"
-                                        formControlName="entitiesTitle"
+      <tb-string-pattern-autocomplete class="flex-1"
+                                      appearance="outline"
+                                      brackets="curly"
+                                      subscriptSizing="dynamic"
+                                      predefinedValuesButton="true"
+                                      [predefinedValues]="predefinedValues"
+                                      placeholderText="{{ 'widget-config.set' | translate }}"
+                                      formControlName="entitiesTitle"
       ></tb-string-pattern-autocomplete>
     </div>
     <div class="tb-form-row">
@@ -104,34 +104,36 @@
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="pageStepIncrement" type="number" min="1" step="1" required
                  placeholder="{{ 'widget-config.set' | translate }}">
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
+          @if (entitiesTableWidgetSettingsForm.get('pageStepIncrement').invalid
+            && entitiesTableWidgetSettingsForm.get('pageStepIncrement').touched) {
+            <mat-icon matSuffix
+                      matTooltipPosition="above"
+                      matTooltipClass="tb-error-tooltip"
                     [matTooltip]="(entitiesTableWidgetSettingsForm.get('pageStepIncrement').hasError('required')
                                      ? 'widgets.value-source.value-required'
                                      : 'widgets.table.page-step-increment-format-message') | translate"
-                    *ngIf="entitiesTableWidgetSettingsForm.get('pageStepIncrement').invalid
-                    && entitiesTableWidgetSettingsForm.get('pageStepIncrement').touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
+              class="tb-error">
+              warning
+            </mat-icon>
+          }
         </mat-form-field>
         <mat-divider vertical class="xs:hidden"></mat-divider>
         <div class="tb-small-label" translate>widgets.table.page-step-count</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
                  placeholder="{{ 'widget-config.set' | translate }}">
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
+          @if (entitiesTableWidgetSettingsForm.get('pageStepCount').invalid
+            && entitiesTableWidgetSettingsForm.get('pageStepCount').touched) {
+            <mat-icon matSuffix
+                      matTooltipPosition="above"
+                      matTooltipClass="tb-error-tooltip"
                     [matTooltip]="(entitiesTableWidgetSettingsForm.get('pageStepCount').hasError('required')
                                      ? 'widgets.value-source.value-required'
                                      : 'widgets.table.page-step-count-format-message') | translate"
-                    *ngIf="entitiesTableWidgetSettingsForm.get('pageStepCount').invalid
-                    && entitiesTableWidgetSettingsForm.get('pageStepCount').touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
+              class="tb-error">
+              warning
+            </mat-icon>
+          }
         </mat-form-field>
       </div>
     </div>
@@ -139,9 +141,11 @@
       <div translate>widgets.table.default-page-size</div>
       <mat-form-field appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="defaultPageSize" placeholder="{{ 'widget-config.set' | translate }}">
-          <mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
-            {{ size }}
-          </mat-option>
+          @for (size of pageStepSizeValues; track size) {
+            <mat-option [value]="size">
+              {{ size }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
index 1bebce0b7d..5df07f2820 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
@@ -16,8 +16,8 @@
 
 -->
 <section class="tb-widget-settings flex flex-col" [formGroup]="gatewayEventsWidgetSettingsForm">
-  <tb-string-pattern-autocomplete class="mat-block flex-1" 
-                                  brackets="curly" 
+  <tb-string-pattern-autocomplete class="mat-block flex-1"
+                                  brackets="curly"
                                   subscriptSizing="fixed"
                                   predefinedValuesButton="true"
                                   label="{{ 'widgets.gateway.events-title' | translate }}"
@@ -28,13 +28,14 @@
   <mat-form-field class="mat-block flex-1" floatLabel="always">
     <mat-label translate>widgets.gateway.events-filter</mat-label>
     <mat-chip-grid #chipList formControlName="eventsReg">
-      <mat-chip-row
-        *ngFor="let eventFilter of gatewayEventsWidgetSettingsForm.get('eventsReg').value"
-        [removable]="true"
-        (removed)="removeEventFilter(eventFilter)">
-        {{eventFilter}}
-        <mat-icon matChipRemove>cancel</mat-icon>
-      </mat-chip-row>
+      @for (eventFilter of gatewayEventsWidgetSettingsForm.get('eventsReg').value; track eventFilter) {
+        <mat-chip-row
+          [removable]="true"
+          (removed)="removeEventFilter(eventFilter)">
+          {{eventFilter}}
+          <mat-icon matChipRemove>cancel</mat-icon>
+        </mat-chip-row>
+      }
       <input
         placeholder="{{ 'widgets.gateway.event-key-contains' | translate }}"
         [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
index a82a9a0b65..aa94fe22f3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
@@ -16,14 +16,14 @@
 
 -->
 <ng-container [formGroup]="analogueGaugeWidgetSettingsForm">
-  <ng-container [ngSwitch]="gaugeType">
-    <ng-container *ngSwitchCase="'radial'">
+  @switch (gaugeType) {
+    @case ('radial') {
       <ng-container *ngTemplateOutlet="radialGauge; context: ctx "></ng-container>
-    </ng-container>
-    <ng-container *ngSwitchCase="'linear'">
+    }
+    @case ('linear') {
       <ng-container *ngTemplateOutlet="linearGauge; context: ctx "></ng-container>
-    </ng-container>
-  </ng-container>
+    }
+  }
 
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.gauge.ticks-settings</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
index 29d9a65d17..3decf4f45f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
@@ -23,21 +23,25 @@
                                     breakpoints: {
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.gauge.simple-gauge-type' | translate }}"
-                           formControlName="gaugeType">
-      <tb-image-cards-select-option *ngFor="let layout of digitalGaugeLayouts"
-                                    [value]="layout"
-                                    [image]="digitalGaugeLayoutImageMap.get(layout)">
-        {{ digitalGaugeLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.gauge.simple-gauge-type' | translate }}"
+      formControlName="gaugeType">
+      @for (layout of digitalGaugeLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="digitalGaugeLayoutImageMap.get(layout)">
+          {{ digitalGaugeLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
 
-    <div class="tb-form-row space-between" *ngIf="digitalGaugeWidgetSettingsForm.get('gaugeType').value === digitalGaugeType.donut">
-      <div class="fixed-title-width">{{ 'widgets.gauge.donut-start-angle' | translate }}</div>
-      <mat-form-field appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="donutStartAngle" type="number" min="0" max="360" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-    </div>
+    @if (digitalGaugeWidgetSettingsForm.get('gaugeType').value === digitalGaugeType.donut) {
+      <div class="tb-form-row space-between">
+        <div class="fixed-title-width">{{ 'widgets.gauge.donut-start-angle' | translate }}</div>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="donutStartAngle" type="number" min="0" max="360" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
+    }
 
     <div class="tb-form-row space-between column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showMinMax">
@@ -65,14 +69,15 @@
         <div class="tb-small-label" translate>widgets.gauge.max-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="maxValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
-                    [matTooltip]="'widgets.gauge.min-max-validation-text' | translate"
-                    *ngIf="digitalGaugeWidgetSettingsForm.get('maxValue').hasError('maxValue')"
-                    class="material-icons tb-suffix-show-always tb-error">
-            warning
-          </mat-icon>
+          @if (digitalGaugeWidgetSettingsForm.get('maxValue').hasError('maxValue')) {
+            <mat-icon matSuffix
+                      matTooltipPosition="above"
+                      matTooltipClass="tb-error-tooltip"
+                      [matTooltip]="'widgets.gauge.min-max-validation-text' | translate"
+                      class="material-icons tb-suffix-show-always tb-error">
+              warning
+            </mat-icon>
+          }
         </mat-form-field>
       </div>
     </div>
@@ -227,8 +232,8 @@
           <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)">
-            <div cdkDrag class="tb-draggable flex flex-row" *ngFor="let tickValueControl of tickValuesFormArray().controls; trackBy: trackByTickValue;
-              let $index = index; last as isLast;" [class.pb-2]="!isLast">
+            @for (tickValueControl of tickValuesFormArray().controls; track trackByTickValue($index, tickValueControl); let isLast = $last) {
+              <div cdkDrag class="tb-draggable flex flex-row" [class.pb-2]="!isLast">
                 <tb-tick-value class="flex-1"
                                [formControl]="tickValueControl"
                                [aliasController]="aliasController"
@@ -244,11 +249,14 @@
                         matTooltipPosition="above">
                   <mat-icon>drag_indicator</mat-icon>
                 </button>
-            </div>
-          </div>
-          <div *ngIf="!tickValuesFormArray().controls.length">
-            <span translate class="tb-prompt flex items-center justify-center">widgets.gauge.no-tick-values</span>
+              </div>
+            }
           </div>
+          @if (!tickValuesFormArray().controls.length) {
+            <div>
+              <span translate class="tb-prompt flex items-center justify-center">widgets.gauge.no-tick-values</span>
+            </div>
+          }
           <div style="padding-top: 16px;">
             <button mat-stroked-button color="primary"
                     type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html
index 53b505a651..b286531ff5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html
@@ -22,12 +22,14 @@
                             [dataKeyCallbacks]="dataKeyCallbacks"
                             [datasource]="datasource">
   </tb-value-source-data-key>
-  <button *ngIf="!disabled" mat-icon-button
-          class="tb-box-button"
-          type="button"
-          (click)="removeTickValue.emit()"
-          matTooltip="{{ 'action.remove' | translate }}"
-          matTooltipPosition="above">
-    <mat-icon>delete</mat-icon>
-  </button>
+  @if (!disabled) {
+    <button mat-icon-button
+            class="tb-box-button"
+            type="button"
+            (click)="removeTickValue.emit()"
+            matTooltip="{{ 'action.remove' | translate }}"
+            matTooltipPosition="above">
+      <mat-icon>delete</mat-icon>
+    </button>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
index 9a00b3bb4c..8863b76249 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
@@ -28,19 +28,22 @@
       <legend class="group-title" translate>widgets.gpio.gpio-switches</legend>
       <div class="flex flex-col">
         <div class="tb-control-list">
-          <div *ngFor="let gpioItemControl of gpioListFormArray().controls; trackBy: trackByGpioItem;
-                 let $index = index; last as isLast;"
-               class="flex flex-col" [class.pb-2]="!isLast">
-            <tb-gpio-item [formControl]="gpioItemControl"
-                          [expanded]="gpioItemControl.new"
-                          (removeGpioItem)="removeGpioItem($index)">
-            </tb-gpio-item>
-          </div>
+          @for (gpioItemControl of typedSelectOptions; track trackByGpioItem($index, gpioItemControl); let isLast = $last) {
+            <div
+              class="flex flex-col" [class.pb-2]="!isLast">
+              <tb-gpio-item [formControl]="gpioItemControl"
+                            [expanded]="gpioItemControl.new"
+                            (removeGpioItem)="removeGpioItem($index)">
+              </tb-gpio-item>
+            </div>
+          }
         </div>
-        <div *ngIf="!gpioListFormArray().controls.length">
+        @if (!gpioListFormArray().controls.length) {
+          <div>
             <span translate
-                  class="tb-prompt flex items-center justify-center">widgets.gpio.no-gpio-switches</span>
-        </div>
+            class="tb-prompt flex items-center justify-center">widgets.gpio.no-gpio-switches</span>
+          </div>
+        }
         <div style="padding-top: 16px;">
           <button mat-raised-button color="primary"
                   type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.ts
index 059c027310..1192111170 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.ts
@@ -119,6 +119,10 @@ export class GpioControlWidgetSettingsComponent extends WidgetSettingsComponent
     return this.gpioControlWidgetSettingsForm.get('gpioList') as UntypedFormArray;
   }
 
+  get typedSelectOptions() {
+    return this.gpioListFormArray().controls as (AbstractControl & { new?: boolean })[];
+  }
+
   public trackByGpioItem(index: number, gpioItemControl: AbstractControl): any {
     return gpioItemControl;
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
index a6ea487e08..9147393187 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
@@ -26,19 +26,23 @@
             <span>{{ numberText(gpioItemFormGroup.value.row, -1) }}) - [</span><small>col:</small>
             <span>{{ numberText(gpioItemFormGroup.value.col, -1) }}]</span>
           </div>
-          <div *ngIf="hasColor" class="tb-color-preview" style="margin-left: 6px;">
-            <div class="tb-color-result" [style.background]="gpioItemFormGroup.get('color').value"></div>
-          </div>
+          @if (hasColor) {
+            <div class="tb-color-preview" style="margin-left: 6px;">
+              <div class="tb-color-result" [style.background]="gpioItemFormGroup.get('color').value"></div>
+            </div>
+          }
         </div>
       </mat-panel-title>
       <span class="flex-1"></span>
-      <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
-              type="button"
-              (click)="removeGpioItem.emit()"
-              matTooltip="{{ 'action.remove' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>delete</mat-icon>
-      </button>
+      @if (!disabled) {
+        <button mat-icon-button style="min-width: 40px;"
+                type="button"
+                (click)="removeGpioItem.emit()"
+                matTooltip="{{ 'action.remove' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon>delete</mat-icon>
+        </button>
+      }
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
@@ -65,13 +69,14 @@
             <input required matInput type="number" min="0" max="1" step="1" formControlName="col">
           </mat-form-field>
         </section>
-        <tb-color-input
-          *ngIf="hasColor"
-          required
-          formControlName="color"
-          icon="format_color_fill"
-          label="{{ 'widgets.gpio.color' | translate }}" openOnInput colorClearButton>
-        </tb-color-input>
+        @if (hasColor) {
+          <tb-color-input
+            required
+            formControlName="color"
+            icon="format_color_fill"
+            label="{{ 'widgets.gpio.color' | translate }}" openOnInput colorClearButton>
+          </tb-color-input>
+        }
       </section>
     </div>
   </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html
index 1b7ff3d4e5..f002322bfe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html
@@ -28,20 +28,23 @@
       <legend class="group-title" translate>widgets.gpio.gpio-leds</legend>
       <div class="flex flex-col">
         <div class="tb-control-list">
-          <div *ngFor="let gpioItemControl of gpioListFormArray().controls; trackBy: trackByGpioItem;
-                 let $index = index; last as isLast;"
-               class="flex flex-col" [class.pb-2]="!isLast">
-            <tb-gpio-item [formControl]="gpioItemControl"
-                          [hasColor]="true"
-                          [expanded]="gpioItemControl.new"
-                          (removeGpioItem)="removeGpioItem($index)">
-            </tb-gpio-item>
-          </div>
+          @for (gpioItemControl of typedSelectOptions; track trackByGpioItem($index, gpioItemControl); let isLast = $last) {
+            <div
+              class="flex flex-col" [class.pb-2]="!isLast">
+              <tb-gpio-item [formControl]="gpioItemControl"
+                            [hasColor]="true"
+                            [expanded]="gpioItemControl.new"
+                            (removeGpioItem)="removeGpioItem($index)">
+              </tb-gpio-item>
+            </div>
+          }
         </div>
-        <div *ngIf="!gpioListFormArray().controls.length">
+        @if (!gpioListFormArray().controls.length) {
+          <div>
             <span translate
-                  class="tb-prompt flex items-center justify-center">widgets.gpio.no-gpio-leds</span>
-        </div>
+            class="tb-prompt flex items-center justify-center">widgets.gpio.no-gpio-leds</span>
+          </div>
+        }
         <div style="padding-top: 16px;">
           <button mat-raised-button color="primary"
                   type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.ts
index dff3f9c3cb..2ee407dbc2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.ts
@@ -87,6 +87,10 @@ export class GpioPanelWidgetSettingsComponent extends WidgetSettingsComponent {
     return this.gpioPanelWidgetSettingsForm.get('gpioList') as UntypedFormArray;
   }
 
+  get typedSelectOptions() {
+    return this.gpioListFormArray().controls as (AbstractControl & { new?: boolean })[];
+  }
+
   public trackByGpioItem(index: number, gpioItemControl: AbstractControl): any {
     return gpioItemControl;
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
index 5147fbd78a..280cf38556 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
@@ -23,19 +23,23 @@
                                     breakpoints: {
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.battery-level.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of batteryLevelLayouts"
-                                    [value]="layout"
-                                    [image]="batteryLevelLayoutImageMap.get(layout)">
-        {{ batteryLevelLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.battery-level.layout' | translate }}" formControlName="layout">
+      @for (layout of batteryLevelLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="batteryLevelLayoutImageMap.get(layout)">
+          {{ batteryLevelLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
-    <div *ngIf="sectionsCountEnabled" class="tb-form-row space-between">
-      <div>{{ 'widgets.battery-level.sections-count' | translate }}</div>
-      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-        <input matInput type="number" min="2" max="20" formControlName="sectionsCount" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
-    </div>
+    @if (sectionsCountEnabled) {
+      <div class="tb-form-row space-between">
+        <div>{{ 'widgets.battery-level.sections-count' | translate }}</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput type="number" min="2" max="20" formControlName="sectionsCount" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
+    }
     <div class="tb-form-row space-between column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.battery-level.value' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
index f0cd5a9206..9bb46b1522 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
@@ -15,274 +15,301 @@
     limitations under the License.
 
 -->
-<ng-container *ngIf="levelCardWidgetSettingsForm"  [formGroup]="levelCardWidgetSettingsForm">
-  <div class="tb-form-panel no-padding no-border">
-    <div class="tb-form-panel">
-      <div class="tb-form-row space-between flex flex-1 !flex-col">
-        <div class="tb-flex row space-between align-center no-gap fill-width">
-          <div class="fixed-title-width" translate>widgets.liquid-level-card.shape</div>
-          <tb-toggle-select formControlName="tankSelectionType">
-            <tb-toggle-option *ngFor="let type of DataSourceTypes" [value]="type">
-              {{ DataSourceTypeTranslations.get(type) | translate }}
-            </tb-toggle-option>
-          </tb-toggle-select>
-        </div>
-        <tb-image-cards-select #shapesImageCardsSelect
-                               [class.!hidden]="levelCardWidgetSettingsForm.get('tankSelectionType').value !== DataSourceType.static"
-                               rowHeight="1:1"
+@if (levelCardWidgetSettingsForm) {
+  <ng-container  [formGroup]="levelCardWidgetSettingsForm">
+    <div class="tb-form-panel no-padding no-border">
+      <div class="tb-form-panel">
+        <div class="tb-form-row space-between flex flex-1 !flex-col">
+          <div class="tb-flex row space-between align-center no-gap fill-width">
+            <div class="fixed-title-width" translate>widgets.liquid-level-card.shape</div>
+            <tb-toggle-select formControlName="tankSelectionType">
+              @for (type of DataSourceTypes; track type) {
+                <tb-toggle-option [value]="type">
+                  {{ DataSourceTypeTranslations.get(type) | translate }}
+                </tb-toggle-option>
+              }
+            </tb-toggle-select>
+          </div>
+          <tb-image-cards-select #shapesImageCardsSelect
+                                 [class.!hidden]="levelCardWidgetSettingsForm.get('tankSelectionType').value !== DataSourceType.static"
+                                 rowHeight="1:1"
                                [cols]="{columns: 5,
                                     breakpoints: {
                                       'lt-md': 2
                                     }}"
-                               style="width: 100%;"
-                               label="{{ 'widgets.liquid-level-card.shape-type' | translate }}" formControlName="selectedShape">
-          <tb-image-cards-select-option *ngFor="let shape of shapes"
-                                        [value]="shape"
-                                        [image]="createShape(shapesImageMap.get(shape), LevelCardLayout.simple)">
-            {{ ShapesTranslationMap.get(shape) | translate }}
-          </tb-image-cards-select-option>
-        </tb-image-cards-select>
-        <ng-container *ngIf="levelCardWidgetSettingsForm.get('tankSelectionType').value === DataSourceType.attribute">
-          <div class="tb-form-row space-between" style="width: 100%;">
-            <div class="fixed-title-width" translate>widgets.liquid-level-card.shape-attribute-name</div>
-            <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
-                                    required style="flex: 1"
-                                    [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
-                                    formControlName="shapeAttributeName">
-            </tb-string-autocomplete>
-          </div>
-          <div class="tb-flex row space-between align-center no-gap fill-width">
-            <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
-            <div class="see-example"
-                 [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
-                 tb-help-popup-placement="left"
-                 trigger-style="font-size: 12px"
-                 [tb-help-popup-style]="{maxWidth: '820px'}"
-                 trigger-text="{{ 'widgets.liquid-level-card.see-examples' | translate }}">
+            style="width: 100%;"
+            label="{{ 'widgets.liquid-level-card.shape-type' | translate }}" formControlName="selectedShape">
+            @for (shape of shapes; track shape) {
+              <tb-image-cards-select-option
+                [value]="shape"
+                [image]="createShape(shapesImageMap.get(shape), LevelCardLayout.simple)">
+                {{ ShapesTranslationMap.get(shape) | translate }}
+              </tb-image-cards-select-option>
+            }
+          </tb-image-cards-select>
+          @if (levelCardWidgetSettingsForm.get('tankSelectionType').value === DataSourceType.attribute) {
+            <div class="tb-form-row space-between" style="width: 100%;">
+              <div class="fixed-title-width" translate>widgets.liquid-level-card.shape-attribute-name</div>
+              <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                      required style="flex: 1"
+                                      [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                      formControlName="shapeAttributeName">
+              </tb-string-autocomplete>
             </div>
-          </div>
-        </ng-container>
+            <div class="tb-flex row space-between align-center no-gap fill-width">
+              <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
+              <div class="see-example"
+                   [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
+                   tb-help-popup-placement="left"
+                   trigger-style="font-size: 12px"
+                   [tb-help-popup-style]="{maxWidth: '820px'}"
+                   trigger-text="{{ 'widgets.liquid-level-card.see-examples' | translate }}">
+              </div>
+            </div>
+          }
+        </div>
       </div>
-    </div>
-    <div class="tb-form-panel">
-      <div class="tb-form-panel-title" translate>widgets.liquid-level-card.layout</div>
-      <tb-image-cards-select #layoutsImageCardsSelect
-                             rowHeight="1:1"
-                             cols="3"
-                             label="{{ 'widgets.liquid-level-card.layout' | translate }}" formControlName="layout">
-        <tb-image-cards-select-option
-          *ngFor="let layout of LevelCardLayouts"
-          [value]="layout"
-          [image]="createShape(shapesImageMap.get(levelCardWidgetSettingsForm.get('selectedShape').value), layout)">
-          {{ LevelCardLayoutTranslationMap.get(layout) | translate }}
-        </tb-image-cards-select-option>
-      </tb-image-cards-select>
-    </div>
-    <div class="tb-form-panel">
-      <div class="tb-form-panel-title" translate>widgets.liquid-level-card.units</div>
-      <div class="tb-form-row space-between">
-        <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.datasource-units</div>
-        <tb-unit-input required style="max-width: 30%;" class="flex"
-                       tagFilter="capacity"
-                       formControlName="datasourceUnits">
-        </tb-unit-input>
+      <div class="tb-form-panel">
+        <div class="tb-form-panel-title" translate>widgets.liquid-level-card.layout</div>
+        <tb-image-cards-select #layoutsImageCardsSelect
+                               rowHeight="1:1"
+                               cols="3"
+                               label="{{ 'widgets.liquid-level-card.layout' | translate }}" formControlName="layout">
+          @for (layout of LevelCardLayouts; track layout) {
+            <tb-image-cards-select-option
+              [value]="layout"
+              [image]="createShape(shapesImageMap.get(levelCardWidgetSettingsForm.get('selectedShape').value), layout)">
+              {{ LevelCardLayoutTranslationMap.get(layout) | translate }}
+            </tb-image-cards-select-option>
+          }
+        </tb-image-cards-select>
       </div>
-      <div class="tb-form-row space-between column-xs" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
-        <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
-        <div class="tb-flex row flex-start align-center">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
-            <mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
-              <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
-                {{ DataSourceTypeTranslations.get(type) | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-          <tb-unit-input *ngIf="levelCardWidgetSettingsForm.get('widgetUnitsSource').value !== DataSourceType.attribute; else selectUnitsAttributes"
-                         required class="flex"
-                         supportsUnitConversion
+      <div class="tb-form-panel">
+        <div class="tb-form-panel-title" translate>widgets.liquid-level-card.units</div>
+        <div class="tb-form-row space-between">
+          <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.datasource-units</div>
+          <tb-unit-input required style="max-width: 30%;" class="flex"
                          tagFilter="capacity"
-                         formControlName="units">
+                         formControlName="datasourceUnits">
           </tb-unit-input>
-          <ng-template #selectUnitsAttributes>
-            <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
-                                    required style="flex: 1"
-                                    [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
-                                    formControlName="widgetUnitsAttributeName">
-            </tb-string-autocomplete>
-          </ng-template>
         </div>
-      </div>
-      <div class="tb-form-row column-xs" *ngIf="volumeInput">
-        <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
-        <div class="tb-flex row flex-start align-center">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
-            <mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
-              <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
-                {{ DataSourceTypeTranslations.get(type) | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-          <mat-form-field *ngIf="levelCardWidgetSettingsForm.get('volumeSource').value ===  DataSourceType.static; else volumeAttributes"
-                          appearance="outline" class="number flex" subscriptSizing="dynamic">
-            <input matInput formControlName="volumeConstant" type="number"
-                   min="0.1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="'widgets.liquid-level-card.total-volume-required' | translate"
-                      *ngIf="levelCardWidgetSettingsForm.get('volumeConstant').hasError('required')"
-                      class="material-icons tb-suffix-show-always tb-error">
-              warning
-            </mat-icon>
-          </mat-form-field>
-          <ng-template #volumeAttributes>
-            <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
-                                    required style="flex: 1"
-                                    [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
-                                    formControlName="volumeAttributeName">
-            </tb-string-autocomplete>
-          </ng-template>
+        @if (levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute) {
+          <div class="tb-form-row space-between column-xs">
+            <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
+            <div class="tb-flex row flex-start align-center">
+              <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
+                <mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
+                  @for (type of DataSourceTypes; track type) {
+                    <mat-option [value]="type">
+                      {{ DataSourceTypeTranslations.get(type) | translate }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+              @if (levelCardWidgetSettingsForm.get('widgetUnitsSource').value !== DataSourceType.attribute) {
+                <tb-unit-input
+                  required class="flex"
+                  supportsUnitConversion
+                  tagFilter="capacity"
+                  formControlName="units">
+                </tb-unit-input>
+              } @else {
+                <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                        required style="flex: 1"
+                                        [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                        formControlName="widgetUnitsAttributeName">
+                </tb-string-autocomplete>
+              }
+            </div>
+          </div>
+        }
+        @if (volumeInput) {
+          <div class="tb-form-row column-xs">
+            <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
+            <div class="tb-flex row flex-start align-center">
+              <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
+                <mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
+                  @for (type of DataSourceTypes; track type) {
+                    <mat-option [value]="type">
+                      {{ DataSourceTypeTranslations.get(type) | translate }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+              @if (levelCardWidgetSettingsForm.get('volumeSource').value ===  DataSourceType.static) {
+                <mat-form-field
+                  appearance="outline" class="number flex" subscriptSizing="dynamic">
+                  <input matInput formControlName="volumeConstant" type="number"
+                         min="0.1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+                  @if (levelCardWidgetSettingsForm.get('volumeConstant').hasError('required')) {
+                    <mat-icon matSuffix
+                              matTooltipPosition="above"
+                              matTooltipClass="tb-error-tooltip"
+                              [matTooltip]="'widgets.liquid-level-card.total-volume-required' | translate"
+                              class="material-icons tb-suffix-show-always tb-error">
+                      warning
+                    </mat-icon>
+                  }
+                </mat-form-field>
+              } @else {
+                <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                        required style="flex: 1"
+                                        [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                        formControlName="volumeAttributeName">
+                </tb-string-autocomplete>
+              }
+            </div>
+          </div>
+        }
+        <div class="tb-form-row space-between column-xs" [class.!hidden]="!volumeInput">
+          <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
+          <div class="tb-flex row flex-start align-center">
+            <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
+              <mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
+                @for (type of DataSourceTypes; track type) {
+                  <mat-option [value]="type">
+                    {{ DataSourceTypeTranslations.get(type) | translate }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+            @if (levelCardWidgetSettingsForm.get('volumeUnitsSource').value === DataSourceType.static) {
+              <tb-unit-input
+                class="flex" required
+                tagFilter="capacity"
+                formControlName="volumeUnits">
+              </tb-unit-input>
+            } @else {
+              <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                      required style="flex: 1"
+                                      [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                      formControlName="volumeUnitsAttributeName">
+              </tb-string-autocomplete>
+            }
+          </div>
         </div>
       </div>
-      <div class="tb-form-row space-between column-xs" [class.!hidden]="!volumeInput">
-        <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
-        <div class="tb-flex row flex-start align-center">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
-            <mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
-              <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
-                {{ DataSourceTypeTranslations.get(type) | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-          <tb-unit-input *ngIf="levelCardWidgetSettingsForm.get('volumeUnitsSource').value === DataSourceType.static; else selectVolumeUnitsAttributes"
-                         class="flex" required
-                         tagFilter="capacity"
-                         formControlName="volumeUnits">
-          </tb-unit-input>
-          <ng-template #selectVolumeUnitsAttributes>
-            <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
-                                    required style="flex: 1"
-                                    [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
-                                    formControlName="volumeUnitsAttributeName">
-            </tb-string-autocomplete>
-          </ng-template>
+      <div class="tb-form-panel">
+        <div class="tb-form-panel-title" translate>widgets.liquid-level-card.color-and-font</div>
+        <div class="tb-form-row space-between">
+          <div class="fixed-title-width" translate>widgets.liquid-level-card.tank-color</div>
+          <tb-color-settings formControlName="tankColor" settingsKey="{{'widgets.liquid-level-card.tank-color' | translate }}">
+          </tb-color-settings>
         </div>
-      </div>
-    </div>
-    <div class="tb-form-panel">
-      <div class="tb-form-panel-title" translate>widgets.liquid-level-card.color-and-font</div>
-      <div class="tb-form-row space-between">
-        <div class="fixed-title-width" translate>widgets.liquid-level-card.tank-color</div>
-        <tb-color-settings formControlName="tankColor" settingsKey="{{'widgets.liquid-level-card.tank-color' | translate }}">
-        </tb-color-settings>
-      </div>
-      <div class="tb-form-row space-between">
-        <div class="fixed-title-width" translate>widgets.liquid-level-card.liquid-color</div>
-        <tb-color-settings formControlName="liquidColor" settingsKey="{{'widgets.liquid-level-card.liquid-color' | translate }}">
-        </tb-color-settings>
-      </div>
-      <div class="tb-form-row space-between">
-        <div>{{ 'widgets.background.background' | translate }}</div>
-        <tb-background-settings formControlName="background">
-        </tb-background-settings>
-      </div>
-      <div class="tb-form-row space-between">
-        <div>{{ 'widget-config.card-padding' | translate }}</div>
-        <mat-form-field appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
-      </div>
-      <div class="tb-form-row space-between"
-           *ngIf="levelCardWidgetSettingsForm.get('layout').value !== LevelCardLayout.simple">
-        <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
-        <div class="tb-flex row flex-end align-center">
-          <tb-font-settings formControlName="valueFont"
-                            [previewText]="valuePreviewFn">
-          </tb-font-settings>
-          <tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.liquid-level-card.value' | translate }}">
+        <div class="tb-form-row space-between">
+          <div class="fixed-title-width" translate>widgets.liquid-level-card.liquid-color</div>
+          <tb-color-settings formControlName="liquidColor" settingsKey="{{'widgets.liquid-level-card.liquid-color' | translate }}">
           </tb-color-settings>
         </div>
-      </div>
-      <div class="tb-form-row" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
-        <div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
-        <div class="tb-flex row flex-end align-center">
-          <tb-font-settings formControlName="volumeFont"
-                            [previewText]="totalVolumeValuePreviewFn">
-          </tb-font-settings>
-          <tb-color-input asBoxInput colorClearButton formControlName="volumeColor">
-          </tb-color-input>
+        <div class="tb-form-row space-between">
+          <div>{{ 'widgets.background.background' | translate }}</div>
+          <tb-background-settings formControlName="background">
+          </tb-background-settings>
         </div>
-      </div>
-      <div class="tb-form-row space-between"
-           *ngIf="levelCardWidgetSettingsForm.get('layout').value !== LevelCardLayout.simple">
-        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBackgroundOverlay">
-          {{ 'widgets.liquid-level-card.background-overlay' | translate }}
-        </mat-slide-toggle>
-        <tb-color-settings formControlName="backgroundOverlayColor" settingsKey="{{'widgets.liquid-level-card.background-overlay' | translate }}">
-        </tb-color-settings>
-      </div>
-    </div>
-    <div class="tb-form-panel tb-slide-toggle">
-      <mat-expansion-panel class="tb-settings"
-                           [expanded]="levelCardWidgetSettingsForm.get('showTooltip').value"
-                           [disabled]="!levelCardWidgetSettingsForm.get('showTooltip').value">
-        <mat-expansion-panel-header class="flex flex-row flex-wrap">
-          <mat-panel-title>
-            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
-              {{ 'widget-config.tooltip' | translate }}
-            </mat-slide-toggle>
-          </mat-panel-title>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
-          <div class="tb-form-row column-xs">
-            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipLevel">
-              {{ 'widgets.liquid-level-card.level' | translate }}
-            </mat-slide-toggle>
-            <div class="tb-flex row flex-start align-center">
-              <tb-unit-input tagFilter="capacity"
-                             supportsUnitConversion
-                             required class="flex" formControlName="tooltipUnits">
-              </tb-unit-input>
-              <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
-                <input matInput formControlName="tooltipLevelDecimals" type="number" min="0"
-                       max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-                <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
-              </mat-form-field>
-              <tb-font-settings formControlName="tooltipLevelFont"
-                                [previewText]="tooltipValuePreviewFn">
+        <div class="tb-form-row space-between">
+          <div>{{ 'widget-config.card-padding' | translate }}</div>
+          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+            <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+          </mat-form-field>
+        </div>
+        @if (levelCardWidgetSettingsForm.get('layout').value !== LevelCardLayout.simple) {
+          <div class="tb-form-row space-between"
+               >
+            <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
+            <div class="tb-flex row flex-end align-center">
+              <tb-font-settings formControlName="valueFont"
+                                [previewText]="valuePreviewFn">
               </tb-font-settings>
-              <tb-color-settings formControlName="tooltipLevelColor" settingsKey="{{'widgets.liquid-level-card.level' | translate }}">
+              <tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.liquid-level-card.value' | translate }}">
               </tb-color-settings>
             </div>
           </div>
-          <div class="tb-form-row column-xs">
-            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
-              {{ 'widgets.value-card.date' | translate }}
-            </mat-slide-toggle>
-            <div class="tb-flex row flex-start align-center">
-              <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
-              <tb-font-settings formControlName="tooltipDateFont"
-                                [previewText]="datePreviewFn">
+        }
+        @if (levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute) {
+          <div class="tb-form-row">
+            <div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
+            <div class="tb-flex row flex-end align-center">
+              <tb-font-settings formControlName="volumeFont"
+                                [previewText]="totalVolumeValuePreviewFn">
               </tb-font-settings>
-              <tb-color-input asBoxInput colorClearButton formControlName="tooltipDateColor">
+              <tb-color-input asBoxInput colorClearButton formControlName="volumeColor">
               </tb-color-input>
             </div>
           </div>
-          <div class="tb-form-row space-between">
-            <div class="fixed-title-width" translate>widgets.liquid-level-card.tooltip-background</div>
-            <tb-color-input asBoxInput colorClearButton formControlName="tooltipBackgroundColor">
-            </tb-color-input>
-          </div>
-          <div class="tb-form-row space-between">
-            <div class="fixed-title-width" translate>widgets.liquid-level-card.background-blur</div>
-            <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-              <input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1"
-                     placeholder="{{ 'widget-config.set' | translate }}">
-              <div matSuffix>px</div>
-            </mat-form-field>
+        }
+        @if (levelCardWidgetSettingsForm.get('layout').value !== LevelCardLayout.simple) {
+          <div class="tb-form-row space-between"
+               >
+            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBackgroundOverlay">
+              {{ 'widgets.liquid-level-card.background-overlay' | translate }}
+            </mat-slide-toggle>
+            <tb-color-settings formControlName="backgroundOverlayColor" settingsKey="{{'widgets.liquid-level-card.background-overlay' | translate }}">
+            </tb-color-settings>
           </div>
-        </ng-template>
-      </mat-expansion-panel>
+        }
+      </div>
+      <div class="tb-form-panel tb-slide-toggle">
+        <mat-expansion-panel class="tb-settings"
+                             [expanded]="levelCardWidgetSettingsForm.get('showTooltip').value"
+                             [disabled]="!levelCardWidgetSettingsForm.get('showTooltip').value">
+          <mat-expansion-panel-header class="flex flex-row flex-wrap">
+            <mat-panel-title>
+              <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
+                {{ 'widget-config.tooltip' | translate }}
+              </mat-slide-toggle>
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <ng-template matExpansionPanelContent>
+            <div class="tb-form-row column-xs">
+              <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipLevel">
+                {{ 'widgets.liquid-level-card.level' | translate }}
+              </mat-slide-toggle>
+              <div class="tb-flex row flex-start align-center">
+                <tb-unit-input tagFilter="capacity"
+                               supportsUnitConversion
+                               required class="flex" formControlName="tooltipUnits">
+                </tb-unit-input>
+                <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
+                  <input matInput formControlName="tooltipLevelDecimals" type="number" min="0"
+                         max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+                  <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
+                </mat-form-field>
+                <tb-font-settings formControlName="tooltipLevelFont"
+                                  [previewText]="tooltipValuePreviewFn">
+                </tb-font-settings>
+                <tb-color-settings formControlName="tooltipLevelColor" settingsKey="{{'widgets.liquid-level-card.level' | translate }}">
+                </tb-color-settings>
+              </div>
+            </div>
+            <div class="tb-form-row column-xs">
+              <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
+                {{ 'widgets.value-card.date' | translate }}
+              </mat-slide-toggle>
+              <div class="tb-flex row flex-start align-center">
+                <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
+                <tb-font-settings formControlName="tooltipDateFont"
+                                  [previewText]="datePreviewFn">
+                </tb-font-settings>
+                <tb-color-input asBoxInput colorClearButton formControlName="tooltipDateColor">
+                </tb-color-input>
+              </div>
+            </div>
+            <div class="tb-form-row space-between">
+              <div class="fixed-title-width" translate>widgets.liquid-level-card.tooltip-background</div>
+              <tb-color-input asBoxInput colorClearButton formControlName="tooltipBackgroundColor">
+              </tb-color-input>
+            </div>
+            <div class="tb-form-row space-between">
+              <div class="fixed-title-width" translate>widgets.liquid-level-card.background-blur</div>
+              <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+                <input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1"
+                       placeholder="{{ 'widget-config.set' | translate }}">
+                <div matSuffix>px</div>
+              </mat-form-field>
+            </div>
+          </ng-template>
+        </mat-expansion-panel>
+      </div>
     </div>
-  </div>
-</ng-container>
+  </ng-container>
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
index ef1ae0f63e..ba531a8e93 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
@@ -23,12 +23,14 @@
                                     breakpoints: {
                                       'lt-sm': 1
                                     }}"
-                           label="{{ 'widgets.signal-strength.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of signalStrengthLayouts"
-                                    [value]="layout"
-                                    [image]="signalStrengthLayoutImageMap.get(layout)">
-        {{ signalStrengthLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.signal-strength.layout' | translate }}" formControlName="layout">
+      @for (layout of signalStrengthLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="signalStrengthLayoutImageMap.get(layout)">
+          {{ signalStrengthLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
index 49a8dd74fd..1fbbff97b9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
@@ -29,7 +29,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="initialState"></tb-get-value-action-settings>
+      formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
@@ -40,7 +40,7 @@
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
                                     [widgetType]="widgetType"
-                                    formControlName="disabledState"></tb-get-value-action-settings>
+      formControlName="disabledState"></tb-get-value-action-settings>
     </div>
   </div>
   <div class="tb-form-panel">
@@ -51,12 +51,14 @@
                                       'lt-sm': 1,
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.status-widget.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of statusWidgetLayouts"
-                                    [value]="layout"
-                                    [image]="statusWidgetLayoutImageMap.get(layout)">
-        {{ statusWidgetLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.status-widget.layout' | translate }}" formControlName="layout">
+      @for (layout of statusWidgetLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="statusWidgetLayoutImageMap.get(layout)">
+          {{ statusWidgetLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
   </div>
   <div class="tb-form-panel">
@@ -68,16 +70,18 @@
         <tb-toggle-option value="off">{{ 'widgets.status-widget.off' | translate }}</tb-toggle-option>
       </tb-toggle-select>
     </div>
-    <tb-status-widget-state-settings
-        *ngIf="cardStyleMode === 'on'"
+    @if (cardStyleMode === 'on') {
+      <tb-status-widget-state-settings
         [layout]="statusWidgetSettingsForm.get('layout').value"
         formControlName="onState">
-    </tb-status-widget-state-settings>
-    <tb-status-widget-state-settings
-        *ngIf="cardStyleMode === 'off'"
+      </tb-status-widget-state-settings>
+    }
+    @if (cardStyleMode === 'off') {
+      <tb-status-widget-state-settings
         [layout]="statusWidgetSettingsForm.get('layout').value"
         formControlName="offState">
-    </tb-status-widget-state-settings>
+      </tb-status-widget-state-settings>
+    }
     <div class="tb-form-row space-between">
       <div>{{ 'widget-config.card-padding' | translate }}</div>
       <mat-form-field appearance="outline" subscriptSizing="dynamic">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
index 9a3875e0f9..dd9a5e09fd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
@@ -22,18 +22,22 @@
         <div class="flex flex-1 flex-row items-center justify-start">
           <div>
             <span>{{ selectOptionFormGroup.value.value || 'Undefined' }} </span>
-            <span *ngIf="selectOptionFormGroup.value.label">(<small>{{ selectOptionFormGroup.value.label }}</small>)</span>
+            @if (selectOptionFormGroup.value.label) {
+              <span>(<small>{{ selectOptionFormGroup.value.label }}</small>)</span>
+            }
           </div>
         </div>
       </mat-panel-title>
       <span class="flex-1"></span>
-      <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
-              type="button"
-              (click)="removeSelectOption.emit()"
-              matTooltip="{{ 'action.remove' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>delete</mat-icon>
-      </button>
+      @if (!disabled) {
+        <button mat-icon-button style="min-width: 40px;"
+                type="button"
+                (click)="removeSelectOption.emit()"
+                matTooltip="{{ 'action.remove' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon>delete</mat-icon>
+        </button>
+      }
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
index efa5b6cd3a..f23e000981 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
@@ -18,23 +18,25 @@
 <section class="tb-widget-settings" [formGroup]="updateAttributeGeneralSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <tb-string-pattern-autocomplete class="mat-block flex-1" 
-                                              brackets="curly" 
-                                              subscriptSizing="fixed"
-                                              predefinedValuesButton="true"
-                                              label="{{ 'widgets.input-widgets.widget-title' | translate }}"
-                                              [predefinedValues]="predefinedValues"
-                                              placeholderText="{{ 'widget-config.set' | translate }}"
-                                              formControlName="widgetTitle"
+    <tb-string-pattern-autocomplete class="mat-block flex-1"
+                                    brackets="curly"
+                                    subscriptSizing="fixed"
+                                    predefinedValuesButton="true"
+                                    label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                    [predefinedValues]="predefinedValues"
+                                    placeholderText="{{ 'widget-config.set' | translate }}"
+                                    formControlName="widgetTitle"
     ></tb-string-pattern-autocomplete>
     <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
       <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="showLabel">
         {{ 'widgets.input-widgets.show-label' | translate }}
       </mat-slide-toggle>
-      <mat-form-field *ngIf="hasLabelValue" class="mat-block flex-1">
-        <mat-label translate>widgets.input-widgets.label</mat-label>
-        <input matInput formControlName="labelValue">
-      </mat-form-field>
+      @if (hasLabelValue) {
+        <mat-form-field class="mat-block flex-1">
+          <mat-label translate>widgets.input-widgets.label</mat-label>
+          <input matInput formControlName="labelValue">
+        </mat-form-field>
+      }
     </section>
     <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
       <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="isRequired">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
index 6419028708..4d3b384386 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
@@ -102,31 +102,33 @@
           <input matInput formControlName="disabledOnDataKey">
         </mat-form-field>
       </section>
-      <section *ngIf="!['booleanSwitch', 'booleanCheckbox', 'radio'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
-               class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-        <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
-          <mat-label translate>widgets.input-widgets.field-appearance</mat-label>
-          <mat-select formControlName="appearance">
-            <mat-option [value]="'fill'">
-              {{ 'widgets.input-widgets.appearance-fill' | translate }}
-            </mat-option>
-            <mat-option [value]="'outline'">
-              {{ 'widgets.input-widgets.appearance-outline' | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
-          <mat-label translate>widgets.input-widgets.subscript-sizing</mat-label>
-          <mat-select formControlName="subscriptSizing">
-            <mat-option [value]="'fixed'">
-              {{ 'widgets.input-widgets.subscript-sizing-fixed' | translate }}
-            </mat-option>
-            <mat-option [value]="'dynamic'">
-              {{ 'widgets.input-widgets.subscript-sizing-dynamic' | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </section>
+      @if (!['booleanSwitch', 'booleanCheckbox', 'radio'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)) {
+        <section
+          class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+          <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
+            <mat-label translate>widgets.input-widgets.field-appearance</mat-label>
+            <mat-select formControlName="appearance">
+              <mat-option [value]="'fill'">
+                {{ 'widgets.input-widgets.appearance-fill' | translate }}
+              </mat-option>
+              <mat-option [value]="'outline'">
+                {{ 'widgets.input-widgets.appearance-outline' | translate }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
+            <mat-label translate>widgets.input-widgets.subscript-sizing</mat-label>
+            <mat-select formControlName="subscriptSizing">
+              <mat-option [value]="'fixed'">
+                {{ 'widgets.input-widgets.subscript-sizing-fixed' | translate }}
+              </mat-option>
+              <mat-option [value]="'dynamic'">
+                {{ 'widgets.input-widgets.subscript-sizing-dynamic' | translate }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </section>
+      }
     </div>
   </fieldset>
   <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
@@ -152,20 +154,22 @@
     <div class="flex flex-col">
       <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
            (cdkDropListDropped)="selectOptionDrop($event)">
-        <div cdkDrag class="tb-draggable" *ngFor="let selectOptionControl of selectOptionsFormArray().controls; trackBy: trackBySelectOption;
-                 let $index = index; last as isLast;"
-             class="flex flex-col" [class.pb-2]="!isLast">
-          <tb-datakey-select-option [formControl]="selectOptionControl"
-                                    [expanded]="selectOptionControl.new"
-                                    (removeSelectOption)="removeSelectOption($index)">
-          </tb-datakey-select-option>
-        </div>
-      </div>
-      <div *ngIf="!selectOptionsFormArray().controls.length">
-            <span class="tb-prompt flex items-center justify-center">
-              {{ (updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'select' ? 'widgets.input-widgets.no-select-options' : 'widgets.input-widgets.no-radio-options') | translate }}
-            </span>
+        @for (selectOptionControl of typedSelectOptions; track trackBySelectOption($index, 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"
+                                      (removeSelectOption)="removeSelectOption($index)">
+            </tb-datakey-select-option>
+          </div>
+        }
       </div>
+      @if (!selectOptionsFormArray().controls.length) {
+        <div>
+          <span class="tb-prompt flex items-center justify-center">
+            {{ (updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'select' ? 'widgets.input-widgets.no-select-options' : 'widgets.input-widgets.no-radio-options') | translate }}
+          </span>
+        </div>
+      }
       <div style="padding-top: 16px;">
         <button mat-raised-button color="primary"
                 type="button"
@@ -234,7 +238,7 @@
     </mat-form-field>
     <section [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'integer' &&
                               updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'double'"
-             class="flex flex-row gap-2">
+      class="flex flex-row gap-2">
       <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-value-error-message</mat-label>
         <input matInput formControlName="minValueErrorMessage">
@@ -275,7 +279,7 @@
   </fieldset>
   <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
                              ['date', 'dateTime', 'time'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
-            class="fields-group">
+    class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.icon-settings</legend>
     <mat-slide-toggle formControlName="useCustomIcon" class="slide-block">
       {{ 'widgets.input-widgets.use-custom-icon' | translate }}
@@ -286,8 +290,8 @@
                              formControlName="icon">
     </tb-material-icon-select>
     <tb-gallery-image-input [class.!hidden]="!updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
-                    label="{{ 'widgets.input-widgets.input-cell-icon' | translate }}"
-                    formControlName="customIcon">
+                            label="{{ 'widgets.input-widgets.input-cell-icon' | translate }}"
+                            formControlName="customIcon">
     </tb-gallery-image-input>
   </fieldset>
   <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts
index c007c51ef8..0212ee4279 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts
@@ -256,6 +256,10 @@ export class UpdateMultipleAttributesKeySettingsComponent extends WidgetSettings
     return this.updateMultipleAttributesKeySettingsForm.get('selectOptions') as UntypedFormArray;
   }
 
+  get typedSelectOptions() {
+    return this.selectOptionsFormArray().controls as (AbstractControl & { new?: boolean })[];
+  }
+
   public trackBySelectOption(index: number, selectOptionControl: AbstractControl): any {
     return selectOptionControl;
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/circle-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/circle-settings.component.html
index f13de79d27..1a8fb6a328 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/circle-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/circle-settings.component.html
@@ -88,9 +88,11 @@
               <mat-form-field class="flex-1">
                 <mat-label translate>widgets.maps.show-tooltip-action</mat-label>
                 <mat-select required formControlName="showCircleTooltipAction">
-                  <mat-option *ngFor="let action of showTooltipActions" [value]="action">
-                    {{showTooltipActionTranslations.get(action) | translate}}
-                  </mat-option>
+                  @for (action of showTooltipActions; track action) {
+                    <mat-option [value]="action">
+                      {{showTooltipActionTranslations.get(action) | translate}}
+                    </mat-option>
+                  }
                 </mat-select>
               </mat-form-field>
               <mat-slide-toggle formControlName="autoCloseCircleTooltip" class="slide-block">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/datasources-key-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/datasources-key-autocomplete.component.html
index 247a92f7ba..b0d8c742f4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/datasources-key-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/datasources-key-autocomplete.component.html
@@ -23,17 +23,21 @@
          (focusin)="onFocus()"
          formControlName="key"
          [matAutocomplete]="keyAutocomplete">
-  <button *ngIf="keyFormGroup.get('key').value && !keyFormGroup.get('key').disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clearKey()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (keyFormGroup.get('key').value && !keyFormGroup.get('key').disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clearKey()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete
     class="tb-autocomplete"
     #keyAutocomplete="matAutocomplete">
-    <mat-option *ngFor="let key of filteredKeys | async" [value]="key">
-      <span [innerHTML]="key | highlight:keySearchText"></span>
-    </mat-option>
+    @for (key of filteredKeys | async; track key) {
+      <mat-option [value]="key">
+        <span [innerHTML]="key | highlight:keySearchText"></span>
+      </mat-option>
+    }
   </mat-autocomplete>
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/google-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/google-map-provider-settings.component.html
index 7ffaff50c4..49b0e479c3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/google-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/google-map-provider-settings.component.html
@@ -23,9 +23,11 @@
   <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.default-map-type</mat-label>
     <mat-select required formControlName="gmDefaultMapType">
-      <mat-option *ngFor="let type of googleMapTypes" [value]="type">
-        {{googleMapTypeTranslations.get(type) | translate}}
-      </mat-option>
+      @for (type of googleMapTypes; track type) {
+        <mat-option [value]="type">
+          {{googleMapTypeTranslations.get(type) | translate}}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/here-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/here-map-provider-settings.component.html
index 056be11115..6a052ac907 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/here-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/here-map-provider-settings.component.html
@@ -19,9 +19,11 @@
   <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.map-layer</mat-label>
     <mat-select required formControlName="mapProviderHere">
-      <mat-option *ngFor="let provider of hereMapProviders" [value]="provider">
-        {{hereMapProviderTranslations.get(provider) | translate}}
-      </mat-option>
+      @for (provider of hereMapProviders; track provider) {
+        <mat-option [value]="provider">
+          {{hereMapProviderTranslations.get(provider) | translate}}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <section class="tb-widget-settings" formGroupName="credentials">
@@ -30,22 +32,23 @@
       <mat-slide-toggle formControlName="useV3" style="margin-bottom: 16px;">
         {{ 'widgets.maps.here-use-new-version-api-3' | translate }}
       </mat-slide-toggle>
-      <div *ngIf="!providerSettingsFormGroup.get('credentials.useV3').value; else apiKey" class="flex flex-row xs:flex-col gt-xs:gap-2">
-        <mat-form-field class="flex-1">
-          <mat-label translate>widgets.maps.here-app-id</mat-label>
-          <input required matInput formControlName="app_id">
-        </mat-form-field>
-        <mat-form-field class="flex-1">
-          <mat-label translate>widgets.maps.here-app-code</mat-label>
-          <input required matInput formControlName="app_code">
-        </mat-form-field>
-      </div>
-      <ng-template #apiKey>
+      @if (!providerSettingsFormGroup.get('credentials.useV3').value) {
+        <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+          <mat-form-field class="flex-1">
+            <mat-label translate>widgets.maps.here-app-id</mat-label>
+            <input required matInput formControlName="app_id">
+          </mat-form-field>
+          <mat-form-field class="flex-1">
+            <mat-label translate>widgets.maps.here-app-code</mat-label>
+            <input required matInput formControlName="app_code">
+          </mat-form-field>
+        </div>
+      } @else {
         <mat-form-field>
           <mat-label translate>widgets.maps.here-api-key</mat-label>
           <input required matInput formControlName="apiKey">
         </mat-form-field>
-      </ng-template>
+      }
     </fieldset>
   </section>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/image-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/image-map-provider-settings.component.html
index 6182b2b1fa..628d4853e5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/image-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/image-map-provider-settings.component.html
@@ -17,7 +17,7 @@
 -->
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
   <tb-gallery-image-input label="{{ 'widgets.maps.image-map-background' | translate }}"
-                  formControlName="mapImageUrl">
+                          formControlName="mapImageUrl">
   </tb-gallery-image-input>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.image-map-background-from-entity-attribute</legend>
@@ -30,18 +30,22 @@
                (focusin)="onEntityAliasFocus()"
                formControlName="imageEntityAlias"
                [matAutocomplete]="entityAliasAutocomplete">
-        <button *ngIf="providerSettingsFormGroup.get('imageEntityAlias').value && !providerSettingsFormGroup.get('imageEntityAlias').disabled"
-                type="button"
-                matSuffix mat-icon-button aria-label="Clear"
-                (click)="clearEntityAlias()">
-          <mat-icon class="material-icons">close</mat-icon>
-        </button>
+        @if (providerSettingsFormGroup.get('imageEntityAlias').value && !providerSettingsFormGroup.get('imageEntityAlias').disabled) {
+          <button
+            type="button"
+            matSuffix mat-icon-button aria-label="Clear"
+            (click)="clearEntityAlias()">
+            <mat-icon class="material-icons">close</mat-icon>
+          </button>
+        }
         <mat-autocomplete
           class="tb-autocomplete"
           #entityAliasAutocomplete="matAutocomplete">
-          <mat-option *ngFor="let entityAlias of filteredEntityAliases | async" [value]="entityAlias">
-            <span [innerHTML]="entityAlias | highlight:aliasSearchText"></span>
-          </mat-option>
+          @for (entityAlias of filteredEntityAliases | async; track entityAlias) {
+            <mat-option [value]="entityAlias">
+              <span [innerHTML]="entityAlias | highlight:aliasSearchText"></span>
+            </mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
       <mat-form-field class="flex-1">
@@ -52,18 +56,22 @@
                (focusin)="onKeyFocus()"
                formControlName="imageUrlAttribute"
                [matAutocomplete]="keyAutocomplete">
-        <button *ngIf="providerSettingsFormGroup.get('imageUrlAttribute').value && !providerSettingsFormGroup.get('imageUrlAttribute').disabled"
-                type="button"
-                matSuffix mat-icon-button aria-label="Clear"
-                (click)="clearKey()">
-          <mat-icon class="material-icons">close</mat-icon>
-        </button>
+        @if (providerSettingsFormGroup.get('imageUrlAttribute').value && !providerSettingsFormGroup.get('imageUrlAttribute').disabled) {
+          <button
+            type="button"
+            matSuffix mat-icon-button aria-label="Clear"
+            (click)="clearKey()">
+            <mat-icon class="material-icons">close</mat-icon>
+          </button>
+        }
         <mat-autocomplete
           class="tb-autocomplete"
           #keyAutocomplete="matAutocomplete">
-          <mat-option *ngFor="let key of filteredKeys | async" [value]="key">
-            <span [innerHTML]="key | highlight:keySearchText"></span>
-          </mat-option>
+          @for (key of filteredKeys | async; track key) {
+            <mat-option [value]="key">
+              <span [innerHTML]="key | highlight:keySearchText"></span>
+            </mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
     </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/map-provider-settings.component.html
index b2d334a621..8566956dc0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/map-provider-settings.component.html
@@ -21,9 +21,11 @@
     <mat-form-field>
       <mat-label translate>widgets.maps.map-provider</mat-label>
       <mat-select required formControlName="provider">
-        <mat-option *ngFor="let provider of mapProviders" [value]="provider">
-          {{mapProviderTranslations.get(provider) | translate}}
-        </mat-option>
+        @for (provider of mapProviders; track provider) {
+          <mat-option [value]="provider">
+            {{mapProviderTranslations.get(provider) | translate}}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
     <tb-google-map-provider-settings
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/map-settings-legacy.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/map-settings-legacy.component.html
index 0b93c0f951..a63b4c6348 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/map-settings-legacy.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/map-settings-legacy.component.html
@@ -37,15 +37,17 @@
     [widget]="widget"
     formControlName="circleSettings">
   </tb-circle-settings>
-  <tb-marker-clustering-settings
-    *ngIf="!routeMap"
-    [class.!hidden]="mapSettingsFormGroup.get('mapProviderSettings').value.provider === mapProvider.image"
-    formControlName="markerClusteringSettings">
-  </tb-marker-clustering-settings>
-  <tb-route-map-settings
-    *ngIf="routeMap"
-    formControlName="routeMapSettings">
-  </tb-route-map-settings>
+  @if (!routeMap) {
+    <tb-marker-clustering-settings
+      [class.!hidden]="mapSettingsFormGroup.get('mapProviderSettings').value.provider === mapProvider.image"
+      formControlName="markerClusteringSettings">
+    </tb-marker-clustering-settings>
+  }
+  @if (routeMap) {
+    <tb-route-map-settings
+      formControlName="routeMapSettings">
+    </tb-route-map-settings>
+  }
   <tb-map-editor-settings
     [class.!hidden]="!displayEditorSettings()"
     formControlName="mapEditorSettings">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/markers-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/markers-settings.component.html
index b786ea700e..609cfea4b8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/markers-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/markers-settings.component.html
@@ -90,9 +90,11 @@
           <mat-form-field class="mat-block">
             <mat-label translate>widgets.maps.show-tooltip-action</mat-label>
             <mat-select required formControlName="showTooltipAction">
-              <mat-option *ngFor="let action of showTooltipActions" [value]="action">
-                {{showTooltipActionTranslations.get(action) | translate}}
-              </mat-option>
+              @for (action of showTooltipActions; track action) {
+                <mat-option [value]="action">
+                  {{showTooltipActionTranslations.get(action) | translate}}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
           <mat-slide-toggle formControlName="autocloseTooltip" class="slide-block">
@@ -171,8 +173,8 @@
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
           <tb-gallery-image-input [class.!hidden]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
-                          label="{{ 'widgets.maps.custom-marker-image' | translate }}"
-                          formControlName="markerImage">
+                                  label="{{ 'widgets.maps.custom-marker-image' | translate }}"
+                                  formControlName="markerImage">
           </tb-gallery-image-input>
           <mat-form-field [class.!hidden]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
                           class="mat-block">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/openstreet-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/openstreet-map-provider-settings.component.html
index a08823395d..8fb0b3c705 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/openstreet-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/openstreet-map-provider-settings.component.html
@@ -19,9 +19,11 @@
   <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.openstreet-provider</mat-label>
     <mat-select required formControlName="mapProvider">
-      <mat-option *ngFor="let provider of mapProviders" [value]="provider">
-        {{openStreetMapProviderTranslations.get(provider) | translate}}
-      </mat-option>
+      @for (provider of mapProviders; track provider) {
+        <mat-option [value]="provider">
+          {{openStreetMapProviderTranslations.get(provider) | translate}}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <mat-expansion-panel class="tb-settings" [expanded]="providerSettingsFormGroup.get('useCustomProvider').value">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/polygon-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/polygon-settings.component.html
index 3d82204a26..03bb018528 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/polygon-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/polygon-settings.component.html
@@ -88,9 +88,11 @@
               <mat-form-field class="mat-block">
                 <mat-label translate>widgets.maps.show-tooltip-action</mat-label>
                 <mat-select required formControlName="showPolygonTooltipAction">
-                  <mat-option *ngFor="let action of showTooltipActions" [value]="action">
-                    {{showTooltipActionTranslations.get(action) | translate}}
-                  </mat-option>
+                  @for (action of showTooltipActions; track action) {
+                    <mat-option [value]="action">
+                      {{showTooltipActionTranslations.get(action) | translate}}
+                    </mat-option>
+                  }
                 </mat-select>
               </mat-form-field>
               <mat-slide-toggle formControlName="autoClosePolygonTooltip" class="slide-block">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/tencent-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/tencent-map-provider-settings.component.html
index 88c36ab010..ccde76edad 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/tencent-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/tencent-map-provider-settings.component.html
@@ -23,9 +23,11 @@
   <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.default-map-type</mat-label>
     <mat-select required formControlName="tmDefaultMapType">
-      <mat-option *ngFor="let type of tencentMapTypes" [value]="type">
-        {{tencentMapTypeTranslations.get(type) | translate}}
-      </mat-option>
+      @for (type of tencentMapTypes; track type) {
+        <mat-option [value]="type">
+          {{tencentMapTypeTranslations.get(type) | translate}}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/trip-animation-path-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/trip-animation-path-settings.component.html
index 6034cbfc5c..57e4cfb873 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/trip-animation-path-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/legacy/trip-animation-path-settings.component.html
@@ -73,9 +73,11 @@
             <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.decorator-symbol</mat-label>
               <mat-select required formControlName="decoratorSymbol">
-                <mat-option *ngFor="let symbol of polylineDecoratorSymbols" [value]="symbol">
-                  {{polylineDecoratorSymbolTranslations.get(symbol) | translate}}
-                </mat-option>
+                @for (symbol of polylineDecoratorSymbols; track symbol) {
+                  <mat-option [value]="symbol">
+                    {{polylineDecoratorSymbolTranslations.get(symbol) | translate}}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
             <mat-form-field class="flex-1">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
index d8545078c1..d240db2726 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
@@ -27,11 +27,13 @@
   <mat-form-field [class.!hidden]="navigationCardsWidgetSettingsForm.get('filterType').value === 'all'" class="mat-block flex-1" floatLabel="always">
     <mat-label translate>widgets.navigation.items</mat-label>
     <mat-chip-grid #filterItemsChipList>
-      <mat-chip-row *ngFor="let filterItem of navigationCardsWidgetSettingsForm.get('filter').value"
-                [removable]="true" (removed)="onFilterItemRemoved(filterItem)">
-        {{ filterItem }}
-        <mat-icon matChipRemove>cancel</mat-icon>
-      </mat-chip-row>
+      @for (filterItem of navigationCardsWidgetSettingsForm.get('filter').value; track filterItem) {
+        <mat-chip-row
+          [removable]="true" (removed)="onFilterItemRemoved(filterItem)">
+          {{ filterItem }}
+          <mat-icon matChipRemove>cancel</mat-icon>
+        </mat-chip-row>
+      }
       <input matInput type="text" placeholder="{{ 'widgets.navigation.enter-urls-to-filter' | translate }}"
              style="max-width: 200px;"
              #filterItemInput
@@ -48,9 +50,11 @@
     <mat-autocomplete #filterItemAutocomplete="matAutocomplete"
                       class="tb-autocomplete"
                       (optionSelected)="filterItemSelected($event)">
-      <mat-option *ngFor="let filterItem of filteredFilterItems | async" [value]="filterItem">
-        <span [innerHTML]="filterItem | highlight:filterItemSearchText"></span>
-      </mat-option>
+      @for (filterItem of filteredFilterItems | async; track filterItem) {
+        <mat-option [value]="filterItem">
+          <span [innerHTML]="filterItem | highlight:filterItemSearchText"></span>
+        </mat-option>
+      }
     </mat-autocomplete>
   </mat-form-field>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
index fa9c964654..230db9e857 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
@@ -23,12 +23,14 @@
                                     breakpoints: {
                                       'lt-md': 2
                                     }}"
-                           label="{{ 'widgets.wind-speed-direction.layout' | translate }}" formControlName="layout">
-      <tb-image-cards-select-option *ngFor="let layout of windSpeedDirectionLayouts"
-                                    [value]="layout"
-                                    [image]="windSpeedDirectionLayoutImageMap.get(layout)">
-        {{ windSpeedDirectionLayoutTranslationMap.get(layout) | translate }}
-      </tb-image-cards-select-option>
+      label="{{ 'widgets.wind-speed-direction.layout' | translate }}" formControlName="layout">
+      @for (layout of windSpeedDirectionLayouts; track layout) {
+        <tb-image-cards-select-option
+          [value]="layout"
+          [image]="windSpeedDirectionLayoutImageMap.get(layout)">
+          {{ windSpeedDirectionLayoutTranslationMap.get(layout) | translate }}
+        </tb-image-cards-select-option>
+      }
     </tb-image-cards-select>
     <div class="tb-form-row space-between">
       <div>{{ (hasCenterValue ? 'widgets.wind-speed-direction.center-value' : 'widgets.wind-speed-direction.wind-direction') | translate }}</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
index 99a31331fd..a744ac54a2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
@@ -41,90 +41,108 @@
                    class="flex-1"
                    mat-stretch-tabs="false"
                    [(selectedIndex)]="sourceIndex" (selectedIndexChange)="onSourceIndexChanged()">
-      <mat-tab *ngFor="let source of sources; trackBy: trackBySourcesIndex; let index = index;" [label]="source.displayName">
-        <ng-template [ngIf]="isActiveTab(index)">
-          <div class="table-container flex-1">
-            <table mat-table [dataSource]="source.timeseriesDatasource" [trackBy]="trackByRowTimestamp"
-                       matSort [matSortActive]="source.pageLink.sortOrder.property" [matSortDirection]="source.pageLink.sortDirection()" matSortDisableClear>
-              <ng-container *ngIf="showTimestamp" [matColumnDef]="'0'">
-                <mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'widgets.table.timestamp-column-name' | translate }}</mat-header-cell>
-                <mat-cell *matCellDef="let row; let rowIndex = index"
-                          [innerHTML]="cellContent(source, null, 0, row, row[0], rowIndex) | async"
-                          [style]="cellStyle(source, null, 0, row, row[0], rowIndex) | async">
-                </mat-cell>
-              </ng-container>
-              <ng-container [matColumnDef]="h.index + ''" *ngFor="let h of source.header; trackBy: trackByColumnIndex;">
-                <mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!h.sortable"> {{ h.dataKey.label }} </mat-header-cell>
-                <mat-cell *matCellDef="let row; let rowIndex = index"
-                          [innerHTML]="cellContent(source, h, h.index, row, row[h.index], rowIndex) | async"
-                          [style]="cellStyle(source, h, h.index, row, row[h.index], rowIndex) | async">
-                </mat-cell>
-              </ng-container>
-              <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
-                <mat-header-cell *matHeaderCellDef>
-                  <ng-container *ngIf="source.timeseriesDatasource.countCellButtonAction">
-                    <div class="gt-md:!hidden" style="min-width: 40px;">
-                    </div>
-                    <div class="lt-lg:!hidden"
-                         [style.min-width]="(source.timeseriesDatasource.countCellButtonAction * 40) + 'px'">
-                    </div>
+      @for (source of sources; track trackBySourcesIndex(index, source); let index = $index) {
+        <mat-tab [label]="source.displayName">
+          @if (isActiveTab(index)) {
+            <div class="table-container flex-1">
+              <table mat-table [dataSource]="source.timeseriesDatasource" [trackBy]="trackByRowTimestamp"
+                     matSort [matSortActive]="source.pageLink.sortOrder.property" [matSortDirection]="source.pageLink.sortDirection()" matSortDisableClear>
+                @if (showTimestamp) {
+                  <ng-container [matColumnDef]="'0'">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'widgets.table.timestamp-column-name' | translate }}</mat-header-cell>
+                    <mat-cell *matCellDef="let row; let rowIndex = index"
+                              [innerHTML]="cellContent(source, null, 0, row, row[0], rowIndex) | async"
+                              [style]="cellStyle(source, null, 0, row, row[0], rowIndex) | async">
+                    </mat-cell>
                   </ng-container>
-                </mat-header-cell>
-                <mat-cell *matCellDef="let row; let rowIndex = index" [style]="rowStyle(source, row, rowIndex) | async">
-                  <ng-container *ngIf="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'">
-                      <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                        <span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
-                        <button *ngIf="actionDescriptor.icon"
-                                class="tb-mat-40"
-                                mat-icon-button
-                                matTooltip="{{ actionDescriptor.displayName }}"
-                                matTooltipPosition="above"
-                                (click)="onActionButtonClick($event, row, actionDescriptor)">
-                          <tb-icon>{{actionDescriptor.icon}}</tb-icon>
-                        </button>
-                      </ng-container>
-                    </div>
-                    <div [class.!hidden]="!showCellActionsMenu || source.timeseriesDatasource.countCellButtonAction === 1" class="gt-md:!hidden" *ngIf="row.hasActions">
-                      <button mat-icon-button
+                }
+                @for (h of source.header; track trackByColumnIndex($index, 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"
+                              [innerHTML]="cellContent(source, h, h.index, row, row[h.index], rowIndex) | async"
+                              [style]="cellStyle(source, h, h.index, row, row[h.index], rowIndex) | async">
+                    </mat-cell>
+                  </ng-container>
+                }
+                <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
+                  <mat-header-cell *matHeaderCellDef>
+                    @if (source.timeseriesDatasource.countCellButtonAction) {
+                      <div class="gt-md:!hidden" style="min-width: 40px;">
+                      </div>
+                      <div class="lt-lg:!hidden"
+                           [style.min-width]="(source.timeseriesDatasource.countCellButtonAction * 40) + 'px'">
+                      </div>
+                    }
+                  </mat-header-cell>
+                  <mat-cell *matCellDef="let row; let rowIndex = index" [style]="rowStyle(source, row, rowIndex) | async">
+                    @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)) {
+                          @if (!actionDescriptor.icon) {
+                            <span style="width: 40px;"></span>
+                          }
+                          @if (actionDescriptor.icon) {
+                            <button
                               class="tb-mat-40"
-                              (click)="$event.stopPropagation(); ctx.detectChanges();"
-                              [matMenuTriggerFor]="cellActionsMenu">
-                        <mat-icon class="material-icons">more_vert</mat-icon>
-                      </button>
-                      <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                        <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                          <button mat-menu-item *ngIf="actionDescriptor.icon"
-                                  (click)="onActionButtonClick($event, row, actionDescriptor)">
-                            <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                            <span>{{ actionDescriptor.displayName }}</span>
+                              mat-icon-button
+                              matTooltip="{{ actionDescriptor.displayName }}"
+                              matTooltipPosition="above"
+                              (click)="onActionButtonClick($event, row, actionDescriptor)">
+                              <tb-icon>{{actionDescriptor.icon}}</tb-icon>
+                            </button>
+                          }
+                        }
+                      </div>
+                      @if (row.hasActions) {
+                        <div [class.!hidden]="!showCellActionsMenu || source.timeseriesDatasource.countCellButtonAction === 1" class="gt-md:!hidden">
+                          <button mat-icon-button
+                                  class="tb-mat-40"
+                                  (click)="$event.stopPropagation(); ctx.detectChanges();"
+                                  [matMenuTriggerFor]="cellActionsMenu">
+                            <mat-icon class="material-icons">more_vert</mat-icon>
                           </button>
-                        </ng-container>
-                      </mat-menu>
-                    </div>
-                  </ng-container>
-                </mat-cell>
-              </ng-container>
-              <mat-header-row *matHeaderRowDef="source.displayedColumns; sticky: enableStickyHeader"></mat-header-row>
-              <mat-row [class.tb-pointer]="hasRowAction"
-                       *matRowDef="let row; columns: source.displayedColumns; let rowIndex = index"
-                       [style]="rowStyle(source, row, rowIndex) | async"
-                       (click)="onRowClick($event, row)"></mat-row>
-            </table>
-            <span [class.!hidden]="(source.timeseriesDatasource.isEmpty() | async) === false"
-                  class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
-          </div>
-          <mat-divider *ngIf="displayPagination"></mat-divider>
-          <mat-paginator *ngIf="displayPagination"
-                         [length]="source.timeseriesDatasource.total() | async"
-                         [pageIndex]="source.pageLink.page"
-                         [pageSize]="source.pageLink.pageSize"
-                         [pageSizeOptions]="pageSizeOptions"
-                         [hidePageSize]="hidePageSize"
-                         showFirstLastButtons></mat-paginator>
-        </ng-template>
-      </mat-tab>
+                          <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                            @for (actionDescriptor of row.actionCellButtons; track trackByActionCellDescriptionId($index, actionDescriptor)) {
+                              @if (actionDescriptor.icon) {
+                                <button mat-menu-item
+                                        (click)="onActionButtonClick($event, row, actionDescriptor)">
+                                  <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                                  <span>{{ actionDescriptor.displayName }}</span>
+                                </button>
+                              }
+                            }
+                          </mat-menu>
+                        </div>
+                      }
+                    }
+                  </mat-cell>
+                </ng-container>
+                <mat-header-row *matHeaderRowDef="source.displayedColumns; sticky: enableStickyHeader"></mat-header-row>
+                <mat-row [class.tb-pointer]="hasRowAction"
+                         *matRowDef="let row; columns: source.displayedColumns; let rowIndex = index"
+                         [style]="rowStyle(source, row, rowIndex) | async"
+                (click)="onRowClick($event, row)"></mat-row>
+              </table>
+              <span [class.!hidden]="(source.timeseriesDatasource.isEmpty() | async) === false"
+              class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
+            </div>
+            @if (displayPagination) {
+              <mat-divider></mat-divider>
+            }
+            @if (displayPagination) {
+              <mat-paginator
+                [length]="source.timeseriesDatasource.total() | async"
+                [pageIndex]="source.pageLink.page"
+                [pageSize]="source.pageLink.pageSize"
+                [pageSizeOptions]="pageSizeOptions"
+                [hidePageSize]="hidePageSize"
+              showFirstLastButtons></mat-paginator>
+            }
+          }
+        </mat-tab>
+      }
     </mat-tab-group>
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html
index a41bf2ed82..a5a7bb955b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html
@@ -16,32 +16,40 @@
 
 -->
 <div class="trip-animation-widget">
-    <div class="trip-animation-label-container" *ngIf="settings.showLabel" [innerHTML]="label"></div>
-    <div class="trip-animation-container flex flex-col">
-        <div class="map" #map></div>
-        <div class="trip-animation-info-panel flex flex-row">
-            <button class="tooltip-button" mat-mini-fab color="primary" aria-label="tooltip"
-                *ngIf="settings.showTooltip" (click)="visibleTooltip = !visibleTooltip">
-                <mat-icon>info_outline</mat-icon>
-            </button>
-        </div>
-        <div class="trip-animation-tooltip md-whiteframe-z4 flex flex-col"
-             [class.trip-animation-tooltip-hidden]="!visibleTooltip"
-             [style.background-color]="settings.tooltipColor"
-             [style.opacity]="settings.tooltipOpacity"
-             [style.color]="settings.tooltipFontColor">
-          <div *ngFor="let mainTooltip of mainTooltips"
-               [innerHTML]="mainTooltip"
-               style="padding: 10px 0">
-          </div>
+  @if (settings.showLabel) {
+    <div class="trip-animation-label-container" [innerHTML]="label"></div>
+  }
+  <div class="trip-animation-container flex flex-col">
+    <div class="map" #map></div>
+    <div class="trip-animation-info-panel flex flex-row">
+      @if (settings.showTooltip) {
+        <button class="tooltip-button" mat-mini-fab color="primary" aria-label="tooltip"
+                (click)="visibleTooltip = !visibleTooltip">
+          <mat-icon>info_outline</mat-icon>
+        </button>
+      }
+    </div>
+    <div class="trip-animation-tooltip md-whiteframe-z4 flex flex-col"
+         [class.trip-animation-tooltip-hidden]="!visibleTooltip"
+         [style.background-color]="settings.tooltipColor"
+         [style.opacity]="settings.tooltipOpacity"
+         [style.color]="settings.tooltipFontColor">
+      @for (mainTooltip of mainTooltips; track mainTooltip) {
+        <div
+          [innerHTML]="mainTooltip"
+          style="padding: 10px 0">
         </div>
+      }
     </div>
-  <tb-history-selector *ngIf="historicalData"
-                       [settings]="settings"
-                       [minTime]="minTime"
-                       [maxTime]="maxTime"
-                       [step]="normalizationStep"
-                       [anchors]="anchors"
-                       [useAnchors]="useAnchors"
-                       (timeUpdated)="timeUpdated($event)"></tb-history-selector>
+  </div>
+  @if (historicalData) {
+    <tb-history-selector
+      [settings]="settings"
+      [minTime]="minTime"
+      [maxTime]="maxTime"
+      [step]="normalizationStep"
+      [anchors]="anchors"
+      [useAnchors]="useAnchors"
+    (timeUpdated)="timeUpdated($event)"></tb-history-selector>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 166c32a7fd..3b248f086e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -16,222 +16,240 @@
 
 -->
 <div class="tb-widget-config tb-absolute-fill">
-  <div class="tb-widget-config-header" *ngIf="!hideHeader">
-    <tb-toggle-select *ngIf="!hideToggleHeader && widgetConfigMode === widgetConfigModes.advanced"
-                      appearance="fill" [options]="headerOptions" [(ngModel)]="selectedOption">
-    </tb-toggle-select>
-    <div class="tb-widget-config-header-components">
-      <ng-content select=".tb-widget-config-header-prefix"></ng-content>
-      <ng-content select=".tb-widget-config-header-suffix"></ng-content>
-    </div>
-  </div>
-  <div *ngIf="widgetConfigMode === widgetConfigModes.advanced; else basicMode" class="tb-widget-config-content">
-    <div *ngIf="displayData" [class.!hidden]="selectedOption !== 'data'" class="mat-content">
-      <ng-container *ngTemplateOutlet="data"></ng-container>
-    </div>
-    <div [class.!hidden]="selectedOption !== 'appearance'" class="mat-content">
-      <ng-container *ngTemplateOutlet="appearance"></ng-container>
+  @if (!hideHeader) {
+    <div class="tb-widget-config-header">
+      @if (!hideToggleHeader && widgetConfigMode === widgetConfigModes.advanced) {
+        <tb-toggle-select
+          appearance="fill" [options]="headerOptions" [(ngModel)]="selectedOption">
+        </tb-toggle-select>
+      }
+      <div class="tb-widget-config-header-components">
+        <ng-content select=".tb-widget-config-header-prefix"></ng-content>
+        <ng-content select=".tb-widget-config-header-suffix"></ng-content>
+      </div>
     </div>
-    <div [class.!hidden]="selectedOption !== 'card'" [formGroup]="widgetSettings" class="mat-content">
-      <div class="tb-form-panel">
-        <div class="tb-form-panel-title" translate>widget-config.card-title</div>
-        <mat-slide-toggle class="mat-slide" formControlName="showTitle">
-          {{ 'widget-config.display-title' | translate }}
-        </mat-slide-toggle>
-        <div class="tb-form-row">
-          <div class="fixed-title-width" translate>widget-config.title</div>
-          <div class="flex flex-1 flex-row items-center justify-start gap-2">
-            @if (widgetType === widgetTypes.static || widgetType === widgetTypes.alarm) {
-              <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-                <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+  }
+  @if (widgetConfigMode === widgetConfigModes.advanced) {
+    <div class="tb-widget-config-content">
+      @if (displayData) {
+        <div [class.!hidden]="selectedOption !== 'data'" class="mat-content">
+          <ng-container *ngTemplateOutlet="data"></ng-container>
+        </div>
+      }
+      <div [class.!hidden]="selectedOption !== 'appearance'" class="mat-content">
+        <ng-container *ngTemplateOutlet="appearance"></ng-container>
+      </div>
+      <div [class.!hidden]="selectedOption !== 'card'" [formGroup]="widgetSettings" class="mat-content">
+        <div class="tb-form-panel">
+          <div class="tb-form-panel-title" translate>widget-config.card-title</div>
+          <mat-slide-toggle class="mat-slide" formControlName="showTitle">
+            {{ 'widget-config.display-title' | translate }}
+          </mat-slide-toggle>
+          <div class="tb-form-row">
+            <div class="fixed-title-width" translate>widget-config.title</div>
+            <div class="flex flex-1 flex-row items-center justify-start gap-2">
+              @if (widgetType === widgetTypes.static || widgetType === widgetTypes.alarm) {
+                <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+                  <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+                </mat-form-field>
+              } @else {
+                <tb-string-pattern-autocomplete class="flex-1"
+                                                appearance="outline"
+                                                brackets="curly"
+                                                subscriptSizing="dynamic"
+                                                [predefinedValuesButton]="true"
+                                                [disabled]="!widgetSettings.get('showTitle').value"
+                                                [predefinedValues]="predefinedValues"
+                                                placeholderText="{{ 'widget-config.set' | translate }}"
+                                                formControlName="title"
+                ></tb-string-pattern-autocomplete>
+              }
+              <tb-font-settings formControlName="titleFont"
+                                clearButton
+                                [previewText]="widgetSettings.get('title').value"
+                                [initialPreviewStyle]="widgetSettings.get('titleStyle').value">
+              </tb-font-settings>
+              <tb-color-input asBoxInput
+                              colorClearButton
+                              formControlName="titleColor">
+              </tb-color-input>
+            </div>
+          </div>
+          <div class="tb-form-row">
+            <div class="fixed-title-width" translate>widget-config.title-tooltip</div>
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+              <input matInput formControlName="titleTooltip" placeholder="{{ 'widget-config.set' | translate }}">
+            </mat-form-field>
+          </div>
+          <div class="tb-form-row space-between column-xs">
+            <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
+              {{ 'widget-config.display-icon' | translate }}
+            </mat-slide-toggle>
+            <div class="flex flex-row items-center justify-start gap-2">
+              <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <input matInput formControlName="iconSize">
               </mat-form-field>
-            } @else {
-              <tb-string-pattern-autocomplete class="flex-1"
-                                              appearance="outline"
-                                              brackets="curly"
-                                              subscriptSizing="dynamic"
-                                              [predefinedValuesButton]="true"
-                                              [disabled]="!widgetSettings.get('showTitle').value"
-                                              [predefinedValues]="predefinedValues"
-                                              placeholderText="{{ 'widget-config.set' | translate }}"
-                                              formControlName="title"
-              ></tb-string-pattern-autocomplete>
-            }
-            <tb-font-settings formControlName="titleFont"
-                              clearButton
-                              [previewText]="widgetSettings.get('title').value"
-                              [initialPreviewStyle]="widgetSettings.get('titleStyle').value">
-            </tb-font-settings>
+              <tb-material-icon-select asBoxInput
+                                       iconClearButton
+                                       allowedCustomIcon
+                                       [color]="widgetSettings.get('iconColor').value"
+                                       formControlName="titleIcon">
+              </tb-material-icon-select>
+              <tb-color-input asBoxInput
+                              colorClearButton
+                              formControlName="iconColor">
+              </tb-color-input>
+            </div>
+          </div>
+          <mat-expansion-panel class="tb-settings">
+            <mat-expansion-panel-header>
+              <mat-panel-description class="flex items-stretch justify-start" translate>
+                widget-config.advanced-title-style
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+            <ng-template matExpansionPanelContent>
+              <tb-json-object-edit
+                [editorStyle]="{minHeight: '100px'}"
+                label="{{ 'widget-config.title-style' | translate }}"
+                formControlName="titleStyle"
+              ></tb-json-object-edit>
+            </ng-template>
+          </mat-expansion-panel>
+        </div>
+        <div class="tb-form-panel">
+          <div class="tb-form-panel-title" translate>widget-config.card-style</div>
+          <div class="tb-form-row space-between">
+            <div>{{ 'widget-config.text-color' | translate }}</div>
             <tb-color-input asBoxInput
                             colorClearButton
-                            formControlName="titleColor">
+                            formControlName="color">
             </tb-color-input>
           </div>
-        </div>
-        <div class="tb-form-row">
-          <div class="fixed-title-width" translate>widget-config.title-tooltip</div>
-          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="titleTooltip" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-        </div>
-        <div class="tb-form-row space-between column-xs">
-          <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
-            {{ 'widget-config.display-icon' | translate }}
-          </mat-slide-toggle>
-          <div class="flex flex-row items-center justify-start gap-2">
-            <mat-form-field appearance="outline" subscriptSizing="dynamic">
-              <input matInput formControlName="iconSize">
-            </mat-form-field>
-            <tb-material-icon-select asBoxInput
-                                     iconClearButton
-                                     allowedCustomIcon
-                                     [color]="widgetSettings.get('iconColor').value"
-              formControlName="titleIcon">
-            </tb-material-icon-select>
+          <div class="tb-form-row space-between">
+            <div>{{ 'widget-config.background-color' | translate }}</div>
             <tb-color-input asBoxInput
                             colorClearButton
-                            formControlName="iconColor">
+                            formControlName="backgroundColor">
             </tb-color-input>
           </div>
-        </div>
-        <mat-expansion-panel class="tb-settings">
-          <mat-expansion-panel-header>
-            <mat-panel-description class="flex items-stretch justify-start" translate>
-              widget-config.advanced-title-style
-            </mat-panel-description>
-          </mat-expansion-panel-header>
-          <ng-template matExpansionPanelContent>
-            <tb-json-object-edit
-              [editorStyle]="{minHeight: '100px'}"
-              label="{{ 'widget-config.title-style' | translate }}"
-              formControlName="titleStyle"
-            ></tb-json-object-edit>
-          </ng-template>
-        </mat-expansion-panel>
-      </div>
-      <div class="tb-form-panel">
-        <div class="tb-form-panel-title" translate>widget-config.card-style</div>
-        <div class="tb-form-row space-between">
-          <div>{{ 'widget-config.text-color' | translate }}</div>
-          <tb-color-input asBoxInput
-                          colorClearButton
-                          formControlName="color">
-          </tb-color-input>
-        </div>
-        <div class="tb-form-row space-between">
-          <div>{{ 'widget-config.background-color' | translate }}</div>
-          <tb-color-input asBoxInput
-                          colorClearButton
-                          formControlName="backgroundColor">
-          </tb-color-input>
-        </div>
-        <div class="tb-form-row space-between">
-          <div>{{ 'widget-config.padding' | translate }}</div>
-          <mat-form-field appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-        </div>
-        <div class="tb-form-row space-between">
-          <div>{{ 'widget-config.margin' | translate }}</div>
-          <mat-form-field appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="margin" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-        </div>
-        <div class="tb-form-row space-between">
-          <div>{{ 'widget-config.border-radius' | translate }}</div>
-          <mat-form-field appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-        </div>
-        <mat-slide-toggle class="mat-slide slide-block" formControlName="dropShadow">
-          {{ 'widget-config.drop-shadow' | translate }}
-        </mat-slide-toggle>
-        <mat-expansion-panel class="tb-settings">
-          <mat-expansion-panel-header>
-            <mat-panel-description class="flex items-stretch justify-start" translate>
-              widget-config.advanced-widget-style
-            </mat-panel-description>
-          </mat-expansion-panel-header>
-          <ng-template matExpansionPanelContent>
-            <tb-json-object-edit
-              [editorStyle]="{minHeight: '100px'}"
-              label="{{ 'widget-config.widget-style' | translate }}"
-              formControlName="widgetStyle"
-            ></tb-json-object-edit>
-            <tb-css
-              label="{{ 'widget-config.widget-css' | translate }}"
-              formControlName="widgetCss"
-            ></tb-css>
-          </ng-template>
-        </mat-expansion-panel>
-      </div>
-      <div class="tb-form-panel">
-        <div class="tb-form-panel-title" translate>widget-config.card-buttons</div>
-        <mat-slide-toggle class="mat-slide slide-block" formControlName="enableFullscreen">
-          {{ 'widget-config.enable-fullscreen' | translate }}
-        </mat-slide-toggle>
-      </div>
-    </div>
-    <div [class.!hidden]="selectedOption !== 'actions'" [formGroup]="actionsSettings" class="mat-content" style="height: 100%;">
-      <div class="tb-form-panel" style="height: 100%;">
-        <tb-manage-widget-actions
-          [callbacks]="widgetConfigCallbacks"
-          [widgetType] = "modelValue.widgetType"
-          [defaultIconColor]="widgetSettings.get('color').value"
-          [actionSources]="modelValue.actionSources"
-          [additionalWidgetActionTypes]="modelValue.typeParameters?.additionalWidgetActionTypes"
-          formControlName="actions">
-        </tb-manage-widget-actions>
-      </div>
-    </div>
-    <div [class.!hidden]="selectedOption !== 'layout'" [formGroup]="layoutSettings" class="mat-content">
-      <div class="tb-form-panel" *ngIf="!showLayoutConfig || isDefaultBreakpoint">
-        <div class="tb-form-panel-title" translate>widget-config.resize-options</div>
-        <div class="tb-form-row">
-          <mat-slide-toggle class="mat-slide" formControlName="resizable">
-            {{ 'widget-config.resizable' | translate }}
+          <div class="tb-form-row space-between">
+            <div>{{ 'widget-config.padding' | translate }}</div>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+              <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+            </mat-form-field>
+          </div>
+          <div class="tb-form-row space-between">
+            <div>{{ 'widget-config.margin' | translate }}</div>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+              <input matInput formControlName="margin" placeholder="{{ 'widget-config.set' | translate }}">
+            </mat-form-field>
+          </div>
+          <div class="tb-form-row space-between">
+            <div>{{ 'widget-config.border-radius' | translate }}</div>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+              <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
+            </mat-form-field>
+          </div>
+          <mat-slide-toggle class="mat-slide slide-block" formControlName="dropShadow">
+            {{ 'widget-config.drop-shadow' | translate }}
           </mat-slide-toggle>
+          <mat-expansion-panel class="tb-settings">
+            <mat-expansion-panel-header>
+              <mat-panel-description class="flex items-stretch justify-start" translate>
+                widget-config.advanced-widget-style
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+            <ng-template matExpansionPanelContent>
+              <tb-json-object-edit
+                [editorStyle]="{minHeight: '100px'}"
+                label="{{ 'widget-config.widget-style' | translate }}"
+                formControlName="widgetStyle"
+              ></tb-json-object-edit>
+              <tb-css
+                label="{{ 'widget-config.widget-css' | translate }}"
+                formControlName="widgetCss"
+              ></tb-css>
+            </ng-template>
+          </mat-expansion-panel>
         </div>
-        <div class="tb-form-row">
-          <mat-slide-toggle class="mat-slide" formControlName="preserveAspectRatio">
-            {{ 'widget-config.preserve-aspect-ratio' | translate }}
+        <div class="tb-form-panel">
+          <div class="tb-form-panel-title" translate>widget-config.card-buttons</div>
+          <mat-slide-toggle class="mat-slide slide-block" formControlName="enableFullscreen">
+            {{ 'widget-config.enable-fullscreen' | translate }}
           </mat-slide-toggle>
         </div>
       </div>
-      <div class="tb-form-panel" *ngIf="showLayoutConfig">
-        <div class="tb-form-panel-title">{{ (isDefaultBreakpoint ? 'widget-config.mobile' : 'widget-config.list-layout') | translate }}</div>
-        <div class="tb-form-row" *ngIf="isDefaultBreakpoint">
-          <mat-slide-toggle class="mat-slide" formControlName="mobileHide">
-            {{ 'widget-config.mobile-hide' | translate }}
-          </mat-slide-toggle>
-        </div>
-        <div class="tb-form-row" *ngIf="isDefaultBreakpoint">
-          <mat-slide-toggle class="mat-slide" formControlName="desktopHide">
-            {{ 'widget-config.desktop-hide' | translate }}
-          </mat-slide-toggle>
-        </div>
-        <div class="tb-form-row space-between">
-          <div translate>widget-config.order</div>
-          <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-            <input matInput formControlName="mobileOrder" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-        </div>
-        <div class="tb-form-row space-between">
-          <div translate>widget-config.height</div>
-          <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-            <input matInput formControlName="mobileHeight" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
+      <div [class.!hidden]="selectedOption !== 'actions'" [formGroup]="actionsSettings" class="mat-content" style="height: 100%;">
+        <div class="tb-form-panel" style="height: 100%;">
+          <tb-manage-widget-actions
+            [callbacks]="widgetConfigCallbacks"
+            [widgetType] = "modelValue.widgetType"
+            [defaultIconColor]="widgetSettings.get('color').value"
+            [actionSources]="modelValue.actionSources"
+            [additionalWidgetActionTypes]="modelValue.typeParameters?.additionalWidgetActionTypes"
+            formControlName="actions">
+          </tb-manage-widget-actions>
         </div>
       </div>
+      <div [class.!hidden]="selectedOption !== 'layout'" [formGroup]="layoutSettings" class="mat-content">
+        @if (!showLayoutConfig || isDefaultBreakpoint) {
+          <div class="tb-form-panel">
+            <div class="tb-form-panel-title" translate>widget-config.resize-options</div>
+            <div class="tb-form-row">
+              <mat-slide-toggle class="mat-slide" formControlName="resizable">
+                {{ 'widget-config.resizable' | translate }}
+              </mat-slide-toggle>
+            </div>
+            <div class="tb-form-row">
+              <mat-slide-toggle class="mat-slide" formControlName="preserveAspectRatio">
+                {{ 'widget-config.preserve-aspect-ratio' | translate }}
+              </mat-slide-toggle>
+            </div>
+          </div>
+        }
+        @if (showLayoutConfig) {
+          <div class="tb-form-panel">
+            <div class="tb-form-panel-title">{{ (isDefaultBreakpoint ? 'widget-config.mobile' : 'widget-config.list-layout') | translate }}</div>
+            @if (isDefaultBreakpoint) {
+              <div class="tb-form-row">
+                <mat-slide-toggle class="mat-slide" formControlName="mobileHide">
+                  {{ 'widget-config.mobile-hide' | translate }}
+                </mat-slide-toggle>
+              </div>
+            }
+            @if (isDefaultBreakpoint) {
+              <div class="tb-form-row">
+                <mat-slide-toggle class="mat-slide" formControlName="desktopHide">
+                  {{ 'widget-config.desktop-hide' | translate }}
+                </mat-slide-toggle>
+              </div>
+            }
+            <div class="tb-form-row space-between">
+              <div translate>widget-config.order</div>
+              <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+                <input matInput formControlName="mobileOrder" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+              </mat-form-field>
+            </div>
+            <div class="tb-form-row space-between">
+              <div translate>widget-config.height</div>
+              <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+                <input matInput formControlName="mobileHeight" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+              </mat-form-field>
+            </div>
+          </div>
+        }
+      </div>
     </div>
-  </div>
-  <ng-template #basicMode>
+  } @else {
     <div class="tb-widget-config-content">
-      <div class="mat-content" *ngIf="hasBasicModeDirective; else basicModeContent">
-        <ng-container #basicModeContainer></ng-container>
-        <div class="tb-basic-mode-directive-error" *ngIf="basicModeDirectiveError">{{basicModeDirectiveError}}</div>
-      </div>
-      <ng-template #basicModeContent>
+      @if (hasBasicModeDirective) {
+        <div class="mat-content">
+          <ng-container #basicModeContainer></ng-container>
+          @if (basicModeDirectiveError) {
+            <div class="tb-basic-mode-directive-error">{{basicModeDirectiveError}}</div>
+          }
+        </div>
+      } @else {
         <div class="mat-content">
           <ng-container *ngTemplateOutlet="data"></ng-container>
           <ng-container *ngTemplateOutlet="appearance"></ng-container>
@@ -241,98 +259,122 @@
             </tb-widget-actions-panel>
           </ng-container>
         </div>
-      </ng-template>
+      }
     </div>
-  </ng-template>
+  }
   <ng-template #data>
-    <ng-container *ngIf="displayTimewindowConfig" [formGroup]="dataSettings">
-      <tb-timewindow-config-panel
-        [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-        formControlName="timewindowConfig">
-      </tb-timewindow-config-panel>
-    </ng-container>
-    <div *ngIf="widgetType === widgetTypes.alarm" [formGroup]="dataSettings" class="tb-form-panel">
-      <div class="flex flex-row items-center justify-between">
-        <div class="tb-form-panel-title" translate>alarm.filter</div>
-        <button mat-button color="primary"
-                (click)="alarmFilterConfig.reset()">
-          {{ 'action.reset' | translate }}
-        </button>
+    @if (displayTimewindowConfig) {
+      <ng-container [formGroup]="dataSettings">
+        <tb-timewindow-config-panel
+          [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+          formControlName="timewindowConfig">
+        </tb-timewindow-config-panel>
+      </ng-container>
+    }
+    @if (widgetType === widgetTypes.alarm) {
+      <div [formGroup]="dataSettings" class="tb-form-panel">
+        <div class="flex flex-row items-center justify-between">
+          <div class="tb-form-panel-title" translate>alarm.filter</div>
+          <button mat-button color="primary"
+                  (click)="alarmFilterConfig.reset()">
+            {{ 'action.reset' | translate }}
+          </button>
+        </div>
+        <tb-alarm-filter-config #alarmFilterConfig buttonMode="false"
+        formControlName="alarmFilterConfig" [initialAlarmFilterConfig]="{}"></tb-alarm-filter-config>
       </div>
-      <tb-alarm-filter-config #alarmFilterConfig buttonMode="false"
-                              formControlName="alarmFilterConfig" [initialAlarmFilterConfig]="{}"></tb-alarm-filter-config>
-    </div>
-    <div *ngIf="widgetType !== widgetTypes.rpc &&
-                widgetType !== widgetTypes.alarm &&
-                modelValue?.isDataEnabled"
-         [formGroup]="dataSettings">
-      <tb-datasources
-        [configMode]="widgetConfigMode"
-        formControlName="datasources">
-      </tb-datasources>
-    </div>
-    <ng-container *ngIf="widgetType === widgetTypes.rpc &&
-                         modelValue?.isDataEnabled" [formGroup]="targetDeviceSettings">
-      <tb-target-device formControlName="targetDevice">
-      </tb-target-device>
-    </ng-container>
-    <div *ngIf="widgetType === widgetTypes.alarm && modelValue?.isDataEnabled"
-         [formGroup]="dataSettings" class="tb-form-panel">
-      <div class="tb-form-panel-title" translate>widget-config.alarm-source</div>
-      <tb-datasource
-        formControlName="alarmSource">
-      </tb-datasource>
-    </div>
-    <div *ngIf="displayLimits" class="tb-form-panel" [formGroup]="widgetSettings">
-      <div class="tb-form-panel-title" translate>widget-config.limits</div>
-      <div class="tb-form-row space-between column-xs">
-        <div translate>widget-config.data-page-size</div>
-        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-          <input matInput formControlName="pageSize" type="number" min="1" step="1">
-        </mat-form-field>
+    }
+    @if (widgetType !== widgetTypes.rpc &&
+      widgetType !== widgetTypes.alarm &&
+      modelValue?.isDataEnabled) {
+      <div
+        [formGroup]="dataSettings">
+        <tb-datasources
+          [configMode]="widgetConfigMode"
+          formControlName="datasources">
+        </tb-datasources>
       </div>
-    </div>
+    }
+    @if (widgetType === widgetTypes.rpc &&
+      modelValue?.isDataEnabled) {
+      <ng-container [formGroup]="targetDeviceSettings">
+        <tb-target-device formControlName="targetDevice">
+        </tb-target-device>
+      </ng-container>
+    }
+    @if (widgetType === widgetTypes.alarm && modelValue?.isDataEnabled) {
+      <div
+        [formGroup]="dataSettings" class="tb-form-panel">
+        <div class="tb-form-panel-title" translate>widget-config.alarm-source</div>
+        <tb-datasource
+          formControlName="alarmSource">
+        </tb-datasource>
+      </div>
+    }
+    @if (displayLimits) {
+      <div class="tb-form-panel" [formGroup]="widgetSettings">
+        <div class="tb-form-panel-title" translate>widget-config.limits</div>
+        <div class="tb-form-row space-between column-xs">
+          <div translate>widget-config.data-page-size</div>
+          <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+            <input matInput formControlName="pageSize" type="number" min="1" step="1">
+          </mat-form-field>
+        </div>
+      </div>
+    }
   </ng-template>
   <ng-template #appearance>
-    <ng-container *ngIf="!displayData && displayTimewindowConfig" [formGroup]="dataSettings">
-      <tb-timewindow-config-panel
-        [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
-        formControlName="timewindowConfig">
-      </tb-timewindow-config-panel>
-    </ng-container>
-    <div *ngIf="displayAppearanceDataSettings" class="tb-form-panel" [formGroup]="widgetSettings">
-      <div class="tb-form-panel-title" translate>widget-config.data-settings</div>
-      <div *ngIf="displayUnitsConfig" class="tb-form-row space-between">
-        <div tb-hint-tooltip-icon="{{'widget-config.default-data-key-parameter-hint' | translate}}" translate>widget-config.units-by-default</div>
-        <tb-unit-input
-          [supportsUnitConversion]="modelValue.typeParameters.supportsUnitConversion"
-          formControlName="units">
-        </tb-unit-input>
-      </div>
-      <div *ngIf="displayUnitsConfig" class="tb-form-row space-between">
-        <div tb-hint-tooltip-icon="{{'widget-config.default-data-key-parameter-hint' | translate}}" translate>widget-config.decimals-by-default</div>
-        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-          <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+    @if (!displayData && displayTimewindowConfig) {
+      <ng-container [formGroup]="dataSettings">
+        <tb-timewindow-config-panel
+          [onlyHistoryTimewindow]="onlyHistoryTimewindow()"
+          formControlName="timewindowConfig">
+        </tb-timewindow-config-panel>
+      </ng-container>
+    }
+    @if (displayAppearanceDataSettings) {
+      <div class="tb-form-panel" [formGroup]="widgetSettings">
+        <div class="tb-form-panel-title" translate>widget-config.data-settings</div>
+        @if (displayUnitsConfig) {
+          <div class="tb-form-row space-between">
+            <div tb-hint-tooltip-icon="{{'widget-config.default-data-key-parameter-hint' | translate}}" translate>widget-config.units-by-default</div>
+            <tb-unit-input
+              [supportsUnitConversion]="modelValue.typeParameters.supportsUnitConversion"
+              formControlName="units">
+            </tb-unit-input>
+          </div>
+        }
+        @if (displayUnitsConfig) {
+          <div class="tb-form-row space-between">
+            <div tb-hint-tooltip-icon="{{'widget-config.default-data-key-parameter-hint' | translate}}" translate>widget-config.decimals-by-default</div>
+            <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+              <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+            </mat-form-field>
+          </div>
+        }
+        @if (displayNoDataDisplayMessageConfig) {
+          <div class="tb-form-row column-xs">
+            <div class="fixed-title-width" translate>widget-config.no-data-display-message</div>
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+              <input matInput formControlName="noDataDisplayMessage" placeholder="{{ 'widget-config.set-message' | translate }}">
+            </mat-form-field>
+          </div>
+        }
       </div>
-      <div *ngIf="displayNoDataDisplayMessageConfig" class="tb-form-row column-xs">
-        <div class="fixed-title-width" translate>widget-config.no-data-display-message</div>
-        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="noDataDisplayMessage" placeholder="{{ 'widget-config.set-message' | translate }}">
-        </mat-form-field>
+    }
+    @if (displayAdvancedAppearance) {
+      <div style="height: 100%;" [formGroup]="advancedSettings">
+        <tb-widget-settings
+          [aliasController]="aliasController"
+          [callbacks]="widgetConfigCallbacks"
+          [functionsOnly]="functionsOnly"
+          [dashboard]="dashboard"
+          [widget]="widget"
+          [widgetConfig]="modelValue"
+          formControlName="settings">
+        </tb-widget-settings>
       </div>
-    </div>
-    <div *ngIf="displayAdvancedAppearance" style="height: 100%;" [formGroup]="advancedSettings">
-      <tb-widget-settings
-        [aliasController]="aliasController"
-        [callbacks]="widgetConfigCallbacks"
-        [functionsOnly]="functionsOnly"
-        [dashboard]="dashboard"
-        [widget]="widget"
-        [widgetConfig]="modelValue"
-        formControlName="settings">
-      </tb-widget-settings>
-    </div>
+    }
   </ng-template>
 </div>
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
index e182371f2b..69cf1de06a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
@@ -28,15 +28,17 @@
      [class.tb-edit]="isEdit || isEditingWidget"
      [class.tb-hover]="hovered"
      [style]="widget.style">
-  <div *ngIf="!!widgetComponent.widgetContext?.inited"
-       class="tb-widget-header">
-    <ng-container *ngIf="!widgetComponent.widgetContext?.embedTitlePanel">
-      <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
-    </ng-container>
-    <ng-container *ngIf="!widgetComponent.widgetContext?.embedActionsPanel">
-      <ng-container *ngTemplateOutlet="widgetHeaderActionsPanel"></ng-container>
-    </ng-container>
-  </div>
+  @if (!!widgetComponent.widgetContext?.inited) {
+    <div
+      class="tb-widget-header">
+      @if (!widgetComponent.widgetContext?.embedTitlePanel) {
+        <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
+      }
+      @if (!widgetComponent.widgetContext?.embedActionsPanel) {
+        <ng-container *ngTemplateOutlet="widgetHeaderActionsPanel"></ng-container>
+      }
+    </div>
+  }
   <div class="tb-widget-content" [class.tb-no-interaction]="disableWidgetInteraction">
     <tb-widget #widgetComponent
                [dashboardWidget]="widget"
@@ -50,131 +52,150 @@
   </div>
 </div>
 <ng-template #widgetTitlePanel let-titleSuffixTemplate="titleSuffixTemplate">
-  <div *ngIf="widget.showWidgetTitlePanel"
-       class="tb-widget-title">
-              <div *ngIf="widget.showTitle"
-                    [matTooltip]="widget.titleTooltip"
-                    matTooltipClass="tb-tooltip-multiline"
-                    matTooltipPosition="above"
-                    class="title-row">
-                <tb-icon *ngIf="widget.showTitleIcon" [style]="widget.titleIconStyle">{{widget.titleIcon}}</tb-icon>
-                <div class="mat-subtitle-1 title" [style]="widget.titleStyle">
-                  {{widget.title$ | async}}
-                </div>
-                <ng-container *ngTemplateOutlet="titleSuffixTemplate"></ng-container>
-              </div>
-    <tb-timewindow *ngIf="widget.hasTimewindow"
-                   aggregation="{{widget.hasAggregation}}"
-                   quickIntervalOnly="{{widget.onlyQuickInterval}}"
-                   historyOnly="{{widget.onlyHistoryTimewindow}}"
-                   alwaysDisplayTypePrefix
-                   timezone="true"
-                   noMargin
-                   noPadding
-                   [isEdit]="isEdit"
-                   [timewindowStyle]="widget.widget.config.timewindowStyle"
-                   [(ngModel)]="widget.widget.config.timewindow"
-                   (ngModelChange)="widgetComponent.onTimewindowChanged($event)">
-    </tb-timewindow>
-  </div>
+  @if (widget.showWidgetTitlePanel) {
+    <div
+      class="tb-widget-title">
+      @if (widget.showTitle) {
+        <div
+          [matTooltip]="widget.titleTooltip"
+          matTooltipClass="tb-tooltip-multiline"
+          matTooltipPosition="above"
+          class="title-row">
+          @if (widget.showTitleIcon) {
+            <tb-icon [style]="widget.titleIconStyle">{{widget.titleIcon}}</tb-icon>
+          }
+          <div class="mat-subtitle-1 title" [style]="widget.titleStyle">
+            {{widget.title$ | async}}
+          </div>
+          <ng-container *ngTemplateOutlet="titleSuffixTemplate"></ng-container>
+        </div>
+      }
+      @if (widget.hasTimewindow) {
+        <tb-timewindow
+          aggregation="{{widget.hasAggregation}}"
+          quickIntervalOnly="{{widget.onlyQuickInterval}}"
+          historyOnly="{{widget.onlyHistoryTimewindow}}"
+          alwaysDisplayTypePrefix
+          timezone="true"
+          noMargin
+          noPadding
+          [isEdit]="isEdit"
+          [timewindowStyle]="widget.widget.config.timewindowStyle"
+          [(ngModel)]="widget.widget.config.timewindow"
+          (ngModelChange)="widgetComponent.onTimewindowChanged($event)">
+        </tb-timewindow>
+      }
+    </div>
+  }
 </ng-template>
 
 <ng-template #widgetHeaderActionsPanel let-absolute="absolute">
-  <div *ngIf="widget.showWidgetActions"
-       class="tb-widget-actions"
-       [class.tb-widget-actions-absolute]="widgetActionAbsolute(widgetComponent, absolute)"
-       (mousedown)="$event.stopPropagation()">
-    <div class="flex items-center">
-      @for (action of widget.customHeaderActions; track action.name; let last = $last) {
-        <ng-container *ngTemplateOutlet="widgetHeaderActionButton; context:{ action, last }"></ng-container>
+  @if (widget.showWidgetActions) {
+    <div
+      class="tb-widget-actions"
+      [class.tb-widget-actions-absolute]="widgetActionAbsolute(widgetComponent, absolute)"
+      (mousedown)="$event.stopPropagation()">
+      <div class="flex items-center">
+        @for (action of widget.customHeaderActions; track action.name; let last = $last) {
+          <ng-container *ngTemplateOutlet="widgetHeaderActionButton; context:{ action, last }"></ng-container>
+        }
+      </div>
+      @for (action of widget.widgetActions; track action) {
+        <button mat-icon-button
+                type="button"
+                [class.!hidden]="isEdit || !action.show"
+                (click)="action.onAction($event)"
+                matTooltip="{{ action.name | translate }}"
+                matTooltipPosition="above">
+          <tb-icon>{{ action.icon }}</tb-icon>
+        </button>
       }
+      <button mat-icon-button
+              type="button"
+              [class.!hidden]="isEdit || !widget.enableFullscreen"
+              (click)="$event.stopPropagation(); widget.isFullscreen = !widget.isFullscreen; updateEditWidgetActionsTooltipState()"
+              matTooltip="{{(widget.isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
+              matTooltipPosition="above">
+        <tb-icon>{{ widget.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</tb-icon>
+      </button>
     </div>
-
-    <button mat-icon-button *ngFor="let action of widget.widgetActions"
-            type="button"
-            [class.!hidden]="isEdit || !action.show"
-            (click)="action.onAction($event)"
-            matTooltip="{{ action.name | translate }}"
-            matTooltipPosition="above">
-      <tb-icon>{{ action.icon }}</tb-icon>
-    </button>
-    <button mat-icon-button
-            type="button"
-            [class.!hidden]="isEdit || !widget.enableFullscreen"
-            (click)="$event.stopPropagation(); widget.isFullscreen = !widget.isFullscreen; updateEditWidgetActionsTooltipState()"
-            matTooltip="{{(widget.isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
-            matTooltipPosition="above">
-      <tb-icon>{{ widget.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</tb-icon>
-    </button>
-  </div>
+  }
 </ng-template>
 
 <ng-template #widgetHeaderActionButton let-action="action" let-last="last">
-@switch (action.buttonType) {
-  @case (widgetHeaderActionButtonType.miniFab) {
-    <button mat-mini-fab
-            [style]="action.customButtonStyle"
-            [class.!hidden]="isEdit"
-            [class.mr-2]="!last"
-            (click)="action.onAction($event)"
-            matTooltip="{{ action.displayName }}"
-            matTooltipPosition="above">
-      <tb-icon>{{ action.icon }}</tb-icon>
-    </button>
-  }
-  @case (widgetHeaderActionButtonType.basic) {
-    <button [class.!hidden]="isEdit" mat-button
-            [class.mr-2]="!last"
-            [style]="action.customButtonStyle"
-            (click)="action.onAction($event)"
-            matTooltip="{{ action.displayName }}"
-            matTooltipPosition="above">
-      <tb-icon matButtonIcon *ngIf="action.showIcon">{{ action.icon }}</tb-icon>
-      <span>{{ action.displayName }}</span>
-    </button>
-  }
-  @case (widgetHeaderActionButtonType.raised) {
-    <button [class.!hidden]="isEdit" mat-raised-button
-            [class.mr-2]="!last"
-            [style]="action.customButtonStyle"
-            (click)="action.onAction($event)"
-            matTooltip="{{ action.displayName }}"
-            matTooltipPosition="above">
-      <tb-icon matButtonIcon *ngIf="action.showIcon">{{ action.icon }}</tb-icon>
-      <span>{{ action.displayName }}</span>
-    </button>
-  }
-  @case (widgetHeaderActionButtonType.stroked) {
-    <button [class.!hidden]="isEdit" mat-stroked-button
-            [class.mr-2]="!last"
-            [style]="action.customButtonStyle"
-            (click)="action.onAction($event)"
-            matTooltip="{{ action.displayName }}"
-            matTooltipPosition="above">
-      <tb-icon matButtonIcon *ngIf="action.showIcon">{{ action.icon }}</tb-icon>
-      <span>{{ action.displayName }}</span>
-    </button>
-  }
-  @case (widgetHeaderActionButtonType.flat) {
-    <button [class.!hidden]="isEdit" mat-flat-button
-            [class.mr-2]="!last"
-            [style]="action.customButtonStyle"
-            (click)="action.onAction($event)"
-            matTooltip="{{ action.displayName }}"
-            matTooltipPosition="above">
-      <tb-icon matButtonIcon *ngIf="action.showIcon">{{ action.icon }}</tb-icon>
-      <span>{{ action.displayName }}</span>
-    </button>
-  }
-  @default {
-    <button mat-icon-button
-            [style]="action.customButtonStyle"
-            [class.!hidden]="isEdit"
-            (click)="action.onAction($event)"
-            matTooltip="{{ action.displayName }}"
-            matTooltipPosition="above">
-      <tb-icon>{{ action.icon }}</tb-icon>
-    </button>
+  @switch (action.buttonType) {
+    @case (widgetHeaderActionButtonType.miniFab) {
+      <button mat-mini-fab
+              [style]="action.customButtonStyle"
+              [class.!hidden]="isEdit"
+              [class.mr-2]="!last"
+              (click)="action.onAction($event)"
+              matTooltip="{{ action.displayName }}"
+              matTooltipPosition="above">
+        <tb-icon>{{ action.icon }}</tb-icon>
+      </button>
+    }
+    @case (widgetHeaderActionButtonType.basic) {
+      <button [class.!hidden]="isEdit" mat-button
+              [class.mr-2]="!last"
+              [style]="action.customButtonStyle"
+              (click)="action.onAction($event)"
+              matTooltip="{{ action.displayName }}"
+              matTooltipPosition="above">
+        @if (action.showIcon) {
+          <tb-icon matButtonIcon>{{ action.icon }}</tb-icon>
+        }
+        <span>{{ action.displayName }}</span>
+      </button>
+    }
+    @case (widgetHeaderActionButtonType.raised) {
+      <button [class.!hidden]="isEdit" mat-raised-button
+              [class.mr-2]="!last"
+              [style]="action.customButtonStyle"
+              (click)="action.onAction($event)"
+              matTooltip="{{ action.displayName }}"
+              matTooltipPosition="above">
+        @if (action.showIcon) {
+          <tb-icon matButtonIcon>{{ action.icon }}</tb-icon>
+        }
+        <span>{{ action.displayName }}</span>
+      </button>
+    }
+    @case (widgetHeaderActionButtonType.stroked) {
+      <button [class.!hidden]="isEdit" mat-stroked-button
+              [class.mr-2]="!last"
+              [style]="action.customButtonStyle"
+              (click)="action.onAction($event)"
+              matTooltip="{{ action.displayName }}"
+              matTooltipPosition="above">
+        @if (action.showIcon) {
+          <tb-icon matButtonIcon>{{ action.icon }}</tb-icon>
+        }
+        <span>{{ action.displayName }}</span>
+      </button>
+    }
+    @case (widgetHeaderActionButtonType.flat) {
+      <button [class.!hidden]="isEdit" mat-flat-button
+              [class.mr-2]="!last"
+              [style]="action.customButtonStyle"
+              (click)="action.onAction($event)"
+              matTooltip="{{ action.displayName }}"
+              matTooltipPosition="above">
+        @if (action.showIcon) {
+          <tb-icon matButtonIcon>{{ action.icon }}</tb-icon>
+        }
+        <span>{{ action.displayName }}</span>
+      </button>
+    }
+    @default {
+      <button mat-icon-button
+              [style]="action.customButtonStyle"
+              [class.!hidden]="isEdit"
+              (click)="action.onAction($event)"
+              matTooltip="{{ action.displayName }}"
+              matTooltipPosition="above">
+        <tb-icon>{{ action.icon }}</tb-icon>
+      </button>
+    }
   }
-}
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
index 3553ee3ae4..4bdceedf7c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
@@ -397,37 +397,39 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
 @Component({
     template: `
     <div class="tb-widget-action-container">
-      <div class="tb-widget-reference-panel tb-primary-fill" *ngIf="container.widget.isReference">
-        {{ 'widget.reference' | translate }}
-        <button mat-icon-button class="tb-mat-16"
-                color="primary"
-                [class.!hidden]="!container.isEditActionEnabled"
-                (click)="container.onReplaceReferenceWithWidgetCopy($event)"
-                matTooltip="{{ 'widget.replace-reference-with-widget-copy' | translate }}"
-                matTooltipPosition="above">
-          <tb-icon matButtonIcon>mdi:file-replace-outline</tb-icon>
-        </button>
-      </div>
+      @if (container.widget.isReference) {
+        <div class="tb-widget-reference-panel tb-primary-fill">
+          {{ 'widget.reference' | translate }}
+          <button mat-icon-button class="tb-mat-16"
+            color="primary"
+            [class.!hidden]="!container.isEditActionEnabled"
+            (click)="container.onReplaceReferenceWithWidgetCopy($event)"
+            matTooltip="{{ 'widget.replace-reference-with-widget-copy' | translate }}"
+            matTooltipPosition="above">
+            <tb-icon matButtonIcon>mdi:file-replace-outline</tb-icon>
+          </button>
+        </div>
+      }
       <div class="tb-widget-actions-panel">
         <button mat-icon-button class="tb-mat-20"
-                [class.!hidden]="!container.isEditActionEnabled"
-                (click)="container.onEdit($event)"
-                matTooltip="{{ 'widget.edit' | translate }}"
-                matTooltipPosition="above">
+          [class.!hidden]="!container.isEditActionEnabled"
+          (click)="container.onEdit($event)"
+          matTooltip="{{ 'widget.edit' | translate }}"
+          matTooltipPosition="above">
           <tb-icon>edit</tb-icon>
         </button>
         <button mat-icon-button class="tb-mat-20"
-                [class.!hidden]="!container.isExportActionEnabled"
-                (click)="container.onExport($event)"
-                matTooltip="{{ 'widget.export' | translate }}"
-                matTooltipPosition="above">
+          [class.!hidden]="!container.isExportActionEnabled"
+          (click)="container.onExport($event)"
+          matTooltip="{{ 'widget.export' | translate }}"
+          matTooltipPosition="above">
           <tb-icon>file_download</tb-icon>
         </button>
         <button mat-icon-button class="tb-mat-20"
-                [class.!hidden]="!container.isRemoveActionEnabled"
-                (click)="container.onRemove($event);"
-                matTooltip="{{ 'widget.remove' | translate }}"
-                matTooltipPosition="above">
+          [class.!hidden]="!container.isRemoveActionEnabled"
+          (click)="container.onRemove($event);"
+          matTooltip="{{ 'widget.remove' | translate }}"
+          matTooltipPosition="above">
           <tb-icon>close</tb-icon>
         </button>
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.html b/ui-ngx/src/app/modules/home/components/widget/widget.component.html
index b0dbb95937..c66578afac 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.html
@@ -21,13 +21,17 @@
     <ng-container #widgetContent></ng-container>
   </div>
 </div>
-<div class="tb-absolute-fill tb-widget-error" *ngIf="widgetErrorData">
+@if (widgetErrorData) {
+  <div class="tb-absolute-fill tb-widget-error">
   <span [innerHtml]="('Widget Error:<br/><br/>' + widgetErrorData.message) | safe:'html'"></span>
 </div>
-<div class="tb-absolute-fill tb-widget-no-data" *ngIf="displayNoData">
-  <span style="display: flex;"
-        class="tb-absolute-fill flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
-</div>
+}
+@if (displayNoData) {
+  <div class="tb-absolute-fill tb-widget-no-data">
+    <span style="display: flex;"
+    class="tb-absolute-fill flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
+  </div>
+}
 <div class="tb-absolute-fill tb-widget-loading flex flex-col items-center justify-center" [class.!hidden]="!loadingData">
   <mat-spinner color="accent" mode="indeterminate" diameter="40"></mat-spinner>
 </div>
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
index 06f99fc498..c397f8b1a0 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
       <span>{{ assignToCustomerText | translate }}</span>
@@ -35,7 +38,7 @@
         formControlName="entityIds"
         required
         [entityType]="entityType"
-      >
+        >
       </tb-entity-list>
     </fieldset>
   </div>
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
index 6a4be4aeb4..599b217e61 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
       <span>{{ assignToEdgeText | translate }}</span>
diff --git a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
index 4af3aa07a1..1e105ff86a 100644
--- a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
       <div style="padding-bottom: 0.5em;">{{ assignToCustomerText | translate }}</div>
diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html
index 690c1f344c..81d0ae2e6d 100644
--- a/ui-ngx/src/app/modules/home/home.component.html
+++ b/ui-ngx/src/app/modules/home/home.component.html
@@ -51,8 +51,8 @@
           <mat-icon class="material-icons">arrow_back</mat-icon>
         </button>
         <tb-breadcrumb
-            [class.!hidden]="displaySearchMode()"
-            class="mat-toolbar-tools flex-1">
+          [class.!hidden]="displaySearchMode()"
+          class="mat-toolbar-tools flex-1">
         </tb-breadcrumb>
         <div [class.!hidden]="!displaySearchMode()" class="tb-dark flex flex-1 flex-row">
           <mat-form-field class="tb-appearance-transparent flex-1">
@@ -66,18 +66,22 @@
                 mat-icon-button (click)="openSearch()">
           <mat-icon class="material-icons">search</mat-icon>
         </button>
-        <button *ngIf="fullscreenEnabled"
-                [class.!hidden]="displaySearchMode()"
-                class="lt-md:!hidden"
-                mat-icon-button (click)="toggleFullscreen()">
-          <mat-icon class="material-icons">{{ isFullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
-        </button>
+        @if (fullscreenEnabled) {
+          <button
+            [class.!hidden]="displaySearchMode()"
+            class="lt-md:!hidden"
+            mat-icon-button (click)="toggleFullscreen()">
+            <mat-icon class="material-icons">{{ isFullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+          </button>
+        }
         <tb-notification-bell></tb-notification-bell>
         <tb-user-menu [displayUserInfo]="!displaySearchMode()"></tb-user-menu>
       </mat-toolbar>
-      <mat-progress-bar color="warn" style="z-index: 10; margin-bottom: -4px; width: 100%;" mode="indeterminate"
-                        *ngIf="!hideLoadingBar && (isLoading$ | async)">
-      </mat-progress-bar>
+      @if (!hideLoadingBar && (isLoading$ | async)) {
+        <mat-progress-bar color="warn" style="z-index: 10; margin-bottom: -4px; width: 100%;" mode="indeterminate"
+                          >
+        </mat-progress-bar>
+      }
       <div tb-toast class="tb-main-content flex flex-1 flex-col">
         <router-outlet (activate)="activeComponentChanged($event)"></router-outlet>
       </div>
diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.html b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
index 3d3823d12a..70ea95a05f 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-link.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
@@ -16,6 +16,8 @@
 
 -->
 <a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}" routerLink="{{section.path}}">
-  <tb-icon matButtonIcon *ngIf="section.icon !== null">{{section.icon}}</tb-icon>
+  @if (section.icon !== null) {
+    <tb-icon matButtonIcon>{{section.icon}}</tb-icon>
+  }
   <span>{{section.customTranslate ? (section.name | customTranslate) : (section.name | translate)}}</span>
 </a>
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
index 31753751af..ce475363df 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
@@ -16,13 +16,17 @@
 
 -->
 <a mat-button class="tb-button-toggle" (click)="toggleSection($event)">
-  <tb-icon matButtonIcon *ngIf="section.icon !== null">{{section.icon}}</tb-icon>
+  @if (section.icon !== null) {
+    <tb-icon matButtonIcon>{{section.icon}}</tb-icon>
+  }
   <span>{{section.customTranslate ? (section.name | customTranslate) : (section.name | translate)}}</span>
   <span class="pull-right fa fa-chevron-down tb-toggle-icon"
-        [class.tb-toggled]="section.opened"></span>
+  [class.tb-toggled]="section.opened"></span>
 </a>
 <ul id="docs-menu-{{section.name | nospace}}" class="tb-menu-toggle-list" [style.height]="sectionHeight()">
-  <li *ngFor="let page of section.pages; trackBy: trackBySectionPages">
-    <tb-menu-link [section]="page"></tb-menu-link>
-  </li>
+  @for (page of section.pages; track trackBySectionPages($index, page)) {
+    <li>
+      <tb-menu-link [section]="page"></tb-menu-link>
+    </li>
+  }
 </ul>
diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.html b/ui-ngx/src/app/modules/home/menu/side-menu.component.html
index 0921a59f14..34304319ae 100644
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.html
+++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.html
@@ -16,8 +16,16 @@
 
 -->
 <ul class="tb-side-menu flex flex-col items-stretch justify-start">
-  <li *ngFor="let section of menuSections$ | async; trackBy: trackByMenuSection" [ngSwitch]="section.type === 'link'">
-    <tb-menu-link *ngSwitchCase="true" [section]="section"></tb-menu-link>
-    <tb-menu-toggle *ngSwitchCase="false" [section]="section"></tb-menu-toggle>
-  </li>
+  @for (section of menuSections$ | async; track trackByMenuSection($index, section)) {
+    <li>
+      @switch (section.type === 'link') {
+        @case (true) {
+          <tb-menu-link [section]="section"></tb-menu-link>
+        }
+        @case (false) {
+          <tb-menu-toggle [section]="section"></tb-menu-toggle>
+        }
+      }
+    </li>
+  }
 </ul>
diff --git a/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts b/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
index 336ac035da..f870150e32 100644
--- a/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
+++ b/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
@@ -51,6 +51,9 @@ export type HeaderCellStyleFunction<T extends BaseData<HasId>> = (key: string) =
 export type CellStyleFunction<T extends BaseData<HasId>> = (entity: T, key: string) => object;
 export type CopyCellContent<T extends BaseData<HasId>> = (entity: T, key: string, length: number) => object;
 
+export type EntityColumnsType = Array<Partial<EntityTableColumn<BaseData<HasId>> & EntityLinkTableColumn<BaseData<HasId>> & EntityChipsEntityTableColumn<BaseData<HasId>>>>;
+export type EntityColumnType = Partial<EntityTableColumn<BaseData<HasId>> & EntityLinkTableColumn<BaseData<HasId>> & EntityChipsEntityTableColumn<BaseData<HasId>>>;
+
 export enum CellActionDescriptorType { 'DEFAULT', 'COPY_BUTTON'}
 
 export interface CellActionDescriptor<T extends BaseData<HasId>> {
diff --git a/ui-ngx/src/app/modules/home/models/entity/entity-table-component.models.ts b/ui-ngx/src/app/modules/home/models/entity/entity-table-component.models.ts
index 02f120f26f..e913e2bd71 100644
--- a/ui-ngx/src/app/modules/home/models/entity/entity-table-component.models.ts
+++ b/ui-ngx/src/app/modules/home/models/entity/entity-table-component.models.ts
@@ -29,6 +29,7 @@ import {
   CellActionDescriptor,
   EntityActionTableColumn,
   EntityColumn,
+  EntityColumnsType,
   EntityTableColumn,
   EntityTableConfig,
   GroupActionDescriptor,
@@ -46,7 +47,7 @@ export interface IEntitiesTableComponent {
   groupActionDescriptors: Array<GroupActionDescriptor<BaseData<HasId>>>;
   cellActionDescriptors: Array<CellActionDescriptor<BaseData<HasId>>>;
   actionColumns: Array<EntityActionTableColumn<BaseData<HasId>>>;
-  entityColumns: Array<EntityTableColumn<BaseData<HasId>>>;
+  entityColumns: EntityColumnsType;
   displayedColumns: string[];
   headerCellStyleCache: Array<any>;
   cellContentCache: Array<SafeHtml>;
diff --git a/ui-ngx/src/app/modules/home/pages/admin/auto-commit-admin-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/auto-commit-admin-settings.component.html
index c18d59a5c8..9948f20cf7 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/auto-commit-admin-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/auto-commit-admin-settings.component.html
@@ -15,9 +15,10 @@
     limitations under the License.
 
 -->
-<tb-repository-settings #repositorySettingsComponent
-                        *ngIf="!(hasRepository$ | async); else autoCommitSettings">
-</tb-repository-settings>
-<ng-template #autoCommitSettings>
+@if (!(hasRepository$ | async)) {
+  <tb-repository-settings #repositorySettingsComponent
+                          >
+  </tb-repository-settings>
+} @else {
   <tb-auto-commit-settings #autoCommitSettingsComponent></tb-auto-commit-settings>
-</ng-template>
+}
diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
index 4b122194e8..e6dc6b74b9 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
@@ -23,9 +23,12 @@
       </div>
     </mat-card-title>
   </mat-card-header>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <mat-card-content>
     <form [formGroup]="generalSettings" (ngSubmit)="save()" class="tb-form-panel no-border no-padding">
       <fieldset [disabled]="isLoading$ | async">
@@ -33,9 +36,11 @@
           <mat-form-field class="mat-block">
             <mat-label translate>admin.base-url</mat-label>
             <input matInput formControlName="baseUrl" required/>
-            <mat-error *ngIf="generalSettings.get('baseUrl').hasError('required')">
-              {{ 'admin.base-url-required' | translate }}
-            </mat-error>
+            @if (generalSettings.get('baseUrl').hasError('required')) {
+              <mat-error>
+                {{ 'admin.base-url-required' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
           <div class="tb-form-row" tb-hint-tooltip-icon="{{ 'admin.prohibit-different-url-hint' | translate }}">
             <mat-slide-toggle class="mat-slide margin" formControlName="prohibitDifferentUrl">
@@ -63,9 +68,12 @@
       <div class="mat-headline-5" translate>admin.device-connectivity.device-connectivity</div>
     </mat-card-title>
   </mat-card-header>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <mat-card-content>
     <section class="tb-form-panel no-border no-padding">
       <div class="tb-form-panel no-border no-padding toggle-group">
@@ -78,18 +86,18 @@
       </div>
       <form [formGroup]="deviceConnectivitySettingsForm" (ngSubmit)="saveDeviceConnectivitySettings()"
             class="tb-form-panel no-border no-padding">
-        <ng-container *ngIf="protocol === 'http'">
+        @if (protocol === 'http') {
           <ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol}"></ng-container>
           <ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol + 's'}"></ng-container>
-        </ng-container>
-        <ng-container *ngIf="protocol === 'mqtt'">
+        }
+        @if (protocol === 'mqtt') {
           <ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol}"></ng-container>
           <ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol + 's'}"></ng-container>
-        </ng-container>
-        <ng-container *ngIf="protocol === 'coap'">
+        }
+        @if (protocol === 'coap') {
           <ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol}"></ng-container>
           <ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol + 's'}"></ng-container>
-        </ng-container>
+        }
         <ng-template #connectivitySettings let-protocol="protocol">
           <div class="tb-form-panel stroked no-padding-bottom" [formGroupName]="protocol">
             <mat-slide-toggle class="mat-slide" formControlName="enabled">
@@ -103,13 +111,17 @@
               <mat-form-field class="flex-1">
                 <mat-label translate>admin.device-connectivity.port</mat-label>
                 <input matInput type="number" min="0" max="65535" formControlName="port"/>
-                <mat-error *ngIf="deviceConnectivitySettingsForm.get(protocol + '.port').hasError('pattern')">
-                  {{ 'admin.device-connectivity.port-pattern' | translate }}
-                </mat-error>
-                <mat-error *ngIf="deviceConnectivitySettingsForm.get(protocol + '.port').hasError('min') ||
-                       deviceConnectivitySettingsForm.get(protocol + '.port').hasError('max')">
-                  {{ 'admin.device-connectivity.port-range' | translate }}
-                </mat-error>
+                @if (deviceConnectivitySettingsForm.get(protocol + '.port').hasError('pattern')) {
+                  <mat-error>
+                    {{ 'admin.device-connectivity.port-pattern' | translate }}
+                  </mat-error>
+                }
+                @if (deviceConnectivitySettingsForm.get(protocol + '.port').hasError('min') ||
+                  deviceConnectivitySettingsForm.get(protocol + '.port').hasError('max')) {
+                  <mat-error>
+                    {{ 'admin.device-connectivity.port-range' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             </div>
           </div>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
index 9ebfd0369b..a653845ca3 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
@@ -22,9 +22,13 @@
         <span class="mat-headline-5" translate>admin.home-settings</span>
       </mat-card-title>
     </mat-card-header>
-    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-    </mat-progress-bar>
-    <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
+    @if (isLoading$ | async) {
+      <mat-progress-bar color="warn" mode="indeterminate">
+      </mat-progress-bar>
+    }
+    @if ((isLoading$ | async) === false) {
+      <div style="height: 4px;"></div>
+    }
     <mat-card-content style="padding-top: 16px;">
       <form [formGroup]="homeSettings" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
index 2ba7adda3b..cea12d5ef8 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
@@ -24,26 +24,34 @@
       <span class="flex-1"></span>
       <div tb-help="outgoingMailSettings"></div>
     </mat-card-header>
-    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-    </mat-progress-bar>
-    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+    @if (isLoading$ | async) {
+      <mat-progress-bar color="warn" mode="indeterminate">
+      </mat-progress-bar>
+    }
+    @if (!(isLoading$ | async)) {
+      <div style="height: 4px;"></div>
+    }
     <mat-card-content style="padding-top: 16px;">
       <form [formGroup]="mailSettings" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
           <mat-form-field class="mat-block">
             <mat-label translate>admin.mail-from</mat-label>
             <input matInput formControlName="mailFrom" required/>
-            <mat-error *ngIf="mailSettings.get('mailFrom').hasError('required')">
-              {{ 'admin.mail-from-required' | translate }}
-            </mat-error>
+            @if (mailSettings.get('mailFrom').hasError('required')) {
+              <mat-error>
+                {{ 'admin.mail-from-required' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="mat-block">
             <mat-label translate>admin.oauth2.smtp-provider</mat-label>
             <mat-select formControlName="providerId">
-              <mat-option *ngFor="let provider of templateProvider" [value]="provider">
-                {{ templates.get(provider)?.name || 'Custom' }}
-              </mat-option>
+              @for (provider of templateProvider; track provider) {
+                <mat-option [value]="provider">
+                  {{ templates.get(provider)?.name || 'Custom' }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
 
@@ -57,90 +65,114 @@
               <mat-form-field class="mat-block">
                 <mat-label translate>admin.smtp-protocol</mat-label>
                 <mat-select formControlName="smtpProtocol">
-                  <mat-option *ngFor="let protocol of smtpProtocols" [value]="protocol">
-                    {{protocol.toUpperCase()}}
-                  </mat-option>
+                  @for (protocol of smtpProtocols; track protocol) {
+                    <mat-option [value]="protocol">
+                      {{protocol.toUpperCase()}}
+                    </mat-option>
+                  }
                 </mat-select>
               </mat-form-field>
               <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2.5">
                 <mat-form-field class="mat-block flex-full gt-sm:max-w-60%">
                   <mat-label translate>admin.smtp-host</mat-label>
                   <input matInput formControlName="smtpHost" placeholder="localhost" required/>
-                  <mat-error *ngIf="mailSettings.get('smtpHost').hasError('required')">
-                    {{ 'admin.smtp-host-required' | translate }}
-                  </mat-error>
+                  @if (mailSettings.get('smtpHost').hasError('required')) {
+                    <mat-error>
+                      {{ 'admin.smtp-host-required' | translate }}
+                    </mat-error>
+                  }
                 </mat-form-field>
                 <mat-form-field class="mat-block flex-full gt-sm:max-w-40%">
                   <mat-label translate>admin.smtp-port</mat-label>
                   <input matInput #smtpPortInput formControlName="smtpPort" placeholder="25" maxlength="5" required/>
                   <mat-hint align="end">{{smtpPortInput.value?.length || 0}}/5</mat-hint>
-                  <mat-error *ngIf="mailSettings.get('smtpPort').hasError('required')">
-                    {{ 'admin.smtp-port-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="mailSettings.get('smtpPort').hasError('pattern') || mailSettings.get('smtpPort').hasError('maxlength')">
-                    {{ 'admin.smtp-port-invalid' | translate }}
-                  </mat-error>
+                  @if (mailSettings.get('smtpPort').hasError('required')) {
+                    <mat-error>
+                      {{ 'admin.smtp-port-required' | translate }}
+                    </mat-error>
+                  }
+                  @if (mailSettings.get('smtpPort').hasError('pattern') || mailSettings.get('smtpPort').hasError('maxlength')) {
+                    <mat-error>
+                      {{ 'admin.smtp-port-invalid' | translate }}
+                    </mat-error>
+                  }
                 </mat-form-field>
               </div>
               <mat-form-field class="mat-block">
                 <mat-label translate>admin.timeout-msec</mat-label>
                 <input matInput #timeoutInput formControlName="timeout" placeholder="10000" maxlength="6" required/>
                 <mat-hint align="end">{{timeoutInput.value?.length || 0}}/6</mat-hint>
-                <mat-error *ngIf="mailSettings.get('timeout').hasError('required')">
-                  {{ 'admin.timeout-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="mailSettings.get('timeout').hasError('pattern') || mailSettings.get('timeout').hasError('maxlength')">
-                  {{ 'admin.timeout-invalid' | translate }}
-                </mat-error>
+                @if (mailSettings.get('timeout').hasError('required')) {
+                  <mat-error>
+                    {{ 'admin.timeout-required' | translate }}
+                  </mat-error>
+                }
+                @if (mailSettings.get('timeout').hasError('pattern') || mailSettings.get('timeout').hasError('maxlength')) {
+                  <mat-error>
+                    {{ 'admin.timeout-invalid' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
               <mat-slide-toggle class="flex-1" formControlName="enableTls" style="display: block; padding-bottom: 22px;">
                 {{ 'admin.enable-tls' | translate }}
               </mat-slide-toggle>
-              <mat-form-field class="mat-block flex-1" *ngIf="mailSettings.get('enableTls').value">
-                <mat-label translate>admin.tls-version</mat-label>
-                <mat-select formControlName="tlsVersion">
-                  <mat-option *ngFor="let tlsVersion of tlsVersions" [value]="tlsVersion">
-                    {{ tlsVersion }}
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
+              @if (mailSettings.get('enableTls').value) {
+                <mat-form-field class="mat-block flex-1">
+                  <mat-label translate>admin.tls-version</mat-label>
+                  <mat-select formControlName="tlsVersion">
+                    @for (tlsVersion of tlsVersions; track tlsVersion) {
+                      <mat-option [value]="tlsVersion">
+                        {{ tlsVersion }}
+                      </mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              }
               <mat-slide-toggle formControlName="enableProxy" style="display: block; padding-bottom: 22px;">
                 {{ 'admin.enable-proxy' | translate }}
               </mat-slide-toggle>
-              <div *ngIf="mailSettings.get('enableProxy').value">
-                <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
-                  <mat-form-field class="mat-block flex-full gt-sm:max-w-60%">
-                    <mat-label translate>admin.proxy-host</mat-label>
-                    <input matInput required formControlName="proxyHost">
-                    <mat-error *ngIf="mailSettings.get('proxyHost').hasError('required')">
-                      {{ 'admin.proxy-host-required' | translate }}
-                    </mat-error>
-                  </mat-form-field>
-                  <mat-form-field class="mat-block flex-full gt-sm:max-w-40%">
-                    <mat-label translate>admin.proxy-port</mat-label>
-                    <input matInput required formControlName="proxyPort" type="number" step="1" min="1" max="65535">
-                    <mat-error *ngIf="mailSettings.get('proxyPort').hasError('required')">
-                      {{ 'admin.proxy-port-required' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="mailSettings.get('proxyPort').hasError('pattern')
-                  || mailSettings.get('proxyPort').hasError('min')
-                  || mailSettings.get('proxyPort').hasError('max')">
-                      {{ 'admin.proxy-port-range' | translate }}
-                    </mat-error>
-                  </mat-form-field>
-                </div>
-                <div class="flex flex-row xs:flex-col gt-xs:gap-2">
-                  <mat-form-field class="mat-block flex-1">
-                    <mat-label translate>admin.proxy-user</mat-label>
-                    <input matInput formControlName="proxyUser">
-                  </mat-form-field>
-                  <mat-form-field class="mat-block flex-1">
-                    <mat-label translate>admin.proxy-password</mat-label>
-                    <input matInput type="password" formControlName="proxyPassword" autocomplete="new-password">
-                    <tb-toggle-password matSuffix></tb-toggle-password>
-                  </mat-form-field>
+              @if (mailSettings.get('enableProxy').value) {
+                <div>
+                  <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
+                    <mat-form-field class="mat-block flex-full gt-sm:max-w-60%">
+                      <mat-label translate>admin.proxy-host</mat-label>
+                      <input matInput required formControlName="proxyHost">
+                      @if (mailSettings.get('proxyHost').hasError('required')) {
+                        <mat-error>
+                          {{ 'admin.proxy-host-required' | translate }}
+                        </mat-error>
+                      }
+                    </mat-form-field>
+                    <mat-form-field class="mat-block flex-full gt-sm:max-w-40%">
+                      <mat-label translate>admin.proxy-port</mat-label>
+                      <input matInput required formControlName="proxyPort" type="number" step="1" min="1" max="65535">
+                      @if (mailSettings.get('proxyPort').hasError('required')) {
+                        <mat-error>
+                          {{ 'admin.proxy-port-required' | translate }}
+                        </mat-error>
+                      }
+                      @if (mailSettings.get('proxyPort').hasError('pattern')
+                        || mailSettings.get('proxyPort').hasError('min')
+                        || mailSettings.get('proxyPort').hasError('max')) {
+                        <mat-error>
+                          {{ 'admin.proxy-port-range' | translate }}
+                        </mat-error>
+                      }
+                    </mat-form-field>
+                  </div>
+                  <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                    <mat-form-field class="mat-block flex-1">
+                      <mat-label translate>admin.proxy-user</mat-label>
+                      <input matInput formControlName="proxyUser">
+                    </mat-form-field>
+                    <mat-form-field class="mat-block flex-1">
+                      <mat-label translate>admin.proxy-password</mat-label>
+                      <input matInput type="password" formControlName="proxyPassword" autocomplete="new-password">
+                      <tb-toggle-password matSuffix></tb-toggle-password>
+                    </mat-form-field>
+                  </div>
                 </div>
-              </div>
+              }
             </ng-template>
           </mat-expansion-panel>
 
@@ -156,161 +188,196 @@
                 <tb-toggle-option [value]=false>{{ 'admin.oauth2.basic' | translate }}</tb-toggle-option>
                 <tb-toggle-option [value]=true>{{ 'admin.oauth2.oauth2' | translate }}</tb-toggle-option>
               </tb-toggle-select>
-              <div class="details-buttons" *ngIf="helpLink && mailSettings.get('enableOauth2').value">
-                <div [tb-help]="helpLink"></div>
-              </div>
+              @if (helpLink && mailSettings.get('enableOauth2').value) {
+                <div class="details-buttons">
+                  <div [tb-help]="helpLink"></div>
+                </div>
+              }
             </div>
-            <section *ngIf="!mailSettings.get('enableOauth2').value">
-              <mat-checkbox *ngIf="showChangePassword" formControlName="changePassword" style="padding-bottom: 16px;">
-                {{ 'admin.change-password' | translate }}
-              </mat-checkbox>
-              <mat-form-field class="mat-block" *ngIf="mailSettings.get('changePassword').value || !showChangePassword">
-                <mat-label translate>common.password</mat-label>
-                <input matInput formControlName="password" type="password"
-                       placeholder="{{ 'common.enter-password' | translate }}" autocomplete="new-password"/>
-                <tb-toggle-password matSuffix></tb-toggle-password>
-              </mat-form-field>
-            </section>
-            <section *ngIf="mailSettings.get('enableOauth2').value">
-              <div class="flex flex-row xs:flex-col gt-xs:gap-2">
-                <mat-form-field class="mat-block flex-1">
-                  <mat-label translate>admin.oauth2.client-id</mat-label>
-                  <input matInput formControlName="clientId" required>
-                  <mat-error *ngIf="mailSettings.get('clientId').hasError('required')">
-                    {{ 'admin.oauth2.client-id-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="mailSettings.get('clientId').hasError('maxlen gth')">
-                    {{ 'admin.oauth2.client-id-max-length' | translate }}
-                  </mat-error>
-                </mat-form-field>
-
-                <mat-form-field class="mat-block flex-1">
-                  <mat-label translate>admin.oauth2.client-secret</mat-label>
-                  <input matInput formControlName="clientSecret" required>
-                  <mat-error *ngIf="mailSettings.get('clientSecret').hasError('required')">
-                    {{ 'admin.oauth2.client-secret-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="mailSettings.get('clientSecret').hasError('maxlength')">
-                    {{ 'admin.oauth2.client-secret-max-length' | translate }}
-                  </mat-error>
-                </mat-form-field>
-              </div>
-
-              <mat-form-field class="mat-block flex-1" *ngIf="mailSettings.get('providerId').value === mailServerOauth2Provider.OFFICE_365">
-                <mat-label translate>admin.oauth2.microsoft-tenant-id</mat-label>
-                <input matInput formControlName="providerTenantId" required>
-                <mat-error *ngIf="mailSettings.get('providerTenantId').hasError('required')">
-                  {{ 'admin.oauth2.microsoft-tenant-id-required' | translate }}
-                </mat-error>
-              </mat-form-field>
-              <mat-expansion-panel class="mat-elevation-z0" [expanded]="mailSettings.get('providerId').value === mailServerOauth2Provider.CUSTOM">
-                <mat-expansion-panel-header>
-                  <mat-panel-description class="flex items-stretch justify-end" translate>
-                    tenant-profile.advanced-settings
-                  </mat-panel-description>
-                </mat-expansion-panel-header>
-                <ng-template matExpansionPanelContent>
-                  <div class="flex flex-row xs:flex-col gt-xs:gap-2">
-                    <mat-form-field class="mat-block flex-1">
-                      <mat-label translate>admin.oauth2.authorization-uri</mat-label>
-                      <input matInput formControlName="authUri" required>
-                      <button mat-icon-button matSuffix
-                              type="button"
-                              (click)="toggleEditMode('authUri')">
-                        <mat-icon class="material-icons">create</mat-icon>
-                      </button>
-                      <mat-error *ngIf="mailSettings.get('authUri').hasError('required')">
-                        {{ 'admin.oauth2.access-token-uri-required' | translate }}
+            @if (!mailSettings.get('enableOauth2').value) {
+              <section>
+                @if (showChangePassword) {
+                  <mat-checkbox formControlName="changePassword" style="padding-bottom: 16px;">
+                    {{ 'admin.change-password' | translate }}
+                  </mat-checkbox>
+                }
+                @if (mailSettings.get('changePassword').value || !showChangePassword) {
+                  <mat-form-field class="mat-block">
+                    <mat-label translate>common.password</mat-label>
+                    <input matInput formControlName="password" type="password"
+                           placeholder="{{ 'common.enter-password' | translate }}" autocomplete="new-password"/>
+                    <tb-toggle-password matSuffix></tb-toggle-password>
+                  </mat-form-field>
+                }
+              </section>
+            }
+            @if (mailSettings.get('enableOauth2').value) {
+              <section>
+                <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                  <mat-form-field class="mat-block flex-1">
+                    <mat-label translate>admin.oauth2.client-id</mat-label>
+                    <input matInput formControlName="clientId" required>
+                    @if (mailSettings.get('clientId').hasError('required')) {
+                      <mat-error>
+                        {{ 'admin.oauth2.client-id-required' | translate }}
                       </mat-error>
-                      <mat-error *ngIf="mailSettings.get('authUri').hasError('pattern')">
-                        {{ 'admin.oauth2.uri-pattern-error' | translate }}
+                    }
+                    @if (mailSettings.get('clientId').hasError('maxlen gth')) {
+                      <mat-error>
+                        {{ 'admin.oauth2.client-id-max-length' | translate }}
                       </mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field class="mat-block flex-1">
-                      <mat-label translate>admin.oauth2.token-uri</mat-label>
-                      <input matInput formControlName="tokenUri" required>
-                      <button mat-icon-button matSuffix
-                              type="button"
-                              (click)="toggleEditMode('tokenUri')">
-                        <mat-icon class="material-icons">create</mat-icon>
-                      </button>
-                      <mat-error *ngIf="mailSettings.get('tokenUri').hasError('required')">
-                        {{ 'admin.oauth2.access-token-uri-required' | translate }}
+                    }
+                  </mat-form-field>
+                  <mat-form-field class="mat-block flex-1">
+                    <mat-label translate>admin.oauth2.client-secret</mat-label>
+                    <input matInput formControlName="clientSecret" required>
+                    @if (mailSettings.get('clientSecret').hasError('required')) {
+                      <mat-error>
+                        {{ 'admin.oauth2.client-secret-required' | translate }}
                       </mat-error>
-                      <mat-error *ngIf="mailSettings.get('tokenUri').hasError('pattern')">
-                        {{ 'admin.oauth2.uri-pattern-error' | translate }}
+                    }
+                    @if (mailSettings.get('clientSecret').hasError('maxlength')) {
+                      <mat-error>
+                        {{ 'admin.oauth2.client-secret-max-length' | translate }}
                       </mat-error>
-                    </mat-form-field>
-                  </div>
-                  <tb-string-items-list
-                    formControlName="scope" required
-                    label="{{ 'admin.oauth2.scope' | translate }}"
-                    requiredText="{{ 'admin.oauth2.scope-required' | translate }}">
-                  </tb-string-items-list>
-                </ng-template>
-              </mat-expansion-panel>
-
-              <fieldset class="fields-group flex flex-col">
-                <legend class="group-title" translate>admin.oauth2.redirect-uri</legend>
-                <div class="flex flex-1 flex-row gap-2 xs:flex-col">
-                  <div class="flex flex-col sm:max-w-60% sm:flex-full gt-sm:max-w-50% gt-sm:flex-full" [formGroup]="domainForm">
-                    <div class="flex flex-row gap-2 xs:flex-col md:flex-col md:gap-0">
-                      <mat-form-field class="mat-block max-w-30% flex-full xs:max-w-full xs:flex-1 md:max-w-full md:flex-1">
-                        <mat-label translate>admin.oauth2.protocol</mat-label>
-                        <mat-select formControlName="scheme">
-                          <mat-option *ngFor="let protocol of protocols" [value]="protocol">
-                            {{ domainSchemaTranslations.get(protocol) | translate | uppercase }}
-                          </mat-option>
-                        </mat-select>
+                    }
+                  </mat-form-field>
+                </div>
+                @if (mailSettings.get('providerId').value === mailServerOauth2Provider.OFFICE_365) {
+                  <mat-form-field class="mat-block flex-1">
+                    <mat-label translate>admin.oauth2.microsoft-tenant-id</mat-label>
+                    <input matInput formControlName="providerTenantId" required>
+                    @if (mailSettings.get('providerTenantId').hasError('required')) {
+                      <mat-error>
+                        {{ 'admin.oauth2.microsoft-tenant-id-required' | translate }}
+                      </mat-error>
+                    }
+                  </mat-form-field>
+                }
+                <mat-expansion-panel class="mat-elevation-z0" [expanded]="mailSettings.get('providerId').value === mailServerOauth2Provider.CUSTOM">
+                  <mat-expansion-panel-header>
+                    <mat-panel-description class="flex items-stretch justify-end" translate>
+                      tenant-profile.advanced-settings
+                    </mat-panel-description>
+                  </mat-expansion-panel-header>
+                  <ng-template matExpansionPanelContent>
+                    <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                      <mat-form-field class="mat-block flex-1">
+                        <mat-label translate>admin.oauth2.authorization-uri</mat-label>
+                        <input matInput formControlName="authUri" required>
+                        <button mat-icon-button matSuffix
+                                type="button"
+                                (click)="toggleEditMode('authUri')">
+                          <mat-icon class="material-icons">create</mat-icon>
+                        </button>
+                        @if (mailSettings.get('authUri').hasError('required')) {
+                          <mat-error>
+                            {{ 'admin.oauth2.access-token-uri-required' | translate }}
+                          </mat-error>
+                        }
+                        @if (mailSettings.get('authUri').hasError('pattern')) {
+                          <mat-error>
+                            {{ 'admin.oauth2.uri-pattern-error' | translate }}
+                          </mat-error>
+                        }
                       </mat-form-field>
                       <mat-form-field class="mat-block flex-1">
-                        <mat-label translate>admin.domain-name</mat-label>
-                        <input matInput formControlName="name" required>
-                        <mat-error *ngIf="domainForm.get('name').hasError('pattern')">
-                          {{ 'admin.error-verification-url' | translate }}
-                        </mat-error>
-                        <mat-error *ngIf="domainForm.get('name').hasError('maxlength')">
-                          {{ 'admin.domain-name-max-length' | translate }}
+                        <mat-label translate>admin.oauth2.token-uri</mat-label>
+                        <input matInput formControlName="tokenUri" required>
+                        <button mat-icon-button matSuffix
+                                type="button"
+                                (click)="toggleEditMode('tokenUri')">
+                          <mat-icon class="material-icons">create</mat-icon>
+                        </button>
+                        @if (mailSettings.get('tokenUri').hasError('required')) {
+                          <mat-error>
+                            {{ 'admin.oauth2.access-token-uri-required' | translate }}
+                          </mat-error>
+                        }
+                        @if (mailSettings.get('tokenUri').hasError('pattern')) {
+                          <mat-error>
+                            {{ 'admin.oauth2.uri-pattern-error' | translate }}
+                          </mat-error>
+                        }
+                      </mat-form-field>
+                    </div>
+                    <tb-string-items-list
+                      formControlName="scope" required
+                      label="{{ 'admin.oauth2.scope' | translate }}"
+                      requiredText="{{ 'admin.oauth2.scope-required' | translate }}">
+                    </tb-string-items-list>
+                  </ng-template>
+                </mat-expansion-panel>
+                <fieldset class="fields-group flex flex-col">
+                  <legend class="group-title" translate>admin.oauth2.redirect-uri</legend>
+                  <div class="flex flex-1 flex-row gap-2 xs:flex-col">
+                    <div class="flex flex-col sm:max-w-60% sm:flex-full gt-sm:max-w-50% gt-sm:flex-full" [formGroup]="domainForm">
+                      <div class="flex flex-row gap-2 xs:flex-col md:flex-col md:gap-0">
+                        <mat-form-field class="mat-block max-w-30% flex-full xs:max-w-full xs:flex-1 md:max-w-full md:flex-1">
+                          <mat-label translate>admin.oauth2.protocol</mat-label>
+                          <mat-select formControlName="scheme">
+                            @for (protocol of protocols; track protocol) {
+                              <mat-option [value]="protocol">
+                                {{ domainSchemaTranslations.get(protocol) | translate | uppercase }}
+                              </mat-option>
+                            }
+                          </mat-select>
+                        </mat-form-field>
+                        <mat-form-field class="mat-block flex-1">
+                          <mat-label translate>admin.domain-name</mat-label>
+                          <input matInput formControlName="name" required>
+                          @if (domainForm.get('name').hasError('pattern')) {
+                            <mat-error>
+                              {{ 'admin.error-verification-url' | translate }}
+                            </mat-error>
+                          }
+                          @if (domainForm.get('name').hasError('maxlength')) {
+                            <mat-error>
+                              {{ 'admin.domain-name-max-length' | translate }}
+                            </mat-error>
+                          }
+                        </mat-form-field>
+                      </div>
+                      @if (domainForm.hasError('unique')) {
+                        <mat-error>
+                          {{ 'admin.domain-name-unique' | translate }}
                         </mat-error>
+                      }
+                    </div>
+                    <div class="flex flex-1 flex-col gt-xs:w-0">
+                      <mat-form-field class="mat-block flex-1">
+                        <mat-label translate>admin.oauth2.redirect-uri-template</mat-label>
+                        <input matInput formControlName="redirectUri" readonly>
+                        <tb-copy-button
+                          matSuffix
+                          color="primary"
+                          [copyText]="mailSettings.get('redirectUri').value"
+                          tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
+                          tooltipPosition="above"
+                          icon="mdi:clipboard-arrow-left">
+                        </tb-copy-button>
                       </mat-form-field>
                     </div>
-                    <mat-error *ngIf="domainForm.hasError('unique')">
-                      {{ 'admin.domain-name-unique' | translate }}
-                    </mat-error>
-                  </div>
-
-                  <div class="flex flex-1 flex-col gt-xs:w-0">
-                    <mat-form-field class="mat-block flex-1">
-                      <mat-label translate>admin.oauth2.redirect-uri-template</mat-label>
-                      <input matInput formControlName="redirectUri" readonly>
-                      <tb-copy-button
-                        matSuffix
-                        color="primary"
-                        [copyText]="mailSettings.get('redirectUri').value"
-                        tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
-                        tooltipPosition="above"
-                        icon="mdi:clipboard-arrow-left">
-                      </tb-copy-button>
-                    </mat-form-field>
                   </div>
+                </fieldset>
+              </section>
+            }
+            @if (mailSettings.get('enableOauth2').value) {
+              <section class="flex flex-row pb-3 xs:flex-col gt-xs:items-center gt-xs:justify-between"
+                       >
+                <div>
+                  <span class="token-status" translate>admin.oauth2.access-token-status</span>
+                  <span>
+                    {{ accessTokenStatus }}
+                  </span>
                 </div>
-              </fieldset>
-            </section>
-            <section class="flex flex-row pb-3 xs:flex-col gt-xs:items-center gt-xs:justify-between"
-                     *ngIf="mailSettings.get('enableOauth2').value">
-              <div>
-                <span class="token-status" translate>admin.oauth2.access-token-status</span>
-                <span>
-                  {{ accessTokenStatus }}
-                </span>
-              </div>
-              <button mat-raised-button type="button" color="primary"
-                      [disabled]="(isLoading$ | async) || mailSettings.invalid || domainForm.invalid || (mailSettings.dirty || domainForm.dirty)"
-                      (click)="generateAccessToken()">
-                {{ accessTokenButtonName }}
-              </button>
-            </section>
+                <button mat-raised-button type="button" color="primary"
+                        [disabled]="(isLoading$ | async) || mailSettings.invalid || domainForm.invalid || (mailSettings.dirty || domainForm.dirty)"
+                        (click)="generateAccessToken()">
+                  {{ accessTokenButtonName }}
+                </button>
+              </section>
+            }
           </fieldset>
           <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch">
             <button mat-raised-button type="button"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
index 168100e586..fc26b51e86 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
@@ -26,9 +26,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content style="padding: 0">
     <tb-client createNewDialog #clientComponent></tb-client>
   </div>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
index 12f522de96..6c60e36cf1 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
@@ -20,12 +20,16 @@
     <mat-form-field class="flex">
       <mat-label translate>admin.oauth2.title</mat-label>
       <input matInput formControlName="title">
-      <mat-error *ngIf="entityForm.get('title').hasError('required')">
-        {{ 'admin.oauth2.client-title-required' | translate }}
-      </mat-error>
-      <mat-error *ngIf="entityForm.get('title').hasError('maxlength')">
-        {{ 'admin.oauth2.client-title-max-length' | translate }}
-      </mat-error>
+      @if (entityForm.get('title').hasError('required')) {
+        <mat-error>
+          {{ 'admin.oauth2.client-title-required' | translate }}
+        </mat-error>
+      }
+      @if (entityForm.get('title').hasError('maxlength')) {
+        <mat-error>
+          {{ 'admin.oauth2.client-title-max-length' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
   </div>
   <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
@@ -33,18 +37,22 @@
       <mat-form-field class="flex">
         <mat-label translate>admin.oauth2.provider</mat-label>
         <mat-select formControlName="providerName">
-          <mat-option *ngFor="let provider of templateProvider" [value]="provider">
-            {{ provider }}
-          </mat-option>
+          @for (provider of templateProvider; track provider) {
+            <mat-option [value]="provider">
+              {{ provider }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
     <mat-form-field class="flex" floatLabel="always">
       <mat-label translate>admin.oauth2.allowed-platforms</mat-label>
       <mat-select formControlName="platforms" multiple placeholder="{{ 'admin.oauth2.all-platforms' | translate }}">
-        <mat-option *ngFor="let platform of platformTypes" [value]="platform">
-          {{ platformTypeTranslations.get(platform) | translate }}
-        </mat-option>
+        @for (platform of platformTypes; track platform) {
+          <mat-option [value]="platform">
+            {{ platformTypeTranslations.get(platform) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
   </div>
@@ -52,22 +60,30 @@
     <mat-form-field class="flex">
       <mat-label translate>admin.oauth2.client-id</mat-label>
       <input matInput formControlName="clientId">
-      <mat-error *ngIf="entityForm.get('clientId').hasError('required')">
-        {{ 'admin.oauth2.client-id-required' | translate }}
-      </mat-error>
-      <mat-error *ngIf="entityForm.get('clientId').hasError('maxlength')">
-        {{ 'admin.oauth2.client-id-max-length' | translate }}
-      </mat-error>
+      @if (entityForm.get('clientId').hasError('required')) {
+        <mat-error>
+          {{ 'admin.oauth2.client-id-required' | translate }}
+        </mat-error>
+      }
+      @if (entityForm.get('clientId').hasError('maxlength')) {
+        <mat-error>
+          {{ 'admin.oauth2.client-id-max-length' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
     <mat-form-field class="flex">
       <mat-label translate>admin.oauth2.client-secret</mat-label>
       <input matInput formControlName="clientSecret">
-      <mat-error *ngIf="entityForm.get('clientSecret').hasError('required')">
-        {{ 'admin.oauth2.client-secret-required' | translate }}
-      </mat-error>
-      <mat-error *ngIf="entityForm.get('clientSecret').hasError('maxlength')">
-        {{ 'admin.oauth2.client-secret-max-length' | translate }}
-      </mat-error>
+      @if (entityForm.get('clientSecret').hasError('required')) {
+        <mat-error>
+          {{ 'admin.oauth2.client-secret-required' | translate }}
+        </mat-error>
+      }
+      @if (entityForm.get('clientSecret').hasError('maxlength')) {
+        <mat-error>
+          {{ 'admin.oauth2.client-secret-max-length' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
   </div>
   <mat-expansion-panel class="configuration-panel mat-elevation-z0" [expanded]="advancedExpanded">
@@ -85,237 +101,297 @@
             <tb-toggle-option [value]="false">{{ 'admin.oauth2.mapper' | translate }}</tb-toggle-option>
           </tb-toggle-select>
         </div>
-        <section class="tb-form-panel no-gap no-border no-padding" style="padding-bottom: 16px"
-                 *ngIf="generalSettingsMode">
-          <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
-            <mat-form-field class="flex">
-              <mat-label translate>admin.oauth2.access-token-uri</mat-label>
-              <input matInput formControlName="accessTokenUri">
-              <mat-error *ngIf="entityForm.get('accessTokenUri').hasError('required')">
-                {{ 'admin.oauth2.access-token-uri-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="entityForm.get('accessTokenUri').hasError('pattern')">
-                {{ 'admin.oauth2.uri-pattern-error' | translate }}
-              </mat-error>
-            </mat-form-field>
-            <mat-form-field class="flex">
-              <mat-label translate>admin.oauth2.authorization-uri</mat-label>
-              <input matInput formControlName="authorizationUri" required>
-              <mat-error *ngIf="entityForm.get('authorizationUri').hasError('required')">
-                {{ 'admin.oauth2.authorization-uri-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="entityForm.get('authorizationUri').hasError('pattern')">
-                {{ 'admin.oauth2.uri-pattern-error' | translate }}
-              </mat-error>
-            </mat-form-field>
-          </div>
-          <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
-            <mat-form-field class="flex">
-              <mat-label translate>admin.oauth2.jwk-set-uri</mat-label>
-              <input matInput formControlName="jwkSetUri">
-              <mat-error *ngIf="entityForm.get('jwkSetUri').hasError('pattern')">
-                {{ 'admin.oauth2.uri-pattern-error' | translate }}
-              </mat-error>
-            </mat-form-field>
-            <mat-form-field class="flex">
-              <mat-label translate>admin.oauth2.user-info-uri</mat-label>
-              <input matInput formControlName="userInfoUri">
-              <mat-error *ngIf="entityForm.get('userInfoUri').hasError('pattern')">
-                {{ 'admin.oauth2.uri-pattern-error' | translate }}
-              </mat-error>
-            </mat-form-field>
-          </div>
-          <div class="tb-form-row tb-standard-fields no-border no-padding">
-            <mat-form-field class="flex">
-              <mat-label translate>admin.oauth2.client-authentication-method</mat-label>
-              <mat-select formControlName="clientAuthenticationMethod">
-                <mat-option *ngFor="let clientAuthenticationMethod of clientAuthenticationMethods"
-                            [value]="clientAuthenticationMethod">
-                  {{ clientAuthenticationMethod | uppercase }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
-          <div class="grid gt-xs:grid-cols-2 gt-xs:gap-4" *ngIf="isCustomProvider()">
-            <mat-form-field class="flex" floatLabel="always">
-              <mat-label translate>admin.oauth2.login-button-label</mat-label>
-              <input matInput formControlName="loginButtonLabel"
-                     placeholder="{{ 'admin.oauth2.login-button-label-placeholder' | translate }}">
-              <mat-error *ngIf="entityForm.get('loginButtonLabel').hasError('required')">
-                {{ 'admin.oauth2.login-button-label-required' | translate }}
-              </mat-error>
-            </mat-form-field>
-            <div class="tb-form-row justify-between" style="height: auto; margin-bottom: 22px;">
-              <div translate>admin.oauth2.login-button-icon</div>
-              <tb-material-icon-select asBoxInput
-                                       iconClearButton
-                                       allowedCustomIcon
-                                       formControlName="loginButtonIcon">
-              </tb-material-icon-select>
-            </div>
-          </div>
-          <section formGroupName="mapperConfig" style="margin-bottom: 22px">
-            <div class="tb-form-row no-border no-padding">
-              <mat-slide-toggle class="mat-slide" formControlName="allowUserCreation">
-                {{ 'admin.oauth2.allow-user-creation' | translate }}
-              </mat-slide-toggle>
-            </div>
-            <div class="tb-form-row no-border no-padding">
-              <mat-slide-toggle class="mat-slide" formControlName="activateUser">
-                {{ 'admin.oauth2.activate-user' | translate }}
-              </mat-slide-toggle>
-            </div>
-          </section>
-          <tb-string-items-list
-            formControlName="scope"
-            label="{{ 'admin.oauth2.scope' | translate }}"
-            requiredText="{{ 'admin.oauth2.scope-required' | translate }}"
-            required>
-          </tb-string-items-list>
-        </section>
-        <section class="tb-form-panel no-border no-padding no-gap" *ngIf="!generalSettingsMode">
-          <div class="tb-form-row tb-standard-fields no-border no-padding">
-            <mat-form-field class="flex">
-              <mat-label translate>admin.oauth2.user-name-attribute-name</mat-label>
-              <input matInput formControlName="userNameAttributeName">
-              <mat-error *ngIf="entityForm.get('userNameAttributeName').hasError('required')">
-                {{ 'admin.oauth2.user-name-attribute-name-required' | translate }}
-              </mat-error>
-            </mat-form-field>
-          </div>
-          <section class="tb-form-panel no-border no-padding no-gap" formGroupName="mapperConfig">
-            <div class="tb-form-row tb-standard-fields no-border no-padding">
+        @if (generalSettingsMode) {
+          <section class="tb-form-panel no-gap no-border no-padding" style="padding-bottom: 16px"
+                   >
+            <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
               <mat-form-field class="flex">
-                <mat-label translate>admin.oauth2.type</mat-label>
-                <mat-select formControlName="type">
-                  <mat-option *ngFor="let mapperType of mapperTypes"
-                              [value]="mapperType">
-                    {{ mapperType }}
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-            <section class="tb-form-panel no-border no-padding no-gap" formGroupName="basic"
-                     *ngIf="entityForm.get('mapperConfig.type').value !== mapperType.CUSTOM && entityForm.get('mapperConfig.basic')">
-              <div class="tb-form-row tb-standard-fields no-border no-padding"
-                   *ngIf="entityForm.get('mapperConfig.type').value !== mapperType.GITHUB">
-                <mat-form-field class="flex">
-                  <mat-label translate>admin.oauth2.email-attribute-key</mat-label>
-                  <input matInput formControlName="emailAttributeKey">
-                  <mat-error
-                    *ngIf="entityForm.get('mapperConfig.basic.emailAttributeKey').hasError('required')">
-                    {{ 'admin.oauth2.email-attribute-key-required' | translate }}
+                <mat-label translate>admin.oauth2.access-token-uri</mat-label>
+                <input matInput formControlName="accessTokenUri">
+                @if (entityForm.get('accessTokenUri').hasError('required')) {
+                  <mat-error>
+                    {{ 'admin.oauth2.access-token-uri-required' | translate }}
                   </mat-error>
-                  <mat-error
-                    *ngIf="entityForm.get('mapperConfig.basic.emailAttributeKey').hasError('maxlength')">
-                    {{ 'admin.oauth2.email-attribute-key-max-length' | translate }}
+                }
+                @if (entityForm.get('accessTokenUri').hasError('pattern')) {
+                  <mat-error>
+                    {{ 'admin.oauth2.uri-pattern-error' | translate }}
                   </mat-error>
-                </mat-form-field>
-              </div>
-              <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
-                <mat-form-field class="flex">
-                  <mat-label translate>admin.oauth2.first-name-attribute-key</mat-label>
-                  <input matInput formControlName="firstNameAttributeKey">
-                  <mat-error *ngIf="entityForm.get('mapperConfig.basic.firstNameAttributeKey').hasError('maxlength')">
-                    {{ 'admin.oauth2.first-name-attribute-key-max-length' | translate }}
+                }
+              </mat-form-field>
+              <mat-form-field class="flex">
+                <mat-label translate>admin.oauth2.authorization-uri</mat-label>
+                <input matInput formControlName="authorizationUri" required>
+                @if (entityForm.get('authorizationUri').hasError('required')) {
+                  <mat-error>
+                    {{ 'admin.oauth2.authorization-uri-required' | translate }}
                   </mat-error>
-                </mat-form-field>
-                <mat-form-field class="flex">
-                  <mat-label translate>admin.oauth2.last-name-attribute-key</mat-label>
-                  <input matInput formControlName="lastNameAttributeKey">
-                  <mat-error *ngIf="entityForm.get('mapperConfig.basic.lastNameAttributeKey').hasError('maxlength')">
-                    {{ 'admin.oauth2.last-name-attribute-key-max-length' | translate }}
+                }
+                @if (entityForm.get('authorizationUri').hasError('pattern')) {
+                  <mat-error>
+                    {{ 'admin.oauth2.uri-pattern-error' | translate }}
                   </mat-error>
-                </mat-form-field>
-              </div>
-              <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
-                <mat-form-field class="flex">
-                  <mat-label translate>admin.oauth2.tenant-name-strategy</mat-label>
-                  <mat-select formControlName="tenantNameStrategy">
-                    <mat-option *ngFor="let tenantNameStrategy of tenantNameStrategies"
-                                [value]="tenantNameStrategy">
-                      {{ tenantNameStrategy }}
-                    </mat-option>
-                  </mat-select>
-                </mat-form-field>
-                <mat-form-field class="flex"
-                                [class.!hidden]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value !== 'CUSTOM'">
-                  <mat-label translate>admin.oauth2.tenant-name-pattern</mat-label>
-                  <input matInput formControlName="tenantNamePattern"
-                         [required]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
-                  <mat-error
-                    *ngIf="entityForm.get('mapperConfig.basic.tenantNamePattern').hasError('required')">
-                    {{ 'admin.oauth2.tenant-name-pattern-required' | translate }}
+                }
+              </mat-form-field>
+            </div>
+            <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
+              <mat-form-field class="flex">
+                <mat-label translate>admin.oauth2.jwk-set-uri</mat-label>
+                <input matInput formControlName="jwkSetUri">
+                @if (entityForm.get('jwkSetUri').hasError('pattern')) {
+                  <mat-error>
+                    {{ 'admin.oauth2.uri-pattern-error' | translate }}
                   </mat-error>
-                  <mat-error
-                    *ngIf="entityForm.get('mapperConfig.basic.tenantNamePattern').hasError('maxlength')">
-                    {{ 'admin.oauth2.tenant-name-pattern-max-length' | translate }}
+                }
+              </mat-form-field>
+              <mat-form-field class="flex">
+                <mat-label translate>admin.oauth2.user-info-uri</mat-label>
+                <input matInput formControlName="userInfoUri">
+                @if (entityForm.get('userInfoUri').hasError('pattern')) {
+                  <mat-error>
+                    {{ 'admin.oauth2.uri-pattern-error' | translate }}
                   </mat-error>
+                }
+              </mat-form-field>
+            </div>
+            <div class="tb-form-row tb-standard-fields no-border no-padding">
+              <mat-form-field class="flex">
+                <mat-label translate>admin.oauth2.client-authentication-method</mat-label>
+                <mat-select formControlName="clientAuthenticationMethod">
+                  @for (clientAuthenticationMethod of clientAuthenticationMethods; track clientAuthenticationMethod) {
+                    <mat-option
+                      [value]="clientAuthenticationMethod">
+                      {{ clientAuthenticationMethod | uppercase }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            </div>
+            @if (isCustomProvider()) {
+              <div class="grid gt-xs:grid-cols-2 gt-xs:gap-4">
+                <mat-form-field class="flex" floatLabel="always">
+                  <mat-label translate>admin.oauth2.login-button-label</mat-label>
+                  <input matInput formControlName="loginButtonLabel"
+                         placeholder="{{ 'admin.oauth2.login-button-label-placeholder' | translate }}">
+                  @if (entityForm.get('loginButtonLabel').hasError('required')) {
+                    <mat-error>
+                      {{ 'admin.oauth2.login-button-label-required' | translate }}
+                    </mat-error>
+                  }
                 </mat-form-field>
+                <div class="tb-form-row justify-between" style="height: auto; margin-bottom: 22px;">
+                  <div translate>admin.oauth2.login-button-icon</div>
+                  <tb-material-icon-select asBoxInput
+                                           iconClearButton
+                                           allowedCustomIcon
+                                           formControlName="loginButtonIcon">
+                  </tb-material-icon-select>
+                </div>
               </div>
-              <div class="tb-form-row tb-standard-fields no-border no-padding">
-                <mat-form-field class="flex">
-                  <mat-label translate>admin.oauth2.customer-name-pattern</mat-label>
-                  <input matInput formControlName="customerNamePattern">
-                  <mat-error *ngIf="entityForm.get('mapperConfig.basic.customerNamePattern').hasError('maxlength')">
-                    {{ 'admin.oauth2.customer-name-pattern-max-length' | translate }}
-                  </mat-error>
-                </mat-form-field>
+            }
+            <section formGroupName="mapperConfig" style="margin-bottom: 22px">
+              <div class="tb-form-row no-border no-padding">
+                <mat-slide-toggle class="mat-slide" formControlName="allowUserCreation">
+                  {{ 'admin.oauth2.allow-user-creation' | translate }}
+                </mat-slide-toggle>
               </div>
-              <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
-                <mat-form-field class="flex">
-                  <mat-label translate>admin.oauth2.default-dashboard-name</mat-label>
-                  <input matInput formControlName="defaultDashboardName">
-                  <mat-error *ngIf="entityForm.get('mapperConfig.basic.defaultDashboardName').hasError('maxlength')">
-                    {{ 'admin.oauth2.default-dashboard-name-max-length' | translate }}
-                  </mat-error>
-                </mat-form-field>
-                <mat-slide-toggle class="tb-flex mat-slide" style="margin-bottom: 16px"
-                                  formControlName="alwaysFullScreen">
-                  {{ 'admin.oauth2.always-fullscreen' | translate}}
+              <div class="tb-form-row no-border no-padding">
+                <mat-slide-toggle class="mat-slide" formControlName="activateUser">
+                  {{ 'admin.oauth2.activate-user' | translate }}
                 </mat-slide-toggle>
               </div>
             </section>
-            <section class="tb-form-panel no-border no-padding no-gap" formGroupName="custom"
-                     *ngIf="entityForm.get('mapperConfig.type').value === mapperType.CUSTOM && entityForm.get('mapperConfig.custom')">
-              <div class="tb-form-row tb-standard-fields no-border no-padding">
-                <mat-form-field class="flex">
-                  <mat-label translate>admin.oauth2.url</mat-label>
-                  <input matInput formControlName="url">
-                  <mat-error *ngIf="entityForm.get('mapperConfig.custom.url').hasError('required')">
-                    {{ 'admin.oauth2.url-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="entityForm.get('mapperConfig.custom.url').hasError('pattern')">
-                    {{ 'admin.oauth2.url-pattern' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="entityForm.get('mapperConfig.custom.url').hasError('maxlength')">
-                    {{ 'admin.oauth2.url-max-length' | translate }}
-                  </mat-error>
-                </mat-form-field>
-              </div>
-              <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
-                <mat-form-field class="flex">
-                  <mat-label translate>common.username</mat-label>
-                  <input matInput formControlName="username" autocomplete="new-username">
-                  <mat-error *ngIf="entityForm.get('mapperConfig.custom.username').hasError('maxlength')">
-                    {{ 'admin.oauth2.username-max-length' | translate }}
+            <tb-string-items-list
+              formControlName="scope"
+              label="{{ 'admin.oauth2.scope' | translate }}"
+              requiredText="{{ 'admin.oauth2.scope-required' | translate }}"
+              required>
+            </tb-string-items-list>
+          </section>
+        }
+        @if (!generalSettingsMode) {
+          <section class="tb-form-panel no-border no-padding no-gap">
+            <div class="tb-form-row tb-standard-fields no-border no-padding">
+              <mat-form-field class="flex">
+                <mat-label translate>admin.oauth2.user-name-attribute-name</mat-label>
+                <input matInput formControlName="userNameAttributeName">
+                @if (entityForm.get('userNameAttributeName').hasError('required')) {
+                  <mat-error>
+                    {{ 'admin.oauth2.user-name-attribute-name-required' | translate }}
                   </mat-error>
-                </mat-form-field>
+                }
+              </mat-form-field>
+            </div>
+            <section class="tb-form-panel no-border no-padding no-gap" formGroupName="mapperConfig">
+              <div class="tb-form-row tb-standard-fields no-border no-padding">
                 <mat-form-field class="flex">
-                  <mat-label translate>common.password</mat-label>
-                  <input matInput formControlName="password" autocomplete="new-password">
-                  <mat-error *ngIf="entityForm.get('mapperConfig.custom.password').hasError('maxlength')">
-                    {{ 'admin.oauth2.password-max-length' | translate }}
-                  </mat-error>
+                  <mat-label translate>admin.oauth2.type</mat-label>
+                  <mat-select formControlName="type">
+                    @for (mapperType of mapperTypes; track mapperType) {
+                      <mat-option
+                        [value]="mapperType">
+                        {{ mapperType }}
+                      </mat-option>
+                    }
+                  </mat-select>
                 </mat-form-field>
               </div>
-              <mat-slide-toggle class="tb-flex mat-slide" style="margin-bottom: 16px"
-                                formControlName="sendToken">
-                {{ 'admin.oauth2.send-token' | translate}}
-              </mat-slide-toggle>
+              @if (entityForm.get('mapperConfig.type').value !== mapperType.CUSTOM && entityForm.get('mapperConfig.basic')) {
+                <section class="tb-form-panel no-border no-padding no-gap" formGroupName="basic"
+                         >
+                  @if (entityForm.get('mapperConfig.type').value !== mapperType.GITHUB) {
+                    <div class="tb-form-row tb-standard-fields no-border no-padding"
+                         >
+                      <mat-form-field class="flex">
+                        <mat-label translate>admin.oauth2.email-attribute-key</mat-label>
+                        <input matInput formControlName="emailAttributeKey">
+                        @if (entityForm.get('mapperConfig.basic.emailAttributeKey').hasError('required')) {
+                          <mat-error
+                            >
+                            {{ 'admin.oauth2.email-attribute-key-required' | translate }}
+                          </mat-error>
+                        }
+                        @if (entityForm.get('mapperConfig.basic.emailAttributeKey').hasError('maxlength')) {
+                          <mat-error
+                            >
+                            {{ 'admin.oauth2.email-attribute-key-max-length' | translate }}
+                          </mat-error>
+                        }
+                      </mat-form-field>
+                    </div>
+                  }
+                  <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
+                    <mat-form-field class="flex">
+                      <mat-label translate>admin.oauth2.first-name-attribute-key</mat-label>
+                      <input matInput formControlName="firstNameAttributeKey">
+                      @if (entityForm.get('mapperConfig.basic.firstNameAttributeKey').hasError('maxlength')) {
+                        <mat-error>
+                          {{ 'admin.oauth2.first-name-attribute-key-max-length' | translate }}
+                        </mat-error>
+                      }
+                    </mat-form-field>
+                    <mat-form-field class="flex">
+                      <mat-label translate>admin.oauth2.last-name-attribute-key</mat-label>
+                      <input matInput formControlName="lastNameAttributeKey">
+                      @if (entityForm.get('mapperConfig.basic.lastNameAttributeKey').hasError('maxlength')) {
+                        <mat-error>
+                          {{ 'admin.oauth2.last-name-attribute-key-max-length' | translate }}
+                        </mat-error>
+                      }
+                    </mat-form-field>
+                  </div>
+                  <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
+                    <mat-form-field class="flex">
+                      <mat-label translate>admin.oauth2.tenant-name-strategy</mat-label>
+                      <mat-select formControlName="tenantNameStrategy">
+                        @for (tenantNameStrategy of tenantNameStrategies; track tenantNameStrategy) {
+                          <mat-option
+                            [value]="tenantNameStrategy">
+                            {{ tenantNameStrategy }}
+                          </mat-option>
+                        }
+                      </mat-select>
+                    </mat-form-field>
+                    <mat-form-field class="flex"
+                                    [class.!hidden]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value !== 'CUSTOM'">
+                      <mat-label translate>admin.oauth2.tenant-name-pattern</mat-label>
+                      <input matInput formControlName="tenantNamePattern"
+                             [required]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
+                      @if (entityForm.get('mapperConfig.basic.tenantNamePattern').hasError('required')) {
+                        <mat-error
+                          >
+                          {{ 'admin.oauth2.tenant-name-pattern-required' | translate }}
+                        </mat-error>
+                      }
+                      @if (entityForm.get('mapperConfig.basic.tenantNamePattern').hasError('maxlength')) {
+                        <mat-error
+                          >
+                          {{ 'admin.oauth2.tenant-name-pattern-max-length' | translate }}
+                        </mat-error>
+                      }
+                    </mat-form-field>
+                  </div>
+                  <div class="tb-form-row tb-standard-fields no-border no-padding">
+                    <mat-form-field class="flex">
+                      <mat-label translate>admin.oauth2.customer-name-pattern</mat-label>
+                      <input matInput formControlName="customerNamePattern">
+                      @if (entityForm.get('mapperConfig.basic.customerNamePattern').hasError('maxlength')) {
+                        <mat-error>
+                          {{ 'admin.oauth2.customer-name-pattern-max-length' | translate }}
+                        </mat-error>
+                      }
+                    </mat-form-field>
+                  </div>
+                  <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
+                    <mat-form-field class="flex">
+                      <mat-label translate>admin.oauth2.default-dashboard-name</mat-label>
+                      <input matInput formControlName="defaultDashboardName">
+                      @if (entityForm.get('mapperConfig.basic.defaultDashboardName').hasError('maxlength')) {
+                        <mat-error>
+                          {{ 'admin.oauth2.default-dashboard-name-max-length' | translate }}
+                        </mat-error>
+                      }
+                    </mat-form-field>
+                    <mat-slide-toggle class="tb-flex mat-slide" style="margin-bottom: 16px"
+                                      formControlName="alwaysFullScreen">
+                      {{ 'admin.oauth2.always-fullscreen' | translate}}
+                    </mat-slide-toggle>
+                  </div>
+                </section>
+              }
+              @if (entityForm.get('mapperConfig.type').value === mapperType.CUSTOM && entityForm.get('mapperConfig.custom')) {
+                <section class="tb-form-panel no-border no-padding no-gap" formGroupName="custom"
+                         >
+                  <div class="tb-form-row tb-standard-fields no-border no-padding">
+                    <mat-form-field class="flex">
+                      <mat-label translate>admin.oauth2.url</mat-label>
+                      <input matInput formControlName="url">
+                      @if (entityForm.get('mapperConfig.custom.url').hasError('required')) {
+                        <mat-error>
+                          {{ 'admin.oauth2.url-required' | translate }}
+                        </mat-error>
+                      }
+                      @if (entityForm.get('mapperConfig.custom.url').hasError('pattern')) {
+                        <mat-error>
+                          {{ 'admin.oauth2.url-pattern' | translate }}
+                        </mat-error>
+                      }
+                      @if (entityForm.get('mapperConfig.custom.url').hasError('maxlength')) {
+                        <mat-error>
+                          {{ 'admin.oauth2.url-max-length' | translate }}
+                        </mat-error>
+                      }
+                    </mat-form-field>
+                  </div>
+                  <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
+                    <mat-form-field class="flex">
+                      <mat-label translate>common.username</mat-label>
+                      <input matInput formControlName="username" autocomplete="new-username">
+                      @if (entityForm.get('mapperConfig.custom.username').hasError('maxlength')) {
+                        <mat-error>
+                          {{ 'admin.oauth2.username-max-length' | translate }}
+                        </mat-error>
+                      }
+                    </mat-form-field>
+                    <mat-form-field class="flex">
+                      <mat-label translate>common.password</mat-label>
+                      <input matInput formControlName="password" autocomplete="new-password">
+                      @if (entityForm.get('mapperConfig.custom.password').hasError('maxlength')) {
+                        <mat-error>
+                          {{ 'admin.oauth2.password-max-length' | translate }}
+                        </mat-error>
+                      }
+                    </mat-form-field>
+                  </div>
+                  <mat-slide-toggle class="tb-flex mat-slide" style="margin-bottom: 16px"
+                                    formControlName="sendToken">
+                    {{ 'admin.oauth2.send-token' | translate}}
+                  </mat-slide-toggle>
+                </section>
+              }
             </section>
           </section>
-        </section>
+        }
       </section>
     </ng-template>
   </mat-expansion-panel>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain.component.html
index 0816cb6f5a..fb72798997 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain.component.html
@@ -20,15 +20,21 @@
     <mat-form-field class="flex">
       <mat-label translate>admin.oauth2.domain-name</mat-label>
       <input matInput formControlName="name">
-      <mat-error *ngIf="entityForm.get('name').hasError('required')">
-        {{ 'admin.oauth2.domain-name-required' | translate }}
-      </mat-error>
-      <mat-error *ngIf="entityForm.get('name').hasError('maxlength')">
-        {{ 'admin.domain-name-max-length' | translate }}
-      </mat-error>
-      <mat-error *ngIf="entityForm.get('name').hasError('pattern')">
-        {{ 'admin.error-verification-url' | translate }}
-      </mat-error>
+      @if (entityForm.get('name').hasError('required')) {
+        <mat-error>
+          {{ 'admin.oauth2.domain-name-required' | translate }}
+        </mat-error>
+      }
+      @if (entityForm.get('name').hasError('maxlength')) {
+        <mat-error>
+          {{ 'admin.domain-name-max-length' | translate }}
+        </mat-error>
+      }
+      @if (entityForm.get('name').hasError('pattern')) {
+        <mat-error>
+          {{ 'admin.error-verification-url' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
   </div>
   <div class="tb-form-row tb-standard-fields no-border no-padding">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-header.component.html b/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-header.component.html
index 360b3b50da..1daeab7f89 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-header.component.html
@@ -23,8 +23,10 @@
     <mat-option value="">
       {{ "javascript.all-types" | translate }}
     </mat-option>
-    <mat-option *ngFor="let jsResourceSubType of jsResourceSubTypes" [value]="jsResourceSubType">
-      {{ resourceSubTypesTranslationMap.get(jsResourceSubType) | translate }}
-    </mat-option>
+    @for (jsResourceSubType of jsResourceSubTypes; track jsResourceSubType) {
+      <mat-option [value]="jsResourceSubType">
+        {{ resourceSubTypesTranslationMap.get(jsResourceSubType) | translate }}
+      </mat-option>
+    }
   </mat-select>
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/resource-library-tabs.component.html b/ui-ngx/src/app/modules/home/pages/admin/resource/resource-library-tabs.component.html
index 901eb78135..78e1ac048b 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/resource-library-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/resource-library-tabs.component.html
@@ -15,9 +15,11 @@
     limitations under the License.
 
 -->
-<mat-tab *ngIf="entity && entity.tenantId.id !== NULL_UUID && authUser.authority === authorities.TENANT_ADMIN && !isEdit"
-         label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
-  <tb-version-control detailsMode="true" singleEntityMode="true"
-                      (versionRestored)="entitiesTableConfig.updateData()"
-                      [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.name" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
-</mat-tab>
+@if (entity && entity.tenantId.id !== NULL_UUID && authUser.authority === authorities.TENANT_ADMIN && !isEdit) {
+  <mat-tab
+    label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
+    <tb-version-control detailsMode="true" singleEntityMode="true"
+                        (versionRestored)="entitiesTableConfig.updateData()"
+    [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.name" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
+  </mat-tab>
+}
diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/resource-tabs.component.html b/ui-ngx/src/app/modules/home/pages/admin/resource/resource-tabs.component.html
index 1d98f4be18..94ff5f2be5 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/resource-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/resource-tabs.component.html
@@ -15,13 +15,17 @@
     limitations under the License.
 
 -->
-<mat-tab *ngIf="entity && entity.tenantId.id !== NULL_UUID && authUser.authority === authorities.TENANT_ADMIN && !isEdit" #auditLogsTab="matTab"
-         label="{{ 'audit-log.audit-logs' | translate }}">
-  <tb-audit-log-table detailsMode="true" [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.ENTITY" [entityId]="entity.id"></tb-audit-log-table>
-</mat-tab>
-<mat-tab *ngIf="entity && entity.tenantId.id !== NULL_UUID && authUser.authority === authorities.TENANT_ADMIN && !isEdit"
-         label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
-  <tb-version-control detailsMode="true" singleEntityMode="true"
-                      (versionRestored)="entitiesTableConfig.updateData()"
-                      [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.name" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
-</mat-tab>
+@if (entity && entity.tenantId.id !== NULL_UUID && authUser.authority === authorities.TENANT_ADMIN && !isEdit) {
+  <mat-tab #auditLogsTab="matTab"
+           label="{{ 'audit-log.audit-logs' | translate }}">
+    <tb-audit-log-table detailsMode="true" [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.ENTITY" [entityId]="entity.id"></tb-audit-log-table>
+  </mat-tab>
+}
+@if (entity && entity.tenantId.id !== NULL_UUID && authUser.authority === authorities.TENANT_ADMIN && !isEdit) {
+  <mat-tab
+    label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
+    <tb-version-control detailsMode="true" singleEntityMode="true"
+                        (versionRestored)="entitiesTableConfig.updateData()"
+    [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.name" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
+  </mat-tab>
+}
diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-table-header.component.html b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-table-header.component.html
index 05c6dfed73..5c8d9e4d6b 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-table-header.component.html
@@ -23,8 +23,10 @@
     <mat-option value="">
       {{ "resource.all-types" | translate }}
     </mat-option>
-    <mat-option *ngFor="let resourceType of resourceTypes" [value]="resourceType">
-      {{ resourceTypesTranslationMap.get(resourceType) | translate }}
-    </mat-option>
+    @for (resourceType of resourceTypes; track resourceType) {
+      <mat-option [value]="resourceType">
+        {{ resourceTypesTranslationMap.get(resourceType) | translate }}
+      </mat-option>
+    }
   </mat-select>
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
index 24ee53842d..b3b126b5d7 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
@@ -23,9 +23,12 @@
     <span class="flex-1"></span>
     <div tb-help="securitySettings"></div>
   </mat-card-header>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <mat-card-content>
     <form [formGroup]="securitySettingsFormGroup" (ngSubmit)="save()" autocomplete="off">
       <fieldset [disabled]="isLoading$ | async">
@@ -37,17 +40,21 @@
                    formControlName="maxFailedLoginAttempts"
                    step="1"
                    min="0"/>
-            <mat-error *ngIf="securitySettingsFormGroup.get('maxFailedLoginAttempts').hasError('min')">
-              {{ 'admin.minimum-max-failed-login-attempts-range' | translate }}
-            </mat-error>
+            @if (securitySettingsFormGroup.get('maxFailedLoginAttempts').hasError('min')) {
+              <mat-error>
+                {{ 'admin.minimum-max-failed-login-attempts-range' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
           <mat-form-field class="mat-block">
             <mat-label translate>admin.user-lockout-notification-email</mat-label>
             <input matInput type="email"
                    formControlName="userLockoutNotificationEmail"/>
-            <mat-error *ngIf="securitySettingsFormGroup.get('userLockoutNotificationEmail').invalid">
-              {{ 'login.invalid-email-format' | translate }}
-            </mat-error>
+            @if (securitySettingsFormGroup.get('userLockoutNotificationEmail').invalid) {
+              <mat-error>
+                {{ 'login.invalid-email-format' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
           <mat-form-field class="mat-block">
             <mat-label translate>admin.user-activation-token-ttl</mat-label>
@@ -56,26 +63,34 @@
                    step="1"
                    min="1"
                    max="24"/>
-            <mat-error *ngIf="securitySettingsFormGroup.get('userActivationTokenTtl').hasError('min')">
-              {{ 'admin.user-activation-token-ttl-range' | translate }}
-            </mat-error>
-            <mat-error *ngIf="securitySettingsFormGroup.get('userActivationTokenTtl').hasError('max')">
-              {{ 'admin.user-activation-token-ttl-range' | translate }}
-            </mat-error>
+            @if (securitySettingsFormGroup.get('userActivationTokenTtl').hasError('min')) {
+              <mat-error>
+                {{ 'admin.user-activation-token-ttl-range' | translate }}
+              </mat-error>
+            }
+            @if (securitySettingsFormGroup.get('userActivationTokenTtl').hasError('max')) {
+              <mat-error>
+                {{ 'admin.user-activation-token-ttl-range' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
-           <mat-form-field class="mat-block">
+          <mat-form-field class="mat-block">
             <mat-label translate>admin.password-reset-token-ttl</mat-label>
             <input matInput type="number"
-                  formControlName="passwordResetTokenTtl"
-                  step="1"
-                  min="1"
-                  max="24"/>
-            <mat-error *ngIf="securitySettingsFormGroup.get('passwordResetTokenTtl').hasError('min')">
-              {{ 'admin.password-reset-token-ttl-range' | translate }}
-            </mat-error>
-            <mat-error *ngIf="securitySettingsFormGroup.get('passwordResetTokenTtl').hasError('max')">
-              {{ 'admin.password-reset-token-ttl-range' | translate }}
-            </mat-error>
+                   formControlName="passwordResetTokenTtl"
+                   step="1"
+                   min="1"
+                   max="24"/>
+            @if (securitySettingsFormGroup.get('passwordResetTokenTtl').hasError('min')) {
+              <mat-error>
+                {{ 'admin.password-reset-token-ttl-range' | translate }}
+              </mat-error>
+            }
+            @if (securitySettingsFormGroup.get('passwordResetTokenTtl').hasError('max')) {
+              <mat-error>
+                {{ 'admin.password-reset-token-ttl-range' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
           <mat-form-field class="mat-block">
             <mat-label translate>admin.mobile-secret-key-length</mat-label>
@@ -83,9 +98,11 @@
                    formControlName="mobileSecretKeyLength"
                    step="1"
                    min="1"/>
-            <mat-error *ngIf="securitySettingsFormGroup.get('mobileSecretKeyLength').hasError('min')">
-              {{ 'admin.mobile-secret-key-length-range' | translate }}
-            </mat-error>
+            @if (securitySettingsFormGroup.get('mobileSecretKeyLength').hasError('min')) {
+              <mat-error>
+                {{ 'admin.mobile-secret-key-length-range' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
         </fieldset>
 
@@ -101,26 +118,36 @@
                        min="6"
                        max="50"
                        required/>
-                <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('required')">
-                  {{ 'admin.minimum-password-length-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('min')">
-                  {{ 'admin.minimum-password-length-range' | translate }}
-                </mat-error>
-                <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('max')">
-                  {{ 'admin.minimum-password-length-range' | translate }}
-                </mat-error>
+                @if (securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('required')) {
+                  <mat-error>
+                    {{ 'admin.minimum-password-length-required' | translate }}
+                  </mat-error>
+                }
+                @if (securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('min')) {
+                  <mat-error>
+                    {{ 'admin.minimum-password-length-range' | translate }}
+                  </mat-error>
+                }
+                @if (securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('max')) {
+                  <mat-error>
+                    {{ 'admin.minimum-password-length-range' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
               <mat-form-field class="mat-block flex-1" subscriptSizing="dynamic">
                 <mat-label translate>admin.maximum-password-length</mat-label>
                 <input matInput type="number" formControlName="maximumLength" step="1" min="6"/>
                 <mat-hint></mat-hint>
-                <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.maximumLength').hasError('min')">
-                  {{ 'admin.maximum-password-length-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.maximumLength').hasError('lessMin')">
-                  {{ 'admin.maximum-password-length-less-min' | translate }}
-                </mat-error>
+                @if (securitySettingsFormGroup.get('passwordPolicy.maximumLength').hasError('min')) {
+                  <mat-error>
+                    {{ 'admin.maximum-password-length-min' | translate }}
+                  </mat-error>
+                }
+                @if (securitySettingsFormGroup.get('passwordPolicy.maximumLength').hasError('lessMin')) {
+                  <mat-error>
+                    {{ 'admin.maximum-password-length-less-min' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             </div>
             <div class="flex flex-row xs:flex-col gt-xs:gap-2">
@@ -130,10 +157,12 @@
                        formControlName="minimumUppercaseLetters"
                        step="1"
                        min="0"/>
-                <mat-error
-                  *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumUppercaseLetters').hasError('min')">
-                  {{ 'admin.minimum-uppercase-letters-range' | translate }}
-                </mat-error>
+                @if (securitySettingsFormGroup.get('passwordPolicy.minimumUppercaseLetters').hasError('min')) {
+                  <mat-error
+                    >
+                    {{ 'admin.minimum-uppercase-letters-range' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
               <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-lowercase-letters</mat-label>
@@ -141,10 +170,12 @@
                        formControlName="minimumLowercaseLetters"
                        step="1"
                        min="0"/>
-                <mat-error
-                  *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLowercaseLetters').hasError('min')">
-                  {{ 'admin.minimum-lowercase-letters-range' | translate }}
-                </mat-error>
+                @if (securitySettingsFormGroup.get('passwordPolicy.minimumLowercaseLetters').hasError('min')) {
+                  <mat-error
+                    >
+                    {{ 'admin.minimum-lowercase-letters-range' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             </div>
             <div class="flex flex-row xs:flex-col gt-xs:gap-2">
@@ -154,9 +185,11 @@
                        formControlName="minimumDigits"
                        step="1"
                        min="0"/>
-                <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumDigits').hasError('min')">
-                  {{ 'admin.minimum-digits-range' | translate }}
-                </mat-error>
+                @if (securitySettingsFormGroup.get('passwordPolicy.minimumDigits').hasError('min')) {
+                  <mat-error>
+                    {{ 'admin.minimum-digits-range' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
               <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-special-characters</mat-label>
@@ -164,10 +197,12 @@
                        formControlName="minimumSpecialCharacters"
                        step="1"
                        min="0"/>
-                <mat-error
-                  *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumSpecialCharacters').hasError('min')">
-                  {{ 'admin.minimum-special-characters-range' | translate }}
-                </mat-error>
+                @if (securitySettingsFormGroup.get('passwordPolicy.minimumSpecialCharacters').hasError('min')) {
+                  <mat-error
+                    >
+                    {{ 'admin.minimum-special-characters-range' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             </div>
             <div class="flex flex-row xs:flex-col gt-xs:gap-2">
@@ -177,10 +212,12 @@
                        formControlName="passwordExpirationPeriodDays"
                        step="1"
                        min="0"/>
-                <mat-error
-                  *ngIf="securitySettingsFormGroup.get('passwordPolicy.passwordExpirationPeriodDays').hasError('min')">
-                  {{ 'admin.password-expiration-period-days-range' | translate }}
-                </mat-error>
+                @if (securitySettingsFormGroup.get('passwordPolicy.passwordExpirationPeriodDays').hasError('min')) {
+                  <mat-error
+                    >
+                    {{ 'admin.password-expiration-period-days-range' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
               <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.password-reuse-frequency-days</mat-label>
@@ -188,10 +225,12 @@
                        formControlName="passwordReuseFrequencyDays"
                        step="1"
                        min="0"/>
-                <mat-error
-                  *ngIf="securitySettingsFormGroup.get('passwordPolicy.passwordReuseFrequencyDays').hasError('min')">
-                  {{ 'admin.password-reuse-frequency-days-range' | translate }}
-                </mat-error>
+                @if (securitySettingsFormGroup.get('passwordPolicy.passwordReuseFrequencyDays').hasError('min')) {
+                  <mat-error
+                    >
+                    {{ 'admin.password-reuse-frequency-days-range' | translate }}
+                  </mat-error>
+                }
               </mat-form-field>
             </div>
             <div class="flex flex-row xs:flex-col gt-xs:gap-2">
@@ -235,9 +274,11 @@
           <mat-form-field class="mat-block flex-1" subscriptSizing="dynamic">
             <mat-label translate>admin.jwt.issuer-name</mat-label>
             <input matInput required formControlName="tokenIssuer"/>
-            <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenIssuer').hasError('required')">
-              {{ 'admin.jwt.issuer-name-required' | translate }}
-            </mat-error>
+            @if (jwtSecuritySettingsFormGroup.get('tokenIssuer').hasError('required')) {
+              <mat-error>
+                {{ 'admin.jwt.issuer-name-required' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
           <mat-form-field class="mat-block flex-1" subscriptSizing="dynamic">
             <mat-label translate>admin.jwt.signings-key</mat-label>
@@ -251,15 +292,21 @@
               {{ 'admin.jwt.generate-key' | translate }}
             </button>
             <mat-hint translate>admin.jwt.signings-key-hint</mat-hint>
-            <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenSigningKey').hasError('required')">
-              {{ 'admin.jwt.signings-key-required' | translate }}
-            </mat-error>
-            <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenSigningKey').hasError('base64')">
-              {{ 'admin.jwt.signings-key-base64' | translate }}
-            </mat-error>
-            <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenSigningKey').hasError('minLength')">
-              {{ 'admin.jwt.signings-key-min-length' | translate }}
-            </mat-error>
+            @if (jwtSecuritySettingsFormGroup.get('tokenSigningKey').hasError('required')) {
+              <mat-error>
+                {{ 'admin.jwt.signings-key-required' | translate }}
+              </mat-error>
+            }
+            @if (jwtSecuritySettingsFormGroup.get('tokenSigningKey').hasError('base64')) {
+              <mat-error>
+                {{ 'admin.jwt.signings-key-base64' | translate }}
+              </mat-error>
+            }
+            @if (jwtSecuritySettingsFormGroup.get('tokenSigningKey').hasError('minLength')) {
+              <mat-error>
+                {{ 'admin.jwt.signings-key-min-length' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
         </div>
         <div class="flex flex-row gap-2 xs:flex-col">
@@ -270,15 +317,21 @@
                    step="1"
                    min="60"/>
             <mat-hint></mat-hint>
-            <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenExpirationTime').hasError('required')">
-              {{ 'admin.jwt.expiration-time-required' | translate }}
-            </mat-error>
-            <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenExpirationTime').hasError('max')">
-              {{ 'admin.jwt.expiration-time-max' | translate }}
-            </mat-error>
-            <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenExpirationTime').hasError('min')">
-              {{ 'admin.jwt.expiration-time-min' | translate }}
-            </mat-error>
+            @if (jwtSecuritySettingsFormGroup.get('tokenExpirationTime').hasError('required')) {
+              <mat-error>
+                {{ 'admin.jwt.expiration-time-required' | translate }}
+              </mat-error>
+            }
+            @if (jwtSecuritySettingsFormGroup.get('tokenExpirationTime').hasError('max')) {
+              <mat-error>
+                {{ 'admin.jwt.expiration-time-max' | translate }}
+              </mat-error>
+            }
+            @if (jwtSecuritySettingsFormGroup.get('tokenExpirationTime').hasError('min')) {
+              <mat-error>
+                {{ 'admin.jwt.expiration-time-min' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
           <mat-form-field class="mat-block flex-1" subscriptSizing="dynamic">
             <mat-label translate>admin.jwt.refresh-expiration-time</mat-label>
@@ -287,18 +340,26 @@
                    step="1"
                    min="900"/>
             <mat-hint></mat-hint>
-            <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('refreshTokenExpTime').hasError('required')">
-              {{ 'admin.jwt.refresh-expiration-time-required' | translate }}
-            </mat-error>
-            <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('refreshTokenExpTime').hasError('max')">
-              {{ 'admin.jwt.refresh-expiration-time-max' | translate }}
-            </mat-error>
-            <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('refreshTokenExpTime').hasError('min')">
-              {{ 'admin.jwt.refresh-expiration-time-min' | translate }}
-            </mat-error>
-            <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('refreshTokenExpTime').hasError('lessToken')">
-              {{ 'admin.jwt.refresh-expiration-time-less-token' | translate }}
-            </mat-error>
+            @if (jwtSecuritySettingsFormGroup.get('refreshTokenExpTime').hasError('required')) {
+              <mat-error>
+                {{ 'admin.jwt.refresh-expiration-time-required' | translate }}
+              </mat-error>
+            }
+            @if (jwtSecuritySettingsFormGroup.get('refreshTokenExpTime').hasError('max')) {
+              <mat-error>
+                {{ 'admin.jwt.refresh-expiration-time-max' | translate }}
+              </mat-error>
+            }
+            @if (jwtSecuritySettingsFormGroup.get('refreshTokenExpTime').hasError('min')) {
+              <mat-error>
+                {{ 'admin.jwt.refresh-expiration-time-min' | translate }}
+              </mat-error>
+            }
+            @if (jwtSecuritySettingsFormGroup.get('refreshTokenExpTime').hasError('lessToken')) {
+              <mat-error>
+                {{ 'admin.jwt.refresh-expiration-time-less-token' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
         </div>
         <div class="flex flex-row flex-wrap items-center justify-end gap-2">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
index c36923dc84..3245013330 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content tb-toast toastTarget="sendTestSmsDialogContent">
     <fieldset [disabled]="(isLoading$ | async)">
       <tb-phone-input required
@@ -38,12 +41,16 @@
       <mat-form-field class="mat-block">
         <mat-label translate>admin.sms-message</mat-label>
         <textarea required matInput rows="3" [maxLength]="1600" formControlName="message"></textarea>
-        <mat-error *ngIf="sendTestSmsFormGroup.get('message').hasError('required')">
-          {{ 'admin.sms-message-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="sendTestSmsFormGroup.get('message').hasError('maxLength')">
-          {{ 'admin.sms-message-max-length' | translate }}
-        </mat-error>
+        @if (sendTestSmsFormGroup.get('message').hasError('required')) {
+          <mat-error>
+            {{ 'admin.sms-message-required' | translate }}
+          </mat-error>
+        }
+        @if (sendTestSmsFormGroup.get('message').hasError('maxLength')) {
+          <mat-error>
+            {{ 'admin.sms-message-max-length' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
     </fieldset>
   </div>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
index 2c38ad4ab8..a723b89043 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
@@ -15,35 +15,41 @@
     limitations under the License.
 
 -->
-<mat-card appearance="outlined" class="settings-card" *ngIf="isSysAdmin()">
-  <mat-card-header>
-    <mat-card-title>
-      <span class="mat-headline-5" translate>admin.sms-provider-settings</span>
-    </mat-card-title>
-    <span class="flex-1"></span>
-    <div tb-help="smsProviderSettings"></div>
-  </mat-card-header>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <mat-card-content>
-    <form [formGroup]="smsProvider" (ngSubmit)="save()">
-      <tb-sms-provider-configuration
-        required
-        formControlName="configuration">
-      </tb-sms-provider-configuration>
-      <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch">
-        <button mat-raised-button type="button"
-                [disabled]="(isLoading$ | async) || smsProvider.invalid" (click)="sendTestSms()">
-          {{'admin.send-test-sms' | translate}}
-        </button>
-        <button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || smsProvider.invalid || !smsProvider.dirty"
-                type="submit">{{'action.save' | translate}}
-        </button>
-      </div>
-    </form>
-  </mat-card-content>
-</mat-card>
+@if (isSysAdmin()) {
+  <mat-card appearance="outlined" class="settings-card">
+    <mat-card-header>
+      <mat-card-title>
+        <span class="mat-headline-5" translate>admin.sms-provider-settings</span>
+      </mat-card-title>
+      <span class="flex-1"></span>
+      <div tb-help="smsProviderSettings"></div>
+    </mat-card-header>
+    @if (isLoading$ | async) {
+      <mat-progress-bar color="warn" mode="indeterminate">
+      </mat-progress-bar>
+    }
+    @if (!(isLoading$ | async)) {
+      <div style="height: 4px;"></div>
+    }
+    <mat-card-content>
+      <form [formGroup]="smsProvider" (ngSubmit)="save()">
+        <tb-sms-provider-configuration
+          required
+          formControlName="configuration">
+        </tb-sms-provider-configuration>
+        <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch">
+          <button mat-raised-button type="button"
+                  [disabled]="(isLoading$ | async) || smsProvider.invalid" (click)="sendTestSms()">
+            {{'admin.send-test-sms' | translate}}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || smsProvider.invalid || !smsProvider.dirty"
+                  type="submit">{{'action.save' | translate}}
+          </button>
+        </div>
+      </form>
+    </mat-card-content>
+  </mat-card>
+}
 <form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
   <mat-card appearance="outlined" class="settings-card" formGroupName="deliveryMethodsConfigs">
     <mat-card-header>
@@ -53,32 +59,40 @@
       <span class="flex-1"></span>
       <div tb-help="slackSettings"></div>
     </mat-card-header>
-    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-    </mat-progress-bar>
-    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+    @if (isLoading$ | async) {
+      <mat-progress-bar color="warn" mode="indeterminate">
+      </mat-progress-bar>
+    }
+    @if (!(isLoading$ | async)) {
+      <div style="height: 4px;"></div>
+    }
     <mat-card-content formGroupName="SLACK">
       <mat-form-field class="mat-block" subscriptSizing="dynamic">
         <mat-label translate>admin.slack-api-token</mat-label>
         <input matInput formControlName="botToken"/>
       </mat-form-field>
     </mat-card-content>
-    <mat-card-header *ngIf="isSysAdmin()">
-      <mat-card-title>
-        <span class="mat-headline-5" translate>admin.mobile-settings</span>
-      </mat-card-title>
-      <span class="flex-1"></span>
-      <!--    <div tb-help="mobileSettings"></div>-->
-    </mat-card-header>
-    <mat-card-content formGroupName="MOBILE_APP" *ngIf="isSysAdmin()">
-      <tb-file-input formControlName="firebaseServiceAccountCredentials"
-                     dropLabel="{{ 'admin.select-firebase-service-account-file' | translate }}"
-                     label="{{ 'admin.firebase-service-account-file' | translate }}"
-                     accept=".json,application/json"
-                     allowedExtensions="json"
-                     [existingFileName]="notificationSettingsForm.get('deliveryMethodsConfigs.MOBILE_APP.firebaseServiceAccountCredentialsFileName')?.value"
-                     (fileNameChanged)="notificationSettingsForm?.get('deliveryMethodsConfigs.MOBILE_APP.firebaseServiceAccountCredentialsFileName').patchValue($event)">
-      </tb-file-input>
-    </mat-card-content>
+    @if (isSysAdmin()) {
+      <mat-card-header>
+        <mat-card-title>
+          <span class="mat-headline-5" translate>admin.mobile-settings</span>
+        </mat-card-title>
+        <span class="flex-1"></span>
+        <!--    <div tb-help="mobileSettings"></div>-->
+      </mat-card-header>
+    }
+    @if (isSysAdmin()) {
+      <mat-card-content formGroupName="MOBILE_APP">
+        <tb-file-input formControlName="firebaseServiceAccountCredentials"
+                       dropLabel="{{ 'admin.select-firebase-service-account-file' | translate }}"
+                       label="{{ 'admin.firebase-service-account-file' | translate }}"
+                       accept=".json,application/json"
+                       allowedExtensions="json"
+                       [existingFileName]="notificationSettingsForm.get('deliveryMethodsConfigs.MOBILE_APP.firebaseServiceAccountCredentialsFileName')?.value"
+                       (fileNameChanged)="notificationSettingsForm?.get('deliveryMethodsConfigs.MOBILE_APP.firebaseServiceAccountCredentialsFileName').patchValue($event)">
+        </tb-file-input>
+      </mat-card-content>
+    }
     <mat-card-actions  class="flex items-center justify-end xs:flex-col xs:items-stretch">
       <button mat-button mat-raised-button color="primary"
               [disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/trendz-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/trendz-settings.component.html
index 4aa050c478..07789156bb 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/trendz-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/trendz-settings.component.html
@@ -24,9 +24,13 @@
       <span class="flex-1"></span>
       <div tb-help="trendzSettings"></div>
     </mat-card-header>
-    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-    </mat-progress-bar>
-    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+    @if (isLoading$ | async) {
+      <mat-progress-bar color="warn" mode="indeterminate">
+      </mat-progress-bar>
+    }
+    @if (!(isLoading$ | async)) {
+      <div style="height: 4px;"></div>
+    }
     <mat-card-content>
       <form [formGroup]="trendzSettingsForm" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
@@ -37,19 +41,25 @@
             <mat-form-field class="tb-trendz-url mat-block flex-1" subscriptSizing="dynamic">
               <mat-label translate>admin.trendz-url</mat-label>
               <input matInput formControlName="trendzUrl">
-              <mat-error *ngIf="trendzSettingsForm.get('trendzUrl').hasError('required')">
-                {{ 'admin.trendz-url-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="trendzSettingsForm.get('trendzUrl').hasError('pattern')">
-                {{ 'mobile.invalid-url-format' | translate }}
-              </mat-error>
+              @if (trendzSettingsForm.get('trendzUrl').hasError('required')) {
+                <mat-error>
+                  {{ 'admin.trendz-url-required' | translate }}
+                </mat-error>
+              }
+              @if (trendzSettingsForm.get('trendzUrl').hasError('pattern')) {
+                <mat-error>
+                  {{ 'mobile.invalid-url-format' | translate }}
+                </mat-error>
+              }
             </mat-form-field>
             <mat-form-field class="tb-trendz-api-key mat-block flex-1" subscriptSizing="dynamic">
               <mat-label translate>admin.trendz-api-key</mat-label>
               <input matInput formControlName="apiKey">
-              <mat-error *ngIf="trendzSettingsForm.get('apiKey').hasError('pattern')">
-                {{ 'widgets.persistent-table.white-space-error' | translate }}
-              </mat-error>
+              @if (trendzSettingsForm.get('apiKey').hasError('pattern')) {
+                <mat-error>
+                  {{ 'widgets.persistent-table.white-space-error' | translate }}
+                </mat-error>
+              }
             </mat-form-field>
           </section>
           <div class="flex w-full flex-row flex-wrap items-center justify-end">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
index 2da7097509..46495abd5e 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
@@ -24,9 +24,13 @@
       <span class="flex-1"></span>
       <div tb-help="twoFactorAuthentication"></div>
     </mat-card-header>
-    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-    </mat-progress-bar>
-    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+    @if (isLoading$ | async) {
+      <mat-progress-bar color="warn" mode="indeterminate">
+      </mat-progress-bar>
+    }
+    @if (!(isLoading$ | async)) {
+      <div style="height: 4px;"></div>
+    }
     <mat-card-content>
       <form [formGroup]="twoFaFormGroup" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
@@ -47,42 +51,45 @@
                     <mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic">
                       <mat-label translate>admin.2fa.enforce-for</mat-label>
                       <mat-select formControlName="type">
-                        <mat-option *ngFor="let type of notificationTargetConfigTypes" [value]="type">
-                          {{ notificationTargetConfigTypeInfoMap.get(type).name | translate }}
-                        </mat-option>
+                        @for (type of notificationTargetConfigTypes; track type) {
+                          <mat-option [value]="type">
+                            {{ notificationTargetConfigTypeInfoMap.get(type).name | translate }}
+                          </mat-option>
+                        }
                       </mat-select>
                     </mat-form-field>
-                    <section class="tb-form-panel no-padding no-border" *ngIf="twoFaFormGroup.get('enforcedUsersFilter.type').value === notificationTargetConfigType.TENANT_ADMINISTRATORS">
-                      <div class="flex flex-1 items-center justify-center">
-                        <tb-toggle-select class="tb-notification-tenant-group" appearance="fill"
-                                          formControlName="filterByTenants">
-                          <tb-toggle-option [value]="true">{{ 'tenant.tenant' | translate }}</tb-toggle-option>
-                          <tb-toggle-option [value]="false">{{ 'tenant-profile.tenant-profile' | translate }}</tb-toggle-option>
-                        </tb-toggle-select>
-                      </div>
-                      <ng-container *ngIf="twoFaFormGroup.get('enforcedUsersFilter.filterByTenants').value; else tenantProfiles">
-                        <tb-entity-list
-                          formControlName="tenantsIds"
-                          subscriptSizing="dynamic"
-                          appearance="outline"
-                          labelText="{{ 'tenant.tenants' | translate }}"
-                          placeholderText="{{ 'tenant.tenants' | translate }}"
-                          hint="{{ 'notification.tenants-list-rule-hint' | translate }}"
-                          [entityType]="entityType.TENANT">
-                        </tb-entity-list>
-                      </ng-container>
-                      <ng-template #tenantProfiles>
-                        <tb-entity-list
-                          formControlName="tenantProfilesIds"
-                          subscriptSizing="dynamic"
-                          appearance="outline"
-                          labelText="{{ 'tenant-profile.tenant-profiles' | translate }}"
-                          placeholderText="{{ 'tenant-profile.tenant-profiles' | translate }}"
-                          hint="{{ 'notification.tenant-profiles-list-rule-hint' | translate }}"
-                          [entityType]="entityType.TENANT_PROFILE">
-                        </tb-entity-list>
-                      </ng-template>
-                    </section>
+                    @if (twoFaFormGroup.get('enforcedUsersFilter.type').value === notificationTargetConfigType.TENANT_ADMINISTRATORS) {
+                      <section class="tb-form-panel no-padding no-border">
+                        <div class="flex flex-1 items-center justify-center">
+                          <tb-toggle-select class="tb-notification-tenant-group" appearance="fill"
+                                            formControlName="filterByTenants">
+                            <tb-toggle-option [value]="true">{{ 'tenant.tenant' | translate }}</tb-toggle-option>
+                            <tb-toggle-option [value]="false">{{ 'tenant-profile.tenant-profile' | translate }}</tb-toggle-option>
+                          </tb-toggle-select>
+                        </div>
+                        @if (twoFaFormGroup.get('enforcedUsersFilter.filterByTenants').value) {
+                          <tb-entity-list
+                            formControlName="tenantsIds"
+                            subscriptSizing="dynamic"
+                            appearance="outline"
+                            labelText="{{ 'tenant.tenants' | translate }}"
+                            placeholderText="{{ 'tenant.tenants' | translate }}"
+                            hint="{{ 'notification.tenants-list-rule-hint' | translate }}"
+                            [entityType]="entityType.TENANT">
+                          </tb-entity-list>
+                        } @else {
+                          <tb-entity-list
+                            formControlName="tenantProfilesIds"
+                            subscriptSizing="dynamic"
+                            appearance="outline"
+                            labelText="{{ 'tenant-profile.tenant-profiles' | translate }}"
+                            placeholderText="{{ 'tenant-profile.tenant-profiles' | translate }}"
+                            hint="{{ 'notification.tenant-profiles-list-rule-hint' | translate }}"
+                            [entityType]="entityType.TENANT_PROFILE">
+                          </tb-entity-list>
+                        }
+                      </section>
+                    }
                   </section>
                 </ng-template>
               </mat-expansion-panel>
@@ -93,42 +100,48 @@
               @if (!atListOneProvider) {
                 <tb-error noMargin error="{{ 'admin.2fa.available-providers-required' | translate }}" class="flex h-4 items-center pl-3"/>
               }
-              <ng-container *ngFor="let provider of providersForm.controls; let i = index; trackBy: trackByElement">
-                  <div class="tb-form-panel stroked tb-slide-toggle">
-                    <mat-expansion-panel class="tb-settings" [formGroupName]="i">
-                      <mat-expansion-panel-header>
-                        <mat-panel-title>
-                          <mat-slide-toggle class="mat-slide flex items-center justify-start"
-                            (mousedown)="toggleExtensionPanel($event, i+1, provider.get('enable').value)"
-                            formControlName="enable">
-                            {{ twoFactorAuthProvidersData.get(provider.value.providerType).name | translate }}
-                          </mat-slide-toggle>
-                        </mat-panel-title>
-                      </mat-expansion-panel-header>
-
-                      <ng-template matExpansionPanelContent>
-                        <ng-container [ngSwitch]="provider.get('providerType').value">
-                          <ng-container *ngSwitchCase="twoFactorAuthProviderType.TOTP">
-                            <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
-                              <mat-label translate>admin.2fa.issuer-name</mat-label>
-                              <input matInput formControlName="issuerName" required>
-                              <mat-error *ngIf="provider.get('issuerName').hasError('required') ||
-                                                provider.get('issuerName').hasError('pattern')">
+              @for (provider of providersForm.controls; track trackByElement(i, 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>
+                      <mat-panel-title>
+                        <mat-slide-toggle class="mat-slide flex items-center justify-start"
+                                          (mousedown)="toggleExtensionPanel($event, i+1, provider.get('enable').value)"
+                                          formControlName="enable">
+                          {{ twoFactorAuthProvidersData.get(provider.value.providerType).name | translate }}
+                        </mat-slide-toggle>
+                      </mat-panel-title>
+                    </mat-expansion-panel-header>
+                    <ng-template matExpansionPanelContent>
+                      @switch (provider.get('providerType').value) {
+                        @case (twoFactorAuthProviderType.TOTP) {
+                          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
+                            <mat-label translate>admin.2fa.issuer-name</mat-label>
+                            <input matInput formControlName="issuerName" required>
+                            @if (provider.get('issuerName').hasError('required') ||
+                              provider.get('issuerName').hasError('pattern')) {
+                              <mat-error>
                                 {{ "admin.2fa.issuer-name-required" | translate }}
                               </mat-error>
-                            </mat-form-field>
-                          </ng-container>
-                          <div *ngSwitchCase="twoFactorAuthProviderType.SMS"
-                               >
+                            }
+                          </mat-form-field>
+                        }
+                        @case (twoFactorAuthProviderType.SMS) {
+                          <div
+                            >
                             <mat-form-field class="mat-block flex-1" appearance="outline">
                               <mat-label translate>admin.2fa.verification-message-template</mat-label>
                               <input matInput formControlName="smsVerificationMessageTemplate" required>
-                              <mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('required')">
-                                {{ "admin.2fa.verification-message-template-required" | translate }}
-                              </mat-error>
-                              <mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('pattern')">
-                                {{ "admin.2fa.verification-message-template-pattern" | translate }}
-                              </mat-error>
+                              @if (provider.get('smsVerificationMessageTemplate').hasError('required')) {
+                                <mat-error>
+                                  {{ "admin.2fa.verification-message-template-required" | translate }}
+                                </mat-error>
+                              }
+                              @if (provider.get('smsVerificationMessageTemplate').hasError('pattern')) {
+                                <mat-error>
+                                  {{ "admin.2fa.verification-message-template-pattern" | translate }}
+                                </mat-error>
+                              }
                             </mat-form-field>
                             <tb-time-unit-input
                               appearance="outline"
@@ -141,7 +154,9 @@
                               formControlName="verificationCodeLifetime">
                             </tb-time-unit-input>
                           </div>
-                          <div *ngSwitchCase="twoFactorAuthProviderType.EMAIL">
+                        }
+                        @case (twoFactorAuthProviderType.EMAIL) {
+                          <div>
                             <tb-time-unit-input
                               appearance="outline"
                               subscriptSizing="dynamic"
@@ -153,24 +168,31 @@
                               formControlName="verificationCodeLifetime">
                             </tb-time-unit-input>
                           </div>
-                          <div *ngSwitchCase="twoFactorAuthProviderType.BACKUP_CODE">
+                        }
+                        @case (twoFactorAuthProviderType.BACKUP_CODE) {
+                          <div>
                             <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
                               <mat-label translate>admin.2fa.number-of-codes</mat-label>
                               <input matInput formControlName="codesQuantity" type="number" step="1" min="1" required>
-                              <mat-error *ngIf="provider.get('codesQuantity').hasError('required')">
-                                {{ "admin.2fa.number-of-codes-required" | translate }}
-                              </mat-error>
-                              <mat-error *ngIf="provider.get('codesQuantity').hasError('min') ||
-                                                provider.get('codesQuantity').hasError('pattern')">
-                                {{ "admin.2fa.number-of-codes-pattern" | translate }}
-                              </mat-error>
+                              @if (provider.get('codesQuantity').hasError('required')) {
+                                <mat-error>
+                                  {{ "admin.2fa.number-of-codes-required" | translate }}
+                                </mat-error>
+                              }
+                              @if (provider.get('codesQuantity').hasError('min') ||
+                                provider.get('codesQuantity').hasError('pattern')) {
+                                <mat-error>
+                                  {{ "admin.2fa.number-of-codes-pattern" | translate }}
+                                </mat-error>
+                              }
                             </mat-form-field>
                           </div>
-                        </ng-container>
-                      </ng-template>
-                    </mat-expansion-panel>
-                  </div>
-              </ng-container>
+                        }
+                      }
+                    </ng-template>
+                  </mat-expansion-panel>
+                </div>
+              }
             </section>
             <section class="tb-form-panel stroked mb-4">
               <div class="tb-form-panel-title" translate>admin.2fa.verification-limitations</div>
@@ -197,11 +219,13 @@
                   <mat-form-field class="mat-block flex-1" appearance="outline">
                     <mat-label translate>admin.2fa.max-verification-failures-before-user-lockout</mat-label>
                     <input matInput formControlName="maxVerificationFailuresBeforeUserLockout" type="number" step="1" min="0" max="65535">
-                    <mat-error *ngIf="twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('pattern')
+                    @if (twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('pattern')
                       || twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('min')
-                      || twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('max')">
-                      {{ 'admin.2fa.max-verification-failures-before-user-lockout-pattern' | translate }}
-                    </mat-error>
+                      || twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('max')) {
+                      <mat-error>
+                        {{ 'admin.2fa.max-verification-failures-before-user-lockout-pattern' | translate }}
+                      </mat-error>
+                    }
                   </mat-form-field>
                 </div>
                 <div class="tb-form-panel stroked tb-slide-toggle">
@@ -219,13 +243,17 @@
                         <mat-form-field class="mat-block flex-1" appearance="outline">
                           <mat-label translate>admin.2fa.number-of-checking-attempts</mat-label>
                           <input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1">
-                          <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')">
-                            {{ 'admin.2fa.number-of-checking-attempts-required' | translate }}
-                          </mat-error>
-                          <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('pattern')
-                        || twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('min')">
-                            {{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}
-                          </mat-error>
+                          @if (twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')) {
+                            <mat-error>
+                              {{ 'admin.2fa.number-of-checking-attempts-required' | translate }}
+                            </mat-error>
+                          }
+                          @if (twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('pattern')
+                            || twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('min')) {
+                            <mat-error>
+                              {{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}
+                            </mat-error>
+                          }
                         </mat-form-field>
                         <tb-time-unit-input
                           appearance="outline"
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-tabs.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-tabs.component.html
index 73d78d43d4..e2a325095e 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-tabs.component.html
@@ -15,13 +15,17 @@
     limitations under the License.
 
 -->
-<mat-tab *ngIf="entity && authUser.authority === authorities.TENANT_ADMIN"
-         label="{{ 'audit-log.audit-logs' | translate }}" #auditLogsTab="matTab">
-  <tb-audit-log-table [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.ENTITY" [entityId]="entity.id" detailsMode="true"></tb-audit-log-table>
-</mat-tab>
-<mat-tab *ngIf="entity && authUser.authority === authorities.TENANT_ADMIN"
-         label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
-  <tb-version-control detailsMode="true" singleEntityMode="true"
-                      (versionRestored)="entitiesTableConfig.updateData()"
-                      [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.name" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
-</mat-tab>
+@if (entity && authUser.authority === authorities.TENANT_ADMIN) {
+  <mat-tab
+    label="{{ 'audit-log.audit-logs' | translate }}" #auditLogsTab="matTab">
+    <tb-audit-log-table [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.ENTITY" [entityId]="entity.id" detailsMode="true"></tb-audit-log-table>
+  </mat-tab>
+}
+@if (entity && authUser.authority === authorities.TENANT_ADMIN) {
+  <mat-tab
+    label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
+    <tb-version-control detailsMode="true" singleEntityMode="true"
+                        (versionRestored)="entitiesTableConfig.updateData()"
+    [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.name" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
+  </mat-tab>
+}
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/import-dashboard-file-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/import-dashboard-file-dialog.component.html
index 304ea22c33..3286044628 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/import-dashboard-file-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/import-dashboard-file-dialog.component.html
@@ -25,19 +25,22 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
-      <tb-file-input [contentConvertFunction]="loadDataFromJsonContent"
-                     [existingFileName]="currentFileName"
-                     (fileNameChanged)="currentFileName = $event"
-                     label="{{'dashboard.upload-file-to-update' | translate}}"
-                     formControlName="file"
-                     dropLabel="{{ 'import.drop-json-file-or' | translate }}"
-                     accept=".json,application/json"
-                     allowedExtensions="json">
-      </tb-file-input>
+    <tb-file-input [contentConvertFunction]="loadDataFromJsonContent"
+                   [existingFileName]="currentFileName"
+                   (fileNameChanged)="currentFileName = $event"
+                   label="{{'dashboard.upload-file-to-update' | translate}}"
+                   formControlName="file"
+                   dropLabel="{{ 'import.drop-json-file-or' | translate }}"
+                   accept=".json,application/json"
+                   allowedExtensions="json">
+    </tb-file-input>
   </div>
 
   <div mat-dialog-actions class="flex flex-row items-center justify-end">
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
index 43f0f3dc6b..e21f996584 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
@@ -25,13 +25,14 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content tb-toast toastTarget="makeDashboardPublicDialogContent">
-    <span
-       innerHTML="{{ translate.get('dashboard.public-dashboard-text', {dashboardTitle: dashboard.title, publicLink: publicLink}) | async }}">
-    </span>
+    <span innerHTML="{{ translate.get('dashboard.public-dashboard-text', {dashboardTitle: dashboard.title, publicLink: publicLink}) | async }}"></span>
     <div class="flex flex-row items-center justify-start">
       <pre class="tb-highlight flex-1"><code>{{ publicLink }}</code></pre>
       <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
index eaefd374ec..f53a8b37ca 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
@@ -26,9 +26,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
       <span>{{ labelText | translate }}</span>
diff --git a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html
index 69dd15b60f..db5287fd68 100644
--- a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html
@@ -17,28 +17,36 @@
 -->
 @if (entity) {
   <mat-tab #transportType="matTab" label="{{ 'device-profile.transport-configuration' | translate }}">
-    <div class="mat-padding" [formGroup]="detailsForm" *ngIf="transportType.isActive">
-      <mat-form-field class="mat-block">
-        <mat-label translate>device-profile.transport-type</mat-label>
-        <mat-select formControlName="transportType" required>
-          <mat-option *ngFor="let type of deviceTransportTypes" [value]="type">
-            {{deviceTransportTypeTranslations.get(type) | translate}}
-          </mat-option>
-        </mat-select>
-        <mat-hint *ngIf="detailsForm.get('transportType').value">
-          {{deviceTransportTypeHints.get(detailsForm.get('transportType').value) | translate}}
-        </mat-hint>
-        <mat-error *ngIf="detailsForm.get('transportType').hasError('required')">
-          {{ 'device-profile.transport-type-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <div formGroupName="profileData">
-        <tb-device-profile-transport-configuration
-          formControlName="transportConfiguration"
-          [isAdd]="isTransportTypeChanged">
-        </tb-device-profile-transport-configuration>
+    @if (transportType.isActive) {
+      <div class="mat-padding" [formGroup]="detailsForm">
+        <mat-form-field class="mat-block">
+          <mat-label translate>device-profile.transport-type</mat-label>
+          <mat-select formControlName="transportType" required>
+            @for (type of deviceTransportTypes; track type) {
+              <mat-option [value]="type">
+                {{deviceTransportTypeTranslations.get(type) | translate}}
+              </mat-option>
+            }
+          </mat-select>
+          @if (detailsForm.get('transportType').value) {
+            <mat-hint>
+              {{deviceTransportTypeHints.get(detailsForm.get('transportType').value) | translate}}
+            </mat-hint>
+          }
+          @if (detailsForm.get('transportType').hasError('required')) {
+            <mat-error>
+              {{ 'device-profile.transport-type-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+        <div formGroupName="profileData">
+          <tb-device-profile-transport-configuration
+            formControlName="transportConfiguration"
+            [isAdd]="isTransportTypeChanged">
+          </tb-device-profile-transport-configuration>
+        </div>
       </div>
-    </div>
+    }
   </mat-tab>
   @if (authUser.authority === authorities.TENANT_ADMIN && !isEdit) {
     <mat-tab label="{{ 'entity.type-calculated-fields' | translate }}" #calculatedFieldsTab="matTab">
@@ -58,11 +66,13 @@
           </div>
         }
         @if (alarmRulesOldVersion || isEdit) {
-          <div class="mat-padding" [formGroup]="detailsForm" *ngIf="alarmRules.isActive">
-            <div formGroupName="profileData">
-              <tb-device-profile-alarms formControlName="alarms" [deviceProfileId]="entity.id"></tb-device-profile-alarms>
+          @if (alarmRules.isActive) {
+            <div class="mat-padding" [formGroup]="detailsForm">
+              <div formGroupName="profileData">
+                <tb-device-profile-alarms formControlName="alarms" [deviceProfileId]="entity.id"></tb-device-profile-alarms>
+              </div>
             </div>
-          </div>
+          }
         } @else {
           <div class="relative h-full">
             <tb-alarm-rules-table [active]="alarmRules.isActive"
@@ -77,12 +87,14 @@
   }
 
   <mat-tab #deviceProvisioning="matTab" label="{{ 'device-profile.device-provisioning' | translate }}">
-    <div class="mat-padding" [formGroup]="detailsForm" *ngIf="deviceProvisioning.isActive">
-      <div formGroupName="profileData">
-        <tb-device-profile-provision-configuration formControlName="provisionConfiguration">
-        </tb-device-profile-provision-configuration>
+    @if (deviceProvisioning.isActive) {
+      <div class="mat-padding" [formGroup]="detailsForm">
+        <div formGroupName="profileData">
+          <tb-device-profile-provision-configuration formControlName="provisionConfiguration">
+          </tb-device-profile-provision-configuration>
+        </div>
       </div>
-    </div>
+    }
   </mat-tab>
   @if (!isEdit) {
     <mat-tab #auditLogsTab="matTab" label="{{ 'audit-log.audit-logs' | translate }}">
@@ -101,13 +113,15 @@
     </mat-tab>
   }
 }
-<mat-tab *ngIf="false"
-         label="{{'device-profile.profile-configuration' | translate }}" #deviceProfile="matTab">
-  <div class="mat-padding" [formGroup]="detailsForm">
-    <div formGroupName="profileData">
-      <tb-device-profile-configuration
-        formControlName="configuration">
-      </tb-device-profile-configuration>
+@if (false) {
+  <mat-tab
+    label="{{'device-profile.profile-configuration' | translate }}" #deviceProfile="matTab">
+    <div class="mat-padding" [formGroup]="detailsForm">
+      <div formGroupName="profileData">
+        <tb-device-profile-configuration
+          formControlName="configuration">
+        </tb-device-profile-configuration>
+      </div>
     </div>
-  </div>
-</mat-tab>
+  </mat-tab>
+}
diff --git a/ui-ngx/src/app/modules/home/pages/device/data/device-configuration.component.html b/ui-ngx/src/app/modules/home/pages/device/data/device-configuration.component.html
index eaa5d38f0b..64d28b2b9a 100644
--- a/ui-ngx/src/app/modules/home/pages/device/data/device-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/data/device-configuration.component.html
@@ -16,12 +16,14 @@
 
 -->
 <div [formGroup]="deviceConfigurationFormGroup">
-  <div [ngSwitch]="type">
-    <ng-template [ngSwitchCase]="deviceProfileType.DEFAULT">
-      <tb-default-device-configuration
-        [required]="required"
-        formControlName="configuration">
-      </tb-default-device-configuration>
-    </ng-template>
+  <div>
+    @switch (type) {
+      @case (deviceProfileType.DEFAULT) {
+        <tb-default-device-configuration
+          [required]="required"
+          formControlName="configuration">
+        </tb-default-device-configuration>
+      }
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/device/data/device-data.component.html b/ui-ngx/src/app/modules/home/pages/device/data/device-data.component.html
index d5690a9cdc..cb9b8eed57 100644
--- a/ui-ngx/src/app/modules/home/pages/device/data/device-data.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/data/device-data.component.html
@@ -17,27 +17,31 @@
 -->
 <div [formGroup]="deviceDataFormGroup" style="padding-bottom: 16px;">
   <mat-accordion multi="true">
-    <mat-expansion-panel *ngIf="displayDeviceConfiguration" [expanded]="true">
-      <mat-expansion-panel-header>
-        <mat-panel-title>
-          <div translate>device.device-configuration</div>
-        </mat-panel-title>
-      </mat-expansion-panel-header>
-      <tb-device-configuration
-        formControlName="configuration"
-        required>
-      </tb-device-configuration>
-    </mat-expansion-panel>
-    <mat-expansion-panel *ngIf="displayTransportConfiguration" [expanded]="true">
-      <mat-expansion-panel-header>
-        <mat-panel-title>
-          <div translate>device.transport-configuration</div>
-        </mat-panel-title>
-      </mat-expansion-panel-header>
-      <tb-device-transport-configuration
-        formControlName="transportConfiguration"
-        required>
-      </tb-device-transport-configuration>
-    </mat-expansion-panel>
+    @if (displayDeviceConfiguration) {
+      <mat-expansion-panel [expanded]="true">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            <div translate>device.device-configuration</div>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <tb-device-configuration
+          formControlName="configuration"
+          required>
+        </tb-device-configuration>
+      </mat-expansion-panel>
+    }
+    @if (displayTransportConfiguration) {
+      <mat-expansion-panel [expanded]="true">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            <div translate>device.transport-configuration</div>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <tb-device-transport-configuration
+          formControlName="transportConfiguration"
+          required>
+        </tb-device-transport-configuration>
+      </mat-expansion-panel>
+    }
   </mat-accordion>
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/device/data/device-transport-configuration.component.html b/ui-ngx/src/app/modules/home/pages/device/data/device-transport-configuration.component.html
index b18974839e..41f2007ce9 100644
--- a/ui-ngx/src/app/modules/home/pages/device/data/device-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/data/device-transport-configuration.component.html
@@ -16,36 +16,38 @@
 
 -->
 <div [formGroup]="deviceTransportConfigurationFormGroup">
-  <div [ngSwitch]="transportType">
-    <ng-template [ngSwitchCase]="deviceTransportType.DEFAULT">
-      <tb-default-device-transport-configuration
-        [required]="required"
-        formControlName="configuration">
-      </tb-default-device-transport-configuration>
-    </ng-template>
-    <ng-template [ngSwitchCase]="deviceTransportType.MQTT">
-      <tb-mqtt-device-transport-configuration
-        [required]="required"
-        formControlName="configuration">
-      </tb-mqtt-device-transport-configuration>
-    </ng-template>
-    <ng-template [ngSwitchCase]="deviceTransportType.LWM2M">
-      <tb-lwm2m-device-transport-configuration
-        [required]="required"
-        formControlName="configuration">
-      </tb-lwm2m-device-transport-configuration>
-    </ng-template>
-    <ng-template [ngSwitchCase]="deviceTransportType.COAP">
-      <tb-coap-device-transport-configuration
-        [required]="required"
-        formControlName="configuration">
-      </tb-coap-device-transport-configuration>
-    </ng-template>
-    <ng-template [ngSwitchCase]="deviceTransportType.SNMP">
-      <tb-snmp-device-transport-configuration
-        [required]="required"
-        formControlName="configuration">
-      </tb-snmp-device-transport-configuration>
-    </ng-template>
+  <div>
+    @switch (transportType) {
+      @case (deviceTransportType.DEFAULT) {
+        <tb-default-device-transport-configuration
+          [required]="required"
+          formControlName="configuration">
+        </tb-default-device-transport-configuration>
+      }
+      @case (deviceTransportType.MQTT) {
+        <tb-mqtt-device-transport-configuration
+          [required]="required"
+          formControlName="configuration">
+        </tb-mqtt-device-transport-configuration>
+      }
+      @case (deviceTransportType.LWM2M) {
+        <tb-lwm2m-device-transport-configuration
+          [required]="required"
+          formControlName="configuration">
+        </tb-lwm2m-device-transport-configuration>
+      }
+      @case (deviceTransportType.COAP) {
+        <tb-coap-device-transport-configuration
+          [required]="required"
+          formControlName="configuration">
+        </tb-coap-device-transport-configuration>
+      }
+      @case (deviceTransportType.SNMP) {
+        <tb-snmp-device-transport-configuration
+          [required]="required"
+          formControlName="configuration">
+        </tb-snmp-device-transport-configuration>
+      }
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html b/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html
index 631c28ad98..992a88ab16 100644
--- a/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html
@@ -20,114 +20,146 @@
     <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.host</mat-label>
       <input matInput formControlName="host" required>
-      <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('host').hasError('required') ||
-                          snmpDeviceTransportConfigurationFormGroup.get('host').hasError('pattern')">
-        {{ 'device-profile.snmp.host-required' | translate }}
-      </mat-error>
+      @if (snmpDeviceTransportConfigurationFormGroup.get('host').hasError('required') ||
+        snmpDeviceTransportConfigurationFormGroup.get('host').hasError('pattern')) {
+        <mat-error>
+          {{ 'device-profile.snmp.host-required' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
     <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.port</mat-label>
       <input matInput formControlName="port" type="number" min="0" required>
-      <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('port').hasError('required')">
-        {{ 'device-profile.snmp.port-required' | translate }}
-      </mat-error>
-      <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('port').hasError('pattern') ||
-                          snmpDeviceTransportConfigurationFormGroup.get('port').hasError('min')">
-        {{ 'device-profile.snmp.port-format' | translate }}
-      </mat-error>
+      @if (snmpDeviceTransportConfigurationFormGroup.get('port').hasError('required')) {
+        <mat-error>
+          {{ 'device-profile.snmp.port-required' | translate }}
+        </mat-error>
+      }
+      @if (snmpDeviceTransportConfigurationFormGroup.get('port').hasError('pattern') ||
+        snmpDeviceTransportConfigurationFormGroup.get('port').hasError('min')) {
+        <mat-error>
+          {{ 'device-profile.snmp.port-format' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
   </div>
   <mat-form-field class="mat-block" floatLabel="always" hideRequiredMarker>
     <mat-label translate>device-profile.snmp.protocol-version</mat-label>
     <mat-select formControlName="protocolVersion" required>
-      <mat-option *ngFor="let snmpDeviceProtocolVersion of snmpDeviceProtocolVersions" [value]="snmpDeviceProtocolVersion">
-        {{ snmpDeviceProtocolVersion | lowercase }}
-      </mat-option>
+      @for (snmpDeviceProtocolVersion of snmpDeviceProtocolVersions; track snmpDeviceProtocolVersion) {
+        <mat-option [value]="snmpDeviceProtocolVersion">
+          {{ snmpDeviceProtocolVersion | lowercase }}
+        </mat-option>
+      }
     </mat-select>
-    <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('protocolVersion').hasError('required')">
-      {{ 'device-profile.snmp.protocol-version-required' | translate }}
-    </mat-error>
-  </mat-form-field>
-  <section *ngIf="!isV3protocolVersion()">
-    <mat-form-field class="mat-block">
-      <mat-label translate>device-profile.snmp.community</mat-label>
-      <input matInput formControlName="community" required>
-      <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('community').hasError('required') ||
-                          snmpDeviceTransportConfigurationFormGroup.get('community').hasError('pattern')">
-        {{ 'device-profile.snmp.community-required' | translate }}
+    @if (snmpDeviceTransportConfigurationFormGroup.get('protocolVersion').hasError('required')) {
+      <mat-error>
+        {{ 'device-profile.snmp.protocol-version-required' | translate }}
       </mat-error>
-    </mat-form-field>
-  </section>
-  <section *ngIf="isV3protocolVersion()">
-    <div class="flex flex-row gap-2 xs:flex-col">
-      <mat-form-field class="flex-1">
-        <mat-label translate>device-profile.snmp.user-name</mat-label>
-        <input matInput formControlName="username" required>
-        <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('username').hasError('required') ||
-                            snmpDeviceTransportConfigurationFormGroup.get('username').hasError('pattern')">
-          {{ 'device-profile.snmp.user-name-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field class="flex-1">
-        <mat-label translate>device-profile.snmp.security-name</mat-label>
-        <input matInput formControlName="securityName" required>
-        <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('securityName').hasError('required') ||
-                            snmpDeviceTransportConfigurationFormGroup.get('securityName').hasError('pattern')">
-          {{ 'device-profile.snmp.security-name-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-    </div>
-    <div class="flex flex-row gap-2 xs:flex-col">
-      <mat-form-field class="flex-1" floatLabel="always" hideRequiredMarker>
-        <mat-label translate>device-profile.snmp.authentication-protocol</mat-label>
-        <mat-select formControlName="authenticationProtocol" required>
-          <mat-option *ngFor="let snmpAuthenticationProtocol of snmpAuthenticationProtocols" [value]="snmpAuthenticationProtocol">
-            {{ snmpAuthenticationProtocolTranslation.get(snmpAuthenticationProtocol) }}
-          </mat-option>
-        </mat-select>
-        <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('authenticationProtocol').hasError('required')">
-          {{ 'device-profile.snmp.authentication-protocol-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field class="flex-1">
-        <mat-label translate>device-profile.snmp.authentication-passphrase</mat-label>
-        <input matInput formControlName="authenticationPassphrase" required>
-        <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('authenticationPassphrase').hasError('required') ||
-                            snmpDeviceTransportConfigurationFormGroup.get('authenticationPassphrase').hasError('pattern')">
-          {{ 'device-profile.snmp.authentication-passphrase-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-    </div>
-    <div class="flex flex-row gap-2 xs:flex-col">
-      <mat-form-field class="flex-1" floatLabel="always" hideRequiredMarker>
-        <mat-label translate>device-profile.snmp.privacy-protocol</mat-label>
-        <mat-select formControlName="privacyProtocol" required>
-          <mat-option *ngFor="let snmpPrivacyProtocol of snmpPrivacyProtocols" [value]="snmpPrivacyProtocol">
-            {{ snmpPrivacyProtocolTranslation.get(snmpPrivacyProtocol) }}
-          </mat-option>
-        </mat-select>
-        <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('privacyProtocol').hasError('required')">
-          {{ 'device-profile.snmp.privacy-protocol-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field class="flex-1">
-        <mat-label translate>device-profile.snmp.privacy-passphrase</mat-label>
-        <input matInput formControlName="privacyPassphrase" required>
-        <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('privacyPassphrase').hasError('required') ||
-                            snmpDeviceTransportConfigurationFormGroup.get('privacyPassphrase').hasError('pattern')">
-          {{ 'device-profile.snmp.privacy-passphrase-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-    </div>
-    <div class="flex flex-row gap-2 xs:flex-col">
-      <mat-form-field class="flex-1">
-        <mat-label translate>device-profile.snmp.context-name</mat-label>
-        <input matInput formControlName="contextName">
-      </mat-form-field>
-      <mat-form-field class="flex-1">
-        <mat-label translate>device-profile.snmp.engine-id</mat-label>
-        <input matInput formControlName="engineId">
+    }
+  </mat-form-field>
+  @if (!isV3protocolVersion()) {
+    <section>
+      <mat-form-field class="mat-block">
+        <mat-label translate>device-profile.snmp.community</mat-label>
+        <input matInput formControlName="community" required>
+        @if (snmpDeviceTransportConfigurationFormGroup.get('community').hasError('required') ||
+          snmpDeviceTransportConfigurationFormGroup.get('community').hasError('pattern')) {
+          <mat-error>
+            {{ 'device-profile.snmp.community-required' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
-    </div>
-  </section>
+    </section>
+  }
+  @if (isV3protocolVersion()) {
+    <section>
+      <div class="flex flex-row gap-2 xs:flex-col">
+        <mat-form-field class="flex-1">
+          <mat-label translate>device-profile.snmp.user-name</mat-label>
+          <input matInput formControlName="username" required>
+          @if (snmpDeviceTransportConfigurationFormGroup.get('username').hasError('required') ||
+            snmpDeviceTransportConfigurationFormGroup.get('username').hasError('pattern')) {
+            <mat-error>
+              {{ 'device-profile.snmp.user-name-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field class="flex-1">
+          <mat-label translate>device-profile.snmp.security-name</mat-label>
+          <input matInput formControlName="securityName" required>
+          @if (snmpDeviceTransportConfigurationFormGroup.get('securityName').hasError('required') ||
+            snmpDeviceTransportConfigurationFormGroup.get('securityName').hasError('pattern')) {
+            <mat-error>
+              {{ 'device-profile.snmp.security-name-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="flex flex-row gap-2 xs:flex-col">
+        <mat-form-field class="flex-1" floatLabel="always" hideRequiredMarker>
+          <mat-label translate>device-profile.snmp.authentication-protocol</mat-label>
+          <mat-select formControlName="authenticationProtocol" required>
+            @for (snmpAuthenticationProtocol of snmpAuthenticationProtocols; track snmpAuthenticationProtocol) {
+              <mat-option [value]="snmpAuthenticationProtocol">
+                {{ snmpAuthenticationProtocolTranslation.get(snmpAuthenticationProtocol) }}
+              </mat-option>
+            }
+          </mat-select>
+          @if (snmpDeviceTransportConfigurationFormGroup.get('authenticationProtocol').hasError('required')) {
+            <mat-error>
+              {{ 'device-profile.snmp.authentication-protocol-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field class="flex-1">
+          <mat-label translate>device-profile.snmp.authentication-passphrase</mat-label>
+          <input matInput formControlName="authenticationPassphrase" required>
+          @if (snmpDeviceTransportConfigurationFormGroup.get('authenticationPassphrase').hasError('required') ||
+            snmpDeviceTransportConfigurationFormGroup.get('authenticationPassphrase').hasError('pattern')) {
+            <mat-error>
+              {{ 'device-profile.snmp.authentication-passphrase-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="flex flex-row gap-2 xs:flex-col">
+        <mat-form-field class="flex-1" floatLabel="always" hideRequiredMarker>
+          <mat-label translate>device-profile.snmp.privacy-protocol</mat-label>
+          <mat-select formControlName="privacyProtocol" required>
+            @for (snmpPrivacyProtocol of snmpPrivacyProtocols; track snmpPrivacyProtocol) {
+              <mat-option [value]="snmpPrivacyProtocol">
+                {{ snmpPrivacyProtocolTranslation.get(snmpPrivacyProtocol) }}
+              </mat-option>
+            }
+          </mat-select>
+          @if (snmpDeviceTransportConfigurationFormGroup.get('privacyProtocol').hasError('required')) {
+            <mat-error>
+              {{ 'device-profile.snmp.privacy-protocol-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field class="flex-1">
+          <mat-label translate>device-profile.snmp.privacy-passphrase</mat-label>
+          <input matInput formControlName="privacyPassphrase" required>
+          @if (snmpDeviceTransportConfigurationFormGroup.get('privacyPassphrase').hasError('required') ||
+            snmpDeviceTransportConfigurationFormGroup.get('privacyPassphrase').hasError('pattern')) {
+            <mat-error>
+              {{ 'device-profile.snmp.privacy-passphrase-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="flex flex-row gap-2 xs:flex-col">
+        <mat-form-field class="flex-1">
+          <mat-label translate>device-profile.snmp.context-name</mat-label>
+          <input matInput formControlName="contextName">
+        </mat-form-field>
+        <mat-form-field class="flex-1">
+          <mat-label translate>device-profile.snmp.engine-id</mat-label>
+          <input matInput formControlName="engineId">
+        </mat-form-field>
+      </div>
+    </section>
+  }
 </form>
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
index fd30184330..20ef481b4a 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
@@ -18,7 +18,7 @@
 <mat-toolbar color="primary">
   <h2 translate>{{ dialogTitle }}</h2>
   <span class="flex-1"></span>
-<!--  <div [tb-help]="'check-connectivity'"></div>-->
+  <!--  <div [tb-help]="'check-connectivity'"></div>-->
   <button mat-icon-button
           (click)="close()"
           type="button">
@@ -26,117 +26,50 @@
   </button>
 </mat-toolbar>
 <div mat-dialog-content>
-  <section *ngIf="loadedCommand; else loadingCommand" class="tb-form-panel no-padding no-border">
-    <tb-toggle-header #transportProtocol
-                      value="{{ selectTransportType }}"
-                      name="TransportProtocol"
-                      useSelectOnMdLg="false"
-                      appearance="fill"
-                      [class.!hidden]="allowTransportType.size < 2">
-      <tb-toggle-option
-        *ngIf="allowTransportType.has(BasicTransportType.HTTP)"
-        [value]="BasicTransportType.HTTP">
-        {{ deviceTransportTypeTranslationMap.get(BasicTransportType.HTTP) | translate }}
-      </tb-toggle-option>
-      <tb-toggle-option
-        *ngIf="allowTransportType.has(DeviceTransportType.MQTT)"
-        [value]="DeviceTransportType.MQTT">
-        {{ deviceTransportTypeTranslationMap.get(DeviceTransportType.MQTT) | translate }}
-      </tb-toggle-option>
-      <tb-toggle-option
-        *ngIf="allowTransportType.has(DeviceTransportType.COAP)"
-        [value]="DeviceTransportType.COAP">
-        {{ deviceTransportTypeTranslationMap.get(DeviceTransportType.COAP) | translate }}
-      </tb-toggle-option>
-      <tb-toggle-option
-        *ngIf="allowTransportType.has(DeviceTransportType.SNMP)"
-        [value]="DeviceTransportType.SNMP">
-        {{ deviceTransportTypeTranslationMap.get(DeviceTransportType.SNMP) | translate }}
-      </tb-toggle-option>
-      <tb-toggle-option
-        *ngIf="allowTransportType.has(DeviceTransportType.LWM2M)"
-        [value]="DeviceTransportType.LWM2M">
-        {{ deviceTransportTypeTranslationMap.get(DeviceTransportType.LWM2M) | translate }}
-      </tb-toggle-option>
-    </tb-toggle-header>
-    <div class="tb-form-panel no-padding no-border" [class.!hidden]="!allowTransportType.size">
-      <ng-container [ngSwitch]="transportProtocol.value">
-        <ng-template [ngSwitchCase]="BasicTransportType.HTTP">
-          <div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
-          <mat-tab-group [(selectedIndex)]="httpTabIndex">
-            <mat-tab>
-              <ng-template mat-tab-label>
-                <mat-icon class="tabs-icon" svgIcon="windows"></mat-icon>
-                Windows
-              </ng-template>
-              <ng-template matTabContent>
-                <div class="tb-form-panel no-padding no-border tb-tab-body">
-                  <div class="tb-form-panel stroked">
-                    <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
-                    <div class="tb-install-instruction-text" translate>device.connectivity.install-curl-windows</div>
-                  </div>
-                  <ng-container
-                    *ngTemplateOutlet="executeCommand; context: {cmd: {
-                              noSecLabel: 'HTTP', noSec: commands.http.http,
-                              secLabel: 'HTTPs', sec: commands.http.https,
-                              doc: {text: '', href: ''}}}">
-                  </ng-container>
-                </div>
-              </ng-template>
-            </mat-tab>
-            <mat-tab>
-              <ng-template mat-tab-label>
-                <mat-icon class="tabs-icon" svgIcon="macos"></mat-icon>
-                MacOS
-              </ng-template>
-              <ng-template matTabContent>
-                <div class="tb-form-panel no-padding no-border tb-tab-body">
-                  <div class="tb-form-panel stroked">
-                    <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
-                    <div class="tb-install-instruction-text" translate>device.connectivity.install-curl-macos</div>
-                  </div>
-                  <ng-container
-                    *ngTemplateOutlet="executeCommand; context: {cmd: {
-                              noSecLabel: 'HTTP', noSec: commands.http.http,
-                              secLabel: 'HTTPs', sec: commands.http.https,
-                              doc: {text: '', href: ''}}}">
-                  </ng-container>
-                </div>
-              </ng-template>
-            </mat-tab>
-            <mat-tab>
-              <ng-template mat-tab-label>
-                <mat-icon class="tabs-icon" svgIcon="linux"></mat-icon>
-                Linux
-              </ng-template>
-              <ng-template matTabContent>
-                <div class="tb-form-panel no-padding no-border tb-tab-body">
-                  <div class="tb-form-panel stroked">
-                    <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
-                    <tb-markdown usePlainMarkdown containerClass="tb-command-code"
-                                 [data]='createMarkDownCommand("sudo apt-get install curl")'></tb-markdown>
-                  </div>
-                  <ng-container
-                    *ngTemplateOutlet="executeCommand; context: {cmd: {
-                              noSecLabel: 'HTTP', noSec: commands.http.http,
-                              secLabel: 'HTTPs', sec: commands.http.https,
-                              doc: {text: '', href: ''}}}">
-                  </ng-container>
-                </div>
-              </ng-template>
-            </mat-tab>
-          </mat-tab-group>
-        </ng-template>
-        <ng-template [ngSwitchCase]="DeviceTransportType.MQTT">
-          <div *ngIf="commands.mqtt.sparkplug; else mqttCommands" class="tb-form-panel stroked">
-            <ng-container
-              *ngTemplateOutlet="seeDocumentation; context:
-              {doc: {text: 'device.connectivity.sparkplug-command', href: 'https://thingsboard.io/docs/reference/mqtt-sparkplug-api/'}}">
-            </ng-container>
-          </div>
-          <ng-template #mqttCommands>
+  @if (loadedCommand) {
+    <section class="tb-form-panel no-padding no-border">
+      <tb-toggle-header #transportProtocol
+                        value="{{ selectTransportType }}"
+                        name="TransportProtocol"
+                        useSelectOnMdLg="false"
+                        appearance="fill"
+                        [class.!hidden]="allowTransportType.size < 2">
+        @if (allowTransportType.has(BasicTransportType.HTTP)) {
+          <tb-toggle-option
+            [value]="BasicTransportType.HTTP">
+            {{ deviceTransportTypeTranslationMap.get(BasicTransportType.HTTP) | translate }}
+          </tb-toggle-option>
+        }
+        @if (allowTransportType.has(DeviceTransportType.MQTT)) {
+          <tb-toggle-option
+            [value]="DeviceTransportType.MQTT">
+            {{ deviceTransportTypeTranslationMap.get(DeviceTransportType.MQTT) | translate }}
+          </tb-toggle-option>
+        }
+        @if (allowTransportType.has(DeviceTransportType.COAP)) {
+          <tb-toggle-option
+            [value]="DeviceTransportType.COAP">
+            {{ deviceTransportTypeTranslationMap.get(DeviceTransportType.COAP) | translate }}
+          </tb-toggle-option>
+        }
+        @if (allowTransportType.has(DeviceTransportType.SNMP)) {
+          <tb-toggle-option
+            [value]="DeviceTransportType.SNMP">
+            {{ deviceTransportTypeTranslationMap.get(DeviceTransportType.SNMP) | translate }}
+          </tb-toggle-option>
+        }
+        @if (allowTransportType.has(DeviceTransportType.LWM2M)) {
+          <tb-toggle-option
+            [value]="DeviceTransportType.LWM2M">
+            {{ deviceTransportTypeTranslationMap.get(DeviceTransportType.LWM2M) | translate }}
+          </tb-toggle-option>
+        }
+      </tb-toggle-header>
+      <div class="tb-form-panel no-padding no-border" [class.!hidden]="!allowTransportType.size">
+        @switch (transportProtocol.value) {
+          @case (BasicTransportType.HTTP) {
             <div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
-            <mat-tab-group [(selectedIndex)]="mqttTabIndex">
+            <mat-tab-group [(selectedIndex)]="httpTabIndex">
               <mat-tab>
                 <ng-template mat-tab-label>
                   <mat-icon class="tabs-icon" svgIcon="windows"></mat-icon>
@@ -146,18 +79,13 @@
                   <div class="tb-form-panel no-padding no-border tb-tab-body">
                     <div class="tb-form-panel stroked">
                       <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
-                      <div class="tb-install-instruction-text">
-                        <ng-container *ngTemplateOutlet="seeDocumentation; context:
-                        {doc: {text: 'device.connectivity.install-mqtt-windows',
-                        href: 'https://thingsboard.io/docs/reference/mqtt-api/?connectdevice=mqtt-windows#mqtt-connect'}}">
-                        </ng-container>
-                      </div>
+                      <div class="tb-install-instruction-text" translate>device.connectivity.install-curl-windows</div>
                     </div>
                     <ng-container
-                      *ngTemplateOutlet="executeCommand; context: {cmd: {
-                              noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
-                              secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
-                              doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
+                    *ngTemplateOutlet="executeCommand; context: {cmd: {
+                              noSecLabel: 'HTTP', noSec: commands.http.http,
+                              secLabel: 'HTTPs', sec: commands.http.https,
+                              doc: {text: '', href: ''}}}">
                     </ng-container>
                   </div>
                 </ng-template>
@@ -171,14 +99,13 @@
                   <div class="tb-form-panel no-padding no-border tb-tab-body">
                     <div class="tb-form-panel stroked">
                       <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
-                      <tb-markdown usePlainMarkdown containerClass="tb-command-code"
-                                   [data]='createMarkDownCommand("brew install mosquitto")'></tb-markdown>
+                      <div class="tb-install-instruction-text" translate>device.connectivity.install-curl-macos</div>
                     </div>
                     <ng-container
-                      *ngTemplateOutlet="executeCommand; context: {cmd: {
-                              noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
-                              secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
-                              doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
+                    *ngTemplateOutlet="executeCommand; context: {cmd: {
+                              noSecLabel: 'HTTP', noSec: commands.http.http,
+                              secLabel: 'HTTPs', sec: commands.http.https,
+                              doc: {text: '', href: ''}}}">
                     </ng-container>
                   </div>
                 </ng-template>
@@ -193,146 +120,235 @@
                     <div class="tb-form-panel stroked">
                       <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
                       <tb-markdown usePlainMarkdown containerClass="tb-command-code"
-                                   [data]='createMarkDownCommand("sudo apt-get install curl mosquitto-clients")'></tb-markdown>
+                      [data]='createMarkDownCommand("sudo apt-get install curl")'></tb-markdown>
                     </div>
                     <ng-container
-                      *ngTemplateOutlet="executeCommand; context: {cmd: {
-                              noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
-                              secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
-                              doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
+                    *ngTemplateOutlet="executeCommand; context: {cmd: {
+                              noSecLabel: 'HTTP', noSec: commands.http.http,
+                              secLabel: 'HTTPs', sec: commands.http.https,
+                              doc: {text: '', href: ''}}}">
                     </ng-container>
                   </div>
                 </ng-template>
               </mat-tab>
-              <mat-tab *ngIf="!!commands.mqtt.docker">
-                <ng-template mat-tab-label>
-                  <mat-icon class="tabs-icon" svgIcon="docker"></mat-icon>
-                  Docker
-                </ng-template>
-                <ng-template matTabContent>
-                  <div class="tb-form-panel no-padding no-border tb-tab-body">
-                    <ng-container
+            </mat-tab-group>
+          }
+          @case (DeviceTransportType.MQTT) {
+            @if (commands.mqtt.sparkplug) {
+              <div class="tb-form-panel stroked">
+                <ng-container
+              *ngTemplateOutlet="seeDocumentation; context:
+              {doc: {text: 'device.connectivity.sparkplug-command', href: 'https://thingsboard.io/docs/reference/mqtt-sparkplug-api/'}}">
+                </ng-container>
+              </div>
+            } @else {
+              <div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
+              <mat-tab-group [(selectedIndex)]="mqttTabIndex">
+                <mat-tab>
+                  <ng-template mat-tab-label>
+                    <mat-icon class="tabs-icon" svgIcon="windows"></mat-icon>
+                    Windows
+                  </ng-template>
+                  <ng-template matTabContent>
+                    <div class="tb-form-panel no-padding no-border tb-tab-body">
+                      <div class="tb-form-panel stroked">
+                        <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
+                        <div class="tb-install-instruction-text">
+                        <ng-container *ngTemplateOutlet="seeDocumentation; context:
+                        {doc: {text: 'device.connectivity.install-mqtt-windows',
+                        href: 'https://thingsboard.io/docs/reference/mqtt-api/?connectdevice=mqtt-windows#mqtt-connect'}}">
+                          </ng-container>
+                        </div>
+                      </div>
+                      <ng-container
+                      *ngTemplateOutlet="executeCommand; context: {cmd: {
+                              noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
+                              secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
+                              doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
+                      </ng-container>
+                    </div>
+                  </ng-template>
+                </mat-tab>
+                <mat-tab>
+                  <ng-template mat-tab-label>
+                    <mat-icon class="tabs-icon" svgIcon="macos"></mat-icon>
+                    MacOS
+                  </ng-template>
+                  <ng-template matTabContent>
+                    <div class="tb-form-panel no-padding no-border tb-tab-body">
+                      <div class="tb-form-panel stroked">
+                        <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
+                        <tb-markdown usePlainMarkdown containerClass="tb-command-code"
+                        [data]='createMarkDownCommand("brew install mosquitto")'></tb-markdown>
+                      </div>
+                      <ng-container
+                      *ngTemplateOutlet="executeCommand; context: {cmd: {
+                              noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
+                              secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
+                              doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
+                      </ng-container>
+                    </div>
+                  </ng-template>
+                </mat-tab>
+                <mat-tab>
+                  <ng-template mat-tab-label>
+                    <mat-icon class="tabs-icon" svgIcon="linux"></mat-icon>
+                    Linux
+                  </ng-template>
+                  <ng-template matTabContent>
+                    <div class="tb-form-panel no-padding no-border tb-tab-body">
+                      <div class="tb-form-panel stroked">
+                        <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
+                        <tb-markdown usePlainMarkdown containerClass="tb-command-code"
+                        [data]='createMarkDownCommand("sudo apt-get install curl mosquitto-clients")'></tb-markdown>
+                      </div>
+                      <ng-container
+                      *ngTemplateOutlet="executeCommand; context: {cmd: {
+                              noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
+                              secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
+                              doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
+                      </ng-container>
+                    </div>
+                  </ng-template>
+                </mat-tab>
+                @if (!!commands.mqtt.docker) {
+                  <mat-tab>
+                    <ng-template mat-tab-label>
+                      <mat-icon class="tabs-icon" svgIcon="docker"></mat-icon>
+                      Docker
+                    </ng-template>
+                    <ng-template matTabContent>
+                      <div class="tb-form-panel no-padding no-border tb-tab-body">
+                        <ng-container
                       *ngTemplateOutlet="executeCommand; context: {cmd: {
                               noSecLabel: 'MQTT', noSec: commands.mqtt.docker.mqtt,
                               secLabel: 'MQTTs', sec: commands.mqtt.docker.mqtts,
                               doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
-                    </ng-container>
-                  </div>
+                        </ng-container>
+                      </div>
+                    </ng-template>
+                  </mat-tab>
+                }
+              </mat-tab-group>
+            }
+          }
+          @case (DeviceTransportType.COAP) {
+            <div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
+            <mat-tab-group [(selectedIndex)]="coapTabIndex">
+              <mat-tab>
+                <ng-template mat-tab-label>
+                  <mat-icon class="tabs-icon" svgIcon="linux"></mat-icon>
+                  Linux
                 </ng-template>
-              </mat-tab>
-            </mat-tab-group>
-          </ng-template>
-        </ng-template>
-        <ng-template [ngSwitchCase]="DeviceTransportType.COAP">
-          <div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
-          <mat-tab-group [(selectedIndex)]="coapTabIndex">
-            <mat-tab>
-              <ng-template mat-tab-label>
-                <mat-icon class="tabs-icon" svgIcon="linux"></mat-icon>
-                Linux
-              </ng-template>
-              <ng-template matTabContent>
-                <div class="tb-form-panel no-padding no-border tb-tab-body">
-                  <div class="tb-form-panel stroked" *ngIf="commands.coap.coaps !== 'Check documentation'">
-                    <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
-                    <div class="tb-install-instruction-text">
+                <ng-template matTabContent>
+                  <div class="tb-form-panel no-padding no-border tb-tab-body">
+                    @if (commands.coap.coaps !== 'Check documentation') {
+                      <div class="tb-form-panel stroked">
+                        <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
+                        <div class="tb-install-instruction-text">
                       <ng-container *ngTemplateOutlet="seeDocumentation; context:
-                        {doc: {text: 'device.connectivity.install-coap-client',
-                        href: 'https://thingsboard.io/docs/user-guide/ssl/coap-access-token/'}}">
-                      </ng-container>
-                    </div>
-                  </div>
-                  <ng-container
+                                    {doc: {text: 'device.connectivity.install-coap-client',
+                                    href: 'https://thingsboard.io/docs/user-guide/ssl/coap-access-token/'}}">
+                          </ng-container>
+                        </div>
+                      </div>
+                    }
+                    <ng-container
                     *ngTemplateOutlet="executeCommand; context: {cmd: {
                               noSecLabel: 'CoAP', noSec: commands.coap.coap,
                               secLabel: 'CoAPs', sec: commands.coap.coaps,
                               doc: {text: 'device.connectivity.coaps-x509-command', href: 'https://thingsboard.io/docs/user-guide/ssl/coap-x509-certificates/'}}}">
-                  </ng-container>
-                </div>
-              </ng-template>
-            </mat-tab>
-            <mat-tab *ngIf="!!commands.coap.docker">
-              <ng-template mat-tab-label>
-                <mat-icon class="tabs-icon" svgIcon="docker"></mat-icon>
-                Docker
-              </ng-template>
-              <ng-template matTabContent>
-                <div class="tb-form-panel no-padding no-border tb-tab-body">
-                  <ng-container
+                    </ng-container>
+                  </div>
+                </ng-template>
+              </mat-tab>
+              @if (!!commands.coap.docker) {
+                <mat-tab>
+                  <ng-template mat-tab-label>
+                    <mat-icon class="tabs-icon" svgIcon="docker"></mat-icon>
+                    Docker
+                  </ng-template>
+                  <ng-template matTabContent>
+                    <div class="tb-form-panel no-padding no-border tb-tab-body">
+                      <ng-container
                     *ngTemplateOutlet="executeCommand; context: {cmd: {
                               noSecLabel: 'CoAP', noSec: commands.coap.docker.coap,
                               secLabel: 'CoAPs', sec: commands.coap.docker.coaps,
                               doc: {text: 'device.connectivity.coaps-x509-command', href: 'https://thingsboard.io/docs/user-guide/ssl/coap-x509-certificates/'}}}">
-                  </ng-container>
-                </div>
-              </ng-template>
-            </mat-tab>
-          </mat-tab-group>
-        </ng-template>
-        <ng-template [ngSwitchCase]="DeviceTransportType.SNMP">
-          <div class="tb-form-panel stroked">
-            <ng-container
+                      </ng-container>
+                    </div>
+                  </ng-template>
+                </mat-tab>
+              }
+            </mat-tab-group>
+          }
+          @case (DeviceTransportType.SNMP) {
+            <div class="tb-form-panel stroked">
+              <ng-container
               *ngTemplateOutlet="seeDocumentation; context:
                 {doc: {text: 'device.connectivity.snmp-command', href: 'https://thingsboard.io/docs/reference/snmp-api/'}}">
-            </ng-container>
-          </div>
-        </ng-template>
-        <ng-template [ngSwitchCase]="DeviceTransportType.LWM2M">
-          <div class="tb-form-panel stroked">
-            <ng-container
+              </ng-container>
+            </div>
+          }
+          @case (DeviceTransportType.LWM2M) {
+            <div class="tb-form-panel stroked">
+              <ng-container
               *ngTemplateOutlet="seeDocumentation; context:
                 {doc: {text: 'device.connectivity.lwm2m-command', href: 'https://thingsboard.io/docs/reference/lwm2m-api/'}}">
-            </ng-container>
-          </div>
-        </ng-template>
-      </ng-container>
-    </div>
-    <div class="tb-form-panel stroked">
-      <div class="flex flex-1 flex-row">
-        <div class="tb-form-panel-title" translate>device.state</div>
-        <div class="status" [class.inactive]="!status" [class.hide]="status === undefined">
-          {{ (status ? 'device.active' : 'device.inactive') | translate }}
-        </div>
+              </ng-container>
+            </div>
+          }
+        }
       </div>
-      <div class="tb-form-panel-hint tb-font-14" translate>attribute.latest-telemetry</div>
-      <div class="tb-form-table">
-        <div class="tb-form-table-header">
-          <div class="tb-form-table-header-cell flex-1" translate>device.time</div>
-          <div class="tb-form-table-header-cell flex-1" translate>attribute.key</div>
-          <div class="tb-form-table-header-cell flex-1" translate>attribute.value</div>
+      <div class="tb-form-panel stroked">
+        <div class="flex flex-1 flex-row">
+          <div class="tb-form-panel-title" translate>device.state</div>
+          <div class="status" [class.inactive]="!status" [class.hide]="status === undefined">
+            {{ (status ? 'device.active' : 'device.inactive') | translate }}
+          </div>
         </div>
-        <div *ngIf="latestTelemetry.length; else noData" class="tb-form-table-body">
-          <div class="tb-form-table-row" *ngFor="let telemetry of latestTelemetry">
-            <div class="tb-form-table-row-cell flex-1">{{ telemetry.lastUpdateTs | date: 'yyyy-MM-dd HH:mm:ss' }}</div>
-            <div class="tb-form-table-row-cell flex-1">{{ telemetry.key }}</div>
-            <div class="tb-form-table-row-cell flex-1">{{ telemetry.value }}</div>
+        <div class="tb-form-panel-hint tb-font-14" translate>attribute.latest-telemetry</div>
+        <div class="tb-form-table">
+          <div class="tb-form-table-header">
+            <div class="tb-form-table-header-cell flex-1" translate>device.time</div>
+            <div class="tb-form-table-header-cell flex-1" translate>attribute.key</div>
+            <div class="tb-form-table-header-cell flex-1" translate>attribute.value</div>
           </div>
+          @if (latestTelemetry.length) {
+            <div class="tb-form-table-body">
+              @for (telemetry of latestTelemetry; track telemetry) {
+                <div class="tb-form-table-row">
+                  <div class="tb-form-table-row-cell flex-1">{{ telemetry.lastUpdateTs | date: 'yyyy-MM-dd HH:mm:ss' }}</div>
+                  <div class="tb-form-table-row-cell flex-1">{{ telemetry.key }}</div>
+                  <div class="tb-form-table-row-cell flex-1">{{ telemetry.value }}</div>
+                </div>
+              }
+            </div>
+          } @else {
+            <div class="tb-no-data-available">
+              <div class="tb-no-data-bg"></div>
+              <div class="tb-no-data-text" translate>attribute.no-latest-telemetry</div>
+            </div>
+          }
         </div>
       </div>
+    </section>
+  } @else {
+    <div class="tb-loader">
+      <mat-spinner color="accent" diameter="65" strokeWidth="4"></mat-spinner>
+      <span class="mat-subtitle-1 label">
+        {{ 'device.connectivity.loading-check-connectivity-command' | translate }}
+      </span>
     </div>
-  </section>
+  }
 </div>
 <div mat-dialog-actions class="tb-dialog-actions">
   <mat-slide-toggle [class.!hidden]="!showDontShowAgain" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
   <span class="flex-1"></span>
   <button mat-button
           [disabled]="(isLoading$ | async)"
-          (click)="close()">{{ 'action.close' | translate }}</button>
+  (click)="close()">{{ 'action.close' | translate }}</button>
 </div>
-<ng-template #loadingCommand>
-  <div class="tb-loader">
-    <mat-spinner color="accent" diameter="65" strokeWidth="4"></mat-spinner>
-    <span class="mat-subtitle-1 label">
-        {{ 'device.connectivity.loading-check-connectivity-command' | translate }}
-      </span>
-  </div>
-</ng-template>
-<ng-template #noData>
-  <div class="tb-no-data-available">
-    <div class="tb-no-data-bg"></div>
-    <div class="tb-no-data-text" translate>attribute.no-latest-telemetry</div>
-  </div>
-</ng-template>
 
 <ng-template #executeCommand let-cmd="cmd">
   <div class="tb-form-panel stroked">
@@ -344,24 +360,25 @@
         <tb-toggle-option value="sec">{{ cmd.secLabel }}</tb-toggle-option>
       </tb-toggle-header>
     </div>
-    <ng-container [ngSwitch]="protocolType.value">
-      <ng-template [ngSwitchCase]="'noSec'">
+    @switch (protocolType.value) {
+      @case ('noSec') {
         <tb-markdown usePlainMarkdown containerClass="tb-command-code"
-                     [data]=createMarkDownCommand(cmd.noSec)></tb-markdown>
-      </ng-template>
-      <ng-template [ngSwitchCase]="'sec'">
-        <div *ngIf="cmd.sec !== 'Check documentation'; else checkDocumentation">
-          <tb-markdown usePlainMarkdown containerClass="tb-command-code"
-                       [data]=createMarkDownCommand(cmd.sec)></tb-markdown>
-        </div>
-        <ng-template #checkDocumentation>
+        [data]=createMarkDownCommand(cmd.noSec)></tb-markdown>
+      }
+      @case ('sec') {
+        @if (cmd.sec !== 'Check documentation') {
+          <div>
+            <tb-markdown usePlainMarkdown containerClass="tb-command-code"
+            [data]=createMarkDownCommand(cmd.sec)></tb-markdown>
+          </div>
+        } @else {
           <ng-container
             *ngTemplateOutlet="seeDocumentation; context:
                 {doc: cmd.doc}">
           </ng-container>
-        </ng-template>
-      </ng-template>
-    </ng-container>
+        }
+      }
+    }
   </div>
 </ng-template>
 
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
index b0f26e1ccf..5f679a5389 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
@@ -24,25 +24,28 @@
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<mat-progress-bar color="warn" mode="indeterminate" *ngIf="(isLoading$ | async)">
-</mat-progress-bar>
+@if ((isLoading$ | async)) {
+  <mat-progress-bar color="warn" mode="indeterminate">
+  </mat-progress-bar>
+}
 <div mat-dialog-content>
-  <section *ngIf="!loadingCredentials; else loadCredentials">
-    <form [formGroup]="deviceCredentialsFormGroup">
-      <tb-device-credentials
-        [deviceTransportType]="deviceTransportType"
-        formControlName="credential">
-      </tb-device-credentials>
-    </form>
-  </section>
-  <ng-template #loadCredentials>
+  @if (!loadingCredentials) {
+    <section>
+      <form [formGroup]="deviceCredentialsFormGroup">
+        <tb-device-credentials
+          [deviceTransportType]="deviceTransportType"
+          formControlName="credential">
+        </tb-device-credentials>
+      </form>
+    </section>
+  } @else {
     <div class="flex flex-col items-center justify-center">
       <mat-spinner color="accent" diameter="65" strokeWidth="4" style="margin-bottom: 18px"></mat-spinner>
       <span class="mat-subtitle-1" style="margin-bottom: 0">
         {{ 'device.loading-device-credentials' | translate }}
       </span>
     </div>
-  </ng-template>
+  }
 </div>
 <div mat-dialog-actions class="tb-dialog-actions">
   <button mat-button color="primary"
@@ -51,11 +54,13 @@
           (click)="cancel()" cdkFocusInitial>
     {{ (isReadOnly ? 'action.close' : 'action.cancel') | translate }}
   </button>
-  <button *ngIf="!isReadOnly" mat-raised-button color="primary"
-          type="button"
-          (click)="save()"
+  @if (!isReadOnly) {
+    <button mat-raised-button color="primary"
+            type="button"
+            (click)="save()"
           [disabled]="(isLoading$ | async) || deviceCredentialsFormGroup.invalid
           || !deviceCredentialsFormGroup.dirty">
-    {{ 'action.save' | translate }}
-  </button>
+      {{ 'action.save' | translate }}
+    </button>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html b/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
index ed523cf98d..9376ff1b3e 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
@@ -25,64 +25,65 @@
   </button>
 </mat-toolbar>
 <div mat-dialog-content>
-  <section *ngIf="loadedInstructions; else loadingInstructions" class="tb-form-panel no-padding no-border">
-    <div class="tb-form-panel no-padding no-border">
-      <mat-tab-group [(selectedIndex)]="tabIndex" (selectedTabChange)="selectedTabChange(tabIndex)">
-        <mat-tab>
-          <ng-template mat-tab-label>
-            <mat-icon class="tabs-icon" svgIcon="docker"></mat-icon>
-            Docker
-          </ng-template>
-          <ng-template matTabContent>
-            <div class="tb-form-panel no-padding no-border">
-              <div class="tb-form-panel no-padding stroked">
-                <tb-markdown [data]='contentData.docker'></tb-markdown>
+  @if (loadedInstructions) {
+    <section class="tb-form-panel no-padding no-border">
+      <div class="tb-form-panel no-padding no-border">
+        <mat-tab-group [(selectedIndex)]="tabIndex" (selectedTabChange)="selectedTabChange(tabIndex)">
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <mat-icon class="tabs-icon" svgIcon="docker"></mat-icon>
+              Docker
+            </ng-template>
+            <ng-template matTabContent>
+              <div class="tb-form-panel no-padding no-border">
+                <div class="tb-form-panel no-padding stroked">
+                  <tb-markdown [data]='contentData.docker'></tb-markdown>
+                </div>
               </div>
-            </div>
-          </ng-template>
-        </mat-tab>
-        <mat-tab>
-          <ng-template mat-tab-label>
-            <mat-icon class="tabs-icon" svgIcon="mdi:ubuntu"></mat-icon>
-            Ubuntu
-          </ng-template>
-          <ng-template matTabContent>
-            <div class="tb-form-panel no-padding no-border">
-              <div class="tb-form-panel no-padding stroked">
-                <tb-markdown [data]='contentData.ubuntu'></tb-markdown>
+            </ng-template>
+          </mat-tab>
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <mat-icon class="tabs-icon" svgIcon="mdi:ubuntu"></mat-icon>
+              Ubuntu
+            </ng-template>
+            <ng-template matTabContent>
+              <div class="tb-form-panel no-padding no-border">
+                <div class="tb-form-panel no-padding stroked">
+                  <tb-markdown [data]='contentData.ubuntu'></tb-markdown>
+                </div>
               </div>
-            </div>
-          </ng-template>
-        </mat-tab>
-        <mat-tab>
-          <ng-template mat-tab-label>
-            <mat-icon class="tabs-icon" svgIcon="mdi:centos"></mat-icon>
-            CentOS/RHEL
-          </ng-template>
-          <ng-template matTabContent>
-            <div class="tb-form-panel no-padding no-border">
-              <div class="tb-form-panel no-padding stroked">
-                <tb-markdown [data]='contentData.centos'></tb-markdown>
+            </ng-template>
+          </mat-tab>
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <mat-icon class="tabs-icon" svgIcon="mdi:centos"></mat-icon>
+              CentOS/RHEL
+            </ng-template>
+            <ng-template matTabContent>
+              <div class="tb-form-panel no-padding no-border">
+                <div class="tb-form-panel no-padding stroked">
+                  <tb-markdown [data]='contentData.centos'></tb-markdown>
+                </div>
               </div>
-            </div>
-          </ng-template>
-        </mat-tab>
-      </mat-tab-group>
+            </ng-template>
+          </mat-tab>
+        </mat-tab-group>
+      </div>
+    </section>
+  } @else {
+    <div class="tb-loader">
+      <mat-spinner color="accent" diameter="65" strokeWidth="4"></mat-spinner>
+      <span class="mat-subtitle-1 label">
+        {{ 'edge.loading-edge-instructions' | translate }}
+      </span>
     </div>
-  </section>
+  }
 </div>
 <div mat-dialog-actions class="tb-dialog-actions">
   <mat-slide-toggle [class.!hidden]="!showDontShowAgain" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
   <span class="flex-1"></span>
   <button mat-button
           [disabled]="(isLoading$ | async)"
-          (click)="close()">{{ 'action.close' | translate }}</button>
+  (click)="close()">{{ 'action.close' | translate }}</button>
 </div>
-<ng-template #loadingInstructions>
-  <div class="tb-loader">
-    <mat-spinner color="accent" diameter="65" strokeWidth="4"></mat-spinner>
-    <span class="mat-subtitle-1 label">
-        {{ 'edge.loading-edge-instructions' | translate }}
-      </span>
-  </div>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edge-tabs.component.html b/ui-ngx/src/app/modules/home/pages/edge/edge-tabs.component.html
index b912757027..3f298aff3d 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edge-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/pages/edge/edge-tabs.component.html
@@ -15,42 +15,56 @@
     limitations under the License.
 
 -->
-<mat-tab *ngIf="entity"
-         label="{{ 'attribute.attributes' | translate }}" #attributesTab="matTab">
-  <tb-attribute-table [defaultAttributeScope]="attributeScopes.SERVER_SCOPE"
-                      [active]="attributesTab.isActive"
-                      [entityId]="entity.id"
-                      [entityName]="entity.name">
-  </tb-attribute-table>
-</mat-tab>
-<mat-tab *ngIf="entity"
-         label="{{ 'attribute.latest-telemetry' | translate }}" #telemetryTab="matTab">
-  <tb-attribute-table [defaultAttributeScope]="latestTelemetryTypes.LATEST_TELEMETRY"
-                      disableAttributeScopeSelection
-                      [active]="telemetryTab.isActive"
-                      [entityId]="entity.id"
-                      [entityName]="entity.name">
-  </tb-attribute-table>
-</mat-tab>
-<mat-tab *ngIf="entity"
-         label="{{ 'alarm.alarms' | translate }}" #alarmsTab="matTab">
-  <tb-alarm-table [active]="alarmsTab.isActive" [entityId]="entity.id"></tb-alarm-table>
-</mat-tab>
-<mat-tab *ngIf="entity"
-         label="{{ 'edge.events' | translate }}" #eventsTab="matTab">
-  <tb-event-table [defaultEventType]="eventTypes.ERROR" [active]="eventsTab.isActive" [tenantId]="entity.tenantId.id"
-                  [entityId]="entity.id"></tb-event-table>
-</mat-tab>
-<mat-tab *ngIf="entity && authUser.authority === authorities.TENANT_ADMIN"
-         label="{{ 'edge.downlinks' | translate }}" #downLinksTab="matTab">
-  <tb-edge-downlink-table [active]="downLinksTab.isActive"
-                  [entityId]="entity.id"></tb-edge-downlink-table>
-</mat-tab>
-<mat-tab *ngIf="entity"
-         label="{{ 'relation.relations' | translate }}" #relationsTab="matTab">
-  <tb-relation-table [active]="relationsTab.isActive" [entityId]="entity.id"></tb-relation-table>
-</mat-tab>
-<mat-tab *ngIf="entity && authUser.authority === authorities.TENANT_ADMIN"
-         label="{{ 'audit-log.audit-logs' | translate }}" #auditLogsTab="matTab">
-  <tb-audit-log-table detailsMode="true" [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.ENTITY" [entityId]="entity.id"></tb-audit-log-table>
-</mat-tab>
+@if (entity) {
+  <mat-tab
+    label="{{ 'attribute.attributes' | translate }}" #attributesTab="matTab">
+    <tb-attribute-table [defaultAttributeScope]="attributeScopes.SERVER_SCOPE"
+                        [active]="attributesTab.isActive"
+                        [entityId]="entity.id"
+                        [entityName]="entity.name">
+    </tb-attribute-table>
+  </mat-tab>
+}
+@if (entity) {
+  <mat-tab
+    label="{{ 'attribute.latest-telemetry' | translate }}" #telemetryTab="matTab">
+    <tb-attribute-table [defaultAttributeScope]="latestTelemetryTypes.LATEST_TELEMETRY"
+                        disableAttributeScopeSelection
+                        [active]="telemetryTab.isActive"
+                        [entityId]="entity.id"
+                        [entityName]="entity.name">
+    </tb-attribute-table>
+  </mat-tab>
+}
+@if (entity) {
+  <mat-tab
+    label="{{ 'alarm.alarms' | translate }}" #alarmsTab="matTab">
+    <tb-alarm-table [active]="alarmsTab.isActive" [entityId]="entity.id"></tb-alarm-table>
+  </mat-tab>
+}
+@if (entity) {
+  <mat-tab
+    label="{{ 'edge.events' | translate }}" #eventsTab="matTab">
+    <tb-event-table [defaultEventType]="eventTypes.ERROR" [active]="eventsTab.isActive" [tenantId]="entity.tenantId.id"
+    [entityId]="entity.id"></tb-event-table>
+  </mat-tab>
+}
+@if (entity && authUser.authority === authorities.TENANT_ADMIN) {
+  <mat-tab
+    label="{{ 'edge.downlinks' | translate }}" #downLinksTab="matTab">
+    <tb-edge-downlink-table [active]="downLinksTab.isActive"
+    [entityId]="entity.id"></tb-edge-downlink-table>
+  </mat-tab>
+}
+@if (entity) {
+  <mat-tab
+    label="{{ 'relation.relations' | translate }}" #relationsTab="matTab">
+    <tb-relation-table [active]="relationsTab.isActive" [entityId]="entity.id"></tb-relation-table>
+  </mat-tab>
+}
+@if (entity && authUser.authority === authorities.TENANT_ADMIN) {
+  <mat-tab
+    label="{{ 'audit-log.audit-logs' | translate }}" #auditLogsTab="matTab">
+    <tb-audit-log-table detailsMode="true" [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.ENTITY" [entityId]="entity.id"></tb-audit-log-table>
+  </mat-tab>
+}
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-tabs.component.html b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-tabs.component.html
index 604d6469f9..2d2eaa32c9 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-tabs.component.html
@@ -15,38 +15,50 @@
     limitations under the License.
 
 -->
-<mat-tab *ngIf="entity"
-         label="{{ 'attribute.attributes' | translate }}" #attributesTab="matTab">
-  <tb-attribute-table [defaultAttributeScope]="attributeScopes.CLIENT_SCOPE"
-                      [active]="attributesTab.isActive"
-                      [entityId]="entity.id"
-                      [entityName]="entity.name">
-  </tb-attribute-table>
-</mat-tab>
-<mat-tab *ngIf="entity"
-         label="{{ 'attribute.latest-telemetry' | translate }}" #telemetryTab="matTab">
-  <tb-attribute-table [defaultAttributeScope]="latestTelemetryTypes.LATEST_TELEMETRY"
-                      disableAttributeScopeSelection
-                      [active]="telemetryTab.isActive"
-                      [entityId]="entity.id"
-                      [entityName]="entity.name">
-  </tb-attribute-table>
-</mat-tab>
-<mat-tab *ngIf="entity"
-         label="{{ 'alarm.alarms' | translate }}" #alarmsTab="matTab">
-  <tb-alarm-table [active]="alarmsTab.isActive" [entityId]="entity.id"></tb-alarm-table>
-</mat-tab>
-<mat-tab *ngIf="entity"
-         label="{{ 'relation.relations' | translate }}" #relationsTab="matTab">
-  <tb-relation-table [active]="relationsTab.isActive" [entityId]="entity.id"></tb-relation-table>
-</mat-tab>
-<mat-tab *ngIf="entity && authUser.authority === authorities.TENANT_ADMIN"
-         label="{{ 'audit-log.audit-logs' | translate }}" #auditLogsTab="matTab">
-  <tb-audit-log-table detailsMode="true" [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.ENTITY" [entityId]="entity.id"></tb-audit-log-table>
-</mat-tab>
-<mat-tab *ngIf="entity && authUser.authority === authorities.TENANT_ADMIN"
-         label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
-  <tb-version-control detailsMode="true" singleEntityMode="true"
-                      (versionRestored)="entitiesTableConfig.updateData()"
-                      [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.name" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
-</mat-tab>
+@if (entity) {
+  <mat-tab
+    label="{{ 'attribute.attributes' | translate }}" #attributesTab="matTab">
+    <tb-attribute-table [defaultAttributeScope]="attributeScopes.CLIENT_SCOPE"
+                        [active]="attributesTab.isActive"
+                        [entityId]="entity.id"
+                        [entityName]="entity.name">
+    </tb-attribute-table>
+  </mat-tab>
+}
+@if (entity) {
+  <mat-tab
+    label="{{ 'attribute.latest-telemetry' | translate }}" #telemetryTab="matTab">
+    <tb-attribute-table [defaultAttributeScope]="latestTelemetryTypes.LATEST_TELEMETRY"
+                        disableAttributeScopeSelection
+                        [active]="telemetryTab.isActive"
+                        [entityId]="entity.id"
+                        [entityName]="entity.name">
+    </tb-attribute-table>
+  </mat-tab>
+}
+@if (entity) {
+  <mat-tab
+    label="{{ 'alarm.alarms' | translate }}" #alarmsTab="matTab">
+    <tb-alarm-table [active]="alarmsTab.isActive" [entityId]="entity.id"></tb-alarm-table>
+  </mat-tab>
+}
+@if (entity) {
+  <mat-tab
+    label="{{ 'relation.relations' | translate }}" #relationsTab="matTab">
+    <tb-relation-table [active]="relationsTab.isActive" [entityId]="entity.id"></tb-relation-table>
+  </mat-tab>
+}
+@if (entity && authUser.authority === authorities.TENANT_ADMIN) {
+  <mat-tab
+    label="{{ 'audit-log.audit-logs' | translate }}" #auditLogsTab="matTab">
+    <tb-audit-log-table detailsMode="true" [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.ENTITY" [entityId]="entity.id"></tb-audit-log-table>
+  </mat-tab>
+}
+@if (entity && authUser.authority === authorities.TENANT_ADMIN) {
+  <mat-tab
+    label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
+    <tb-version-control detailsMode="true" singleEntityMode="true"
+                        (versionRestored)="entitiesTableConfig.updateData()"
+    [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.name" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
+  </mat-tab>
+}
diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html
index d3269fae53..848430c0cf 100644
--- a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html
+++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html
@@ -15,25 +15,30 @@
     limitations under the License.
 
 -->
-<tb-dashboard-page *ngIf="homeDashboard; else homeLinks" [embedded]="true" [dashboard]="homeDashboard" [hideToolbar]="homeDashboard.hideDashboardToolbar"></tb-dashboard-page>
-<ng-template #homeLinks>
+@if (homeDashboard) {
+  <tb-dashboard-page [embedded]="true" [dashboard]="homeDashboard" [hideToolbar]="homeDashboard.hideDashboardToolbar"></tb-dashboard-page>
+} @else {
   <mat-grid-list class="tb-home-links" [cols]="cols" rowHeight="280px">
-    <mat-grid-tile [colspan]="sectionColspan(section)" *ngFor="let section of homeSections$| async">
-      <mat-card appearance="outlined" style="width: 100%;">
-        <mat-card-title>
-          <span translate class="mat-headline-5">{{section.name}}</span>
-        </mat-card-title>
-        <mat-card-content>
-          <mat-grid-list rowHeight="170px" [cols]="section.places.length">
-            <mat-grid-tile *ngFor="let place of section.places">
-              <a mat-raised-button color="primary" class="tb-card-button" routerLink="{{place.path}}">
-                <tb-icon matButtonIcon class="tb-mat-96">{{place.icon}}</tb-icon>
-                <span>{{place.customTranslate ? (place.name | customTranslate) : (place.name | translate)}}</span>
-              </a>
-            </mat-grid-tile>
-          </mat-grid-list>
-        </mat-card-content>
-      </mat-card>
-    </mat-grid-tile>
+    @for (section of homeSections$| async; track section) {
+      <mat-grid-tile [colspan]="sectionColspan(section)">
+        <mat-card appearance="outlined" style="width: 100%;">
+          <mat-card-title>
+            <span translate class="mat-headline-5">{{section.name}}</span>
+          </mat-card-title>
+          <mat-card-content>
+            <mat-grid-list rowHeight="170px" [cols]="section.places.length">
+              @for (place of section.places; track place) {
+                <mat-grid-tile>
+                  <a mat-raised-button color="primary" class="tb-card-button" routerLink="{{place.path}}">
+                    <tb-icon matButtonIcon class="tb-mat-96">{{place.icon}}</tb-icon>
+                    <span>{{place.customTranslate ? (place.name | customTranslate) : (place.name | translate)}}</span>
+                  </a>
+                </mat-grid-tile>
+              }
+            </mat-grid-list>
+          </mat-card-content>
+        </mat-card>
+      </mat-grid-tile>
+    }
   </mat-grid-list>
-</ng-template>
+}
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html b/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html
index d984ac99c9..79bd13c8b1 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html
@@ -26,9 +26,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div></div>
+  }
   <div mat-dialog-content class="!p-0">
     <tb-mobile-app #mobileAppComponent></tb-mobile-app>
   </div>
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.html b/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.html
index bf8bbacc83..0e88ff03a6 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.html
@@ -28,30 +28,40 @@
       icon="content_copy">
     </tb-copy-button>
     <mat-hint> </mat-hint>
-    <mat-error *ngIf="entityForm.get('pkgName').hasError('required')">
-      {{ 'mobile.mobile-package-required' | translate }}
-    </mat-error>
-    <mat-error *ngIf="entityForm.get('pkgName').hasError('maxlength')">
-      {{ 'mobile.mobile-package-max-length' | translate }}
-    </mat-error>
-    <mat-error *ngIf="entityForm.get('pkgName').hasError('pattern')">
-      {{ 'mobile.mobile-package-pattern' | translate }}
-    </mat-error>
+    @if (entityForm.get('pkgName').hasError('required')) {
+      <mat-error>
+        {{ 'mobile.mobile-package-required' | translate }}
+      </mat-error>
+    }
+    @if (entityForm.get('pkgName').hasError('maxlength')) {
+      <mat-error>
+        {{ 'mobile.mobile-package-max-length' | translate }}
+      </mat-error>
+    }
+    @if (entityForm.get('pkgName').hasError('pattern')) {
+      <mat-error>
+        {{ 'mobile.mobile-package-pattern' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field appearance="outline" subscriptSizing="dynamic">
     <mat-label translate>mobile.mobile-package-title</mat-label>
     <input matInput formControlName="title">
     <mat-hint></mat-hint>
-    <mat-error *ngIf="entityForm.get('title').hasError('maxlength')">
-      {{ 'mobile.mobile-package-title-max-length' | translate }}
-    </mat-error>
+    @if (entityForm.get('title').hasError('maxlength')) {
+      <mat-error>
+        {{ 'mobile.mobile-package-title-max-length' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field appearance="outline" class="flex">
     <mat-label translate>mobile.platform-type</mat-label>
     <mat-select formControlName="platformType">
-      <mat-option *ngFor="let platformType of platformTypes" [value]="platformType">
-        {{ platformTypeTranslations.get(platformType) | translate }}
-      </mat-option>
+      @for (platformType of platformTypes; track platformType) {
+        <mat-option [value]="platformType">
+          {{ platformTypeTranslations.get(platformType) | translate }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <mat-form-field appearance="outline" subscriptSizing="dynamic">
@@ -59,14 +69,15 @@
     <input matInput required formControlName="appSecret"
            placeholder="{{ 'mobile.set' | translate }}">
     <div matSuffix style="display: flex; align-items: center">
-      <button mat-icon-button
-              type="button"
-              *ngIf="isEdit"
-              matTooltip="{{ 'mobile.generate-application-secret' | translate }}"
-              matTooltipPosition="above"
-              (click)="generateAppSecret($event)">
-        <tb-icon>cached</tb-icon>
-      </button>
+      @if (isEdit) {
+        <button mat-icon-button
+                type="button"
+                matTooltip="{{ 'mobile.generate-application-secret' | translate }}"
+                matTooltipPosition="above"
+                (click)="generateAppSecret($event)">
+          <tb-icon>cached</tb-icon>
+        </button>
+      }
       <tb-copy-button
         miniButton="false"
         [copyText]="entityForm.get('appSecret').value"
@@ -76,16 +87,20 @@
       </tb-copy-button>
     </div>
     <mat-hint> </mat-hint>
-    <mat-error *ngIf="entityForm.get('appSecret').hasError('required')">
-      {{ 'mobile.application-secret-required' | translate }}
-    </mat-error>
+    @if (entityForm.get('appSecret').hasError('required')) {
+      <mat-error>
+        {{ 'mobile.application-secret-required' | translate }}
+      </mat-error>
+    }
   </mat-form-field>
   <mat-form-field appearance="outline">
     <mat-label translate>mobile.status</mat-label>
     <mat-select formControlName="status">
-      <mat-option *ngFor="let mobileAppStatus of mobileAppStatuses" [value]="mobileAppStatus">
-        {{ mobileAppStatusTranslations.get(mobileAppStatus) | translate }}
-      </mat-option>
+      @for (mobileAppStatus of mobileAppStatuses; track mobileAppStatus) {
+        <mat-option [value]="mobileAppStatus">
+          {{ mobileAppStatusTranslations.get(mobileAppStatus) | translate }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <section class="tb-form-panel stroked no-padding-bottom" formGroupName="versionInfo" style="margin-bottom: 21px;">
@@ -96,9 +111,11 @@
           <mat-label translate>mobile.min-version</mat-label>
           <input matInput formControlName="minVersion">
           <mat-hint> </mat-hint>
-          <mat-error *ngIf="entityForm.get('versionInfo.minVersion').hasError('pattern')">
-            {{ 'mobile.invalid-version-pattern' | translate }}
-          </mat-error>
+          @if (entityForm.get('versionInfo.minVersion').hasError('pattern')) {
+            <mat-error>
+              {{ 'mobile.invalid-version-pattern' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <button mat-icon-button
                 style="margin-top: 4px; color:#00000061"
@@ -115,9 +132,11 @@
           <mat-label translate>mobile.latest-version</mat-label>
           <input matInput formControlName="latestVersion">
           <mat-hint> </mat-hint>
-          <mat-error *ngIf="entityForm.get('versionInfo.latestVersion').hasError('pattern')">
-            {{ 'mobile.invalid-version-pattern' | translate }}
-          </mat-error>
+          @if (entityForm.get('versionInfo.latestVersion').hasError('pattern')) {
+            <mat-error>
+              {{ 'mobile.invalid-version-pattern' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <button mat-icon-button
                 style="margin-top: 4px; color:#00000061"
@@ -136,8 +155,8 @@
     <section class="flex flex-col">
       <mat-form-field appearance="outline">
         <mat-label>{{
-            (entityForm.get('platformType').value === PlatformType.ANDROID ? 'mobile.google-play-link' : 'mobile.app-store-link') | translate
-          }}</mat-label>
+          (entityForm.get('platformType').value === PlatformType.ANDROID ? 'mobile.google-play-link' : 'mobile.app-store-link') | translate
+        }}</mat-label>
         <input matInput [required]="entityForm.get('status').value === MobileAppStatus.PUBLISHED" formControlName="storeLink">
         <tb-copy-button
           matSuffix
@@ -147,49 +166,65 @@
           tooltipPosition="above"
           icon="content_copy">
         </tb-copy-button>
-        <mat-error *ngIf="entityForm.get('storeInfo.storeLink').hasError('required')">
-          {{ (entityForm.get('platformType').value === PlatformType.ANDROID ? 'mobile.google-play-link-required' : 'mobile.app-store-link-required')  | translate }}
-        </mat-error>
-        <mat-error *ngIf="entityForm.get('storeInfo.storeLink').hasError('pattern')">
-          {{ 'mobile.invalid-store-link' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field appearance="outline" *ngIf="entityForm.get('platformType').value === PlatformType.ANDROID">
-        <mat-label translate>mobile.sha256-certificate-fingerprints</mat-label>
-        <input matInput [required]="entityForm.get('status').value === MobileAppStatus.PUBLISHED" formControlName="sha256CertFingerprints">
-        <tb-copy-button
-          matSuffix
-          miniButton="false"
-          [copyText]="entityForm.get('storeInfo.sha256CertFingerprints').value"
-          tooltipText="{{ 'mobile.copy-sha256-certificate-fingerprints' | translate }}"
-          tooltipPosition="above"
-          icon="content_copy">
-        </tb-copy-button>
-        <mat-error *ngIf="entityForm.get('storeInfo.sha256CertFingerprints').hasError('required')">
-          {{ 'mobile.sha256-certificate-fingerprints-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="entityForm.get('storeInfo.sha256CertFingerprints').hasError('pattern')">
-          {{ 'mobile.sha256-certificate-fingerprints-pattern' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field appearance="outline" *ngIf="entityForm.get('platformType').value === PlatformType.IOS">
-        <mat-label translate>mobile.app-id</mat-label>
-        <input matInput [required]="entityForm.get('status').value === MobileAppStatus.PUBLISHED" formControlName="appId">
-        <tb-copy-button
-          matSuffix
-          miniButton="false"
-          [copyText]="entityForm.get('storeInfo.appId').value"
-          tooltipText="{{ 'mobile.copy-app-id' | translate }}"
-          tooltipPosition="above"
-          icon="content_copy">
-        </tb-copy-button>
-        <mat-error *ngIf="entityForm.get('storeInfo.appId').hasError('required')">
-          {{ 'mobile.app-id-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="entityForm.get('storeInfo.appId').hasError('pattern')">
-          {{ 'mobile.app-id-pattern' | translate }}
-        </mat-error>
+        @if (entityForm.get('storeInfo.storeLink').hasError('required')) {
+          <mat-error>
+            {{ (entityForm.get('platformType').value === PlatformType.ANDROID ? 'mobile.google-play-link-required' : 'mobile.app-store-link-required')  | translate }}
+          </mat-error>
+        }
+        @if (entityForm.get('storeInfo.storeLink').hasError('pattern')) {
+          <mat-error>
+            {{ 'mobile.invalid-store-link' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
+      @if (entityForm.get('platformType').value === PlatformType.ANDROID) {
+        <mat-form-field appearance="outline">
+          <mat-label translate>mobile.sha256-certificate-fingerprints</mat-label>
+          <input matInput [required]="entityForm.get('status').value === MobileAppStatus.PUBLISHED" formControlName="sha256CertFingerprints">
+          <tb-copy-button
+            matSuffix
+            miniButton="false"
+            [copyText]="entityForm.get('storeInfo.sha256CertFingerprints').value"
+            tooltipText="{{ 'mobile.copy-sha256-certificate-fingerprints' | translate }}"
+            tooltipPosition="above"
+            icon="content_copy">
+          </tb-copy-button>
+          @if (entityForm.get('storeInfo.sha256CertFingerprints').hasError('required')) {
+            <mat-error>
+              {{ 'mobile.sha256-certificate-fingerprints-required' | translate }}
+            </mat-error>
+          }
+          @if (entityForm.get('storeInfo.sha256CertFingerprints').hasError('pattern')) {
+            <mat-error>
+              {{ 'mobile.sha256-certificate-fingerprints-pattern' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+      }
+      @if (entityForm.get('platformType').value === PlatformType.IOS) {
+        <mat-form-field appearance="outline">
+          <mat-label translate>mobile.app-id</mat-label>
+          <input matInput [required]="entityForm.get('status').value === MobileAppStatus.PUBLISHED" formControlName="appId">
+          <tb-copy-button
+            matSuffix
+            miniButton="false"
+            [copyText]="entityForm.get('storeInfo.appId').value"
+            tooltipText="{{ 'mobile.copy-app-id' | translate }}"
+            tooltipPosition="above"
+            icon="content_copy">
+          </tb-copy-button>
+          @if (entityForm.get('storeInfo.appId').hasError('required')) {
+            <mat-error>
+              {{ 'mobile.app-id-required' | translate }}
+            </mat-error>
+          }
+          @if (entityForm.get('storeInfo.appId').hasError('pattern')) {
+            <mat-error>
+              {{ 'mobile.app-id-pattern' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+      }
     </section>
   </section>
 </section>
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.html b/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.html
index d9aa1ada3d..d02a692247 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.html
@@ -23,9 +23,12 @@
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-</mat-progress-bar>
-<div *ngIf="!(isLoading$ | async)"></div>
+@if (isLoading$ | async) {
+  <mat-progress-bar color="warn" mode="indeterminate">
+  </mat-progress-bar>
+} @else {
+  <div></div>
+}
 <div mat-dialog-content class="flex flex-col gap-4">
   <div class="select-none" [innerHTML]="deleteApplicationText"></div>
   <mat-form-field appearance="outline" subscriptSizing="dynamic">
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/custom-mobile-page.component.html b/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/custom-mobile-page.component.html
index 95b34f5866..e422703215 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/custom-mobile-page.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/custom-mobile-page.component.html
@@ -30,41 +30,46 @@
     <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-label translate>mobile.page-name</mat-label>
       <input required matInput formControlName="label">
-      <mat-icon matSuffix
-                matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
-                matTooltip="{{ 'mobile.page-name-required' | translate }}"
-                *ngIf="customMobilePageForm.get('label').hasError('required') && customMobilePageForm.get('label').touched"
-                class="tb-error">
-        warning
-      </mat-icon>
-      <mat-icon matSuffix
-                matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
-                matTooltip="{{ 'mobile.page-name-cannot-contain-only-spaces' | translate }}"
-                *ngIf="customMobilePageForm.get('label').hasError('pattern') && customMobilePageForm.get('label').touched"
-                class="tb-error">
-        warning
-      </mat-icon>
-      <mat-icon matSuffix
-                matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
-                matTooltip="{{ 'mobile.page-name-max-length' | translate }}"
-                *ngIf="customMobilePageForm.get('label').hasError('maxlength') && customMobilePageForm.get('label').touched"
-                class="tb-error">
-        warning
-      </mat-icon>
+      @if (customMobilePageForm.get('label').hasError('required') && customMobilePageForm.get('label').touched) {
+        <mat-icon matSuffix
+                  matTooltipPosition="above"
+                  matTooltipClass="tb-error-tooltip"
+                  matTooltip="{{ 'mobile.page-name-required' | translate }}"
+                  class="tb-error">
+          warning
+        </mat-icon>
+      }
+      @if (customMobilePageForm.get('label').hasError('pattern') && customMobilePageForm.get('label').touched) {
+        <mat-icon matSuffix
+                  matTooltipPosition="above"
+                  matTooltipClass="tb-error-tooltip"
+                  matTooltip="{{ 'mobile.page-name-cannot-contain-only-spaces' | translate }}"
+                  class="tb-error">
+          warning
+        </mat-icon>
+      }
+      @if (customMobilePageForm.get('label').hasError('maxlength') && customMobilePageForm.get('label').touched) {
+        <mat-icon matSuffix
+                  matTooltipPosition="above"
+                  matTooltipClass="tb-error-tooltip"
+                  matTooltip="{{ 'mobile.page-name-max-length' | translate }}"
+                  class="tb-error">
+          warning
+        </mat-icon>
+      }
     </mat-form-field>
   </div>
   <mat-form-field appearance="outline" subscriptSizing="dynamic">
     <mat-label translate>mobile.page-type</mat-label>
     <mat-select formControlName="type">
-      <mat-option *ngFor="let pageType of mobilePagesTypes" [value]="pageType">
-        {{ mobilePageTypeTranslations.get(pageType) | translate }}
-      </mat-option>
+      @for (pageType of mobilePagesTypes; track pageType) {
+        <mat-option [value]="pageType">
+          {{ mobilePageTypeTranslations.get(pageType) | translate }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
-  <ng-container *ngIf="customMobilePageForm.get('type').value === MobilePageType.DASHBOARD">
+  @if (customMobilePageForm.get('type').value === MobilePageType.DASHBOARD) {
     <tb-dashboard-autocomplete class="flex-1"
                                formControlName="dashboardId"
                                required
@@ -76,25 +81,29 @@
                                placeholder="{{ 'dashboard.select-dashboard' | translate }}"
                                [selectFirstDashboard]="false"
     ></tb-dashboard-autocomplete>
-  </ng-container>
-  <ng-container *ngIf="customMobilePageForm.get('type').value === MobilePageType.WEB_VIEW">
+  }
+  @if (customMobilePageForm.get('type').value === MobilePageType.WEB_VIEW) {
     <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-label translate>mobile.url</mat-label>
       <input required matInput formControlName="url">
       <mat-hint></mat-hint>
-      <mat-error *ngIf="customMobilePageForm.get('url').hasError('pattern')">
-        {{ 'mobile.invalid-url-format' | translate }}
-      </mat-error>
+      @if (customMobilePageForm.get('url').hasError('pattern')) {
+        <mat-error>
+          {{ 'mobile.invalid-url-format' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
-  </ng-container>
-  <ng-container *ngIf="customMobilePageForm.get('type').value === MobilePageType.CUSTOM">
+  }
+  @if (customMobilePageForm.get('type').value === MobilePageType.CUSTOM) {
     <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-label translate>mobile.path</mat-label>
       <input required matInput formControlName="path">
       <mat-hint></mat-hint>
-      <mat-error *ngIf="customMobilePageForm.get('path').hasError('pattern')">
-        {{ 'mobile.invalid-path-format' | translate }}
-      </mat-error>
+      @if (customMobilePageForm.get('path').hasError('pattern')) {
+        <mat-error>
+          {{ 'mobile.invalid-path-format' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
-  </ng-container>
+  }
 </section>
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/default-mobile-page-panel.component.html b/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/default-mobile-page-panel.component.html
index 14f54ae664..b33aa51ef1 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/default-mobile-page-panel.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/default-mobile-page-panel.component.html
@@ -18,16 +18,18 @@
 <div class="tb-default-mobile-page-panel" [formGroup]="mobilePageFormGroup">
   <div class="tb-default-mobile-page-title-container">
     <div class="tb-default-mobile-page-title" translate>mobile.edit-page</div>
-    <button *ngIf="!disabled"
-            [disabled]="!isCleanupEnabled"
-            type="button"
-            mat-stroked-button
-            class="tb-box-button"
-            matTooltip="{{ 'mobile.reset-to-page-default' | translate }}"
-            matTooltipPosition="above"
-            (click)="cleanup()">
-      <tb-icon [color]="isCleanupEnabled ? 'primary' : null" matButtonIcon>mdi:broom</tb-icon>
-    </button>
+    @if (!disabled) {
+      <button
+        [disabled]="!isCleanupEnabled"
+        type="button"
+        mat-stroked-button
+        class="tb-box-button"
+        matTooltip="{{ 'mobile.reset-to-page-default' | translate }}"
+        matTooltipPosition="above"
+        (click)="cleanup()">
+        <tb-icon [color]="isCleanupEnabled ? 'primary' : null" matButtonIcon>mdi:broom</tb-icon>
+      </button>
+    }
   </div>
   <div class="tb-default-mobile-page-panel-content">
     <div class="tb-form-row space-between">
@@ -43,22 +45,24 @@
       <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic" floatLabel="always">
         <mat-label translate>mobile.page-name</mat-label>
         <input matInput formControlName="label" placeholder="{{ defaultItemName }}">
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  matTooltip="{{ 'mobile.page-name-cannot-contain-only-spaces' | translate }}"
-                  *ngIf="mobilePageFormGroup.get('label').hasError('pattern') && mobilePageFormGroup.get('label').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  matTooltip="{{ 'mobile.page-name-max-length' | translate }}"
-                  *ngIf="mobilePageFormGroup.get('label').hasError('maxlength') && mobilePageFormGroup.get('label').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
+        @if (mobilePageFormGroup.get('label').hasError('pattern') && mobilePageFormGroup.get('label').touched) {
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    matTooltip="{{ 'mobile.page-name-cannot-contain-only-spaces' | translate }}"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        }
+        @if (mobilePageFormGroup.get('label').hasError('maxlength') && mobilePageFormGroup.get('label').touched) {
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    matTooltip="{{ 'mobile.page-name-max-length' | translate }}"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        }
       </mat-form-field>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html b/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html
index 11b137d6a9..738dd372b7 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html
@@ -27,8 +27,7 @@
 </mat-toolbar>
 @if (isLoading$ | async) {
   <mat-progress-bar color="warn" mode="indeterminate"></mat-progress-bar>
-}
-@if (!(isLoading$ | async)) {
+} @else {
   <div></div>
 }
 <div mat-dialog-content class="xs:!p-0">
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/common/editor-panel.component.html b/ui-ngx/src/app/modules/home/pages/mobile/common/editor-panel.component.html
index f7ab3fe2b3..24bde59818 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/common/editor-panel.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/common/editor-panel.component.html
@@ -25,13 +25,14 @@
             (click)="cancel()">
       {{ 'action.cancel' | translate }}
     </button>
-    <button mat-raised-button
-            color="primary"
-            type="button"
-            *ngIf="!disabled"
-            (click)="apply()"
-            [disabled]="editorControl.invalid || !editorControl.dirty">
-      {{ 'action.apply' | translate }}
-    </button>
+    @if (!disabled) {
+      <button mat-raised-button
+              color="primary"
+              type="button"
+              (click)="apply()"
+              [disabled]="editorControl.invalid || !editorControl.dirty">
+        {{ 'action.apply' | translate }}
+      </button>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.component.html b/ui-ngx/src/app/modules/home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.component.html
index 76d088a20c..5a4cc4599a 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.component.html
@@ -22,9 +22,12 @@
     </mat-card-title>
     <div tb-help="mobileQrCode"></div>
   </mat-card-header>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <mat-card-content style="padding-top: 16px">
     <div class="tb-form-panel no-border no-padding" [formGroup]="mobileAppSettingsForm">
       <div class="tb-form-panel">
@@ -35,18 +38,20 @@
             <tb-toggle-option [value]="false">{{ 'admin.mobile-app.custom' | translate }}</tb-toggle-option>
           </tb-toggle-select>
         </div>
-        <div class="tb-form-row column-xs" *ngIf="!mobileAppSettingsForm.get('useDefaultApp').value">
-          <div class="fixed-title-width-230">{{ 'mobile.bundle' | translate }}</div>
-          <tb-entity-autocomplete
-            class="flex-1"
-            required
-            inlineField
-            useFullEntityId
-            placeholder="{{ 'mobile.bundle' | translate }}"
-            [entityType]="entityType.MOBILE_APP_BUNDLE"
-            formControlName="mobileAppBundleId">
-          </tb-entity-autocomplete>
-        </div>
+        @if (!mobileAppSettingsForm.get('useDefaultApp').value) {
+          <div class="tb-form-row column-xs">
+            <div class="fixed-title-width-230">{{ 'mobile.bundle' | translate }}</div>
+            <tb-entity-autocomplete
+              class="flex-1"
+              required
+              inlineField
+              useFullEntityId
+              placeholder="{{ 'mobile.bundle' | translate }}"
+              [entityType]="entityType.MOBILE_APP_BUNDLE"
+              formControlName="mobileAppBundleId">
+            </tb-entity-autocomplete>
+          </div>
+        }
         <div class="tb-form-row stroked no-padding-bottom">
           <mat-slide-toggle class="mat-slide" formControlName="androidEnabled" (click)="$event.stopPropagation()">
             {{ 'admin.mobile-app.android' | translate }}
@@ -66,48 +71,57 @@
             <tb-toggle-option [value]="false">{{ 'admin.mobile-app.disabled' | translate }}</tb-toggle-option>
           </tb-toggle-select>
         </div>
-        <div class="tb-form-panel stroked no-padding no-gap" *ngIf="mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value">
-          <div class="tb-form-row space-between no-border no-padding-bottom column-xs">
-            <mat-slide-toggle class="mat-slide fixed-title-width-230" formControlName="badgeEnabled"
-                              (click)="$event.stopPropagation()">
-              {{ 'admin.mobile-app.badges' | translate }}
-            </mat-slide-toggle>
-            <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-              <mat-select formControlName="badgePosition">
-                <mat-option *ngFor="let badgePosition of badgePositionTranslationsMap | keyvalue" [value]="badgePosition.key">
-                  {{ badgePosition.value | translate }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
+        @if (mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value) {
+          <div class="tb-form-panel stroked no-padding no-gap">
+            <div class="tb-form-row space-between no-border no-padding-bottom column-xs">
+              <mat-slide-toggle class="mat-slide fixed-title-width-230" formControlName="badgeEnabled"
+                                (click)="$event.stopPropagation()">
+                {{ 'admin.mobile-app.badges' | translate }}
+              </mat-slide-toggle>
+              <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+                <mat-select formControlName="badgePosition">
+                  @for (badgePosition of badgePositionTranslationsMap | keyvalue; track badgePosition) {
+                    <mat-option [value]="badgePosition.key">
+                      {{ badgePosition.value | translate }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            </div>
           </div>
-        </div>
-        <div class="tb-form-panel stroked no-padding no-gap" *ngIf="mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value">
-          <div class="tb-form-row space-between no-border no-padding-bottom column-xs">
-            <mat-slide-toggle class="mat-slide fixed-title-width-230" formControlName="qrCodeLabelEnabled" (click)="$event.stopPropagation()">
-              {{ 'admin.mobile-app.label' | translate }}
-            </mat-slide-toggle>
-            <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-              <input matInput formControlName="qrCodeLabel" placeholder="{{'admin.mobile-app.set' | translate}}">
-              <mat-icon matSuffix
-                        matTooltipPosition="above"
-                        matTooltipClass="tb-error-tooltip"
+        }
+        @if (mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value) {
+          <div class="tb-form-panel stroked no-padding no-gap">
+            <div class="tb-form-row space-between no-border no-padding-bottom column-xs">
+              <mat-slide-toggle class="mat-slide fixed-title-width-230" formControlName="qrCodeLabelEnabled" (click)="$event.stopPropagation()">
+                {{ 'admin.mobile-app.label' | translate }}
+              </mat-slide-toggle>
+              <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+                <input matInput formControlName="qrCodeLabel" placeholder="{{'admin.mobile-app.set' | translate}}">
+                @if (!mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').untouched &&
+                  mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').hasError('required') ||
+                  mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').hasError('maxlength')) {
+                  <mat-icon matSuffix
+                            matTooltipPosition="above"
+                            matTooltipClass="tb-error-tooltip"
                         [matTooltip]="(mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').hasError('required') ?
                          'admin.mobile-app.label-required' : 'admin.mobile-app.label-max-length') | translate"
-                        *ngIf="!mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').untouched &&
-                         mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').hasError('required') ||
-                         mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').hasError('maxlength')"
-                        class="tb-error">
-                warning
-              </mat-icon>
-            </mat-form-field>
+                    class="tb-error">
+                    warning
+                  </mat-icon>
+                }
+              </mat-form-field>
+            </div>
           </div>
-        </div>
-        <div class="tb-form-panel tb-qrcode-preview" *ngIf="mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value">
-          <div class="tb-form-panel-title" translate>admin.mobile-app.preview</div>
-          <tb-mobile-app-qrcode-widget
-            [mobileAppSettings]="mobileAppSettingsForm.getRawValue()">
-          </tb-mobile-app-qrcode-widget>
-        </div>
+        }
+        @if (mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value) {
+          <div class="tb-form-panel tb-qrcode-preview">
+            <div class="tb-form-panel-title" translate>admin.mobile-app.preview</div>
+            <tb-mobile-app-qrcode-widget
+              [mobileAppSettings]="mobileAppSettingsForm.getRawValue()">
+            </tb-mobile-app-qrcode-widget>
+          </div>
+        }
       </div>
     </div>
     <div class="tb-flex row flex-end" style="margin-top: 16px">
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
index 16430dc22a..1c98892b60 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
@@ -25,16 +25,22 @@
   </button>
 </mat-toolbar>
 <div mat-dialog-content>
-  <div *ngFor="let errorStat of errorStats | keyvalue; last as isLast">
-    <h6>{{ NotificationDeliveryMethodInfoMap.get(errorStat.key).name | translate }}</h6>
-    <table class="tb-table-list">
-      <tr *ngFor="let error of errorStat.value | keyvalue">
-        <td>
-          <mat-chip>{{ error.key }}</mat-chip>
-        </td>
-        <td class="tb-row-error">{{ error.value }}</td>
-      </tr>
-    </table>
-    <mat-divider *ngIf="!isLast"></mat-divider>
-  </div>
+  @for (errorStat of errorStatEntries; track errorStat; let isLast = $last) {
+    <div>
+      <h6>{{ NotificationDeliveryMethodInfoMap.get(errorStat.key).name | translate }}</h6>
+      <table class="tb-table-list">
+        @for (error of (errorStat.value | keyvalue); track error) {
+          <tr>
+            <td>
+              <mat-chip>{{ error.key }}</mat-chip>
+            </td>
+            <td class="tb-row-error">{{ error.value }}</td>
+          </tr>
+        }
+      </table>
+      @if (!isLast) {
+        <mat-divider></mat-divider>
+      }
+    </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.ts
index ea6e0bed5c..1dfc3b44ca 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.ts
@@ -39,6 +39,7 @@ export interface NotificationRequestErrorDialogData {
 export class SentErrorDialogComponent extends DialogComponent<SentErrorDialogComponent, void> {
 
   errorStats: { [key in NotificationDeliveryMethod]: {[errorKey in string]: string}};
+  errorStatEntries: Array<{ key: NotificationDeliveryMethod; value: { [k: string]: string } }>;
 
   NotificationDeliveryMethodInfoMap = NotificationDeliveryMethodInfoMap;
 
@@ -49,6 +50,7 @@ export class SentErrorDialogComponent extends DialogComponent<SentErrorDialogCom
     super(store, router, dialogRef);
 
     this.errorStats = data.notificationRequest.stats.errors;
+    this.errorStatEntries = (Object.entries(this.errorStats) as Array<[NotificationDeliveryMethod, { [k: string]: string }]>).map(([key, value]) => ({ key, value }));
   }
 
   cancel(): void {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
index 3d159c14b2..1a0be821be 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
@@ -25,8 +25,10 @@
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-</mat-progress-bar>
+@if (isLoading$ | async) {
+  <mat-progress-bar color="warn" mode="indeterminate">
+  </mat-progress-bar>
+}
 <div mat-dialog-content>
   <mat-horizontal-stepper linear #createNotification
                           labelPosition="end"
@@ -56,52 +58,56 @@
           } @else {
             <ng-container *ngTemplateOutlet="recipientsList"></ng-container>
             <section formGroupName="template">
-            <section formGroupName="configuration">
-              <div class="delivery-title">
-                <div>
-                  <label [class.tb-error]="notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')"
-                         class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
-                  <div class="tb-form-hint" translate>notification.at-least-one-should-be-selected</div>
+              <section formGroupName="configuration">
+                <div class="delivery-title">
+                  <div>
+                    <label [class.tb-error]="notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')"
+                    class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
+                    <div class="tb-form-hint" translate>notification.at-least-one-should-be-selected</div>
+                  </div>
+                  @if (showRefresh) {
+                    <button
+                      matTooltip="{{ 'notification.refresh-allow-delivery-method' | translate }}"
+                      matTooltipPosition="above"
+                      (click)="refreshAllowDeliveryMethod()"
+                      mat-icon-button>
+                      <mat-icon>refresh</mat-icon>
+                    </button>
+                  }
                 </div>
-                <button
-                  matTooltip="{{ 'notification.refresh-allow-delivery-method' | translate }}"
-                  matTooltipPosition="above"
-                  (click)="refreshAllowDeliveryMethod()"
-                  *ngIf="showRefresh"
-                  mat-icon-button>
-                  <mat-icon>refresh</mat-icon>
-                </button>
-              </div>
-              <section formGroupName="deliveryMethodsTemplates" class="delivery-methods-container">
-                <ng-container *ngFor="let deliveryMethods of notificationDeliveryMethods">
-                  <a *ngIf="isInteractDeliveryMethod(deliveryMethods); else deliveryMethod"
-                     class="tb-form-panel stroked delivery-method-container tb-pointer interact"
-                     [routerLink]="configurationPage(deliveryMethods)"
-                     [formGroupName]="deliveryMethods"
-                     [matTooltip]="getDeliveryMethodsTooltip(deliveryMethods)"
-                     matTooltipPosition="above">
-                    <mat-slide-toggle class="delivery-method" formControlName="enabled">
-                      {{ notificationDeliveryMethodInfoMap.get(deliveryMethods).name | translate }}
-                    </mat-slide-toggle>
-                    <mat-icon *ngIf="isInteractDeliveryMethod(deliveryMethods)">
-                      chevron_right
-                    </mat-icon>
-                  </a>
-                  <ng-template #deliveryMethod>
-                    <section class="delivery-method-container tb-form-panel stroked"
-                             [formGroupName]="deliveryMethods"
-                             [matTooltip]="getDeliveryMethodsTooltip(deliveryMethods)"
-                             [matTooltipDisabled]="getDeliveryMethodsTemplatesControl(deliveryMethods).enabled"
-                             matTooltipPosition="above">
-                      <mat-slide-toggle class="delivery-method" formControlName="enabled">
-                        {{ notificationDeliveryMethodInfoMap.get(deliveryMethods).name | translate }}
-                      </mat-slide-toggle>
-                    </section>
-                  </ng-template>
-                </ng-container>
+                <section formGroupName="deliveryMethodsTemplates" class="delivery-methods-container">
+                  @for (deliveryMethods of notificationDeliveryMethods; track deliveryMethods) {
+                    @if (isInteractDeliveryMethod(deliveryMethods)) {
+                      <a
+                        class="tb-form-panel stroked delivery-method-container tb-pointer interact"
+                        [routerLink]="configurationPage(deliveryMethods)"
+                        [formGroupName]="deliveryMethods"
+                        [matTooltip]="getDeliveryMethodsTooltip(deliveryMethods)"
+                        matTooltipPosition="above">
+                        <mat-slide-toggle class="delivery-method" formControlName="enabled">
+                          {{ notificationDeliveryMethodInfoMap.get(deliveryMethods).name | translate }}
+                        </mat-slide-toggle>
+                        @if (isInteractDeliveryMethod(deliveryMethods)) {
+                          <mat-icon>
+                            chevron_right
+                          </mat-icon>
+                        }
+                      </a>
+                    } @else {
+                      <section class="delivery-method-container tb-form-panel stroked"
+                               [formGroupName]="deliveryMethods"
+                               [matTooltip]="getDeliveryMethodsTooltip(deliveryMethods)"
+                               [matTooltipDisabled]="getDeliveryMethodsTemplatesControl(deliveryMethods).enabled"
+                               matTooltipPosition="above">
+                        <mat-slide-toggle class="delivery-method" formControlName="enabled">
+                          {{ notificationDeliveryMethodInfoMap.get(deliveryMethods).name | translate }}
+                        </mat-slide-toggle>
+                      </section>
+                    }
+                  }
+                </section>
               </section>
             </section>
-          </section>
           }
         </div>
         <ng-template #recipientsList>
@@ -279,5 +285,5 @@
   <span class="flex-1"></span>
   <button mat-raised-button
           color="primary"
-          (click)="nextStep()">{{ nextStepLabel() | translate }}</button>
+  (click)="nextStep()">{{ nextStepLabel() | translate }}</button>
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html
index 856cf091a6..d4dda48d4c 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html
@@ -29,13 +29,15 @@
         </span>
       </mat-checkbox>
     </div>
-    <div class="flex flex-1 flex-row" *ngFor="let deliveryMethod of deliveryMethods">
-      <div class="flex flex-1 items-center justify-start">
-        <mat-checkbox color="primary"
-                      [checked]="getChecked(deliveryMethod)"
-                      (click)="toggleDeliviryMethod(deliveryMethod)"
-        ></mat-checkbox>
+    @for (deliveryMethod of deliveryMethods; track deliveryMethod) {
+      <div class="flex flex-1 flex-row">
+        <div class="flex flex-1 items-center justify-start">
+          <mat-checkbox color="primary"
+                        [checked]="getChecked(deliveryMethod)"
+                        (click)="toggleDeliviryMethod(deliveryMethod)"
+          ></mat-checkbox>
+        </div>
       </div>
-    </div>
+    }
   </div>
 </form>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html
index 608a11539e..73d0209640 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html
@@ -25,13 +25,17 @@
         <div class="flex flex-col">
           <button mat-button color="primary"
                   [disabled]="(isLoading$ | async)"
-                  (click)="resetSettings()">{{ 'notification.settings.reset-all' | translate }}</button>
+          (click)="resetSettings()">{{ 'notification.settings.reset-all' | translate }}</button>
         </div>
       </div>
     </mat-card-header>
-    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-    </mat-progress-bar>
-    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+    @if (isLoading$ | async) {
+      <mat-progress-bar color="warn" mode="indeterminate">
+      </mat-progress-bar>
+    }
+    @if (!(isLoading$ | async)) {
+      <div style="height: 4px;"></div>
+    }
     <mat-card-content style="padding-top: 16px; overflow: hidden;">
       <form [formGroup]="notificationSettings" class="notification-form">
         <section class="notification-section">
@@ -46,25 +50,31 @@
                   <mat-label translate>notification.settings.type</mat-label>
                 </mat-checkbox>
               </div>
-              <div class="flex-1" *ngFor="let deliveryMethods of notificationDeliveryMethods">
-                <div class="flex flex-1 items-center justify-start">
-                  <mat-checkbox color="warn"
-                                [checked]="getChecked(deliveryMethods)"
-                                (change)="changeInstanceTypeCheckBox($event.checked, deliveryMethods)"
-                                [indeterminate]="getIndeterminate(deliveryMethods)"
-                                (click)="$event.stopPropagation()">
-                    <mat-label>{{ notificationDeliveryMethodInfoMap.get(deliveryMethods).name | translate }}</mat-label>
-                  </mat-checkbox>
+              @for (deliveryMethods of notificationDeliveryMethods; track deliveryMethods) {
+                <div class="flex-1">
+                  <div class="flex flex-1 items-center justify-start">
+                    <mat-checkbox color="warn"
+                                  [checked]="getChecked(deliveryMethods)"
+                                  (change)="changeInstanceTypeCheckBox($event.checked, deliveryMethods)"
+                                  [indeterminate]="getIndeterminate(deliveryMethods)"
+                                  (click)="$event.stopPropagation()">
+                      <mat-label>{{ notificationDeliveryMethodInfoMap.get(deliveryMethods).name | translate }}</mat-label>
+                    </mat-checkbox>
+                  </div>
                 </div>
-              </div>
+              }
             </div>
             <mat-divider></mat-divider>
-            <div *ngFor="let settingsControl of notificationSettingsFormArray.controls; let i = index; let $last = last;">
-              <tb-notification-setting-form [formControl]="settingsControl"
-                                            [deliveryMethods]="notificationDeliveryMethods">
-              </tb-notification-setting-form>
-              <mat-divider *ngIf="!$last"></mat-divider>
-            </div>
+            @for (settingsControl of notificationSettingsFormArray.controls; track settingsControl; let i = $index) {
+              <div>
+                <tb-notification-setting-form [formControl]="settingsControl"
+                                              [deliveryMethods]="notificationDeliveryMethods">
+                </tb-notification-setting-form>
+                @if (!$last) {
+                  <mat-divider></mat-divider>
+                }
+              </div>
+            }
           </div>
         </section>
       </form>
diff --git a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-tabs.component.html b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-tabs.component.html
index c94f7eaca7..61e0f138da 100644
--- a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-tabs.component.html
@@ -15,9 +15,11 @@
     limitations under the License.
 
 -->
-<mat-tab *ngIf="isTenantOtaUpdate() && authUser.authority === authorities.TENANT_ADMIN"
-         label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
-  <tb-version-control detailsMode="true" singleEntityMode="true"
-                      (versionRestored)="entitiesTableConfig.updateData()"
-                      [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.title" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
-</mat-tab>
+@if (isTenantOtaUpdate() && authUser.authority === authorities.TENANT_ADMIN) {
+  <mat-tab
+    label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
+    <tb-version-control detailsMode="true" singleEntityMode="true"
+                        (versionRestored)="entitiesTableConfig.updateData()"
+    [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.title" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
+  </mat-tab>
+}
diff --git a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html b/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
index 774edbd184..697dcf86af 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
+++ b/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
@@ -29,21 +29,29 @@
         </div>
       </div>
     </mat-card-header>
-    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-    </mat-progress-bar>
-    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+    @if (isLoading$ | async) {
+      <mat-progress-bar color="warn" mode="indeterminate">
+      </mat-progress-bar>
+    }
+    @if (!(isLoading$ | async)) {
+      <div style="height: 4px;"></div>
+    }
     <mat-card-content style="padding-top: 16px;">
       <form [formGroup]="profile" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
           <mat-form-field class="mat-block">
             <mat-label translate>user.email</mat-label>
             <input matInput type="email" formControlName="email"/>
-            <mat-error *ngIf="profile.get('email').hasError('required')">
-              {{ 'user.email-required' | translate }}
-            </mat-error>
-            <mat-error *ngIf="profile.get('email').hasError('email')">
-              {{ 'user.invalid-email-format' | translate }}
-            </mat-error>
+            @if (profile.get('email').hasError('required')) {
+              <mat-error>
+                {{ 'user.email-required' | translate }}
+              </mat-error>
+            }
+            @if (profile.get('email').hasError('email')) {
+              <mat-error>
+                {{ 'user.invalid-email-format' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
           <mat-form-field class="mat-block">
             <mat-label translate>user.first-name</mat-label>
@@ -78,20 +86,22 @@
               }
             </mat-select>
           </mat-form-field>
-          <section class="tb-home-dashboard flex flex-1 flex-col gt-sm:flex-row" *ngIf="!isSysAdmin()">
-            <tb-dashboard-autocomplete
-              class="flex-1"
-              label="{{ 'dashboard.home-dashboard' | translate }}"
-              formControlName="homeDashboardId"
-              [dashboardsScope]="user?.authority === authorities.TENANT_ADMIN ? 'tenant' : 'customer'"
-              [tenantId]="user?.tenantId?.id"
-              [customerId]="user?.customerId?.id"
-              [selectFirstDashboard]="false"
-            ></tb-dashboard-autocomplete>
-            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
-              {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
-            </mat-checkbox>
-          </section>
+          @if (!isSysAdmin()) {
+            <section class="tb-home-dashboard flex flex-1 flex-col gt-sm:flex-row">
+              <tb-dashboard-autocomplete
+                class="flex-1"
+                label="{{ 'dashboard.home-dashboard' | translate }}"
+                formControlName="homeDashboardId"
+                [dashboardsScope]="user?.authority === authorities.TENANT_ADMIN ? 'tenant' : 'customer'"
+                [tenantId]="user?.tenantId?.id"
+                [customerId]="user?.customerId?.id"
+                [selectFirstDashboard]="false"
+              ></tb-dashboard-autocomplete>
+              <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
+                {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
+              </mat-checkbox>
+            </section>
+          }
           <div class="flex flex-row items-start justify-end">
             <button mat-button mat-raised-button color="primary"
                     type="submit"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
index 8156c1690d..41e72a14cf 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
@@ -26,8 +26,10 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content>
     <tb-rule-node #tbRuleNode
                   [ruleNode]="ruleNode"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
index 8d594cd634..4fc6469d0e 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
@@ -26,8 +26,10 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
       <tb-rule-node-link
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
index 2aa6d7645e..2d8eef6454 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
@@ -25,20 +25,26 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content>
     <form [formGroup]="createNestedRuleChainFormGroup" class="mat-padding">
       <fieldset [disabled]="isLoading$ | async">
         <mat-form-field class="mat-block flex-1">
           <mat-label translate>rulechain.name</mat-label>
           <input matInput formControlName="name" required>
-          <mat-error *ngIf="createNestedRuleChainFormGroup.get('name').hasError('required')">
-            {{ 'rulechain.name-required' | translate }}
-          </mat-error>
-          <mat-error *ngIf="createNestedRuleChainFormGroup.get('name').hasError('maxlength')">
-            {{ 'rulechain.name-max-length' | translate }}
-          </mat-error>
+          @if (createNestedRuleChainFormGroup.get('name').hasError('required')) {
+            <mat-error>
+              {{ 'rulechain.name-required' | translate }}
+            </mat-error>
+          }
+          @if (createNestedRuleChainFormGroup.get('name').hasError('maxlength')) {
+            <mat-error>
+              {{ 'rulechain.name-max-length' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <div formGroupName="additionalInfo">
           <mat-form-field class="mat-block">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/link-labels.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/link-labels.component.html
index 65aabc17aa..d243baaa29 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/link-labels.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/link-labels.component.html
@@ -18,13 +18,16 @@
 <mat-form-field [formGroup]="linksFormGroup" style="width: 100%;">
   <mat-label translate>rulenode.link-labels</mat-label>
   <mat-chip-grid #chipList>
-    <mat-chip-row
-      *ngFor="let label of labels"
-      [removable]="!disabled"
-      (removed)="remove(label)">
-      {{label.name}}
-      <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
-    </mat-chip-row>
+    @for (label of labels; track label) {
+      <mat-chip-row
+        [removable]="!disabled"
+        (removed)="remove(label)">
+        {{label.name}}
+        @if (!disabled) {
+          <mat-icon matChipRemove>close</mat-icon>
+        }
+      </mat-chip-row>
+    }
     <input matInput type="text" placeholder="{{ !disabled ? ('rulenode.link-label' | translate) : '' }}"
            style="max-width: 200px;"
            #labelInput
@@ -42,24 +45,31 @@
                     class="tb-autocomplete"
                     (optionSelected)="selected($event)"
                     [displayWith]="displayLabelFn">
-    <mat-option *ngFor="let label of filteredLabels | async" [value]="label">
-      <span [innerHTML]="label.name | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="(filteredLabels | async)?.length === 0" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span translate>rulenode.no-link-labels-found</span>
+    @for (label of filteredLabels | async; track label) {
+      <mat-option [value]="label">
+        <span [innerHTML]="label.name | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if ((filteredLabels | async)?.length === 0) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span translate>rulenode.no-link-labels-found</span>
+            </div>
+          } @else {
+            <span>
+              {{ translate.get('rulenode.no-link-label-matching',
+              {label: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
+            </span>
+          }
+          @if (allowCustom) {
+            <span>
+              <a translate (click)="createLinkLabel($event, searchText)">rulenode.create-new-link-label</a>
+            </span>
+          }
         </div>
-        <ng-template #searchNotEmpty>
-                <span>
-                  {{ translate.get('rulenode.no-link-label-matching',
-                  {label: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
-                </span>
-        </ng-template>
-        <span *ngIf="allowCustom">
-                <a translate (click)="createLinkLabel($event, searchText)">rulenode.create-new-link-label</a>
-              </span>
-      </div>
-    </mat-option>
+      </mat-option>
+    }
   </mat-autocomplete>
 </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.html
index 25d2fd315d..f1108b17ea 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.html
@@ -17,12 +17,16 @@
 -->
 <div [formGroup]="ruleNodeConfigFormGroup" class="rule-node-config">
   <ng-container #definedConfigContent></ng-container>
-  <div class="tb-rulenode-directive-error" *ngIf="definedDirectiveError">{{definedDirectiveError}}</div>
-  <tb-json-object-edit *ngIf="!useDefinedDirective()" #jsonObjectEditComponent
-                       class="tb-rule-node-configuration-json"
-                       formControlName="configuration"
-                       [label]="'rulenode.configuration' | translate"
-                       [jsonRequired]="required"
-                       [fillHeight]="true">
-  </tb-json-object-edit>
+  @if (definedDirectiveError) {
+    <div class="tb-rulenode-directive-error">{{definedDirectiveError}}</div>
+  }
+  @if (!useDefinedDirective()) {
+    <tb-json-object-edit #jsonObjectEditComponent
+                         class="tb-rule-node-configuration-json"
+                         formControlName="configuration"
+                         [label]="'rulenode.configuration' | translate"
+                         [jsonRequired]="required"
+                         [fillHeight]="true">
+    </tb-json-object-edit>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
index daf8fce8e5..a59ad5c547 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
@@ -15,12 +15,14 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" *ngIf="!isAdd && ruleNode.component?.configurationDescriptor?.nodeDefinition?.ruleChainNode">
-  <button mat-raised-button color="primary"
-          (click)="openRuleChain($event)">
-    {{'rulechain.open-rulechain' | translate }}
-  </button>
-</div>
+@if (!isAdd && ruleNode.component?.configurationDescriptor?.nodeDefinition?.ruleChainNode) {
+  <div class="tb-details-buttons">
+    <button mat-raised-button color="primary"
+            (click)="openRuleChain($event)">
+      {{'rulechain.open-rulechain' | translate }}
+    </button>
+  </div>
+}
 <form [formGroup]="ruleNodeFormGroup" class="mat-padding">
   <section class="title-row align-center flex">
     <mat-form-field class="mat-block flex-1" appearance="outline">
@@ -43,7 +45,7 @@
         class="mr-2"
         formControlName="debugSettings"
         [entityType]="entityType.RULE_NODE"
-      />
+        />
       @if (isSingleton()) {
         <button mat-stroked-button
                 class="tb-rounded-btn flex-1"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
index 0a9a085b93..e506e8d87c 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
@@ -28,14 +28,15 @@
                     opened
                     position="start">
           <mat-toolbar color="primary" class="tb-dark">
-            <tb-rule-chain-select
-              class="flex-1"
-              *ngIf="!isImport"
-              [ruleChainType]="ruleChainType"
-              [disabled]="isDirtyValue"
-              [(ngModel)]="ruleChain"
-              (ngModelChange)="currentRuleChainIdChanged(ruleChain.id?.id)">
-            </tb-rule-chain-select>
+            @if (!isImport) {
+              <tb-rule-chain-select
+                class="flex-1"
+                [ruleChainType]="ruleChainType"
+                [disabled]="isDirtyValue"
+                [(ngModel)]="ruleChain"
+                (ngModelChange)="currentRuleChainIdChanged(ruleChain.id?.id)">
+              </tb-rule-chain-select>
+            }
           </mat-toolbar>
           <mat-toolbar>
             <div class="mat-toolbar-tools">
@@ -59,28 +60,30 @@
             </div>
           </mat-toolbar>
           <div class="tb-rulechain-library-panel-group">
-            <mat-expansion-panel #ruleNodeTypeExpansionPanels
-                                 class="mat-elevation-z2"
-                                 [expanded]="true" *ngFor="let ruleNodeType of ruleNodeTypesLibraryArray">
-              <mat-expansion-panel-header expandedHeight="48px"
-                                          (mouseenter)="typeHeaderMouseEnter($event, ruleNodeType)"
-                                          (mouseleave)="destroyTooltips()">
-                <mat-panel-title>
-                  <mat-icon>{{ ruleNodeTypeDescriptorsMap.get(ruleNodeType).icon }}</mat-icon>
-                  <div class="tb-panel-title" translate>{{ ruleNodeTypeDescriptorsMap.get(ruleNodeType).name }}</div>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <fc-canvas id="tb-rulchain-{{ruleNodeType}}"
-                         [model]="ruleNodeTypesModel[ruleNodeType].model"
-                         [selectedObjects]="ruleNodeTypesModel[ruleNodeType].selectedObjects"
-                         [automaticResize]="false"
-                         fitModelSizeByDefault
-                         [userCallbacks]="nodeLibCallbacks"
-                         [nodeWidth]="170"
-                         [nodeHeight]="50"
-                         [dropTargetId]="'tb-rulchain-canvas'">
-              </fc-canvas>
-            </mat-expansion-panel>
+            @for (ruleNodeType of ruleNodeTypesLibraryArray; track ruleNodeType) {
+              <mat-expansion-panel #ruleNodeTypeExpansionPanels
+                                   class="mat-elevation-z2"
+                                   [expanded]="true">
+                <mat-expansion-panel-header expandedHeight="48px"
+                                            (mouseenter)="typeHeaderMouseEnter($event, ruleNodeType)"
+                                            (mouseleave)="destroyTooltips()">
+                  <mat-panel-title>
+                    <mat-icon>{{ ruleNodeTypeDescriptorsMap.get(ruleNodeType).icon }}</mat-icon>
+                    <div class="tb-panel-title" translate>{{ ruleNodeTypeDescriptorsMap.get(ruleNodeType).name }}</div>
+                  </mat-panel-title>
+                </mat-expansion-panel-header>
+                <fc-canvas id="tb-rulchain-{{ruleNodeType}}"
+                           [model]="ruleNodeTypesModel[ruleNodeType].model"
+                           [selectedObjects]="ruleNodeTypesModel[ruleNodeType].selectedObjects"
+                           [automaticResize]="false"
+                           fitModelSizeByDefault
+                           [userCallbacks]="nodeLibCallbacks"
+                           [nodeWidth]="170"
+                           [nodeHeight]="50"
+                           [dropTargetId]="'tb-rulchain-canvas'">
+                </fc-canvas>
+              </mat-expansion-panel>
+            }
           </div>
         </mat-drawer>
         <mat-drawer class="tb-details-drawer"
@@ -88,8 +91,9 @@
                     (closed)="onDetailsDrawerClosed()"
                     mode="over"
                     position="end">
-          <tb-details-panel *ngIf="editingRuleNode" class="flex-1"
-                            headerTitle="{{editingRuleNode.name}}"
+          @if (editingRuleNode) {
+            <tb-details-panel class="flex-1"
+                              headerTitle="{{editingRuleNode.name}}"
                             headerSubtitle="{{
                               (ruleNodeTypeDescriptorsMap.get(editingRuleNode.component.type).name | translate)
                               + ' - ' + editingRuleNode.component.name
@@ -100,78 +104,85 @@
                             (toggleDetailsEditMode)="onRevertRuleNodeEdit()"
                             (applyDetails)="saveRuleNode()"
                             [theForm]="tbRuleNode.ruleNodeFormGroup">
-            <div class="details-buttons">
-              <div [tb-help]="helpLinkIdForRuleNodeType()"></div>
-            </div>
-            <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill tb-rulenode-details flex-1" [(selectedIndex)]="selectedRuleNodeTabIndex">
-              <mat-tab label="{{ 'rulenode.details' | translate }}">
-                <tb-rule-node #tbRuleNode
-                              [additionalActionConfig]="additionalActionConfig"
-                              [ruleNode]="editingRuleNode"
-                              [ruleChainId]="ruleChain.id?.id"
-                              [ruleChainType]="ruleChainType"
-                              (initRuleNode)="onRuleNodeInit()"
-                              (changeScript)="switchToFirstTab()">
-                </tb-rule-node>
-              </mat-tab>
-              <mat-tab *ngIf="editingRuleNode.ruleNodeId" label="{{ 'rulenode.events' | translate }}" #eventsTab="matTab">
-                <tb-event-table [debugEventTypes]="[debugEventTypes.DEBUG_RULE_NODE]"
-                                [defaultEventType]="debugEventTypes.DEBUG_RULE_NODE"
-                                [active]="eventsTab.isActive"
-                                [tenantId]="ruleChain.tenantId.id"
-                                [entityId]="editingRuleNode.ruleNodeId"
-                                [functionTestButtonLabel]="ruleNodeTestButtonLabel"
-                                (debugEventSelected)="onDebugEventSelected($event)">
-                </tb-event-table>
-              </mat-tab>
-              <mat-tab label="{{ 'rulenode.help' | translate }}">
-                <div class="tb-rule-node-help">
-                  <div id="tb-node-content" class="mat-padding flex flex-col">
-                    <div class="tb-node-title">{{editingRuleNode.component.name}}</div>
-                    <div>&nbsp;</div>
-                    <div class="tb-node-description" [innerHtml]="editingRuleNode.component.configurationDescriptor.nodeDefinition.description | safe: 'html'"></div>
-                    <div>&nbsp;</div>
-                    <div class="tb-node-details" [innerHtml]="editingRuleNode.component.configurationDescriptor.nodeDefinition.details | safe: 'html'"></div>
+              <div class="details-buttons">
+                <div [tb-help]="helpLinkIdForRuleNodeType()"></div>
+              </div>
+              <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill tb-rulenode-details flex-1" [(selectedIndex)]="selectedRuleNodeTabIndex">
+                <mat-tab label="{{ 'rulenode.details' | translate }}">
+                  <tb-rule-node #tbRuleNode
+                                [additionalActionConfig]="additionalActionConfig"
+                                [ruleNode]="editingRuleNode"
+                                [ruleChainId]="ruleChain.id?.id"
+                                [ruleChainType]="ruleChainType"
+                                (initRuleNode)="onRuleNodeInit()"
+                                (changeScript)="switchToFirstTab()">
+                  </tb-rule-node>
+                </mat-tab>
+                @if (editingRuleNode.ruleNodeId) {
+                  <mat-tab label="{{ 'rulenode.events' | translate }}" #eventsTab="matTab">
+                    <tb-event-table [debugEventTypes]="[debugEventTypes.DEBUG_RULE_NODE]"
+                                    [defaultEventType]="debugEventTypes.DEBUG_RULE_NODE"
+                                    [active]="eventsTab.isActive"
+                                    [tenantId]="ruleChain.tenantId.id"
+                                    [entityId]="editingRuleNode.ruleNodeId"
+                                    [functionTestButtonLabel]="ruleNodeTestButtonLabel"
+                                    (debugEventSelected)="onDebugEventSelected($event)">
+                    </tb-event-table>
+                  </mat-tab>
+                }
+                <mat-tab label="{{ 'rulenode.help' | translate }}">
+                  <div class="tb-rule-node-help">
+                    <div id="tb-node-content" class="mat-padding flex flex-col">
+                      <div class="tb-node-title">{{editingRuleNode.component.name}}</div>
+                      <div>&nbsp;</div>
+                      <div class="tb-node-description" [innerHtml]="editingRuleNode.component.configurationDescriptor.nodeDefinition.description | safe: 'html'"></div>
+                      <div>&nbsp;</div>
+                      <div class="tb-node-details" [innerHtml]="editingRuleNode.component.configurationDescriptor.nodeDefinition.details | safe: 'html'"></div>
+                    </div>
                   </div>
-                </div>
-              </mat-tab>
-            </mat-tab-group>
-          </tb-details-panel>
-          <tb-details-panel *ngIf="editingRuleNodeLink" class="flex-1"
-                            headerTitle="{{editingRuleNodeLink.label}}"
-                            headerSubtitle="{{'rulenode.link-details' | translate}}"
-                            [isReadOnly]="false"
-                            [isAlwaysEdit]="true"
-                            (closeDetails)="onEditRuleNodeLinkClosed()"
-                            (toggleDetailsEditMode)="onRevertRuleNodeLinkEdit()"
-                            (applyDetails)="saveRuleNodeLink()"
-                            [theForm]="tbRuleNodeLink.ruleNodeLinkFormGroup">
-            <div class="details-buttons">
-              <div [tb-help]="'ruleEngine'"></div>
-            </div>
-            <tb-rule-node-link
-              class="flex-1"
-              #tbRuleNodeLink
-              [(ngModel)]="editingRuleNodeLink"
-              [allowedLabels]="editingRuleNodeLinkLabels"
-              [allowCustom]="editingRuleNodeAllowCustomLabels"
-              [sourceRuleChainId]="editingRuleNodeSourceRuleChainId">
-            </tb-rule-node-link>
-          </tb-details-panel>
-          <tb-details-panel *ngIf="editingNote" class="flex-1"
-                            headerTitle="{{ 'rulechain.note' | translate }}"
-                            headerSubtitle="{{ 'rulechain.note-details' | translate }}"
-                            [isReadOnly]="false"
-                            [isAlwaysEdit]="true"
-                            (closeDetails)="onEditNoteClosed()"
-                            (toggleDetailsEditMode)="onRevertNoteEdit()"
-                            (applyDetails)="saveNote()"
-                            [theForm]="tbRuleNote.noteForm">
-            <tb-rule-note-editor #tbRuleNote
-                          [note]="editingNote"
-                          class="mt-3 flex-1">
-            </tb-rule-note-editor>
-          </tb-details-panel>
+                </mat-tab>
+              </mat-tab-group>
+            </tb-details-panel>
+          }
+          @if (editingRuleNodeLink) {
+            <tb-details-panel class="flex-1"
+                              headerTitle="{{editingRuleNodeLink.label}}"
+                              headerSubtitle="{{'rulenode.link-details' | translate}}"
+                              [isReadOnly]="false"
+                              [isAlwaysEdit]="true"
+                              (closeDetails)="onEditRuleNodeLinkClosed()"
+                              (toggleDetailsEditMode)="onRevertRuleNodeLinkEdit()"
+                              (applyDetails)="saveRuleNodeLink()"
+                              [theForm]="tbRuleNodeLink.ruleNodeLinkFormGroup">
+              <div class="details-buttons">
+                <div [tb-help]="'ruleEngine'"></div>
+              </div>
+              <tb-rule-node-link
+                class="flex-1"
+                #tbRuleNodeLink
+                [(ngModel)]="editingRuleNodeLink"
+                [allowedLabels]="editingRuleNodeLinkLabels"
+                [allowCustom]="editingRuleNodeAllowCustomLabels"
+                [sourceRuleChainId]="editingRuleNodeSourceRuleChainId">
+              </tb-rule-node-link>
+            </tb-details-panel>
+          }
+          @if (editingNote) {
+            <tb-details-panel class="flex-1"
+                              headerTitle="{{ 'rulechain.note' | translate }}"
+                              headerSubtitle="{{ 'rulechain.note-details' | translate }}"
+                              [isReadOnly]="false"
+                              [isAlwaysEdit]="true"
+                              (closeDetails)="onEditNoteClosed()"
+                              (toggleDetailsEditMode)="onRevertNoteEdit()"
+                              (applyDetails)="saveNote()"
+                              [theForm]="tbRuleNote.noteForm">
+              <tb-rule-note-editor #tbRuleNote
+                                   [note]="editingNote"
+                                   class="mt-3 flex-1">
+              </tb-rule-note-editor>
+            </tb-details-panel>
+          }
         </mat-drawer>
         <mat-drawer-content class="tb-rulechain-graph-content">
           <button color="primary"
@@ -219,8 +230,12 @@
               <ng-template matMenuContent let-contextInfo="contextInfo">
                 <div class="tb-rule-chain-context-menu-container" (mouseleave)="onRuleChainContextMenuMouseLeave()">
                   <div class="tb-context-menu-header {{contextInfo.headerClass}}">
-                    <mat-icon *ngIf="!contextInfo.iconUrl">{{contextInfo.icon}}</mat-icon>
-                    <img *ngIf="contextInfo.iconUrl" [src]="contextInfo.iconUrl"/>
+                    @if (!contextInfo.iconUrl) {
+                      <mat-icon>{{contextInfo.icon}}</mat-icon>
+                    }
+                    @if (contextInfo.iconUrl) {
+                      <img [src]="contextInfo.iconUrl"/>
+                    }
                     <div class="flex-1 self-center">
                       <div class="tb-context-menu-title">{{contextInfo.title}}</div>
                       @if (contextInfo.subtitle) {
@@ -228,17 +243,27 @@
                       }
                     </div>
                   </div>
-                  <div *ngFor="let menuItem of contextInfo.menuItems">
-                    <mat-divider *ngIf="menuItem.divider"></mat-divider>
-                    <button *ngIf="!menuItem.divider"
-                            mat-menu-item
-                            [disabled]="!menuItem.enabled"
-                            (click)="menuItem.action(contextMenuEvent)">
-                      <span *ngIf="menuItem.shortcut" class="tb-alt-text"> {{ menuItem.shortcut | keyboardShortcut }}</span>
-                      <mat-icon *ngIf="menuItem.icon">{{menuItem.icon}}</mat-icon>
-                      <span translate>{{menuItem.value}}</span>
-                    </button>
-                  </div>
+                  @for (menuItem of contextInfo.menuItems; track menuItem) {
+                    <div>
+                      @if (menuItem.divider) {
+                        <mat-divider></mat-divider>
+                      }
+                      @if (!menuItem.divider) {
+                        <button
+                          mat-menu-item
+                          [disabled]="!menuItem.enabled"
+                          (click)="menuItem.action(contextMenuEvent)">
+                          @if (menuItem.shortcut) {
+                            <span class="tb-alt-text"> {{ menuItem.shortcut | keyboardShortcut }}</span>
+                          }
+                          @if (menuItem.icon) {
+                            <mat-icon>{{menuItem.icon}}</mat-icon>
+                          }
+                          <span translate>{{menuItem.value}}</span>
+                        </button>
+                      }
+                    </div>
+                  }
                 </div>
               </ng-template>
             </mat-menu>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-tabs.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-tabs.component.html
index cd93367fc0..ecf2433b31 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-tabs.component.html
@@ -15,46 +15,60 @@
     limitations under the License.
 
 -->
-<mat-tab *ngIf="entity"
-         label="{{ 'attribute.attributes' | translate }}" #attributesTab="matTab">
-  <tb-attribute-table [defaultAttributeScope]="attributeScopes.SERVER_SCOPE"
-                      [active]="attributesTab.isActive"
-                      [entityId]="entity.id"
-                      [entityName]="entity.name">
-  </tb-attribute-table>
-</mat-tab>
-<mat-tab *ngIf="entity"
-         label="{{ 'attribute.latest-telemetry' | translate }}" #telemetryTab="matTab">
-  <tb-attribute-table [defaultAttributeScope]="latestTelemetryTypes.LATEST_TELEMETRY"
-                      disableAttributeScopeSelection
-                      [active]="telemetryTab.isActive"
-                      [entityId]="entity.id"
-                      [entityName]="entity.name">
-  </tb-attribute-table>
-</mat-tab>
-<mat-tab *ngIf="entity"
-         label="{{ 'alarm.alarms' | translate }}" #alarmsTab="matTab">
-  <tb-alarm-table [active]="alarmsTab.isActive" [entityId]="entity.id"></tb-alarm-table>
-</mat-tab>
-<mat-tab *ngIf="entity"
-         label="{{ 'rulechain.events' | translate }}" #eventsTab="matTab">
-  <tb-event-table [debugEventTypes]="[debugEventTypes.DEBUG_RULE_CHAIN]"
-                  [defaultEventType]="debugEventTypes.DEBUG_RULE_CHAIN"
-                  [active]="eventsTab.isActive"
-                  [tenantId]="entity.tenantId.id"
-                  [entityId]="entity.id"></tb-event-table>
-</mat-tab>
-<mat-tab *ngIf="entity"
-         label="{{ 'relation.relations' | translate }}" #relationsTab="matTab">
-  <tb-relation-table [active]="relationsTab.isActive" [entityId]="entity.id"></tb-relation-table>
-</mat-tab>
-<mat-tab *ngIf="entity && authUser.authority === authorities.TENANT_ADMIN"
-         label="{{ 'audit-log.audit-logs' | translate }}" #auditLogsTab="matTab">
-  <tb-audit-log-table detailsMode="true" [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.ENTITY" [entityId]="entity.id"></tb-audit-log-table>
-</mat-tab>
-<mat-tab *ngIf="entity && authUser.authority === authorities.TENANT_ADMIN"
-         label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
-  <tb-version-control detailsMode="true" singleEntityMode="true"
-                      (versionRestored)="entitiesTableConfig.updateData()"
-                      [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.name" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
-</mat-tab>
+@if (entity) {
+  <mat-tab
+    label="{{ 'attribute.attributes' | translate }}" #attributesTab="matTab">
+    <tb-attribute-table [defaultAttributeScope]="attributeScopes.SERVER_SCOPE"
+                        [active]="attributesTab.isActive"
+                        [entityId]="entity.id"
+                        [entityName]="entity.name">
+    </tb-attribute-table>
+  </mat-tab>
+}
+@if (entity) {
+  <mat-tab
+    label="{{ 'attribute.latest-telemetry' | translate }}" #telemetryTab="matTab">
+    <tb-attribute-table [defaultAttributeScope]="latestTelemetryTypes.LATEST_TELEMETRY"
+                        disableAttributeScopeSelection
+                        [active]="telemetryTab.isActive"
+                        [entityId]="entity.id"
+                        [entityName]="entity.name">
+    </tb-attribute-table>
+  </mat-tab>
+}
+@if (entity) {
+  <mat-tab
+    label="{{ 'alarm.alarms' | translate }}" #alarmsTab="matTab">
+    <tb-alarm-table [active]="alarmsTab.isActive" [entityId]="entity.id"></tb-alarm-table>
+  </mat-tab>
+}
+@if (entity) {
+  <mat-tab
+    label="{{ 'rulechain.events' | translate }}" #eventsTab="matTab">
+    <tb-event-table [debugEventTypes]="[debugEventTypes.DEBUG_RULE_CHAIN]"
+                    [defaultEventType]="debugEventTypes.DEBUG_RULE_CHAIN"
+                    [active]="eventsTab.isActive"
+                    [tenantId]="entity.tenantId.id"
+    [entityId]="entity.id"></tb-event-table>
+  </mat-tab>
+}
+@if (entity) {
+  <mat-tab
+    label="{{ 'relation.relations' | translate }}" #relationsTab="matTab">
+    <tb-relation-table [active]="relationsTab.isActive" [entityId]="entity.id"></tb-relation-table>
+  </mat-tab>
+}
+@if (entity && authUser.authority === authorities.TENANT_ADMIN) {
+  <mat-tab
+    label="{{ 'audit-log.audit-logs' | translate }}" #auditLogsTab="matTab">
+    <tb-audit-log-table detailsMode="true" [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.ENTITY" [entityId]="entity.id"></tb-audit-log-table>
+  </mat-tab>
+}
+@if (entity && authUser.authority === authorities.TENANT_ADMIN) {
+  <mat-tab
+    label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
+    <tb-version-control detailsMode="true" singleEntityMode="true"
+                        (versionRestored)="entitiesTableConfig.updateData()"
+    [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.name" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
+  </mat-tab>
+}
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html
index e406168acb..c125d1ab1b 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html
@@ -16,52 +16,66 @@
 
 -->
 <div
-   (dblclick)="userNodeCallbacks.doubleClick($event, node)"
-   (mousedown)="userNodeCallbacks.mouseDown($event, node)"
-   (mouseenter)="userNodeCallbacks.mouseEnter($event, node)"
-   (mouseleave)="userNodeCallbacks.mouseLeave($event, node)">
+  (dblclick)="userNodeCallbacks.doubleClick($event, node)"
+  (mousedown)="userNodeCallbacks.mouseDown($event, node)"
+  (mouseenter)="userNodeCallbacks.mouseEnter($event, node)"
+  (mouseleave)="userNodeCallbacks.mouseLeave($event, node)">
   <div class="fc-node-overlay"></div>
   <div class="tb-rule-node {{node.nodeClass}}"
        [class.tb-rule-node-highlighted]="node.highlighted"
        [class.tb-rule-node-invalid]="node.error">
-    <mat-icon *ngIf="!iconUrl" class="max-w-15% flex-full">{{node.icon}}</mat-icon>
-    <img *ngIf="iconUrl" class="max-w-15% flex-full" [src]="iconUrl"/>
+    @if (!iconUrl) {
+      <mat-icon class="max-w-15% flex-full">{{node.icon}}</mat-icon>
+    }
+    @if (iconUrl) {
+      <img class="max-w-15% flex-full" [src]="iconUrl"/>
+    }
     <div class="flex max-w-85% flex-full flex-col items-stretch justify-center">
       <span class="tb-node-type">{{ node.component.name }}</span>
-      <span class="tb-node-title" *ngIf="node.name">{{ node.name }}</span>
+      @if (node.name) {
+        <span class="tb-node-title">{{ node.name }}</span>
+      }
     </div>
     <div class="{{flowchartConstants.leftConnectorClass}}">
-      <div fc-magnet [connector]="connector" [callbacks]="callbacks"
-           *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)">
-        <div fc-connector [connector]="connector"
-             [nodeRectInfo]="nodeRectInfo"
-             [mouseOverConnector]="mouseOverConnector"
-             [callbacks]="callbacks"
-             [modelservice]="modelservice"></div>
-      </div>
+      @for (connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType); track connector) {
+        <div fc-magnet [connector]="connector" [callbacks]="callbacks"
+             >
+          <div fc-connector [connector]="connector"
+               [nodeRectInfo]="nodeRectInfo"
+               [mouseOverConnector]="mouseOverConnector"
+               [callbacks]="callbacks"
+          [modelservice]="modelservice"></div>
+        </div>
+      }
     </div>
     <div class="{{flowchartConstants.rightConnectorClass}}">
-      <div fc-magnet [connector]="connector" [callbacks]="callbacks"
-           *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType)">
-        <div fc-connector [connector]="connector"
-             [nodeRectInfo]="nodeRectInfo"
-             [mouseOverConnector]="mouseOverConnector"
-             [callbacks]="callbacks"
-             [modelservice]="modelservice"></div>
-      </div>
+      @for (connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType); track connector) {
+        <div fc-magnet [connector]="connector" [callbacks]="callbacks"
+             >
+          <div fc-connector [connector]="connector"
+               [nodeRectInfo]="nodeRectInfo"
+               [mouseOverConnector]="mouseOverConnector"
+               [callbacks]="callbacks"
+          [modelservice]="modelservice"></div>
+        </div>
+      }
     </div>
   </div>
-  <section *ngIf="modelservice.isEditable() && !node.readonly">
-    <div class="fc-nodeedit" (click)="userNodeCallbacks.nodeEdit($event, node)">
-      <i class="fa fa-pencil" aria-hidden="true"></i>
-    </div>
-    <div class="fc-nodedelete" (click)="modelservice.nodes.delete(node)">
-      &times;
-    </div>
-  </section>
-  <section *ngIf="node.component?.configurationDescriptor?.nodeDefinition?.ruleChainNode && modelservice.isEditable()">
-    <div class="fc-nodeopen" (click)="openRuleChain($event, node)" (mouseenter)="displayOpenRuleChainTooltip($event, node)">
-      <mat-icon class="material-icons" svgIcon="mdi:login"></mat-icon>
-    </div>
-  </section>
+  @if (modelservice.isEditable() && !node.readonly) {
+    <section>
+      <div class="fc-nodeedit" (click)="userNodeCallbacks.nodeEdit($event, node)">
+        <i class="fa fa-pencil" aria-hidden="true"></i>
+      </div>
+      <div class="fc-nodedelete" (click)="modelservice.nodes.delete(node)">
+        &times;
+      </div>
+    </section>
+  }
+  @if (node.component?.configurationDescriptor?.nodeDefinition?.ruleChainNode && modelservice.isEditable()) {
+    <section>
+      <div class="fc-nodeopen" (click)="openRuleChain($event, node)" (mouseenter)="displayOpenRuleChainTooltip($event, node)">
+        <mat-icon class="material-icons" svgIcon="mdi:login"></mat-icon>
+      </div>
+    </section>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
index 3275e3e898..81eef74152 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
@@ -46,31 +46,39 @@
       <div class="fixed-title-width" translate>scada.behavior.type</div>
       <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="type">
-          <mat-option *ngFor="let type of scadaSymbolBehaviorTypes" [value]="type">
-            {{ scadaSymbolBehaviorTypeTranslations.get(type) | translate }}
-          </mat-option>
+          @for (type of scadaSymbolBehaviorTypes; track type) {
+            <mat-option [value]="type">
+              {{ scadaSymbolBehaviorTypeTranslations.get(type) | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </div>
-    <div *ngIf="[ScadaSymbolBehaviorType.value, ScadaSymbolBehaviorType.action].includes(behaviorFormGroup.get('type').value)" class="tb-form-row">
-      <div class="fixed-title-width" translate>scada.behavior.value-type</div>
-      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-value-type flex">
-        <mat-select formControlName="valueType">
-          <mat-select-trigger *ngIf="behaviorFormGroup.get('valueType').value">
-            <div class="tb-value-type-row">
-              <mat-icon class="tb-mat-18" svgIcon="{{ valueTypesMap.get(behaviorFormGroup.get('valueType').value).icon }}"></mat-icon>
-              <span>{{ valueTypesMap.get(behaviorFormGroup.get('valueType').value).name | translate }}</span>
-            </div>
-          </mat-select-trigger>
-          <mat-option *ngFor="let valueType of valueTypes" [value]="valueType">
-            <mat-icon class="tb-mat-20" svgIcon="{{ valueTypesMap.get(valueType).icon }}"></mat-icon>
-            <span>{{ valueTypesMap.get(valueType).name | translate }}</span>
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
-    <ng-container *ngIf="behaviorFormGroup.get('type').value === ScadaSymbolBehaviorType.value">
-      <ng-container *ngIf="behaviorFormGroup.get('valueType').value ===  ValueType.BOOLEAN">
+    @if ([ScadaSymbolBehaviorType.value, ScadaSymbolBehaviorType.action].includes(behaviorFormGroup.get('type').value)) {
+      <div class="tb-form-row">
+        <div class="fixed-title-width" translate>scada.behavior.value-type</div>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-value-type flex">
+          <mat-select formControlName="valueType">
+            @if (behaviorFormGroup.get('valueType').value) {
+              <mat-select-trigger>
+                <div class="tb-value-type-row">
+                  <mat-icon class="tb-mat-18" svgIcon="{{ valueTypesMap.get(behaviorFormGroup.get('valueType').value).icon }}"></mat-icon>
+                  <span>{{ valueTypesMap.get(behaviorFormGroup.get('valueType').value).name | translate }}</span>
+                </div>
+              </mat-select-trigger>
+            }
+            @for (valueType of valueTypes; track valueType) {
+              <mat-option [value]="valueType">
+                <mat-icon class="tb-mat-20" svgIcon="{{ valueTypesMap.get(valueType).icon }}"></mat-icon>
+                <span>{{ valueTypesMap.get(valueType).name | translate }}</span>
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+    }
+    @if (behaviorFormGroup.get('type').value === ScadaSymbolBehaviorType.value) {
+      @if (behaviorFormGroup.get('valueType').value ===  ValueType.BOOLEAN) {
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>scada.behavior.true-label</div>
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
@@ -89,7 +97,7 @@
             <input matInput formControlName="stateLabel" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
         </div>
-      </ng-container>
+      }
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>scada.behavior.default-settings</div>
         <tb-get-value-action-settings class="flex-1"
@@ -103,8 +111,8 @@
                                       formControlName="defaultGetValueSettings">
         </tb-get-value-action-settings>
       </div>
-    </ng-container>
-    <ng-container *ngIf="behaviorFormGroup.get('type').value === ScadaSymbolBehaviorType.action">
+    }
+    @if (behaviorFormGroup.get('type').value === ScadaSymbolBehaviorType.action) {
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>scada.behavior.default-settings</div>
         <tb-set-value-action-settings class="flex-1"
@@ -115,8 +123,8 @@
                                       formControlName="defaultSetValueSettings">
         </tb-set-value-action-settings>
       </div>
-    </ng-container>
-    <ng-container *ngIf="behaviorFormGroup.get('type').value === ScadaSymbolBehaviorType.widgetAction">
+    }
+    @if (behaviorFormGroup.get('type').value === ScadaSymbolBehaviorType.widgetAction) {
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>scada.behavior.default-settings</div>
         <tb-widget-action-settings class="flex-1"
@@ -126,7 +134,7 @@
                                    formControlName="defaultWidgetActionSettings">
         </tb-widget-action-settings>
       </div>
-    </ng-container>
+    }
   </div>
   <div class="tb-scada-symbol-behavior-settings-panel-buttons">
     <button mat-button
@@ -135,13 +143,15 @@
             (click)="cancel()">
       {{ (disabled ? 'action.close' : 'action.cancel') | translate }}
     </button>
-    <button *ngIf="!disabled"
-            mat-raised-button
-            color="primary"
-            type="button"
-            (click)="applyBehaviorSettings()"
-            [disabled]="behaviorFormGroup.invalid || !behaviorFormGroup.dirty">
-      {{ (isAdd ? 'action.add' : 'action.apply') | translate }}
-    </button>
+    @if (!disabled) {
+      <button
+        mat-raised-button
+        color="primary"
+        type="button"
+        (click)="applyBehaviorSettings()"
+        [disabled]="behaviorFormGroup.invalid || !behaviorFormGroup.dirty">
+        {{ (isAdd ? 'action.add' : 'action.apply') | translate }}
+      </button>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.html
index 195d2de0fd..819bb8de99 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.html
@@ -24,9 +24,11 @@
   </mat-form-field>
   <mat-form-field class="tb-inline-field tb-type-field fixed-height" appearance="outline" subscriptSizing="dynamic">
     <mat-select formControlName="type">
-      <mat-option *ngFor="let type of scadaSymbolBehaviorTypes" [value]="type">
-        {{ scadaSymbolBehaviorTypeTranslations.get(type) | translate }}
-      </mat-option>
+      @for (type of scadaSymbolBehaviorTypes; track type) {
+        <mat-option [value]="type">
+          {{ scadaSymbolBehaviorTypeTranslations.get(type) | translate }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <div class="tb-form-table-row-cell-buttons">
@@ -38,13 +40,15 @@
             matTooltipPosition="above">
       <mat-icon>settings</mat-icon>
     </button>
-    <button *ngIf="!disabled"
-            type="button"
-            mat-icon-button
-            (click)="behaviorRemoved.emit()"
-            matTooltip="{{ 'scada.behavior.remove-behavior' | translate }}"
-            matTooltipPosition="above">
-      <mat-icon>delete</mat-icon>
-    </button>
+    @if (!disabled) {
+      <button
+        type="button"
+        mat-icon-button
+        (click)="behaviorRemoved.emit()"
+        matTooltip="{{ 'scada.behavior.remove-behavior' | translate }}"
+        matTooltipPosition="above">
+        <mat-icon>delete</mat-icon>
+      </button>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html
index c65ea45ebb..f85a37dee9 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html
@@ -23,43 +23,51 @@
       <div class="tb-form-table-header-cell tb-type-header" translate>scada.behavior.type</div>
       <div class="tb-form-table-header-cell tb-actions-header" [class.disabled]="disabled"></div>
     </div>
-    <div *ngIf="behaviorsFormArray().controls.length; else noBehaviors" class="tb-form-table-body tb-drop-list"
-         cdkDropList cdkDropListOrientation="vertical"
-         [cdkDropListDisabled]="!dragEnabled"
-         (cdkDropListDropped)="behaviorDrop($event)">
-      <div cdkDrag [cdkDragDisabled]="!dragEnabled"
-           [class.tb-draggable]="!disabled"
-           [class.tb-draggable-form-table-row]="!disabled"
-           *ngFor="let behaviorControl of behaviorsFormArray().controls; trackBy: trackByBehavior; let $index = index;">
-        <tb-scada-symbol-metadata-behavior-row class="flex-1"
-          [index]="$index"
-          [formControl]="behaviorControl"
-          [aliasController]="aliasController"
-          [callbacks]="callbacks"
-          (behaviorRemoved)="removeBehavior($index)">
-        </tb-scada-symbol-metadata-behavior-row>
-        <div class="tb-form-table-row-cell-buttons">
-          <button mat-icon-button
-                  *ngIf="!disabled"
-                  type="button"
-                  cdkDragHandle
-                  [class.tb-hidden]="!dragEnabled"
-                  matTooltip="{{ 'action.drag' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>drag_indicator</mat-icon>
-          </button>
-        </div>
+    @if (behaviorsFormArray().controls.length) {
+      <div class="tb-form-table-body tb-drop-list"
+           cdkDropList cdkDropListOrientation="vertical"
+           [cdkDropListDisabled]="!dragEnabled"
+           (cdkDropListDropped)="behaviorDrop($event)">
+        @for (behaviorControl of behaviorsFormArray().controls; track trackByBehavior($index, behaviorControl)) {
+          <div cdkDrag [cdkDragDisabled]="!dragEnabled"
+               [class.tb-draggable]="!disabled"
+               [class.tb-draggable-form-table-row]="!disabled"
+               >
+            <tb-scada-symbol-metadata-behavior-row class="flex-1"
+                                                   [index]="$index"
+                                                   [formControl]="behaviorControl"
+                                                   [aliasController]="aliasController"
+                                                   [callbacks]="callbacks"
+                                                   (behaviorRemoved)="removeBehavior($index)">
+            </tb-scada-symbol-metadata-behavior-row>
+            <div class="tb-form-table-row-cell-buttons">
+              @if (!disabled) {
+                <button mat-icon-button
+                        type="button"
+                        cdkDragHandle
+                        [class.tb-hidden]="!dragEnabled"
+                        matTooltip="{{ 'action.drag' | translate }}"
+                        matTooltipPosition="above">
+                  <mat-icon>drag_indicator</mat-icon>
+                </button>
+              }
+            </div>
+          </div>
+        }
       </div>
-    </div>
-    <tb-error *ngIf="errorText" noMargin [error]="errorText" style="padding-left: 12px;"></tb-error>
-  </div>
-  <div *ngIf="!disabled">
-    <button type="button" mat-stroked-button color="primary" (click)="addBehavior()">
-      {{ 'scada.behavior.add-behavior' | translate }}
-    </button>
+    } @else {
+      <span class="tb-prompt flex items-center justify-center">{{ 'scada.behavior.no-behaviors' | translate }}</span>
+    }
+    @if (errorText) {
+      <tb-error noMargin [error]="errorText" style="padding-left: 12px;"></tb-error>
+    }
   </div>
+  @if (!disabled) {
+    <div>
+      <button type="button" mat-stroked-button color="primary" (click)="addBehavior()">
+        {{ 'scada.behavior.add-behavior' | translate }}
+      </button>
+    </div>
+  }
 </div>
 
-<ng-template #noBehaviors>
-  <span class="tb-prompt flex items-center justify-center">{{ 'scada.behavior.no-behaviors' | translate }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.html
index a7fbbfce2e..e7782cebb9 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.html
@@ -19,22 +19,22 @@
   <div class="tb-scada-symbol-metadata-tag-function-title-container">
     <mat-chip-set>
       <mat-chip>
-          <span>
-            {{ tag }}
-          </span>
+        <span>
+          {{ tag }}
+        </span>
       </mat-chip>
     </mat-chip-set>
     <div class="tb-scada-symbol-metadata-tag-function-title">{{ panelTitle | translate }}</div>
   </div>
   <div class="tb-scada-symbol-metadata-tag-function-panel-content">
-      <tb-js-func #tagFunctionComponent
-                  minHeight="300px"
-                  formControlName="tagFunction"
-                  [highlightRules]="highlightRules"
-                  [editorCompleter]="completer"
-                  [functionArgs]="tagFunctionArgs"
-                  [helpId]="tagFunctionHelpId">
-      </tb-js-func>
+    <tb-js-func #tagFunctionComponent
+                minHeight="300px"
+                formControlName="tagFunction"
+                [highlightRules]="highlightRules"
+                [editorCompleter]="completer"
+                [functionArgs]="tagFunctionArgs"
+                [helpId]="tagFunctionHelpId">
+    </tb-js-func>
   </div>
   <div class="tb-scada-symbol-metadata-tag-function-panel-buttons">
     <button mat-button
@@ -43,12 +43,14 @@
             (click)="cancel()">
       {{ (disabled ? 'action.close' : 'action.cancel') | translate }}
     </button>
-    <button *ngIf="!disabled" mat-raised-button
-            color="primary"
-            type="button"
-            (click)="applyTagFunction()"
-            [disabled]="tagFunctionFormGroup.invalid || !tagFunctionFormGroup.dirty">
-      {{ 'action.apply' | translate }}
-    </button>
+    @if (!disabled) {
+      <button mat-raised-button
+              color="primary"
+              type="button"
+              (click)="applyTagFunction()"
+              [disabled]="tagFunctionFormGroup.invalid || !tagFunctionFormGroup.dirty">
+        {{ 'action.apply' | translate }}
+      </button>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html
index 643e161e37..b3a64d6c0e 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html
@@ -26,23 +26,27 @@
     </mat-chip-set>
   </div>
   <div class="tb-state-render-function-field">
-    <button *ngIf="!disabled || tagFormGroup.get('stateRenderFunction').value"
-            #editStateRenderFunctionButton
-            mat-button
-            color="primary"
-            (click)="editTagStateRenderFunction()">
-      <mat-icon>{{ disabled ? 'visibility' :  (tagFormGroup.get('stateRenderFunction').value ? 'edit' : 'add') }}</mat-icon>
-      <span>{{ ( disabled ? 'action.view' : (tagFormGroup.get('stateRenderFunction').value ? 'action.edit' : 'action.add') ) | translate }}</span>
-    </button>
+    @if (!disabled || tagFormGroup.get('stateRenderFunction').value) {
+      <button
+        #editStateRenderFunctionButton
+        mat-button
+        color="primary"
+        (click)="editTagStateRenderFunction()">
+        <mat-icon>{{ disabled ? 'visibility' :  (tagFormGroup.get('stateRenderFunction').value ? 'edit' : 'add') }}</mat-icon>
+        <span>{{ ( disabled ? 'action.view' : (tagFormGroup.get('stateRenderFunction').value ? 'action.edit' : 'action.add') ) | translate }}</span>
+      </button>
+    }
   </div>
   <div class="tb-on-click-action-field">
-    <button *ngIf="!disabled || tagFormGroup.get('clickAction').value"
-            #editClickActionButton
-            mat-button
-            color="primary"
-            (click)="editClickAction()">
-      <mat-icon>{{ disabled ? 'visibility' : (tagFormGroup.get('clickAction').value ? 'edit' : 'add') }}</mat-icon>
-      <span>{{ ( disabled ? 'action.view' : (tagFormGroup.get('clickAction').value ? 'action.edit' : 'action.add') ) | translate }}</span>
-    </button>
+    @if (!disabled || tagFormGroup.get('clickAction').value) {
+      <button
+        #editClickActionButton
+        mat-button
+        color="primary"
+        (click)="editClickAction()">
+        <mat-icon>{{ disabled ? 'visibility' : (tagFormGroup.get('clickAction').value ? 'edit' : 'add') }}</mat-icon>
+        <span>{{ ( disabled ? 'action.view' : (tagFormGroup.get('clickAction').value ? 'action.edit' : 'action.add') ) | translate }}</span>
+      </button>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html
index 225596a062..38d1532b0f 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html
@@ -22,18 +22,23 @@
       <div class="tb-form-table-header-cell tb-state-render-function-header" translate>scada.state-render-function</div>
       <div class="tb-form-table-header-cell tb-on-click-action-header" translate>scada.tag.on-click-action</div>
     </div>
-    <div *ngIf="tagsFormArray().controls.length; else noTags" class="tb-form-table-body">
-      <div *ngFor="let tagControl of tagsFormArray().controls; trackBy: trackByTag; let $index = index; let $last = last">
-        <tb-scada-symbol-metadata-tag class="flex-1"
-                                      [elementStateRenderFunctionCompleter]="elementStateRenderFunctionCompleter"
-                                      [clickActionFunctionCompleter]="clickActionFunctionCompleter"
-                                      [formControl]="tagControl">
-        </tb-scada-symbol-metadata-tag>
-        <mat-divider *ngIf="!$last"></mat-divider>
+    @if (tagsFormArray().controls.length) {
+      <div class="tb-form-table-body">
+        @for (tagControl of tagsFormArray().controls; track trackByTag($index, tagControl)) {
+          <div>
+            <tb-scada-symbol-metadata-tag class="flex-1"
+                                          [elementStateRenderFunctionCompleter]="elementStateRenderFunctionCompleter"
+                                          [clickActionFunctionCompleter]="clickActionFunctionCompleter"
+                                          [formControl]="tagControl">
+            </tb-scada-symbol-metadata-tag>
+            @if (!$last) {
+              <mat-divider></mat-divider>
+            }
+          </div>
+        }
       </div>
-    </div>
+    } @else {
+      <span class="tb-prompt flex items-center justify-center">{{ 'scada.tag.no-tags' | translate }}</span>
+    }
   </div>
 </div>
-<ng-template #noTags>
-  <span class="tb-prompt flex items-center justify-center">{{ 'scada.tag.no-tags' | translate }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
index bba6f4319e..9dfcd7bd24 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
@@ -43,14 +43,16 @@
         <mat-icon>remove</mat-icon>
       </button>
     </div>
-    <div *ngIf="displayShowHidden" [class.!hidden]="editorMode !== 'svg'" class="tb-primary-fill">
-      <button mat-icon-button
-              (click)="toggleShowHidden()"
-              matTooltip="{{ (showHiddenElements ? 'scada.hide-hidden-elements' : 'scada.show-hidden-elements') | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>{{ showHiddenElements ? 'visibility_off' : 'visibility' }}</mat-icon>
-      </button>
-    </div>
+    @if (displayShowHidden) {
+      <div [class.!hidden]="editorMode !== 'svg'" class="tb-primary-fill">
+        <button mat-icon-button
+                (click)="toggleShowHidden()"
+                matTooltip="{{ (showHiddenElements ? 'scada.hide-hidden-elements' : 'scada.show-hidden-elements') | translate }}"
+                matTooltipPosition="above">
+          <mat-icon>{{ showHiddenElements ? 'visibility_off' : 'visibility' }}</mat-icon>
+        </button>
+      </div>
+    }
   </div>
   <div class="tb-scada-symbol-editor-right-buttons">
     <div class="tb-primary-fill">
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts
index 60baf0e63b..f4065f8f93 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts
@@ -184,30 +184,36 @@ class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implem
 
 @Component({
     template: `<div class="tb-scada-symbol-tooltip-panel">
-    <span>{{ symbolElement?.element?.type }}{{ symbolElement?.invisible ? ' (' + ('scada.hidden' | translate) + ')' : '' }}:</span>
-    <span><b>{{ symbolElement?.tag }}</b></span>
-    <button *ngIf="!symbolElement?.readonly" type="button" mat-icon-button class="tb-mat-20"
-            matTooltip="{{ 'scada.tag.update-tag' | translate }}"
-            matTooltipPosition="above"
-            (click)="onUpdateTag()">
-      <mat-icon>edit</mat-icon>
-    </button>
-    <button *ngIf="displayTagSettings"
-            #tagSettingsButton type="button"
-            mat-icon-button class="tb-mat-20"
-            matTooltip="{{ 'scada.tag.tag-settings' | translate }}"
-            matTooltipPosition="above">
-      <mat-icon>settings</mat-icon>
-    </button>
-    <button *ngIf="!symbolElement?.readonly"
-            #removeTagButton
-            type="button"
-            mat-icon-button class="tb-mat-20"
-            matTooltip="{{ 'scada.tag.remove-tag' | translate }}"
-            matTooltipPosition="above">
-      <mat-icon>delete</mat-icon>
-    </button>
-  </div>`,
+      <span>{{ symbolElement?.element?.type }}{{ symbolElement?.invisible ? ' (' + ('scada.hidden' | translate) + ')' : '' }}:</span>
+      <span><b>{{ symbolElement?.tag }}</b></span>
+      @if (!symbolElement?.readonly) {
+        <button type="button" mat-icon-button class="tb-mat-20"
+          matTooltip="{{ 'scada.tag.update-tag' | translate }}"
+          matTooltipPosition="above"
+          (click)="onUpdateTag()">
+          <mat-icon>edit</mat-icon>
+        </button>
+      }
+      @if (displayTagSettings) {
+        <button
+          #tagSettingsButton type="button"
+          mat-icon-button class="tb-mat-20"
+          matTooltip="{{ 'scada.tag.tag-settings' | translate }}"
+          matTooltipPosition="above">
+          <mat-icon>settings</mat-icon>
+        </button>
+      }
+      @if (!symbolElement?.readonly) {
+        <button
+          #removeTagButton
+          type="button"
+          mat-icon-button class="tb-mat-20"
+          matTooltip="{{ 'scada.tag.remove-tag' | translate }}"
+          matTooltipPosition="above">
+          <mat-icon>delete</mat-icon>
+        </button>
+      }
+    </div>`,
     styleUrls: ['./scada-symbol-tooltip.component.scss'],
     encapsulation: ViewEncapsulation.None,
     standalone: false
@@ -360,37 +366,49 @@ class ScadaSymbolRemoveTagConfirmComponent extends ScadaSymbolPanelComponent imp
 
 @Component({
     template: `<div class="tooltipster-content tb-scada-symbol-tooltip-panel column flex-start">
-    <div *ngIf="!symbolElement?.readonly || hasStateRenderFunction" translate>scada.state-render-function</div>
-    <button *ngIf="hasStateRenderFunction"
-            mat-stroked-button
-            color="primary"
-            (click)="editStateRenderFunction()">
-      <mat-icon>{{ symbolElement?.readonly ? 'visibility' : 'edit' }}</mat-icon>
-      <span>{{ (symbolElement?.readonly ? 'action.view' : 'action.edit') | translate }}</span>
-    </button>
-    <button *ngIf="!hasStateRenderFunction && !symbolElement?.readonly"
-            mat-stroked-button
-            color="primary"
-            (click)="editStateRenderFunction()">
-      <mat-icon>add</mat-icon>
-      <span translate>action.add</span>
-    </button>
-    <div *ngIf="!symbolElement?.readonly || hasClickAction" translate>scada.tag.on-click-action</div>
-    <button *ngIf="hasClickAction"
-            mat-stroked-button
-            color="primary"
-            (click)="editClickAction()">
-      <mat-icon>{{ symbolElement?.readonly ? 'visibility' : 'edit' }}</mat-icon>
-      <span>{{ (symbolElement?.readonly ? 'action.view' : 'action.edit') | translate }}</span>
-    </button>
-    <button *ngIf="!hasClickAction && !symbolElement?.readonly"
-            mat-stroked-button
-            color="primary"
-            (click)="editClickAction()">
-      <mat-icon>add</mat-icon>
-      <span translate>action.add</span>
-    </button>
-  </div>`,
+      @if (!symbolElement?.readonly || hasStateRenderFunction) {
+        <div translate>scada.state-render-function</div>
+      }
+      @if (hasStateRenderFunction) {
+        <button
+          mat-stroked-button
+          color="primary"
+          (click)="editStateRenderFunction()">
+          <mat-icon>{{ symbolElement?.readonly ? 'visibility' : 'edit' }}</mat-icon>
+          <span>{{ (symbolElement?.readonly ? 'action.view' : 'action.edit') | translate }}</span>
+        </button>
+      }
+      @if (!hasStateRenderFunction && !symbolElement?.readonly) {
+        <button
+          mat-stroked-button
+          color="primary"
+          (click)="editStateRenderFunction()">
+          <mat-icon>add</mat-icon>
+          <span translate>action.add</span>
+        </button>
+      }
+      @if (!symbolElement?.readonly || hasClickAction) {
+        <div translate>scada.tag.on-click-action</div>
+      }
+      @if (hasClickAction) {
+        <button
+          mat-stroked-button
+          color="primary"
+          (click)="editClickAction()">
+          <mat-icon>{{ symbolElement?.readonly ? 'visibility' : 'edit' }}</mat-icon>
+          <span>{{ (symbolElement?.readonly ? 'action.view' : 'action.edit') | translate }}</span>
+        </button>
+      }
+      @if (!hasClickAction && !symbolElement?.readonly) {
+        <button
+          mat-stroked-button
+          color="primary"
+          (click)="editClickAction()">
+          <mat-icon>add</mat-icon>
+          <span translate>action.add</span>
+        </button>
+      }
+    </div>`,
     styleUrls: ['./scada-symbol-tooltip.component.scss'],
     encapsulation: ViewEncapsulation.None,
     standalone: false
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html
index 5b8abc406e..06d8ff153b 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html
@@ -37,46 +37,48 @@
                 {{ 'scada.create-widget' | translate }}
               </button>
             </div>
-            <div *ngIf="previewMode" class="tb-scada-symbol-editor-preview-content tb-absolute-fill">
-              <div class="tb-scada-symbol-editor-preview-header">
-                <button mat-button
-                        (click)="exitPreviewMode()">
-                  <mat-icon>chevron_left</mat-icon>
-                  {{ 'action.back' | translate }}
-                </button>
-                <span style="flex: 1;"></span>
-                <button [disabled]="!scadaPreviewFormGroup.dirty"
-                        mat-stroked-button color="primary"
-                        (click)="onRevertPreviewSettings()">
-                  <mat-icon>close</mat-icon>
-                  {{ 'action.decline' | translate }}
-                </button>
-                <button [disabled]="!scadaPreviewFormGroup.valid || !scadaPreviewFormGroup.dirty"
-                        mat-flat-button color="primary"
-                        (click)="onApplyPreviewSettings()">
-                  <mat-icon>done</mat-icon>
-                  {{ 'action.apply' | translate }}
-                </button>
-              </div>
-              <div [formGroup]="scadaPreviewFormGroup" class="tb-scada-symbol-editor-preview-settings">
-                <div class="mat-content">
-                  <div class="tb-form-panel">
-                    <div class="tb-form-panel-title" translate>scada.symbol.symbol</div>
-                    <tb-scada-symbol-input
-                      [scadaSymbolContent]="symbolData.scadaSymbolContent"
-                      [scadaSymbolMetadata]="previewMetadata">
-                    </tb-scada-symbol-input>
+            @if (previewMode) {
+              <div class="tb-scada-symbol-editor-preview-content tb-absolute-fill">
+                <div class="tb-scada-symbol-editor-preview-header">
+                  <button mat-button
+                          (click)="exitPreviewMode()">
+                    <mat-icon>chevron_left</mat-icon>
+                    {{ 'action.back' | translate }}
+                  </button>
+                  <span style="flex: 1;"></span>
+                  <button [disabled]="!scadaPreviewFormGroup.dirty"
+                          mat-stroked-button color="primary"
+                          (click)="onRevertPreviewSettings()">
+                    <mat-icon>close</mat-icon>
+                    {{ 'action.decline' | translate }}
+                  </button>
+                  <button [disabled]="!scadaPreviewFormGroup.valid || !scadaPreviewFormGroup.dirty"
+                          mat-flat-button color="primary"
+                          (click)="onApplyPreviewSettings()">
+                    <mat-icon>done</mat-icon>
+                    {{ 'action.apply' | translate }}
+                  </button>
+                </div>
+                <div [formGroup]="scadaPreviewFormGroup" class="tb-scada-symbol-editor-preview-settings">
+                  <div class="mat-content">
+                    <div class="tb-form-panel">
+                      <div class="tb-form-panel-title" translate>scada.symbol.symbol</div>
+                      <tb-scada-symbol-input
+                        [scadaSymbolContent]="symbolData.scadaSymbolContent"
+                        [scadaSymbolMetadata]="previewMetadata">
+                      </tb-scada-symbol-input>
+                    </div>
+                    <tb-scada-symbol-object-settings
+                      formControlName="scadaSymbolObjectSettings"
+                      [scadaSymbolMetadata]="previewMetadata"
+                      [aliasController]="aliasController"
+                      [widgetType]="widgetType.rpc"
+                      [callbacks]="widgetActionCallbacks">
+                    </tb-scada-symbol-object-settings>
                   </div>
-                  <tb-scada-symbol-object-settings
-                    formControlName="scadaSymbolObjectSettings"
-                    [scadaSymbolMetadata]="previewMetadata"
-                    [aliasController]="aliasController"
-                    [widgetType]="widgetType.rpc"
-                    [callbacks]="widgetActionCallbacks">
-                  </tb-scada-symbol-object-settings>
                 </div>
               </div>
-            </div>
+            }
             <div [class.!hidden]="previewMode" [formGroup]="scadaSymbolFormGroup">
               <tb-scada-symbol-metadata
                 #symbolMetadata
@@ -101,50 +103,56 @@
                     <mat-icon>visibility</mat-icon>
                     {{ 'scada.preview' | translate }}
                   </button>
-                  <div *ngIf="!readonly" class="flex flex-row items-center justify-start gap-3">
-                    <button [disabled]="!(scadaSymbolFormGroup.dirty || symbolEditorDirty)"
-                            mat-stroked-button color="primary"
-                            (click)="onRevertScadaSymbolConfig()">
-                      <mat-icon>close</mat-icon>
-                      {{ 'action.decline' | translate }}
-                    </button>
-                    <button [disabled]="!scadaSymbolFormGroup.valid || !symbolEditorValid || !(scadaSymbolFormGroup.dirty || symbolEditorDirty)"
-                            mat-flat-button color="primary"
-                            (click)="onApplyScadaSymbolConfig()">
-                      <mat-icon>done</mat-icon>
-                      {{ 'action.apply' | translate }}
-                    </button>
-                  </div>
+                  @if (!readonly) {
+                    <div class="flex flex-row items-center justify-start gap-3">
+                      <button [disabled]="!(scadaSymbolFormGroup.dirty || symbolEditorDirty)"
+                              mat-stroked-button color="primary"
+                              (click)="onRevertScadaSymbolConfig()">
+                        <mat-icon>close</mat-icon>
+                        {{ 'action.decline' | translate }}
+                      </button>
+                      <button [disabled]="!scadaSymbolFormGroup.valid || !symbolEditorValid || !(scadaSymbolFormGroup.dirty || symbolEditorDirty)"
+                              mat-flat-button color="primary"
+                              (click)="onApplyScadaSymbolConfig()">
+                        <mat-icon>done</mat-icon>
+                        {{ 'action.apply' | translate }}
+                      </button>
+                    </div>
+                  }
                 </div>
               </tb-scada-symbol-metadata>
             </div>
           </tb-details-panel>
         </mat-drawer>
         <mat-drawer-content class="tb-scada-symbol-editor-content" [class.preview]="previewMode">
-          <tb-scada-symbol-editor *ngIf="!previewMode" #symbolEditor
-                                  [readonly]="readonly"
-                                  [(showHiddenElements)]="showHiddenElements"
-                                  [data]="symbolEditorData"
-                                  [editObjectCallbacks]="editObjectCallbacks"
-                                  (updateScadaSymbol)="updateScadaSymbol()"
-                                  (downloadScadaSymbol)="downloadScadaSymbol()"></tb-scada-symbol-editor>
-          <tb-dashboard *ngIf="previewMode"
-                        class="tb-absolute-fill"
-                        [aliasController]="aliasController"
-                        [widgets]="previewWidgets"
-                        [autofillHeight]="false"
-                        displayGrid="always"
-                        [gridType]="previewWidget.sizeX >= previewWidget.sizeY ? GridType.ScrollVertical : GridType.ScrollHorizontal"
-                        [columns]="previewWidget.sizeX"
-                        setGridSize
-                        [centerVertical]="previewWidget.sizeX >= previewWidget.sizeY"
-                        [centerHorizontal]="previewWidget.sizeX < previewWidget.sizeY"
-                        [margin]="0"
-                        [isEdit]="false"
-                        [isMobileDisabled]="true"
-                        [isEditActionEnabled]="false"
-                        [isRemoveActionEnabled]="false">
-          </tb-dashboard>
+          @if (!previewMode) {
+            <tb-scada-symbol-editor #symbolEditor
+                                    [readonly]="readonly"
+                                    [(showHiddenElements)]="showHiddenElements"
+                                    [data]="symbolEditorData"
+                                    [editObjectCallbacks]="editObjectCallbacks"
+                                    (updateScadaSymbol)="updateScadaSymbol()"
+            (downloadScadaSymbol)="downloadScadaSymbol()"></tb-scada-symbol-editor>
+          }
+          @if (previewMode) {
+            <tb-dashboard
+              class="tb-absolute-fill"
+              [aliasController]="aliasController"
+              [widgets]="previewWidgets"
+              [autofillHeight]="false"
+              displayGrid="always"
+              [gridType]="previewWidget.sizeX >= previewWidget.sizeY ? GridType.ScrollVertical : GridType.ScrollHorizontal"
+              [columns]="previewWidget.sizeX"
+              setGridSize
+              [centerVertical]="previewWidget.sizeX >= previewWidget.sizeY"
+              [centerHorizontal]="previewWidget.sizeX < previewWidget.sizeY"
+              [margin]="0"
+              [isEdit]="false"
+              [isMobileDisabled]="true"
+              [isEditActionEnabled]="false"
+              [isRemoveActionEnabled]="false">
+            </tb-dashboard>
+          }
         </mat-drawer-content>
       </mat-drawer-container>
     </div>
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
index 3822fea0e1..bb0eace707 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
@@ -24,15 +24,20 @@
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-</mat-progress-bar>
-<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+@if (isLoading$ | async) {
+  <mat-progress-bar color="warn" mode="indeterminate">
+  </mat-progress-bar>
+} @else {
+  <div style="height: 4px;"></div>
+}
 <div mat-dialog-content tb-toast class="backup-code">
   <p class="mat-body-2 description" translate>security.2fa.dialog.backup-code-description</p>
   <div class="container flex flex-row flex-wrap">
-    <div *ngFor="let code of backupCode?.codes; even as $even" class="code max-w-50% flex-full" [class.even]="$even">
-      {{ code }}
-    </div>
+    @for (code of backupCode?.codes; track code) {
+      <div class="code max-w-50% flex-full" [class.even]="$even">
+        {{ code }}
+      </div>
+    }
   </div>
   <div class="action-buttons flex flex-row items-center justify-start gap-4">
     <button type="button" mat-stroked-button color="primary" (click)="downloadFile()">
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
index a19577c1d1..669fe49250 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
@@ -24,9 +24,12 @@
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-</mat-progress-bar>
-<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+@if (isLoading$ | async) {
+  <mat-progress-bar color="warn" mode="indeterminate">
+  </mat-progress-bar>
+} @else {
+  <div style="height: 4px;"></div>
+}
 <div mat-dialog-content tb-toast style="padding: 0">
   <mat-stepper [linear]="true" #stepper>
     <ng-template matStepperIcon="edit">
@@ -41,12 +44,16 @@
             <input matInput formControlName="email"
                    type="email"
                    placeholder="{{ 'security.2fa.dialog.email-step-label' | translate }}" />
-            <mat-error *ngIf="emailConfigForm.get('email').hasError('required')">
-              {{ 'user.email-required' | translate }}
-            </mat-error>
-            <mat-error *ngIf="emailConfigForm.get('email').hasError('email')">
-              {{ 'user.invalid-email-format' | translate }}
-            </mat-error>
+            @if (emailConfigForm.get('email').hasError('required')) {
+              <mat-error>
+                {{ 'user.email-required' | translate }}
+              </mat-error>
+            }
+            @if (emailConfigForm.get('email').hasError('email')) {
+              <mat-error>
+                {{ 'user.invalid-email-format' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
           <button mat-raised-button
                   type="submit"
@@ -70,9 +77,11 @@
                    inputmode="numeric" pattern="[0-9]*"
                    autocomplete="off"
                    placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}">
-            <mat-error *ngIf="emailVerificationForm.get('verificationCode').invalid">
-              {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
-            </mat-error>
+            @if (emailVerificationForm.get('verificationCode').invalid) {
+              <mat-error>
+                {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
           <div class="flex gap-2">
             <button mat-button
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
index c17242ede7..fa4b78de70 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
@@ -24,9 +24,12 @@
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-</mat-progress-bar>
-<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+@if (isLoading$ | async) {
+  <mat-progress-bar color="warn" mode="indeterminate">
+  </mat-progress-bar>
+} @else {
+  <div style="height: 4px;"></div>
+}
 <div mat-dialog-content tb-toast style="padding: 0">
   <mat-stepper linear #stepper>
     <ng-template matStepperIcon="edit">
@@ -64,9 +67,11 @@
                    inputmode="numeric" pattern="[0-9]*"
                    autocomplete="off"
                    placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}">
-            <mat-error *ngIf="smsVerificationForm.get('verificationCode').invalid">
-              {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
-            </mat-error>
+            @if (smsVerificationForm.get('verificationCode').invalid) {
+              <mat-error>
+                {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
           <div class="flex gap-2">
             <button mat-button
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
index e68e0fc08a..39b4bf3762 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
@@ -24,9 +24,12 @@
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-</mat-progress-bar>
-<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+@if (isLoading$ | async) {
+  <mat-progress-bar color="warn" mode="indeterminate">
+  </mat-progress-bar>
+} @else {
+  <div style="height: 4px;"></div>
+}
 <div mat-dialog-content tb-toast style="padding: 0">
   <mat-stepper linear #stepper>
     <ng-template matStepperIcon="edit">
@@ -72,9 +75,11 @@
                  inputmode="numeric" pattern="[0-9]*"
                  autocomplete="off"
                  placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}">
-          <mat-error *ngIf="totpConfigForm.get('verificationCode').invalid">
-            {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
-          </mat-error>
+          @if (totpConfigForm.get('verificationCode').invalid) {
+            <mat-error>
+              {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
       </form>
       <div class="flex flex-row items-center justify-end">
diff --git a/ui-ngx/src/app/modules/home/pages/security/security.component.html b/ui-ngx/src/app/modules/home/pages/security/security.component.html
index 4fca803187..2488f1846c 100644
--- a/ui-ngx/src/app/modules/home/pages/security/security.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/security.component.html
@@ -54,30 +54,40 @@
               <mat-label translate>profile.current-password</mat-label>
               <input matInput type="password" name="current-password" formControlName="currentPassword" autocomplete="current-password"/>
               <tb-toggle-password [class.!hidden]="!changePassword.get('currentPassword').dirty && !changePassword.get('currentPassword').touched" matSuffix></tb-toggle-password>
-              <mat-error *ngIf="changePassword.get('currentPassword').hasError('differencePassword')">
-                {{ 'security.password-requirement.incorrect-password-try-again' | translate }}
-              </mat-error>
+              @if (changePassword.get('currentPassword').hasError('differencePassword')) {
+                <mat-error>
+                  {{ 'security.password-requirement.incorrect-password-try-again' | translate }}
+                </mat-error>
+              }
             </mat-form-field>
             <mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary" subscriptSizing="dynamic">
               <mat-label translate>login.new-password</mat-label>
               <input matInput type="password" name="new-password" formControlName="newPassword" autocomplete="new-password" required/>
               <tb-toggle-password [class.!hidden]="!changePassword.get('newPassword').dirty && !changePassword.get('newPassword').touched" matSuffix></tb-toggle-password>
               <mat-hint></mat-hint>
-              <mat-error *ngIf="changePassword.get('newPassword').errors
-                              && !changePassword.get('newPassword').hasError('alreadyUsed')
-                              && !changePassword.get('newPassword').hasError('hasWhitespaces')
-                              && !changePassword.get('newPassword').hasError('passwordSameAsOld')">
-                {{ 'security.password-requirement.password-not-meet-requirements' | translate }}
-              </mat-error>
-              <mat-error *ngIf="changePassword.get('newPassword').hasError('alreadyUsed')">
-                {{ changePassword.get('newPassword').getError('alreadyUsed') }}
-              </mat-error>
-              <mat-error *ngIf="changePassword.get('newPassword').hasError('passwordSameAsOld')">
-                {{ 'security.password-requirement.password-should-difference' | translate }}
-              </mat-error>
-              <mat-error *ngIf="changePassword.get('newPassword').hasError('hasWhitespaces')">
-                {{ 'security.password-requirement.password-should-not-contain-spaces' | translate }}
-              </mat-error>
+              @if (changePassword.get('newPassword').errors
+                && !changePassword.get('newPassword').hasError('alreadyUsed')
+                && !changePassword.get('newPassword').hasError('hasWhitespaces')
+                && !changePassword.get('newPassword').hasError('passwordSameAsOld')) {
+                <mat-error>
+                  {{ 'security.password-requirement.password-not-meet-requirements' | translate }}
+                </mat-error>
+              }
+              @if (changePassword.get('newPassword').hasError('alreadyUsed')) {
+                <mat-error>
+                  {{ changePassword.get('newPassword').getError('alreadyUsed') }}
+                </mat-error>
+              }
+              @if (changePassword.get('newPassword').hasError('passwordSameAsOld')) {
+                <mat-error>
+                  {{ 'security.password-requirement.password-should-difference' | translate }}
+                </mat-error>
+              }
+              @if (changePassword.get('newPassword').hasError('hasWhitespaces')) {
+                <mat-error>
+                  {{ 'security.password-requirement.password-should-not-contain-spaces' | translate }}
+                </mat-error>
+              }
             </mat-form-field>
             <div class="flex flex-1 items-center justify-start gt-xs:!hidden">
               <ng-container *ngTemplateOutlet="passwordRequirements"></ng-container>
@@ -86,9 +96,11 @@
               <mat-label translate>login.new-password-again</mat-label>
               <input matInput type="password" name="new-password" formControlName="newPassword2" autocomplete="new-password" required/>
               <tb-toggle-password [class.!hidden]="!changePassword.get('newPassword2').dirty && !changePassword.get('newPassword2').touched" matSuffix></tb-toggle-password>
-              <mat-error *ngIf="changePassword.get('newPassword2').hasError('passwordsNotMatch')">
-                {{ 'security.password-requirement.new-passwords-not-match' | translate }}
-              </mat-error>
+              @if (changePassword.get('newPassword2').hasError('passwordsNotMatch')) {
+                <mat-error>
+                  {{ 'security.password-requirement.new-passwords-not-match' | translate }}
+                </mat-error>
+              }
             </mat-form-field>
           </div>
           <mat-divider [vertical]="true"></mat-divider>
@@ -97,47 +109,61 @@
           </div>
         </div>
         <ng-template #passwordRequirements>
-          <div class="password-requirements" *ngIf="passwordPolicy">
-            <h3 class="card-title" translate>security.password-requirement.password-requirements</h3>
-            <h4 class="mat-h4" translate>security.password-requirement.at-least</h4>
-            <p class="mat-body" *ngIf="passwordPolicy.minimumUppercaseLetters > 0">
-              <tb-icon class="tb-mat-20">
-                {{ changePassword.get('newPassword').hasError('notUpperCase') ? 'mdi:circle-small' : 'mdi:check' }}
-              </tb-icon>
-              {{ 'security.password-requirement.uppercase-letter' | translate : {count: passwordPolicy.minimumUppercaseLetters} }}
-            </p>
-            <p class="mat-body" *ngIf="passwordPolicy.minimumLowercaseLetters > 0">
-              <tb-icon class="tb-mat-20">
-                {{ changePassword.get('newPassword').hasError('notLowerCase') ? 'mdi:circle-small' : 'mdi:check' }}
-              </tb-icon>
-              {{ 'security.password-requirement.lowercase-letter' | translate : {count: passwordPolicy.minimumLowercaseLetters} }}
-            </p>
-            <p class="mat-body" *ngIf="passwordPolicy.minimumDigits > 0">
-              <tb-icon class="tb-mat-20">
-                {{ changePassword.get('newPassword').hasError('notNumeric') ? 'mdi:circle-small' : 'mdi:check' }}
-              </tb-icon>
-              {{ 'security.password-requirement.digit' | translate : {count: passwordPolicy.minimumDigits} }}
-            </p>
-            <p class="mat-body" *ngIf="passwordPolicy.minimumSpecialCharacters > 0">
-              <tb-icon class="tb-mat-20">
-                {{ changePassword.get('newPassword').hasError('notSpecial') ? 'mdi:circle-small' : 'mdi:check' }}
-              </tb-icon>
-              {{ 'security.password-requirement.special-character' | translate : {count: passwordPolicy.minimumSpecialCharacters} }}
-            </p>
-            <p class="mat-body" *ngIf="passwordPolicy.minimumLength > 0">
-              <tb-icon class="tb-mat-20">
-                {{ changePassword.get('newPassword').hasError('minLength') ? 'mdi:circle-small' : 'mdi:check' }}
-              </tb-icon>
-              {{ 'security.password-requirement.character' | translate : {count: passwordPolicy.minimumLength} }}
-            </p>
-            <div class="password-requirements" *ngIf="passwordPolicy.maximumLength > 0">
-              <h4 class="mat-h4" translate>security.password-requirement.at-most</h4>
-              <p class="mat-body">
-                <mat-icon class="tb-mat-20" [svgIcon]="changePassword.get('newPassword').hasError('maxLength') ? 'mdi:circle-small' : 'mdi:check'"></mat-icon>
-                {{ 'security.password-requirement.character' | translate : {count: passwordPolicy.maximumLength} }}
-              </p>
+          @if (passwordPolicy) {
+            <div class="password-requirements">
+              <h3 class="card-title" translate>security.password-requirement.password-requirements</h3>
+              <h4 class="mat-h4" translate>security.password-requirement.at-least</h4>
+              @if (passwordPolicy.minimumUppercaseLetters > 0) {
+                <p class="mat-body">
+                  <tb-icon class="tb-mat-20">
+                    {{ changePassword.get('newPassword').hasError('notUpperCase') ? 'mdi:circle-small' : 'mdi:check' }}
+                  </tb-icon>
+                  {{ 'security.password-requirement.uppercase-letter' | translate : {count: passwordPolicy.minimumUppercaseLetters} }}
+                </p>
+              }
+              @if (passwordPolicy.minimumLowercaseLetters > 0) {
+                <p class="mat-body">
+                  <tb-icon class="tb-mat-20">
+                    {{ changePassword.get('newPassword').hasError('notLowerCase') ? 'mdi:circle-small' : 'mdi:check' }}
+                  </tb-icon>
+                  {{ 'security.password-requirement.lowercase-letter' | translate : {count: passwordPolicy.minimumLowercaseLetters} }}
+                </p>
+              }
+              @if (passwordPolicy.minimumDigits > 0) {
+                <p class="mat-body">
+                  <tb-icon class="tb-mat-20">
+                    {{ changePassword.get('newPassword').hasError('notNumeric') ? 'mdi:circle-small' : 'mdi:check' }}
+                  </tb-icon>
+                  {{ 'security.password-requirement.digit' | translate : {count: passwordPolicy.minimumDigits} }}
+                </p>
+              }
+              @if (passwordPolicy.minimumSpecialCharacters > 0) {
+                <p class="mat-body">
+                  <tb-icon class="tb-mat-20">
+                    {{ changePassword.get('newPassword').hasError('notSpecial') ? 'mdi:circle-small' : 'mdi:check' }}
+                  </tb-icon>
+                  {{ 'security.password-requirement.special-character' | translate : {count: passwordPolicy.minimumSpecialCharacters} }}
+                </p>
+              }
+              @if (passwordPolicy.minimumLength > 0) {
+                <p class="mat-body">
+                  <tb-icon class="tb-mat-20">
+                    {{ changePassword.get('newPassword').hasError('minLength') ? 'mdi:circle-small' : 'mdi:check' }}
+                  </tb-icon>
+                  {{ 'security.password-requirement.character' | translate : {count: passwordPolicy.minimumLength} }}
+                </p>
+              }
+              @if (passwordPolicy.maximumLength > 0) {
+                <div class="password-requirements">
+                  <h4 class="mat-h4" translate>security.password-requirement.at-most</h4>
+                  <p class="mat-body">
+                    <mat-icon class="tb-mat-20" [svgIcon]="changePassword.get('newPassword').hasError('maxLength') ? 'mdi:circle-small' : 'mdi:check'"></mat-icon>
+                    {{ 'security.password-requirement.character' | translate : {count: passwordPolicy.maximumLength} }}
+                  </p>
+                </div>
+              }
             </div>
-          </div>
+          }
         </ng-template>
         <div class="flex flex-row gap-2" style="margin-top: 18px;" [class.!hidden]="!changePassword.dirty && !changePassword.touched">
           <button mat-button color="primary"
@@ -155,47 +181,56 @@
       </form>
     </div>
   </mat-card>
-  <mat-card appearance="outlined" class="profile-card" *ngIf="allowTwoFactorProviders.length">
-    <mat-card-title style="margin-bottom: 20px;">
-      <span class="mat-headline-5 card-title" translate>admin.2fa.2fa</span>
-    </mat-card-title>
-    <mat-card-subtitle style="margin-bottom: 40px;">
-      <div class="mat-body-2 description" translate>security.2fa.2fa-description</div>
-    </mat-card-subtitle>
-    <h3 class="mat-h3 auth-title" translate>security.2fa.authenticate-with</h3>
-    <form [formGroup]="twoFactorAuth">
-      <ng-container *ngFor="let provider of allowTwoFactorProviders; let $last = last; trackBy: trackByProvider">
-        <div class="provider">
-          <h4 class="provider-title">{{ providersData.get(provider).name | translate }}</h4>
-          <div class="flex flex-row items-start justify-between">
-            <div class="mat-body-2 description" *ngIf="!twoFactorAuth.get(provider).value; else providerInfo">
-              {{ providersData.get(provider).description | translate }}
+  @if (allowTwoFactorProviders.length) {
+    <mat-card appearance="outlined" class="profile-card">
+      <mat-card-title style="margin-bottom: 20px;">
+        <span class="mat-headline-5 card-title" translate>admin.2fa.2fa</span>
+      </mat-card-title>
+      <mat-card-subtitle style="margin-bottom: 40px;">
+        <div class="mat-body-2 description" translate>security.2fa.2fa-description</div>
+      </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)) {
+          <div class="provider">
+            <h4 class="provider-title">{{ providersData.get(provider).name | translate }}</h4>
+            <div class="flex flex-row items-start justify-between">
+              @if (!twoFactorAuth.get(provider).value) {
+                <div class="mat-body-2 description">
+                  {{ providersData.get(provider).description | translate }}
+                </div>
+              } @else {
+                <div class="mat-body-2 description">
+                  {{ providersData.get(provider).activatedHint | translate: providerDataInfo(provider) }}
+                </div>
+              }
+              <mat-slide-toggle [formControlName]="provider"
+                                (mousedown)="confirm2FAChange($event, provider)">
+              </mat-slide-toggle>
             </div>
-            <ng-template #providerInfo>
-              <div class="mat-body-2 description">
-                {{ providersData.get(provider).activatedHint | translate: providerDataInfo(provider) }}
-              </div>
-            </ng-template>
-            <mat-slide-toggle [formControlName]="provider"
-                              (mousedown)="confirm2FAChange($event, provider)">
-            </mat-slide-toggle>
+            @if (twoFactorAuth.get(provider).value && provider !== twoFactorAuthProviderType.BACKUP_CODE && !activeSingleProvider) {
+              <mat-checkbox [value]="provider"
+                            [checked]="useByDefault === provider"
+                            (change)="changeDefaultProvider($event, provider)"
+                            [disabled]="(isLoading$ | async)"
+                            >
+                <span class="checkbox-label" translate>security.2fa.main-2fa-method</span>
+              </mat-checkbox>
+            }
+            @if (twoFactorAuth.get(provider).value && provider === twoFactorAuthProviderType.BACKUP_CODE) {
+              <button type="button"
+                      mat-stroked-button color="primary"
+                      (click)="generateNewBackupCode()"
+                      >
+                {{ 'security.2fa.get-new-code' | translate }}
+              </button>
+            }
           </div>
-          <mat-checkbox [value]="provider"
-                        [checked]="useByDefault === provider"
-                        (change)="changeDefaultProvider($event, provider)"
-                        [disabled]="(isLoading$ | async)"
-                         *ngIf="twoFactorAuth.get(provider).value && provider !== twoFactorAuthProviderType.BACKUP_CODE && !activeSingleProvider">
-            <span class="checkbox-label" translate>security.2fa.main-2fa-method</span>
-          </mat-checkbox>
-          <button type="button"
-           mat-stroked-button color="primary"
-           (click)="generateNewBackupCode()"
-           *ngIf="twoFactorAuth.get(provider).value && provider === twoFactorAuthProviderType.BACKUP_CODE">
-            {{ 'security.2fa.get-new-code' | translate }}
-          </button>
-        </div>
-        <mat-divider *ngIf="!$last"></mat-divider>
-      </ng-container>
-    </form>
-  </mat-card>
+          @if (!$last) {
+            <mat-divider></mat-divider>
+          }
+        }
+      </form>
+    </mat-card>
+  }
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/tenant-profile/tenant-profile-tabs.component.html b/ui-ngx/src/app/modules/home/pages/tenant-profile/tenant-profile-tabs.component.html
index b24e5e247a..d8e4ab8bda 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant-profile/tenant-profile-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/pages/tenant-profile/tenant-profile-tabs.component.html
@@ -31,8 +31,10 @@
                         [entityName]="entity.name">
     </tb-attribute-table>
   </mat-tab>
-  <mat-tab *ngIf="!isEdit" #auditLogsTab="matTab"
-           label="{{ 'audit-log.audit-logs' | translate }}">
-    <tb-audit-log-table detailsMode="true" [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.ENTITY" [entityId]="entity.id"></tb-audit-log-table>
-  </mat-tab>
+  @if (!isEdit) {
+    <mat-tab #auditLogsTab="matTab"
+             label="{{ 'audit-log.audit-logs' | translate }}">
+      <tb-audit-log-table detailsMode="true" [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.ENTITY" [entityId]="entity.id"></tb-audit-log-table>
+    </mat-tab>
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
index 83d4e47d85..0e9dea874a 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
@@ -51,12 +51,16 @@
       <mat-form-field class="mat-block">
         <mat-label translate>tenant.title</mat-label>
         <input matInput formControlName="title" required/>
-        <mat-error *ngIf="entityForm.get('title').hasError('required')">
-          {{ 'tenant.title-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="entityForm.get('title').hasError('maxlength')">
-          {{ 'tenant.title-max-length' | translate }}
-        </mat-error>
+        @if (entityForm.get('title').hasError('required')) {
+          <mat-error>
+            {{ 'tenant.title-required' | translate }}
+          </mat-error>
+        }
+        @if (entityForm.get('title').hasError('maxlength')) {
+          <mat-error>
+            {{ 'tenant.title-max-length' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
       <tb-tenant-profile-autocomplete
         [selectDefaultProfile]="isAdd"
@@ -70,21 +74,23 @@
           <mat-label translate>tenant.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
-        <section class="tb-default-dashboard flex flex-1 flex-col" *ngIf="entity?.id">
-          <section class="flex flex-1 flex-col gt-sm:flex-row">
-            <tb-dashboard-autocomplete
-              class="flex-1"
-              label="{{ 'dashboard.home-dashboard' | translate }}"
-              formControlName="homeDashboardId"
-              [dashboardsScope]="'tenant'"
-              [tenantId]="entity?.id.id"
-              [selectFirstDashboard]="false"
-            ></tb-dashboard-autocomplete>
-            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
-              {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
-            </mat-checkbox>
+        @if (entity?.id) {
+          <section class="tb-default-dashboard flex flex-1 flex-col">
+            <section class="flex flex-1 flex-col gt-sm:flex-row">
+              <tb-dashboard-autocomplete
+                class="flex-1"
+                label="{{ 'dashboard.home-dashboard' | translate }}"
+                formControlName="homeDashboardId"
+                [dashboardsScope]="'tenant'"
+                [tenantId]="entity?.id.id"
+                [selectFirstDashboard]="false"
+              ></tb-dashboard-autocomplete>
+              <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
+                {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
+              </mat-checkbox>
+            </section>
           </section>
-        </section>
+        }
       </div>
       <tb-contact [parentForm]="entityForm" [isEdit]="isEdit"></tb-contact>
     </fieldset>
diff --git a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
index 1ac1ff6cf2..c8e1b97f5f 100644
--- a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
     <div class="mat-content flex flex-col">
       <span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink, activationLinkTtl: activationLinkTtl}"></span>
diff --git a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
index 9dee500758..60ae3ad1c2 100644
--- a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
@@ -26,17 +26,22 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <tb-user></tb-user>
     <mat-form-field class="mat-block" appearance="outline">
       <mat-label translate>user.activation-method</mat-label>
       <mat-select [ngModelOptions]="{standalone: true}" [(ngModel)]="activationMethod">
-        <mat-option *ngFor="let activationMethod of activationMethods" [value]="activationMethod">
-          {{ activationMethodTranslations.get(activationMethodEnum[activationMethod]) | translate }}
-        </mat-option>
+        @for (activationMethod of activationMethods; track activationMethod) {
+          <mat-option [value]="activationMethod">
+            {{ activationMethodTranslations.get(activationMethodEnum[activationMethod]) | translate }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
   </div>
diff --git a/ui-ngx/src/app/modules/home/pages/user/user-tabs.component.html b/ui-ngx/src/app/modules/home/pages/user/user-tabs.component.html
index 97ece30b0c..1046a3799e 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/user-tabs.component.html
@@ -15,32 +15,42 @@
     limitations under the License.
 
 -->
-<mat-tab *ngIf="entity"
-         label="{{ 'attribute.attributes' | translate }}" #attributesTab="matTab">
-  <tb-attribute-table [defaultAttributeScope]="attributeScopes.SERVER_SCOPE"
-                      [active]="attributesTab.isActive"
-                      [entityId]="entity.id"
-                      [entityName]="entity.name">
-  </tb-attribute-table>
-</mat-tab>
-<mat-tab *ngIf="entity"
-         label="{{ 'attribute.latest-telemetry' | translate }}" #telemetryTab="matTab">
-  <tb-attribute-table [defaultAttributeScope]="latestTelemetryTypes.LATEST_TELEMETRY"
-                      disableAttributeScopeSelection
-                      [active]="telemetryTab.isActive"
-                      [entityId]="entity.id"
-                      [entityName]="entity.name">
-  </tb-attribute-table>
-</mat-tab>
-<mat-tab *ngIf="entity"
-         label="{{ 'relation.relations' | translate }}" #relationsTab="matTab">
-  <tb-relation-table [active]="relationsTab.isActive" [entityId]="entity.id"></tb-relation-table>
-</mat-tab>
-<mat-tab *ngIf="entity && authUser.authority === authorities.TENANT_ADMIN"
-         label="{{ 'audit-log.audit-logs' | translate }}" #auditLogsTab="matTab">
-  <tb-audit-log-table [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.USER" [userId]="entity.id" detailsMode="true"></tb-audit-log-table>
-</mat-tab>
-<mat-tab *ngIf="entity"
-         label="{{ 'api-key.api-keys' | translate }}" #apiKeysTab="matTab">
-  <tb-api-keys-table [active]="apiKeysTab.isActive" [userId]="entity.id"></tb-api-keys-table>
-</mat-tab>
+@if (entity) {
+  <mat-tab
+    label="{{ 'attribute.attributes' | translate }}" #attributesTab="matTab">
+    <tb-attribute-table [defaultAttributeScope]="attributeScopes.SERVER_SCOPE"
+                        [active]="attributesTab.isActive"
+                        [entityId]="entity.id"
+                        [entityName]="entity.name">
+    </tb-attribute-table>
+  </mat-tab>
+}
+@if (entity) {
+  <mat-tab
+    label="{{ 'attribute.latest-telemetry' | translate }}" #telemetryTab="matTab">
+    <tb-attribute-table [defaultAttributeScope]="latestTelemetryTypes.LATEST_TELEMETRY"
+                        disableAttributeScopeSelection
+                        [active]="telemetryTab.isActive"
+                        [entityId]="entity.id"
+                        [entityName]="entity.name">
+    </tb-attribute-table>
+  </mat-tab>
+}
+@if (entity) {
+  <mat-tab
+    label="{{ 'relation.relations' | translate }}" #relationsTab="matTab">
+    <tb-relation-table [active]="relationsTab.isActive" [entityId]="entity.id"></tb-relation-table>
+  </mat-tab>
+}
+@if (entity && authUser.authority === authorities.TENANT_ADMIN) {
+  <mat-tab
+    label="{{ 'audit-log.audit-logs' | translate }}" #auditLogsTab="matTab">
+    <tb-audit-log-table [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.USER" [userId]="entity.id" detailsMode="true"></tb-audit-log-table>
+  </mat-tab>
+}
+@if (entity) {
+  <mat-tab
+    label="{{ 'api-key.api-keys' | translate }}" #apiKeysTab="matTab">
+    <tb-api-keys-table [active]="apiKeysTab.isActive" [userId]="entity.id"></tb-api-keys-table>
+  </mat-tab>
+}
diff --git a/ui-ngx/src/app/modules/home/pages/user/user.component.html b/ui-ngx/src/app/modules/home/pages/user/user.component.html
index e2d9fec8c0..789d2244b6 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.html
@@ -46,13 +46,14 @@
           [class.!hidden]="isEdit || isUserActivated()">
     {{'user.resend-activation' | translate }}
   </button>
-  <button mat-raised-button color="primary"
-          [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'loginAsUser')"
-          *ngIf="loginAsUserEnabled$ | async"
-          [class.!hidden]="isEdit">
-    {{ (entity?.authority === authority.TENANT_ADMIN ? 'user.login-as-tenant-admin' : 'user.login-as-customer-user') | translate }}
-  </button>
+  @if (loginAsUserEnabled$ | async) {
+    <button mat-raised-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'loginAsUser')"
+            [class.!hidden]="isEdit">
+      {{ (entity?.authority === authority.TENANT_ADMIN ? 'user.login-as-tenant-admin' : 'user.login-as-customer-user') | translate }}
+    </button>
+  }
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
@@ -77,12 +78,16 @@
       <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>user.email</mat-label>
         <input matInput type="email" formControlName="email">
-        <mat-error *ngIf="entityForm.get('email').hasError('email')">
-          {{ 'user.invalid-email-format' | translate }}
-        </mat-error>
-        <mat-error *ngIf="entityForm.get('email').hasError('required')">
-          {{ 'user.email-required' | translate }}
-        </mat-error>
+        @if (entityForm.get('email').hasError('email')) {
+          <mat-error>
+            {{ 'user.invalid-email-format' | translate }}
+          </mat-error>
+        }
+        @if (entityForm.get('email').hasError('required')) {
+          <mat-error>
+            {{ 'user.email-required' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
       <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>user.first-name</mat-label>
@@ -119,38 +124,40 @@
             }
           </mat-select>
         </mat-form-field>
-        <section class="tb-default-dashboard flex flex-1 flex-col" *ngIf="entity?.id">
-          <section class="flex flex-1 flex-col items-baseline gt-sm:flex-row">
-            <tb-dashboard-autocomplete
-              class="flex-1"
-              label="{{ 'user.default-dashboard' | translate }}"
-              formControlName="defaultDashboardId"
-              appearance="outline"
-              [dashboardsScope]="entity?.authority === authority.TENANT_ADMIN ? 'tenant' : 'customer'"
-              [tenantId]="entity?.tenantId?.id"
-              [customerId]="entity?.customerId?.id"
-              [selectFirstDashboard]="false"
-            ></tb-dashboard-autocomplete>
-            <mat-checkbox class="flex-1" formControlName="defaultDashboardFullscreen">
-              {{ 'user.always-fullscreen' | translate }}
-            </mat-checkbox>
-          </section>
-          <section class="flex flex-1 flex-col items-baseline gt-sm:flex-row">
-            <tb-dashboard-autocomplete
-              class="flex-1"
-              label="{{ 'dashboard.home-dashboard' | translate }}"
-              formControlName="homeDashboardId"
-              appearance="outline"
-              [dashboardsScope]="entity?.authority === authority.TENANT_ADMIN ? 'tenant' : 'customer'"
-              [tenantId]="entity?.tenantId?.id"
-              [customerId]="entity?.customerId?.id"
-              [selectFirstDashboard]="false"
-            ></tb-dashboard-autocomplete>
-            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
-              {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
-            </mat-checkbox>
+        @if (entity?.id) {
+          <section class="tb-default-dashboard flex flex-1 flex-col">
+            <section class="flex flex-1 flex-col items-baseline gt-sm:flex-row">
+              <tb-dashboard-autocomplete
+                class="flex-1"
+                label="{{ 'user.default-dashboard' | translate }}"
+                formControlName="defaultDashboardId"
+                appearance="outline"
+                [dashboardsScope]="entity?.authority === authority.TENANT_ADMIN ? 'tenant' : 'customer'"
+                [tenantId]="entity?.tenantId?.id"
+                [customerId]="entity?.customerId?.id"
+                [selectFirstDashboard]="false"
+              ></tb-dashboard-autocomplete>
+              <mat-checkbox class="flex-1" formControlName="defaultDashboardFullscreen">
+                {{ 'user.always-fullscreen' | translate }}
+              </mat-checkbox>
+            </section>
+            <section class="flex flex-1 flex-col items-baseline gt-sm:flex-row">
+              <tb-dashboard-autocomplete
+                class="flex-1"
+                label="{{ 'dashboard.home-dashboard' | translate }}"
+                formControlName="homeDashboardId"
+                appearance="outline"
+                [dashboardsScope]="entity?.authority === authority.TENANT_ADMIN ? 'tenant' : 'customer'"
+                [tenantId]="entity?.tenantId?.id"
+                [customerId]="entity?.customerId?.id"
+                [selectFirstDashboard]="false"
+              ></tb-dashboard-autocomplete>
+              <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
+                {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
+              </mat-checkbox>
+            </section>
           </section>
-        </section>
+        }
         <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>user.description</mat-label>
           <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
index 18752ef82a..b76b922008 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
@@ -25,17 +25,22 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <span translate>{{ dialogTitle }}</span>
     <mat-form-field class="mat-block">
       <mat-label translate>widget.title</mat-label>
       <input matInput formControlName="title" required>
-      <mat-error *ngIf="saveWidgetTypeAsFormGroup.get('title').hasError('required')">
-        {{ 'widget.title-required' | translate }}
-      </mat-error>
+      @if (saveWidgetTypeAsFormGroup.get('title').hasError('required')) {
+        <mat-error>
+          {{ 'widget.title-required' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
     <tb-widgets-bundle-select
       formControlName="widgetsBundle"
diff --git a/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
index ba70e617eb..60ecf4ea6d 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
@@ -26,20 +26,25 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="(isLoading$ | async)">
       <div class="flex flex-col items-center justify-center gap-4 gt-sm:flex-row">
-        <button *ngFor="let type of allWidgetTypes;" class="tb-card-button" mat-raised-button color="primary"
-                type="button"
-                (click)="typeSelected(widgetTypes[type])">
-          <tb-icon matButtonIcon class="tb-mat-96">
-            {{ widgetTypesDataMap.get(widgetTypes[type]).icon }}
-          </tb-icon>
-          <span translate>{{ widgetTypesDataMap.get(widgetTypes[type]).name }}</span>
-        </button>
+        @for (type of allWidgetTypes; track type) {
+          <button class="tb-card-button" mat-raised-button color="primary"
+                  type="button"
+                  (click)="typeSelected(widgetTypes[type])">
+            <tb-icon matButtonIcon class="tb-mat-96">
+              {{ widgetTypesDataMap.get(widgetTypes[type]).icon }}
+            </tb-icon>
+            <span translate>{{ widgetTypesDataMap.get(widgetTypes[type]).name }}</span>
+          </button>
+        }
       </div>
     </fieldset>
   </div>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
index c9c3f634ae..84744f6217 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
@@ -27,9 +27,11 @@
       <mat-form-field class="tb-appearance-transparent">
         <mat-select [disabled]="isReadOnly" placeholder="{{ 'widget.type' | translate }}"
                     [(ngModel)]="widget.type" (ngModelChange)="widgetTypeChanged()">
-          <mat-option *ngFor="let type of allWidgetTypes" [value]="type">
-            {{ widgetTypesDataMap.get(widgetTypes[type]).name | translate }}
-          </mat-option>
+          @for (type of allWidgetTypes; track type) {
+            <mat-option [value]="type">
+              {{ widgetTypesDataMap.get(widgetTypes[type]).name | translate }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <span class="flex-1"></span>
@@ -48,15 +50,17 @@
         <mat-icon>undo</mat-icon>
         <span translate>action.undo</span>
       </button>
-      <button *ngIf="!isReadOnly" mat-raised-button
-              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveDisabled()"
-              (click)="saveWidget()"
-              [tb-circular-progress]="saveWidgetPending"
-              matTooltip="{{ 'widget.save' | translate }} (CTRL + S)"
-              matTooltipPosition="below">
-        <mat-icon>save</mat-icon>
-        <span translate>action.save</span>
-      </button>
+      @if (!isReadOnly) {
+        <button mat-raised-button
+                class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveDisabled()"
+                (click)="saveWidget()"
+                [tb-circular-progress]="saveWidgetPending"
+                matTooltip="{{ 'widget.save' | translate }} (CTRL + S)"
+                matTooltipPosition="below">
+          <mat-icon>save</mat-icon>
+          <span translate>action.save</span>
+        </button>
+      }
       <button mat-raised-button
               class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveAsDisabled()"
               (click)="saveWidgetAs()"
@@ -97,12 +101,14 @@
           <mat-icon>undo</mat-icon>
           <span translate>action.undo</span>
         </button>
-        <button *ngIf="!isReadOnly" mat-menu-item
-                [disabled]="(isLoading$ | async) || saveDisabled()"
-                (click)="saveWidget()">
-          <mat-icon>save</mat-icon>
-          <span translate>action.save</span>
-        </button>
+        @if (!isReadOnly) {
+          <button mat-menu-item
+                  [disabled]="(isLoading$ | async) || saveDisabled()"
+                  (click)="saveWidget()">
+            <mat-icon>save</mat-icon>
+            <span translate>action.save</span>
+          </button>
+        }
         <button mat-menu-item
                 [disabled]="(isLoading$ | async) || saveAsDisabled()"
                 (click)="saveWidgetAs()">
@@ -119,28 +125,30 @@
               <mat-tab label="{{ 'widget.resources' | translate }}">
                 <div class="tb-resize-container" style="background-color: #fff;">
                   <div class="mat-padding">
-                    <div class="flex flex-1 flex-row items-center justify-start" style="max-height: 40px;"
-                         *ngFor="let resource of widget.resources; let i = index" >
-                      <tb-resource-autocomplete class="mat-block resource-field flex-1"
-                                                hideRequiredMarker required
-                                                subscriptSizing="dynamic"
-                                                [allowAutocomplete]="resource.isModule"
-                                                [(ngModel)]="resource.url"
-                                                (ngModelChange)="isDirty = true"
-                                                placeholder="{{ 'widget.resource-url' | translate }}">
-                      </tb-resource-autocomplete>
-                      <mat-checkbox [(ngModel)]="resource.isModule"
-                                    (ngModelChange)="isDirty = true">
-                        {{ 'widget.resource-is-extension' | translate }}
-                      </mat-checkbox>
-                      <button mat-icon-button color="primary"
-                              [disabled]="isLoading$ | async"
-                              (click)="removeResource(i)"
-                              matTooltip="{{'widget.remove-resource' | translate}}"
-                              matTooltipPosition="above">
-                        <mat-icon>close</mat-icon>
-                      </button>
-                    </div>
+                    @for (resource of widget.resources; track resource; let i = $index) {
+                      <div class="flex flex-1 flex-row items-center justify-start" style="max-height: 40px;"
+                           >
+                        <tb-resource-autocomplete class="mat-block resource-field flex-1"
+                                                  hideRequiredMarker required
+                                                  subscriptSizing="dynamic"
+                                                  [allowAutocomplete]="resource.isModule"
+                                                  [(ngModel)]="resource.url"
+                                                  (ngModelChange)="isDirty = true"
+                                                  placeholder="{{ 'widget.resource-url' | translate }}">
+                        </tb-resource-autocomplete>
+                        <mat-checkbox [(ngModel)]="resource.isModule"
+                                      (ngModelChange)="isDirty = true">
+                          {{ 'widget.resource-is-extension' | translate }}
+                        </mat-checkbox>
+                        <button mat-icon-button color="primary"
+                                [disabled]="isLoading$ | async"
+                                (click)="removeResource(i)"
+                                matTooltip="{{'widget.remove-resource' | translate}}"
+                                matTooltipPosition="above">
+                          <mat-icon>close</mat-icon>
+                        </button>
+                      </div>
+                    }
                     <button mat-raised-button color="primary"
                             style="margin-top: 8px;"
                             [disabled]="isLoading$ | async"
@@ -225,15 +233,15 @@
                 <div class="tb-resize-container" style="background-color: #fff;">
                   <div class="mat-padding">
                     <tb-gallery-image-input class="flex-1" label="{{'widget.image-preview' | translate}}"
-                                    [(ngModel)]="widget.image"
-                                    (ngModelChange)="isDirty = true" >
+                                            [(ngModel)]="widget.image"
+                                            (ngModelChange)="isDirty = true" >
                     </tb-gallery-image-input>
                     <mat-form-field class="mat-block">
                       <mat-label translate>widget.description</mat-label>
                       <textarea matInput #descriptionInput
                                 [(ngModel)]="widget.description"
                                 (ngModelChange)="isDirty = true"
-                                rows="2" maxlength="1024"></textarea>
+                      rows="2" maxlength="1024"></textarea>
                       <mat-hint align="end">{{descriptionInput.value?.length || 0}}/1024</mat-hint>
                     </mat-form-field>
                     <tb-string-items-list
@@ -265,23 +273,27 @@
                              [(ngModel)]="widget.dataKeySettingsDirective"
                              (ngModelChange)="isDirty = true"/>
                     </mat-form-field>
-                    <mat-form-field *ngIf="widget.type === widgetTypes.timeseries" class="mat-block">
-                      <mat-label translate>widget.latest-data-key-settings-form-selector</mat-label>
-                      <input matInput
-                             [(ngModel)]="widget.latestDataKeySettingsDirective"
-                             (ngModelChange)="isDirty = true"/>
-                    </mat-form-field>
+                    @if (widget.type === widgetTypes.timeseries) {
+                      <mat-form-field class="mat-block">
+                        <mat-label translate>widget.latest-data-key-settings-form-selector</mat-label>
+                        <input matInput
+                               [(ngModel)]="widget.latestDataKeySettingsDirective"
+                               (ngModelChange)="isDirty = true"/>
+                      </mat-form-field>
+                    }
                     <mat-slide-toggle class="mat-block" style="padding-bottom: 16px;"
                                       [(ngModel)]="widget.hasBasicMode"
                                       (ngModelChange)="isDirty = true">
                       {{ 'widget.has-basic-mode' | translate }}
                     </mat-slide-toggle>
-                    <mat-form-field *ngIf="widget.hasBasicMode" class="mat-block">
-                      <mat-label translate>widget.basic-mode-form-selector</mat-label>
-                      <input matInput
-                             [(ngModel)]="widget.basicModeDirective"
-                             (ngModelChange)="isDirty = true"/>
-                    </mat-form-field>
+                    @if (widget.hasBasicMode) {
+                      <mat-form-field class="mat-block">
+                        <mat-label translate>widget.basic-mode-form-selector</mat-label>
+                        <input matInput
+                               [(ngModel)]="widget.basicModeDirective"
+                               (ngModelChange)="isDirty = true"/>
+                      </mat-form-field>
+                    }
                   </div>
                 </div>
               </mat-tab>
@@ -315,10 +327,12 @@
             </div>
           </div>
           <div #framePanel class="tb-split tb-content" style="overflow-y: hidden; position: relative;">
-            <div class="mat-content tb-progress-cover flex flex-1 flex-col items-center justify-center"
-                 *ngIf="!iframeWidgetEditModeInited">
-              <mat-spinner diameter="100" mode="indeterminate" color="warn"></mat-spinner>
-            </div>
+            @if (!iframeWidgetEditModeInited) {
+              <div class="mat-content tb-progress-cover flex flex-1 flex-col items-center justify-center"
+                   >
+                <mat-spinner diameter="100" mode="indeterminate" color="warn"></mat-spinner>
+              </div>
+            }
             <div tb-fullscreen [fullscreen]="iFrameFullscreen" style="width: 100%; height: 100%;">
               <iframe #widgetIFrame style="border: 0;" height="100%" width="100%"></iframe>
               <div style="position: absolute; top: 10px; left: 10px; bottom: initial;">
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-type-autocomplete.component.html b/ui-ngx/src/app/modules/home/pages/widget/widget-type-autocomplete.component.html
index e365b185e8..f6bb65468b 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-type-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-type-autocomplete.component.html
@@ -17,7 +17,9 @@
 -->
 <mat-form-field [formGroup]="selectWidgetTypeFormGroup" class="mat-block" [floatLabel]="floatLabel"
                 [appearance]="appearance" [subscriptSizing]="subscriptSizing">
-  <mat-label *ngIf="label">{{ label }}</mat-label>
+  @if (label) {
+    <mat-label>{{ label }}</mat-label>
+  }
   <input matInput type="text"
          #widgetTypeInput
          placeholder="{{ placeholder }}"
@@ -25,37 +27,46 @@
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="widgetTypeAutocomplete">
-  <button *ngIf="selectWidgetTypeFormGroup.get('widgetType').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (selectWidgetTypeFormGroup.get('widgetType').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete
     class="tb-autocomplete tb-widget-type-autocomplete"
     #widgetTypeAutocomplete
     [displayWith]="displayWidgetTypeFn">
-    <mat-option *ngFor="let widgetType of filteredWidgetTypes | async" [value]="widgetType">
-      <div class="tb-widget-type-option-container">
-        <img class="tb-widget-type-option-image-preview" [src]="widgetType.image | image: {preview: true, emptyUrl: '/assets/widget-preview-empty.svg'} | async" alt="{{ widgetType.name }}">
-        <div class="tb-widget-type-option-details">
-          <div class="tb-widget-type-option-text" [innerHTML]="widgetType.name | highlight:searchText:true"></div>
-          <div *ngIf="widgetType.deprecated" class="tb-widget-type-option-deprecated">{{ 'widget.deprecated' | translate }}</div>
+    @for (widgetType of filteredWidgetTypes | async; track widgetType) {
+      <mat-option [value]="widgetType">
+        <div class="tb-widget-type-option-container">
+          <img class="tb-widget-type-option-image-preview" [src]="widgetType.image | image: {preview: true, emptyUrl: '/assets/widget-preview-empty.svg'} | async" alt="{{ widgetType.name }}">
+          <div class="tb-widget-type-option-details">
+            <div class="tb-widget-type-option-text" [innerHTML]="widgetType.name | highlight:searchText:true"></div>
+            @if (widgetType.deprecated) {
+              <div class="tb-widget-type-option-deprecated">{{ 'widget.deprecated' | translate }}</div>
+            }
+          </div>
         </div>
-      </div>
-    </mat-option>
-    <mat-option *ngIf="!(filteredWidgetTypes | async)?.length" [value]="null">
-      <div (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span>{{ 'widget.no-widgets-text' | translate }}</span>
+      </mat-option>
+    }
+    @if (!(filteredWidgetTypes | async)?.length) {
+      <mat-option [value]="null">
+        <div (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span>{{ 'widget.no-widgets-text' | translate }}</span>
+            </div>
+          } @else {
+            <span>
+              {{ translate.get('widget.no-widgets-matching', {entity: searchText}) | async }}
+            </span>
+          }
         </div>
-        <ng-template #searchNotEmpty>
-          <span>
-          {{ translate.get('widget.no-widgets-matching', {entity: searchText}) | async }}
-          </span>
-        </ng-template>
-      </div>
-    </mat-option>
+      </mat-option>
+    }
   </mat-autocomplete>
   <mat-error>
     <ng-content select="[tb-error]"></ng-content>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-type-tabs.component.html b/ui-ngx/src/app/modules/home/pages/widget/widget-type-tabs.component.html
index 77957a8008..ec789ed6d2 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-type-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-type-tabs.component.html
@@ -15,9 +15,11 @@
     limitations under the License.
 
 -->
-<mat-tab *ngIf="isTenantWidgetType() && authUser.authority === authorities.TENANT_ADMIN"
-         label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
-  <tb-version-control detailsMode="true" singleEntityMode="true"
-                      (versionRestored)="entitiesTableConfig.updateData()"
-                      [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.name" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
-</mat-tab>
+@if (isTenantWidgetType() && authUser.authority === authorities.TENANT_ADMIN) {
+  <mat-tab
+    label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
+    <tb-version-control detailsMode="true" singleEntityMode="true"
+                        (versionRestored)="entitiesTableConfig.updateData()"
+    [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.name" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
+  </mat-tab>
+}
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
index c5c8ed259e..c3a965b752 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <tb-widgets-bundle
       #widgetsBundleComponent
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-tabs.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-tabs.component.html
index c798bcd9d5..d0b3e8936d 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-tabs.component.html
@@ -15,9 +15,11 @@
     limitations under the License.
 
 -->
-<mat-tab *ngIf="isTenantWidgetsBundle() && authUser.authority === authorities.TENANT_ADMIN"
-         label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
-  <tb-version-control detailsMode="true" singleEntityMode="true"
-                      (versionRestored)="entitiesTableConfig.updateData()"
-                      [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.title" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
-</mat-tab>
+@if (isTenantWidgetsBundle() && authUser.authority === authorities.TENANT_ADMIN) {
+  <mat-tab
+    label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab">
+    <tb-version-control detailsMode="true" singleEntityMode="true"
+                        (versionRestored)="entitiesTableConfig.updateData()"
+    [active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.title" [externalEntityId]="entity.externalId || entity.id"></tb-version-control>
+  </mat-tab>
+}
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html
index 39308311ab..e56c3370ae 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html
@@ -27,13 +27,14 @@
         </button>
         <span class="mat-headline-5">{{ widgetsBundle.title }}: {{ 'widget.widgets' | translate }}</span>
         <span class="flex-1"></span>
-        <button mat-icon-button [disabled]="isLoading$ | async"
-                *ngIf="!isReadOnly"
-                matTooltip="{{ 'widget.add-new-widget' | translate }}"
-                matTooltipPosition="above"
-                [matMenuTriggerFor]="addWidgetMenu">
-          <mat-icon>add</mat-icon>
-        </button>
+        @if (!isReadOnly) {
+          <button mat-icon-button [disabled]="isLoading$ | async"
+                  matTooltip="{{ 'widget.add-new-widget' | translate }}"
+                  matTooltipPosition="above"
+                  [matMenuTriggerFor]="addWidgetMenu">
+            <mat-icon>add</mat-icon>
+          </button>
+        }
         <mat-menu #addWidgetMenu="matMenu" xPosition="before">
           <button mat-menu-item (click)="addWidgetType($event)">
             <mat-icon>insert_drive_file</mat-icon>
@@ -53,96 +54,125 @@
       </div>
     </mat-card-title>
   </mat-card-header>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
+  @if ((isLoading$ | async) === false) {
+    <div style="height: 4px;"></div>
+  }
   <mat-card-content>
     <div class="tb-drop-list tb-bundle-widgets-container" cdkDropList cdkDropListOrientation="vertical"
          (cdkDropListDropped)="widgetDrop($event)" [cdkDropListDisabled]="!editMode || widgets?.length < 2">
-      <div cdkDrag class="tb-draggable tb-bundle-widget-row" *ngFor="let widget of widgets; trackBy: trackByWidget;
-               let $index = index; last as isLast;">
-        <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 }}">
-          <div class="tb-bundle-widget-details">
-            <div class="tb-bundle-widget-title">{{ widget.name }}</div>
-            <div *ngIf="widget.deprecated" class="tb-bundle-widget-deprecated">{{ 'widget.deprecated' | translate }}</div>
+      @for (widget of widgets; track trackByWidget($index, 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 }}">
+            <div class="tb-bundle-widget-details">
+              <div class="tb-bundle-widget-title">{{ widget.name }}</div>
+              @if (widget.deprecated) {
+                <div class="tb-bundle-widget-deprecated">{{ 'widget.deprecated' | translate }}</div>
+              }
+            </div>
           </div>
+          @if (!editMode) {
+            <button
+              mat-icon-button
+              (click)="openWidgetEditor($event, widget)"
+              matTooltip="{{ 'widget.edit' | translate }}"
+              matTooltipPosition="above">
+              <mat-icon>edit</mat-icon>
+            </button>
+          }
+          @if (!editMode) {
+            <button
+              mat-icon-button
+              (click)="exportWidgetType($event, widget)"
+              matTooltip="{{ 'widget.export' | translate }}"
+              matTooltipPosition="above">
+              <mat-icon>file_download</mat-icon>
+            </button>
+          }
+          @if (editMode && !addMode) {
+            <button
+              mat-icon-button
+              (click)="removeWidgetType($event, widget)"
+              matTooltip="{{'widget.remove' | translate }}"
+              matTooltipPosition="above">
+              <mat-icon>delete</mat-icon>
+            </button>
+          }
+          @if (editMode) {
+            <button cdkDragHandle
+                    [class.!hidden]="!widgets || widgets.length <= 1"
+                    mat-icon-button
+                    matTooltip="{{ 'action.drag' | translate }}"
+                    matTooltipPosition="above"
+                    class="tb-drag-handle">
+              <tb-icon>drag_indicator</tb-icon>
+            </button>
+          }
         </div>
-        <button *ngIf="!editMode"
-                mat-icon-button
-                (click)="openWidgetEditor($event, widget)"
-                matTooltip="{{ 'widget.edit' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>edit</mat-icon>
-        </button>
-        <button *ngIf="!editMode"
-                mat-icon-button
-                (click)="exportWidgetType($event, widget)"
-                matTooltip="{{ 'widget.export' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>file_download</mat-icon>
-        </button>
-        <button *ngIf="editMode && !addMode"
-                mat-icon-button
-                (click)="removeWidgetType($event, widget)"
-                matTooltip="{{'widget.remove' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>delete</mat-icon>
-        </button>
-        <button cdkDragHandle *ngIf="editMode"
-                [class.!hidden]="!widgets || widgets.length <= 1"
-                mat-icon-button
-                matTooltip="{{ 'action.drag' | translate }}"
-                matTooltipPosition="above"
-                class="tb-drag-handle">
-          <tb-icon>drag_indicator</tb-icon>
-        </button>
-      </div>
+      }
     </div>
-    <div *ngIf="editMode && !addMode && widgets?.length" class="tb-add-widget-button"
-         matTooltip="{{ 'widget.add-existing-widget' | translate }}"
-         matTooltipPosition="above"
-         (click)="addWidgetMode()">
-      <tb-icon color="primary" class="tb-add-widget-icon">add</tb-icon>
-    </div>
-    <div *ngIf="editMode && !addMode && !widgets?.length" class="tb-add-widget-button-panel">
-      <div class="tb-add-widget-button-with-text" (click)="addWidgetMode()">
+    @if (editMode && !addMode && widgets?.length) {
+      <div class="tb-add-widget-button"
+           matTooltip="{{ 'widget.add-existing-widget' | translate }}"
+           matTooltipPosition="above"
+           (click)="addWidgetMode()">
         <tb-icon color="primary" class="tb-add-widget-icon">add</tb-icon>
-        <div class="tb-add-widget-button-text" translate>widget.add-existing-widget</div>
       </div>
-    </div>
-    <div *ngIf="isReadOnly && !widgets?.length" class="tb-no-data-available">
-      <div class="tb-no-data-bg"></div>
-      <div class="tb-no-data-text" translate>widget.no-widgets</div>
-    </div>
-    <div *ngIf="addMode" class="tb-add-bundle-widget-form">
-      <tb-widget-type-autocomplete
-        required
-        placeholder="{{ 'widget.select-widget' | translate }}"
-        [excludeWidgetTypeIds]="excludeWidgetTypeIds"
-        [formControl]="addWidgetFormControl">
-      </tb-widget-type-autocomplete>
-      <div class="tb-add-bundle-widget-actions">
-        <button mat-button color="primary"
-                [disabled]="(isLoading$ | async)"
-                (click)="cancelAddWidgetMode()">{{'action.cancel' | translate}}
-        </button>
+    }
+    @if (editMode && !addMode && !widgets?.length) {
+      <div class="tb-add-widget-button-panel">
+        <div class="tb-add-widget-button-with-text" (click)="addWidgetMode()">
+          <tb-icon color="primary" class="tb-add-widget-icon">add</tb-icon>
+          <div class="tb-add-widget-button-text" translate>widget.add-existing-widget</div>
+        </div>
       </div>
-    </div>
+    }
+    @if (isReadOnly && !widgets?.length) {
+      <div class="tb-no-data-available">
+        <div class="tb-no-data-bg"></div>
+        <div class="tb-no-data-text" translate>widget.no-widgets</div>
+      </div>
+    }
+    @if (addMode) {
+      <div class="tb-add-bundle-widget-form">
+        <tb-widget-type-autocomplete
+          required
+          placeholder="{{ 'widget.select-widget' | translate }}"
+          [excludeWidgetTypeIds]="excludeWidgetTypeIds"
+          [formControl]="addWidgetFormControl">
+        </tb-widget-type-autocomplete>
+        <div class="tb-add-bundle-widget-actions">
+          <button mat-button color="primary"
+                  [disabled]="(isLoading$ | async)"
+                  (click)="cancelAddWidgetMode()">{{'action.cancel' | translate}}
+          </button>
+        </div>
+      </div>
+    }
   </mat-card-content>
   <mat-card-actions>
-    <button mat-button color="primary" *ngIf="editMode && (widgets?.length || isDirty)"
-            [disabled]="(isLoading$ | async)"
-            (click)="cancel()">{{'action.cancel' | translate}}
-    </button>
-    <button mat-raised-button color="primary" *ngIf="editMode && (widgets?.length || isDirty)"
-            [disabled]="(isLoading$ | async) || !isDirty"
-            (click)="save()">{{'action.save' | translate}}
-    </button>
-    <button mat-raised-button color="primary" *ngIf="!isReadOnly && !editMode"
-            [disabled]="(isLoading$ | async)"
-            (click)="edit()">{{'action.edit' | translate}}
-    </button>
+    @if (editMode && (widgets?.length || isDirty)) {
+      <button mat-button color="primary"
+              [disabled]="(isLoading$ | async)"
+              (click)="cancel()">{{'action.cancel' | translate}}
+      </button>
+    }
+    @if (editMode && (widgets?.length || isDirty)) {
+      <button mat-raised-button color="primary"
+              [disabled]="(isLoading$ | async) || !isDirty"
+              (click)="save()">{{'action.save' | translate}}
+      </button>
+    }
+    @if (!isReadOnly && !editMode) {
+      <button mat-raised-button color="primary"
+              [disabled]="(isLoading$ | async)"
+              (click)="edit()">{{'action.edit' | translate}}
+      </button>
+    }
   </mat-card-actions>
 </mat-card>
 
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
index 6546118554..89f2547118 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
@@ -15,44 +15,50 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
-  <button mat-raised-button color="primary"
-          [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'open')"
-          [class.!hidden]="isEdit">
-    {{'widgets-bundle.open-widgets-bundle' | translate }}
-  </button>
-  <button mat-raised-button color="primary"
-          [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'openDetails')"
-          [class.!hidden]="isEdit || isDetailsPage">
-    {{'common.open-details-page' | translate }}
-  </button>
-  <button mat-raised-button color="primary"
-          [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'export')"
-          [class.!hidden]="isEdit">
-    {{'widgets-bundle.export' | translate }}
-  </button>
-  <button mat-raised-button color="primary"
-          [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'delete')"
-          [class.!hidden]="hideDelete() || isEdit">
-    {{'widgets-bundle.delete' | translate }}
-  </button>
-</div>
+@if (!standalone) {
+  <div class="tb-details-buttons xs:flex xs:flex-col">
+    <button mat-raised-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'open')"
+            [class.!hidden]="isEdit">
+      {{'widgets-bundle.open-widgets-bundle' | translate }}
+    </button>
+    <button mat-raised-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'openDetails')"
+            [class.!hidden]="isEdit || isDetailsPage">
+      {{'common.open-details-page' | translate }}
+    </button>
+    <button mat-raised-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'export')"
+            [class.!hidden]="isEdit">
+      {{'widgets-bundle.export' | translate }}
+    </button>
+    <button mat-raised-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'delete')"
+            [class.!hidden]="hideDelete() || isEdit">
+      {{'widgets-bundle.delete' | translate }}
+    </button>
+  </div>
+}
 <div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
         <mat-label translate>widgets-bundle.title</mat-label>
         <input matInput formControlName="title" required>
-        <mat-error *ngIf="entityForm.get('title').hasError('required')">
-          {{ 'widgets-bundle.title-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="entityForm.get('title').hasError('maxlength')">
-          {{ 'widgets-bundle.title-max-length' | translate }}
-        </mat-error>
+        @if (entityForm.get('title').hasError('required')) {
+          <mat-error>
+            {{ 'widgets-bundle.title-required' | translate }}
+          </mat-error>
+        }
+        @if (entityForm.get('title').hasError('maxlength')) {
+          <mat-error>
+            {{ 'widgets-bundle.title-max-length' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
       <tb-gallery-image-input class="flex-1"
                               label="{{'widgets-bundle.image-preview' | translate}}"
diff --git a/ui-ngx/src/app/modules/login/pages/login/create-password.component.html b/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
index 2d060483b1..a73d8b3a25 100644
--- a/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
@@ -21,9 +21,13 @@
       <mat-card-title class="text-xl font-normal" translate>login.create-password</mat-card-title>
     </mat-card-header>
     <div class="h-3 px-4"><div tb-toast></div></div>
-    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading || (isLoading$ | async)">
-    </mat-progress-bar>
-    <span style="height: 4px;" *ngIf="!isLoading && !(isLoading$ | async)"></span>
+    @if (isLoading || (isLoading$ | async)) {
+      <mat-progress-bar color="warn" mode="indeterminate">
+      </mat-progress-bar>
+    }
+    @if (!isLoading && !(isLoading$ | async)) {
+      <span style="height: 4px;"></span>
+    }
     <mat-card-content class="!p-6">
       <form [formGroup]="createPassword" (ngSubmit)="onCreatePassword()">
         <mat-form-field class="mat-block tb-autofilled" appearance="outline">
@@ -39,18 +43,22 @@
                  formControlName="newPassword"/>
           <mat-icon class="material-icons" matPrefix>lock</mat-icon>
           <tb-toggle-password matSuffix></tb-toggle-password>
-          <mat-error *ngIf="createPassword.get('newPassword').errors">
-            {{ 'security.password-requirement.password-not-meet-requirements' | translate }}
-          </mat-error>
+          @if (createPassword.get('newPassword').errors) {
+            <mat-error>
+              {{ 'security.password-requirement.password-not-meet-requirements' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <mat-form-field class="mat-block tb-autofilled" style="margin-bottom: 18px" appearance="outline">
           <mat-label translate>login.password-again</mat-label>
           <input matInput type="password" formControlName="newPassword2" autocomplete="new-password"/>
           <mat-icon class="material-icons" matPrefix>lock</mat-icon>
           <tb-toggle-password matSuffix></tb-toggle-password>
-          <mat-error *ngIf="createPassword.get('newPassword2').hasError('passwordsNotMatch')">
-            {{ 'security.password-requirement.new-passwords-not-match' | translate }}
-          </mat-error>
+          @if (createPassword.get('newPassword2').hasError('passwordsNotMatch')) {
+            <mat-error>
+              {{ 'security.password-requirement.new-passwords-not-match' | translate }}
+            </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 || (isLoading$ | async)">
@@ -65,7 +73,7 @@
   </mat-card>
 </div>
 <tb-password-requirements-tooltip #passwordTooltip
-                            [passwordControl]="createPassword.get('newPassword')"
-                            [passwordPolicy]="passwordPolicy"
-                            [trigger]="passwordTrigger">
+                                  [passwordControl]="createPassword.get('newPassword')"
+                                  [passwordPolicy]="passwordPolicy"
+                                  [trigger]="passwordTrigger">
 </tb-password-requirements-tooltip>
diff --git a/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.html b/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.html
index 495d6fa0cb..12e027ee73 100644
--- a/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.html
@@ -76,7 +76,7 @@
                     tooltipPosition="above"
                     icon="content_copy"
                     [style]="{'font-size': '24px', color: 'rgba(255,255,255,.8)'}"
-                  >
+                    >
                   </tb-copy-button>
                 </div>
                 <div class="flex w-full flex-col items-center justify-start gap-2">
@@ -167,12 +167,16 @@
                            type="email" required
                            autocomplete="email"
                            placeholder="{{ 'login.email-label' | translate }}" />
-                    <mat-error *ngIf="emailConfigForm.get('email').hasError('required')">
-                      {{ 'login.email-required' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="emailConfigForm.get('email').hasError('email')">
-                      {{ 'login.invalid-email-format' | translate }}
-                    </mat-error>
+                    @if (emailConfigForm.get('email').hasError('required')) {
+                      <mat-error>
+                        {{ 'login.email-required' | translate }}
+                      </mat-error>
+                    }
+                    @if (emailConfigForm.get('email').hasError('email')) {
+                      <mat-error>
+                        {{ 'login.invalid-email-format' | translate }}
+                      </mat-error>
+                    }
                   </mat-form-field>
                 </form>
                 <div class="flex w-full flex-col items-center justify-start gap-2">
@@ -267,9 +271,9 @@
                  autocomplete="one-time-code"
                  placeholder="{{ 'login.verification-code' | translate }}">
           @if (configForm.get('verificationCode').getError('required') ||
-          configForm.get('verificationCode').getError('minlength') ||
-          configForm.get('verificationCode').getError('maxlength') ||
-          configForm.get('verificationCode').getError('pattern')) {
+            configForm.get('verificationCode').getError('minlength') ||
+            configForm.get('verificationCode').getError('maxlength') ||
+            configForm.get('verificationCode').getError('pattern')) {
             <mat-error>{{ 'login.verification-code-invalid' | translate }}</mat-error>
           }
           @if (configForm.get('verificationCode').getError('incorrectCode')) {
diff --git a/ui-ngx/src/app/modules/login/pages/login/login.component.html b/ui-ngx/src/app/modules/login/pages/login/login.component.html
index 39fd731fea..14f968d11e 100644
--- a/ui-ngx/src/app/modules/login/pages/login/login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/login.component.html
@@ -22,9 +22,13 @@
         <div class="flex flex-col items-center justify-start" style="padding: 16px 0;">
           <tb-logo link="https://thingsboard.io" target="_blank" class="login-logo"></tb-logo>
         </div>
-        <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading || (isLoading$ | async)">
-        </mat-progress-bar>
-        <span style="height: 4px;" *ngIf="!isLoading && !(isLoading$ | async)"></span>
+        @if (isLoading || (isLoading$ | async)) {
+          <mat-progress-bar color="warn" mode="indeterminate">
+          </mat-progress-bar>
+        }
+        @if (!isLoading && !(isLoading$ | async)) {
+          <span style="height: 4px;"></span>
+        }
         <span tb-toast style="height: 20px;"></span>
         <div class="flex flex-col">
           @if(oauth2Clients?.length) {
@@ -60,9 +64,11 @@
             <mat-label translate>login.username</mat-label>
             <input id="username-input" matInput type="email" autofocus formControlName="username" autocomplete="email"/>
             <mat-icon matPrefix>email</mat-icon>
-            <mat-error *ngIf="loginFormGroup.get('username').invalid">
-              {{ 'login.invalid-email-format' | translate }}
-            </mat-error>
+            @if (loginFormGroup.get('username').invalid) {
+              <mat-error>
+                {{ 'login.invalid-email-format' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
           <mat-form-field class="tb-autofilled" appearance="outline">
             <mat-label translate>common.password</mat-label>
@@ -71,7 +77,7 @@
             <mat-icon matPrefix>lock</mat-icon>
           </mat-form-field>
           <button mat-flat-button color="accent" [disabled]="isLoading || (isLoading$ | async)"
-                  class="tb-action-button" type="submit">{{ 'login.sign-in' | translate }}</button>
+          class="tb-action-button" type="submit">{{ 'login.sign-in' | translate }}</button>
           <div class="forgot-password flex items-center justify-end gap-5">
             <button class="tb-reset-password" mat-button type="button" routerLink="/login/resetPasswordRequest">
               {{ (passwordViolation ? 'login.reset-password' : 'login.forgot-password') | translate }}
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
index a3ea2b75e5..e609f82bb5 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
@@ -22,18 +22,24 @@
       <mat-card-title class="text-xl font-normal" translate>login.request-password-reset</mat-card-title>
     </mat-card-header>
     <div class="h-3 px-4"><div tb-toast></div></div>
-    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-    </mat-progress-bar>
-    <span style="height: 4px;" *ngIf="!(isLoading$ | async)"></span>
+    @if (isLoading$ | async) {
+      <mat-progress-bar color="warn" mode="indeterminate">
+      </mat-progress-bar>
+    }
+    @if (!(isLoading$ | async)) {
+      <span style="height: 4px;"></span>
+    }
     <mat-card-content class="!p-6">
       <form [formGroup]="requestPasswordRequest" (ngSubmit)="sendResetPasswordLink()">
         <mat-form-field class="mat-block tb-autofilled" style="margin-bottom: 18px" appearance="outline" hideRequiredMarker>
           <mat-label translate>login.email</mat-label>
           <input matInput type="email" autofocus formControlName="email" autocomplete="email"/>
           <mat-icon class="material-icons" matPrefix>email</mat-icon>
-          <mat-error *ngIf="requestPasswordRequest.get('email').invalid">
-            {{ 'user.invalid-email-format' | translate }}
-          </mat-error>
+          @if (requestPasswordRequest.get('email').invalid) {
+            <mat-error>
+              {{ 'user.invalid-email-format' | translate }}
+            </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) || clicked">
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
index 19a3c4567b..30f6a8afdc 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
@@ -19,14 +19,20 @@
   <mat-card appearance="raised" class="tb-password-card flex-initial">
     <mat-card-header class="px-6 pt-6">
       <mat-card-title class="text-xl font-normal" translate>login.password-reset</mat-card-title>
-      <mat-card-subtitle *ngIf="isExpiredPassword" class="mt-4 whitespace-pre-line text-sm font-normal" translate>
-        login.expired-password-reset-message
-      </mat-card-subtitle>
+      @if (isExpiredPassword) {
+        <mat-card-subtitle class="mt-4 whitespace-pre-line text-sm font-normal" translate>
+          login.expired-password-reset-message
+        </mat-card-subtitle>
+      }
     </mat-card-header>
     <div class="h-3 px-4"><div tb-toast></div></div>
-    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading">
-    </mat-progress-bar>
-    <span style="height: 4px;" *ngIf="!isLoading"></span>
+    @if (isLoading) {
+      <mat-progress-bar color="warn" mode="indeterminate">
+      </mat-progress-bar>
+    }
+    @if (!isLoading) {
+      <span style="height: 4px;"></span>
+    }
     <mat-card-content class="!p-6">
       <form [formGroup]="resetPassword" (ngSubmit)="onResetPassword()">
         <mat-form-field class="mat-block tb-autofilled" appearance="outline">
@@ -42,18 +48,22 @@
                  formControlName="newPassword"/>
           <mat-icon class="material-icons" matPrefix>lock</mat-icon>
           <tb-toggle-password matSuffix></tb-toggle-password>
-          <mat-error *ngIf="resetPassword.get('newPassword').errors">
-            {{ 'security.password-requirement.password-not-meet-requirements' | translate }}
-          </mat-error>
+          @if (resetPassword.get('newPassword').errors) {
+            <mat-error>
+              {{ 'security.password-requirement.password-not-meet-requirements' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <mat-form-field class="mat-block tb-autofilled" appearance="outline" style="margin-bottom: 18px">
           <mat-label translate>login.new-password-again</mat-label>
           <input matInput type="password" formControlName="newPassword2" autocomplete="new-password"/>
           <mat-icon class="material-icons" matPrefix>lock</mat-icon>
           <tb-toggle-password matSuffix></tb-toggle-password>
-          <mat-error *ngIf="resetPassword.get('newPassword2').hasError('passwordsNotMatch')">
-            {{ 'security.password-requirement.new-passwords-not-match' | translate }}
-          </mat-error>
+          @if (resetPassword.get('newPassword2').hasError('passwordsNotMatch')) {
+            <mat-error>
+              {{ 'security.password-requirement.new-passwords-not-match' | translate }}
+            </mat-error>
+          }
         </mat-form-field>
         <div class="flex flex-col items-center justify-start gap-4 gt-sm:flex-row gt-sm:items-start gt-sm:justify-center">
           <button mat-flat-button color="accent" type="submit" [disabled]="isLoading">
@@ -68,7 +78,7 @@
   </mat-card>
 </div>
 <tb-password-requirements-tooltip #passwordTooltip
-                            [passwordControl]="resetPassword.get('newPassword')"
-                            [passwordPolicy]="passwordPolicy"
-                            [trigger]="passwordTrigger">
+                                  [passwordControl]="resetPassword.get('newPassword')"
+                                  [passwordPolicy]="passwordPolicy"
+                                  [trigger]="passwordTrigger">
 </tb-password-requirements-tooltip>
diff --git a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
index f1a58933fc..eb894f322e 100644
--- a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
@@ -27,70 +27,85 @@
       </mat-card-title>
     </mat-card-header>
     <mat-card-content>
-      <div class="providers-container tb-default flex flex-col gap-2" *ngIf="!selectedProvider">
-        <p class="mat-body" translate>login.select-way-to-verify</p>
-        <ng-container *ngFor="let provider of allowProviders">
-          <button type="button" mat-stroked-button class="provider" (click)="selectProvider(provider)">
-            <mat-icon class="tb-mat-18" svgIcon="{{ providersData.get(provider).icon }}"></mat-icon>
-            {{ providersData.get(provider).name | translate }}
-          </button>
-        </ng-container>
-      </div>
-      <form [formGroup]="verificationForm" (ngSubmit)="sendVerificationCode()" *ngIf="selectedProvider">
-        <fieldset [disabled]="isLoading$ | async">
-          <div tb-toast class="flex flex-col">
-            <p class="mat-body">{{ providerDescription }}</p>
-            <div class="code-block flex flex-row gap-2">
-              <mat-form-field class="mat-block tb-autofilled flex-1" appearance="outline">
-                <input matInput formControlName="verificationCode"
-                       required [maxlength]="maxLengthInput" type="text"
-                       [attr.inputmode]="inputMode" [pattern]="pattern"
-                       autocomplete="one-time-code"
-                       placeholder="{{ providersData.get(selectedProvider).placeholder | translate }}"/>
-                <mat-error *ngIf="verificationForm.get('verificationCode').getError('required') ||
-                                  verificationForm.get('verificationCode').getError('minlength') ||
-                                  verificationForm.get('verificationCode').getError('maxlength') ||
-                                  verificationForm.get('verificationCode').getError('pattern')">
-                  {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
-                </mat-error>
-                <mat-error *ngIf="verificationForm.get('verificationCode').getError('incorrectCode')">
-                  {{ 'security.2fa.dialog.verification-code-incorrect' | translate }}
-                </mat-error>
-                <mat-error *ngIf="verificationForm.get('verificationCode').getError('tooManyRequest')">
-                  {{ 'security.2fa.dialog.verification-code-many-request' | translate }}
-                </mat-error>
-              </mat-form-field>
-            </div>
-            <span style="height: 50px;"></span>
-            <button mat-flat-button
-                    color="accent"
-                    [disabled]="(isLoading$ | async) || verificationForm.invalid"
-                    type="submit">
-              {{ 'action.continue' | translate }}
+      @if (!selectedProvider) {
+        <div class="providers-container tb-default flex flex-col gap-2">
+          <p class="mat-body" translate>login.select-way-to-verify</p>
+          @for (provider of allowProviders; track provider) {
+            <button type="button" mat-stroked-button class="provider" (click)="selectProvider(provider)">
+              <mat-icon class="tb-mat-18" svgIcon="{{ providersData.get(provider).icon }}"></mat-icon>
+              {{ providersData.get(provider).name | translate }}
             </button>
-            <span style="height: 16px;"></span>
-            <div class="action-row flex flex-row items-center justify-between gap-2">
-              <div *ngIf="showResendAction" class="action-resend flex flex-1 items-center justify-center">
-                <div *ngIf="countDownTime" class="timer">
-                  {{ 'login.resend-code-wait' | translate : {time: countDownTime} }}
-                </div>
-                <button mat-button class="flex-1"
-                        [class.!hidden]="hideResendButton"
-                        (click)="sendCode($event)"
-                        type="button">
-                  {{ 'login.resend-code' | translate }}
-                </button>
+          }
+        </div>
+      }
+      @if (selectedProvider) {
+        <form [formGroup]="verificationForm" (ngSubmit)="sendVerificationCode()">
+          <fieldset [disabled]="isLoading$ | async">
+            <div tb-toast class="flex flex-col">
+              <p class="mat-body">{{ providerDescription }}</p>
+              <div class="code-block flex flex-row gap-2">
+                <mat-form-field class="mat-block tb-autofilled flex-1" appearance="outline">
+                  <input matInput formControlName="verificationCode"
+                         required [maxlength]="maxLengthInput" type="text"
+                         [attr.inputmode]="inputMode" [pattern]="pattern"
+                         autocomplete="one-time-code"
+                         placeholder="{{ providersData.get(selectedProvider).placeholder | translate }}"/>
+                  @if (verificationForm.get('verificationCode').getError('required') ||
+                    verificationForm.get('verificationCode').getError('minlength') ||
+                    verificationForm.get('verificationCode').getError('maxlength') ||
+                    verificationForm.get('verificationCode').getError('pattern')) {
+                    <mat-error>
+                      {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
+                    </mat-error>
+                  }
+                  @if (verificationForm.get('verificationCode').getError('incorrectCode')) {
+                    <mat-error>
+                      {{ 'security.2fa.dialog.verification-code-incorrect' | translate }}
+                    </mat-error>
+                  }
+                  @if (verificationForm.get('verificationCode').getError('tooManyRequest')) {
+                    <mat-error>
+                      {{ 'security.2fa.dialog.verification-code-many-request' | translate }}
+                    </mat-error>
+                  }
+                </mat-form-field>
               </div>
-              <button mat-button class="flex-1"
-                      type="button"
-                      *ngIf="allowProviders.length > 1"
-                      (click)="selectProvider(null)">
-                {{ 'login.try-another-way' | translate }}
+              <span style="height: 50px;"></span>
+              <button mat-flat-button
+                      color="accent"
+                      [disabled]="(isLoading$ | async) || verificationForm.invalid"
+                      type="submit">
+                {{ 'action.continue' | translate }}
               </button>
+              <span style="height: 16px;"></span>
+              <div class="action-row flex flex-row items-center justify-between gap-2">
+                @if (showResendAction) {
+                  <div class="action-resend flex flex-1 items-center justify-center">
+                    @if (countDownTime) {
+                      <div class="timer">
+                        {{ 'login.resend-code-wait' | translate : {time: countDownTime} }}
+                      </div>
+                    }
+                    <button mat-button class="flex-1"
+                            [class.!hidden]="hideResendButton"
+                            (click)="sendCode($event)"
+                            type="button">
+                      {{ 'login.resend-code' | translate }}
+                    </button>
+                  </div>
+                }
+                @if (allowProviders.length > 1) {
+                  <button mat-button class="flex-1"
+                          type="button"
+                          (click)="selectProvider(null)">
+                    {{ 'login.try-another-way' | translate }}
+                  </button>
+                }
+              </div>
             </div>
-          </div>
-        </fieldset>
-      </form>
+          </fieldset>
+        </form>
+      }
     </mat-card-content>
   </mat-card>
 </div>
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.html b/ui-ngx/src/app/shared/components/button/copy-button.component.html
index d664b4d097..c72cfdcda3 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.html
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.html
@@ -23,10 +23,11 @@
         [matTooltip]="matTooltipText"
         [matTooltipPosition]="matTooltipPosition"
         (click)="copy($event)">
-  <tb-icon [style]="style" *ngIf="!copied; else copiedTemplate">
-    {{  icon || mdiIcon }}
-  </tb-icon>
-  <ng-template #copiedTemplate>
+  @if (!copied) {
+    <tb-icon [style]="style">
+      {{  icon || mdiIcon }}
+    </tb-icon>
+  } @else {
     <mat-icon [style]="style" class="copied">done</mat-icon>
-  </ng-template>
+  }
 </button>
diff --git a/ui-ngx/src/app/shared/components/button/toggle-password.component.html b/ui-ngx/src/app/shared/components/button/toggle-password.component.html
index 07e91101ab..e284af02c4 100644
--- a/ui-ngx/src/app/shared/components/button/toggle-password.component.html
+++ b/ui-ngx/src/app/shared/components/button/toggle-password.component.html
@@ -15,6 +15,8 @@
     limitations under the License.
 
 -->
-<button mat-icon-button type="button" tabindex="-1" (click)="togglePassword($event)" [attr.aria-pressed]="showPassword" *ngIf="!hideToggle">
-  <mat-icon>{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>
-</button>
+@if (!hideToggle) {
+  <button mat-icon-button type="button" tabindex="-1" (click)="togglePassword($event)" [attr.aria-pressed]="showPassword">
+    <mat-icon>{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>
+  </button>
+}
diff --git a/ui-ngx/src/app/shared/components/button/widget-button-toggle.component.html b/ui-ngx/src/app/shared/components/button/widget-button-toggle.component.html
index fb0c8bfab9..3684b29e5b 100644
--- a/ui-ngx/src/app/shared/components/button/widget-button-toggle.component.html
+++ b/ui-ngx/src/app/shared/components/button/widget-button-toggle.component.html
@@ -27,16 +27,28 @@
                            [class.tb-disabled-state]="disabled"
                            [class.tb-disabled]="disabled">
     <mat-button-toggle [value]="true" [disabled]="disabled" [class.tb-hover-state]="hovered">
-      <div #leftButtonContent class="tb-widget-button-content" *ngIf="appearance.leftAppearance.showIcon || appearance.leftAppearance.showLabel">
-        <tb-icon matButtonIcon *ngIf="appearance.leftAppearance.showIcon" [style]="leftIconStyle">{{ appearance.leftAppearance.icon }}</tb-icon>
-        <span *ngIf="appearance.leftAppearance.showLabel" [style]="leftLabelStyle" class="tb-widget-button-label">{{ leftLabel$ | async }}</span>
-      </div>
+      @if (appearance.leftAppearance.showIcon || appearance.leftAppearance.showLabel) {
+        <div #leftButtonContent class="tb-widget-button-content">
+          @if (appearance.leftAppearance.showIcon) {
+            <tb-icon matButtonIcon [style]="leftIconStyle">{{ appearance.leftAppearance.icon }}</tb-icon>
+          }
+          @if (appearance.leftAppearance.showLabel) {
+            <span [style]="leftLabelStyle" class="tb-widget-button-label">{{ leftLabel$ | async }}</span>
+          }
+        </div>
+      }
     </mat-button-toggle>
     <mat-button-toggle [value]="false" [disabled]="disabled" [class.tb-hover-state]="hovered">
-      <div #rightButtonContent class="tb-widget-button-content" *ngIf="appearance.rightAppearance.showIcon || appearance.rightAppearance.showLabel">
-        <tb-icon matButtonIcon *ngIf="appearance.rightAppearance.showIcon" [style]="rightIconStyle">{{ appearance.rightAppearance.icon }}</tb-icon>
-        <span *ngIf="appearance.rightAppearance.showLabel" [style]="rightLabelStyle" class="tb-widget-button-label">{{ rightLabel$ | async }}</span>
-      </div>
+      @if (appearance.rightAppearance.showIcon || appearance.rightAppearance.showLabel) {
+        <div #rightButtonContent class="tb-widget-button-content">
+          @if (appearance.rightAppearance.showIcon) {
+            <tb-icon matButtonIcon [style]="rightIconStyle">{{ appearance.rightAppearance.icon }}</tb-icon>
+          }
+          @if (appearance.rightAppearance.showLabel) {
+            <span [style]="rightLabelStyle" class="tb-widget-button-label">{{ rightLabel$ | async }}</span>
+          }
+        </div>
+      }
     </mat-button-toggle>
   </mat-button-toggle-group>
 </div>
diff --git a/ui-ngx/src/app/shared/components/button/widget-button.component.html b/ui-ngx/src/app/shared/components/button/widget-button.component.html
index 2ff5d5e07f..16cf5fd557 100644
--- a/ui-ngx/src/app/shared/components/button/widget-button.component.html
+++ b/ui-ngx/src/app/shared/components/button/widget-button.component.html
@@ -33,8 +33,14 @@
         [class.tb-disabled-state]="disabled"
         [style.border-radius]="computedBorderRadius"
         [style.pointer-events]="disableEvents ? 'none' : ''">
-  <div #widgetButtonContent class="tb-widget-button-content" *ngIf="appearance.showIcon || appearance.showLabel">
-    <tb-icon matButtonIcon *ngIf="appearance.showIcon" [style]="iconStyle">{{ appearance.icon }}</tb-icon>
-    <span *ngIf="appearance.showLabel" class="tb-widget-button-label">{{ label$ | async }}</span>
-  </div>
+  @if (appearance.showIcon || appearance.showLabel) {
+    <div #widgetButtonContent class="tb-widget-button-content">
+      @if (appearance.showIcon) {
+        <tb-icon matButtonIcon [style]="iconStyle">{{ appearance.icon }}</tb-icon>
+      }
+      @if (appearance.showLabel) {
+        <span class="tb-widget-button-label">{{ label$ | async }}</span>
+      }
+    </div>
+  }
 </button>
diff --git a/ui-ngx/src/app/shared/components/cheatsheet.component.ts b/ui-ngx/src/app/shared/components/cheatsheet.component.ts
index 00fe6e5790..41fa0ce39f 100644
--- a/ui-ngx/src/app/shared/components/cheatsheet.component.ts
+++ b/ui-ngx/src/app/shared/components/cheatsheet.component.ts
@@ -115,17 +115,23 @@ import Mousetrap from 'mousetrap';
   }
 }  `],
     template: `<div tabindex="-1" class="tb-hotkeys-container fade" [class.in]="helpVisible" style="display:none"><div class="tb-hotkeys">
-  <h4 class="tb-hotkeys-title">{{ title }}</h4>
-  <table *ngIf="helpVisible"><tbody>
-    <tr *ngFor="let hotkey of hotkeysList">
-      <td class="tb-hotkeys-keys">
-        <span *ngFor="let key of hotkey.formatted" class="tb-hotkeys-key">{{ key }}</span>
-      </td>
-      <td class="tb-hotkeys-text">{{ hotkey.description }}</td>
-    </tr>
-  </tbody></table>
-  <div class="tb-hotkeys-close" (click)="toggleCheatSheet()">&#215;</div>
-</div></div>`,
+    <h4 class="tb-hotkeys-title">{{ title }}</h4>
+    @if (helpVisible) {
+      <table><tbody>
+        @for (hotkey of hotkeysList; track hotkey) {
+          <tr>
+            <td class="tb-hotkeys-keys">
+              @for (key of hotkey.formatted; track key) {
+                <span class="tb-hotkeys-key">{{ key }}</span>
+              }
+            </td>
+            <td class="tb-hotkeys-text">{{ hotkey.description }}</td>
+          </tr>
+        }
+      </tbody></table>
+    }
+    <div class="tb-hotkeys-close" (click)="toggleCheatSheet()">&#215;</div>
+  </div></div>`,
     standalone: false
 })
 export class TbCheatSheetComponent implements OnInit, OnDestroy {
diff --git a/ui-ngx/src/app/shared/components/color-input.component.html b/ui-ngx/src/app/shared/components/color-input.component.html
index 92c360e8c7..d2f21661bc 100644
--- a/ui-ngx/src/app/shared/components/color-input.component.html
+++ b/ui-ngx/src/app/shared/components/color-input.component.html
@@ -15,26 +15,37 @@
     limitations under the License.
 
 -->
-<mat-form-field *ngIf="!asBoxInput; else boxInput" [formGroup]="colorFormGroup">
-  <mat-label *ngIf="icon || label">
-    <mat-icon *ngIf="icon">{{icon}}</mat-icon>
-    <span *ngIf="label">{{label}}</span>
-  </mat-label>
-  <div matPrefix class="tb-color-preview" (click)="!disabled && showColorPicker($event)">
-    <div class="tb-color-result" [style.background]="colorFormGroup.get('color').value"></div>
-  </div>
-  <input matInput formControlName="color" (keydown)="$event.preventDefault();" (click)="openOnInput && showColorPicker($event)" [required]="required">
-  <button *ngIf="colorClearButton && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
-  <mat-error *ngIf="colorFormGroup.get('color').hasError('required')">
-    {{ requiredText }}
-  </mat-error>
-</mat-form-field>
-<ng-template #boxInput>
+@if (!asBoxInput) {
+  <mat-form-field [formGroup]="colorFormGroup">
+    @if (icon || label) {
+      <mat-label>
+        @if (icon) {
+          <mat-icon>{{icon}}</mat-icon>
+        }
+        @if (label) {
+          <span>{{label}}</span>
+        }
+      </mat-label>
+    }
+    <div matPrefix class="tb-color-preview" (click)="!disabled && showColorPicker($event)">
+      <div class="tb-color-result" [style.background]="colorFormGroup.get('color').value"></div>
+    </div>
+    <input matInput formControlName="color" (keydown)="$event.preventDefault();" (click)="openOnInput && showColorPicker($event)" [required]="required">
+    @if (colorClearButton && !disabled) {
+      <button
+        type="button"
+        matSuffix mat-icon-button aria-label="Clear"
+        (click)="clear()">
+        <mat-icon class="material-icons">close</mat-icon>
+      </button>
+    }
+    @if (colorFormGroup.get('color').hasError('required')) {
+      <mat-error>
+        {{ requiredText }}
+      </mat-error>
+    }
+  </mat-form-field>
+} @else {
   <button type="button"
           mat-stroked-button
           class="tb-box-button"
@@ -46,4 +57,4 @@
       <div class="tb-color-result" [style]="!disabled ? {background: colorFormGroup.get('color').value} : {}"></div>
     </div>
   </button>
-</ng-template>
+}
diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.html b/ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.html
index 0c58364c17..088c48bd15 100644
--- a/ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.html
+++ b/ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.html
@@ -18,22 +18,26 @@
 <div class="tb-color-picker-panel">
   <tb-color-picker class="tb-color-picker" [formControl]="colorPickerControl"></tb-color-picker>
   <div class="tb-color-picker-panel-buttons">
-    <button *ngIf="colorClearButton"
-            mat-button
-            color="primary"
-            type="button"
-            (click)="clearColor()"
-            [disabled]="!colorPickerControl.value">
-      {{ 'action.clear' | translate }}
-    </button>
+    @if (colorClearButton) {
+      <button
+        mat-button
+        color="primary"
+        type="button"
+        (click)="clearColor()"
+        [disabled]="!colorPickerControl.value">
+        {{ 'action.clear' | translate }}
+      </button>
+    }
     <span class="flex-1"></span>
     <div class="flex flex-row gap-2">
-      <button *ngIf="colorCancelButton"
-              mat-button
-              type="button"
-              (click)="cancelColor()">
-        {{ 'action.cancel' | translate }}
-      </button>
+      @if (colorCancelButton) {
+        <button
+          mat-button
+          type="button"
+          (click)="cancelColor()">
+          {{ 'action.cancel' | translate }}
+        </button>
+      }
       <button mat-raised-button
               color="primary"
               type="button"
diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html
index fcb1cb067d..216f903d46 100644
--- a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html
+++ b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html
@@ -36,10 +36,18 @@
         <mat-option [value]="1">RGBA</mat-option>
         <mat-option [value]="2">HSLA</mat-option>
       </mat-select>
-      <div class="color-input" [ngSwitch]="presentations[presentationControl.value]">
-        <tb-rgba-input *ngSwitchCase="'rgba'" labelVisible [(color)]="control.value"></tb-rgba-input>
-        <tb-hsla-input *ngSwitchCase="'hsla'" labelVisible [(color)]="control.value"></tb-hsla-input>
-        <tb-hex-input *ngSwitchCase="'hex'" [(color)]="control.value"></tb-hex-input>
+      <div class="color-input">
+        @switch (presentations[presentationControl.value]) {
+          @case ('rgba') {
+            <tb-rgba-input labelVisible [(color)]="control.value"></tb-rgba-input>
+          }
+          @case ('hsla') {
+            <tb-hsla-input labelVisible [(color)]="control.value"></tb-hsla-input>
+          }
+          @case ('hex') {
+            <tb-hex-input [(color)]="control.value"></tb-hex-input>
+          }
+        }
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/shared/components/country-autocomplete.component.html b/ui-ngx/src/app/shared/components/country-autocomplete.component.html
index befb160df6..1e3ffecac5 100644
--- a/ui-ngx/src/app/shared/components/country-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/country-autocomplete.component.html
@@ -29,38 +29,51 @@
          (focusin)="onFocus()"
          (blur)="checkInputAndAutoSelect()"
          [matAutocomplete]="countryAutocomplete">
-  <button *ngIf="countryFormGroup.get('country').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (countryFormGroup.get('country').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete class="tb-autocomplete"
                     #countryAutocomplete="matAutocomplete"
                     [displayWith]="displayCountryFn">
-    <mat-option *ngFor="let country of filteredCountries | async" [value]="country">
-      <span style="font-size: 20px;padding-right: 4px;">{{country.flag}}</span>
-      <span [innerHTML]="country.name | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredCountries | async)?.length" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span translate>contact.no-country-found</span>
-        </div>
-        <ng-template #searchNotEmpty>
-          <span>
+    @for (country of filteredCountries | async; track country) {
+      <mat-option [value]="country">
+        <span style="font-size: 20px;padding-right: 4px;">{{country.flag}}</span>
+        <span [innerHTML]="country.name | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if (!(filteredCountries | async)?.length) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span translate>contact.no-country-found</span>
+            </div>
+          } @else {
+            <span>
               {{ 'contact.no-country-matching' | translate:
-            {country: (searchText | truncate: true: 6: &apos;...&apos;)} }}
-          </span>
-        </ng-template>
-      </div>
-    </mat-option>
+              {country: (searchText | truncate: true: 6: &apos;...&apos;)} }}
+            </span>
+          }
+        </div>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-hint *ngIf="autocompleteHint">{{ autocompleteHint }}</mat-hint>
-  <mat-error *ngIf="countryFormGroup.get('country').hasError('required')">
-    {{ requiredText }}
-  </mat-error>
-  <mat-error *ngIf="countryFormGroup.get('country').hasError('objectRequired')">
-    {{ objectRequiredText }}
-  </mat-error>
+  @if (autocompleteHint) {
+    <mat-hint>{{ autocompleteHint }}</mat-hint>
+  }
+  @if (countryFormGroup.get('country').hasError('required')) {
+    <mat-error>
+      {{ requiredText }}
+    </mat-error>
+  }
+  @if (countryFormGroup.get('country').hasError('objectRequired')) {
+    <mat-error>
+      {{ objectRequiredText }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/css.component.html b/ui-ngx/src/app/shared/components/css.component.html
index 9729b97e06..b0050c974f 100644
--- a/ui-ngx/src/app/shared/components/css.component.html
+++ b/ui-ngx/src/app/shared/components/css.component.html
@@ -21,9 +21,11 @@
   <div style="height: 40px;" class="tb-css-toolbar flex flex-row items-center justify-start">
     <label class="tb-title no-padding" [class]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
     <span class="flex-1"></span>
-    <button type='button' *ngIf="!disabled" mat-button class="tidy" (click)="beautifyCss()">
-      {{'js-func.tidy' | translate }}
-    </button>
+    @if (!disabled) {
+      <button type='button' mat-button class="tidy" (click)="beautifyCss()">
+        {{'js-func.tidy' | translate }}
+      </button>
+    }
     <fieldset style="width: initial">
       <div matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
            matTooltipPosition="above"
diff --git a/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html b/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
index 751665e57f..b3bcad6e3b 100644
--- a/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
@@ -18,11 +18,13 @@
 <mat-form-field [formGroup]="selectDashboardFormGroup"
                 [class]="{'tb-inline-field': inlineField, 'flex': inlineField,
                           'tb-suffix-absolute': (inlineField && !selectDashboardFormGroup.get('dashboard').value)}"
-                class="mat-block"
-                [floatLabel]="floatLabel"
-                [appearance]="inlineField ? 'outline' : appearance"
-                [subscriptSizing]="inlineField ? 'dynamic' : subscriptSizing">
-  <mat-label *ngIf="!inlineField && label">{{ label }}</mat-label>
+  class="mat-block"
+  [floatLabel]="floatLabel"
+  [appearance]="inlineField ? 'outline' : appearance"
+  [subscriptSizing]="inlineField ? 'dynamic' : subscriptSizing">
+  @if (!inlineField && label) {
+    <mat-label>{{ label }}</mat-label>
+  }
   <input matInput type="text"
          #dashboardInput
          placeholder="{{ placeholder }}"
@@ -31,50 +33,64 @@
          [required]="required"
          [matAutocomplete]="dashboardAutocomplete"
          [class.!hidden]="useDashboardLink && disabled && selectDashboardFormGroup.get('dashboard').value">
-  <a *ngIf="useDashboardLink && selectDashboardFormGroup.get('dashboard').value && disabled"
-     [attr.aria-label]="'dashboard.open-dashboard' | translate"
-     [routerLink]=dashboardURL>
-    {{ displayDashboardFn(selectDashboardFormGroup.get('dashboard').value) | customTranslate }}
-  </a>
-  <button *ngIf="selectDashboardFormGroup.get('dashboard').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
-  <mat-icon matSuffix
-            matTooltipPosition="above"
-            matTooltipClass="tb-error-tooltip"
-            [matTooltip]="requiredText | translate"
-            *ngIf="inlineField && requiredText && selectDashboardFormGroup.get('dashboard').hasError('required')
-                            && selectDashboardFormGroup.get('dashboard').touched"
-            class="tb-error">
-    warning
-  </mat-icon>
+  @if (useDashboardLink && selectDashboardFormGroup.get('dashboard').value && disabled) {
+    <a
+      [attr.aria-label]="'dashboard.open-dashboard' | translate"
+      [routerLink]=dashboardURL>
+      {{ displayDashboardFn(selectDashboardFormGroup.get('dashboard').value) | customTranslate }}
+    </a>
+  }
+  @if (selectDashboardFormGroup.get('dashboard').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
+  @if (inlineField && requiredText && selectDashboardFormGroup.get('dashboard').hasError('required')
+    && selectDashboardFormGroup.get('dashboard').touched) {
+    <mat-icon matSuffix
+              matTooltipPosition="above"
+              matTooltipClass="tb-error-tooltip"
+              [matTooltip]="requiredText | translate"
+              class="tb-error">
+      warning
+    </mat-icon>
+  }
   <mat-autocomplete
     class="tb-autocomplete"
     #dashboardAutocomplete="matAutocomplete"
     [displayWith]="displayDashboardFn">
-    <mat-option *ngFor="let dashboard of filteredDashboards | async" [value]="dashboard">
-      <span [innerHTML]="dashboard.title | customTranslate | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredDashboards | async)?.length" [value]="null">
-      <div (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span>{{ 'dashboard.no-dashboards-text' | translate }}</span>
+    @for (dashboard of filteredDashboards | async; track dashboard) {
+      <mat-option [value]="dashboard">
+        <span [innerHTML]="dashboard.title | customTranslate | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if (!(filteredDashboards | async)?.length) {
+      <mat-option [value]="null">
+        <div (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span>{{ 'dashboard.no-dashboards-text' | translate }}</span>
+            </div>
+          } @else {
+            <span>
+              {{ translate.get('dashboard.no-dashboards-matching', {entity: searchText}) | async }}
+            </span>
+          }
         </div>
-        <ng-template #searchNotEmpty>
-          <span>
-          {{ translate.get('dashboard.no-dashboards-matching', {entity: searchText}) | async }}
-          </span>
-        </ng-template>
-      </div>
-    </mat-option>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="!inlineField">
-    <ng-content select="[tb-error]"></ng-content>
-  </mat-error>
-  <mat-hint *ngIf="!inlineField">
-    <ng-content select="[tb-hint]"></ng-content>
-  </mat-hint>
+  @if (!inlineField) {
+    <mat-error>
+      <ng-content select="[tb-error]"></ng-content>
+    </mat-error>
+  }
+  @if (!inlineField) {
+    <mat-hint>
+      <ng-content select="[tb-hint]"></ng-content>
+    </mat-hint>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/dashboard-select-panel.component.html b/ui-ngx/src/app/shared/components/dashboard-select-panel.component.html
index b26352b817..2342210dba 100644
--- a/ui-ngx/src/app/shared/components/dashboard-select-panel.component.html
+++ b/ui-ngx/src/app/shared/components/dashboard-select-panel.component.html
@@ -20,9 +20,11 @@
     <mat-label>{{'dashboard.select-dashboard' | translate}}</mat-label>
     <mat-select matInput [(ngModel)]="dashboardId"
                 (ngModelChange)="dashboardSelected(dashboardId)">
-      <mat-option *ngFor="let dashboard of dashboards$ | async" [value]="dashboard.id.id">
-        {{dashboard.title}}
-      </mat-option>
+      @for (dashboard of dashboards$ | async; track dashboard) {
+        <mat-option [value]="dashboard.id.id">
+          {{dashboard.title}}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dashboard-select.component.html b/ui-ngx/src/app/shared/components/dashboard-select.component.html
index f3b278cd59..b617afe9d1 100644
--- a/ui-ngx/src/app/shared/components/dashboard-select.component.html
+++ b/ui-ngx/src/app/shared/components/dashboard-select.component.html
@@ -20,9 +20,11 @@
             [disabled]="disabled"
             [(ngModel)]="dashboardId"
             (ngModelChange)="dashboardIdChanged()">
-  <mat-option *ngFor="let dashboard of dashboards$ | async" [value]="dashboard.id.id">
-    {{dashboard.title}}
-  </mat-option>
+  @for (dashboard of dashboards$ | async; track dashboard) {
+    <mat-option [value]="dashboard.id.id">
+      {{dashboard.title}}
+    </mat-option>
+  }
 </mat-select>
 <section class="tb-dashboard-select gt-md:!hidden">
   <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/components/dashboard-state-autocomplete.component.html b/ui-ngx/src/app/shared/components/dashboard-state-autocomplete.component.html
index f73f0403b6..a072051982 100644
--- a/ui-ngx/src/app/shared/components/dashboard-state-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/dashboard-state-autocomplete.component.html
@@ -23,20 +23,26 @@
          [required]="required"
          (focus)="onFocus()"
          [matAutocomplete]="dashboardStateAutocomplete">
-  <button *ngIf="selectDashboardStateFormGroup.get('dashboardStateId').value"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (selectDashboardStateFormGroup.get('dashboardStateId').value) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete
     class="tb-autocomplete"
     #dashboardStateAutocomplete="matAutocomplete">
-    <mat-option *ngFor="let state of filteredStatesDashboard$ | async" [value]="state">
-      <span [innerHTML]="state | highlight:searchText"></span>
-    </mat-option>
+    @for (state of filteredStatesDashboard$ | async; track state) {
+      <mat-option [value]="state">
+        <span [innerHTML]="state | highlight:searchText"></span>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="selectDashboardStateFormGroup.get('dashboardStateId').hasError('required')">
-    {{ 'widget-action.target-dashboard-state-required' | translate }}
-  </mat-error>
+  @if (selectDashboardStateFormGroup.get('dashboardStateId').hasError('required')) {
+    <mat-error>
+      {{ 'widget-action.target-dashboard-state-required' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
index 0778e2ecd6..d2e07083f6 100644
--- a/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
@@ -16,12 +16,11 @@
 
 -->
 <h2 mat-dialog-title>{{data.title}}</h2>
-<ng-container *ngIf="data.textMode; else htmlMode">
+@if (data.textMode) {
   <div mat-dialog-content [innerText]="data.message"></div>
-</ng-container>
-<ng-template #htmlMode>
+} @else {
   <div mat-dialog-content [innerHTML]="data.message | safe:'html'"></div>
-</ng-template>
+}
 <div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.ts b/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.ts
index fe173be672..b50670e693 100644
--- a/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.ts
+++ b/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.ts
@@ -18,7 +18,6 @@ import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { SharedModule } from '@shared/shared.module';
 import { ImportExportService } from '@shared/import-export/import-export.service';
-import { CommonModule } from '@angular/common';
 import { entityTypeTranslations } from '@shared/models/entity-type.models';
 import { EntityInfoData, VersionedEntity } from '@shared/models/entity.models';
 import { EntityId } from '@shared/models/id/entity-id';
@@ -34,9 +33,8 @@ interface EntityConflictDialogData {
     templateUrl: 'entity-conflict-dialog.component.html',
     styleUrls: ['./entity-conflict-dialog.component.scss'],
     imports: [
-        CommonModule,
-        SharedModule,
-    ]
+    SharedModule
+]
 })
 export class EntityConflictDialogComponent {
 
diff --git a/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html
index 379a7266db..73c19ea831 100644
--- a/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html
@@ -20,10 +20,12 @@
   <div>{{ message }}</div>
   <div class="error-message-title" translate>dialog.error-message-title</div>
   <div class="error-message-content"> {{ errorMessage }} </div>
-  <mat-expansion-panel *ngIf="errorDetails">
-    <mat-expansion-panel-header>{{ 'dialog.error-details-title' | translate }}</mat-expansion-panel-header>
-    <small class="error-details-content" [innerHTML]="errorDetails"></small>
-  </mat-expansion-panel>
+  @if (errorDetails) {
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>{{ 'dialog.error-details-title' | translate }}</mat-expansion-panel-header>
+      <small class="error-details-content" [innerHTML]="errorDetails"></small>
+    </mat-expansion-panel>
+  }
 </div>
 <div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
index 8a576133f9..6624bd5e5d 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
@@ -22,7 +22,9 @@
                 [appearance]="inlineField ? 'outline' : appearance"
                 [subscriptSizing]="inlineField ? 'dynamic' : subscriptSizing"
                 [class]="additionalClasses">
-  <mat-label *ngIf="!inlineField">{{ label | translate }}</mat-label>
+  @if (!inlineField) {
+    <mat-label>{{ label | translate }}</mat-label>
+  }
   <input matInput type="text"
          #entityInput
          placeholder="{{ placeholder }}"
@@ -31,55 +33,68 @@
          [required]="required"
          [matAutocomplete]="entityAutocomplete"
          [class.!hidden]="showEntityLink">
-  <a *ngIf="showEntityLink" aria-label="Open entity details page" [routerLink]=entityURL>
-    {{ displayEntityFn(selectEntityFormGroup.get('entity').value) }}
-  </a>
-  <button *ngIf="selectEntityFormGroup.get('entity').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
-  <button mat-button color="primary" matSuffix
-          type="button"
-          *ngIf="allowCreateNew && !selectEntityFormGroup.get('entity').value && !disabled"
-          (click)="createNewEntity($event)">
-    <span style="white-space: nowrap">{{ 'entity.create-new' | translate }}</span>
-  </button>
-  <mat-icon matSuffix
-            matTooltipPosition="above"
-            matTooltipClass="tb-error-tooltip"
-            [matTooltip]="requiredErrorText | translate"
-            *ngIf="inlineField && selectEntityFormGroup.get('entity').hasError('required')
-                            && selectEntityFormGroup.get('entity').touched"
-            class="tb-error">
-    warning
-  </mat-icon>
+  @if (showEntityLink) {
+    <a aria-label="Open entity details page" [routerLink]=entityURL>
+      {{ displayEntityFn(selectEntityFormGroup.get('entity').value) }}
+    </a>
+  }
+  @if (selectEntityFormGroup.get('entity').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
+  @if (allowCreateNew && !selectEntityFormGroup.get('entity').value && !disabled) {
+    <button mat-button color="primary" matSuffix
+            type="button"
+            (click)="createNewEntity($event)">
+      <span style="white-space: nowrap">{{ 'entity.create-new' | translate }}</span>
+    </button>
+  }
+  @if (inlineField && selectEntityFormGroup.get('entity').hasError('required')
+    && selectEntityFormGroup.get('entity').touched) {
+    <mat-icon matSuffix
+              matTooltipPosition="above"
+              matTooltipClass="tb-error-tooltip"
+              [matTooltip]="requiredErrorText | translate"
+              class="tb-error">
+      warning
+    </mat-icon>
+  }
   <mat-autocomplete class="tb-autocomplete"
                     #entityAutocomplete="matAutocomplete"
                     [displayWith]="displayEntityFn">
-    <mat-option *ngFor="let entity of filteredEntities | async" [value]="entity">
-      <span [innerHTML]="displayEntityFn(entity) | highlight:searchText:true:'ig'"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredEntities | async)?.length" [value]="null">
-      <div (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span>{{ notFoundEntities | translate }}</span>
-        </div>
-        <ng-template #searchNotEmpty>
-          <span>
-              {{ noEntitiesMatchingText | translate: {entity: searchText} }}
-          </span>
-          @if (allowCreateNew) {
+    @for (entity of filteredEntities | async; track entity) {
+      <mat-option [value]="entity">
+        <span [innerHTML]="displayEntityFn(entity) | highlight:searchText:true:'ig'"></span>
+      </mat-option>
+    }
+    @if (!(filteredEntities | async)?.length) {
+      <mat-option [value]="null">
+        <div (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span>{{ notFoundEntities | translate }}</span>
+            </div>
+          } @else {
             <span>
-              <a translate (click)="createNewEntity($event, searchText)">entity.create-new-key</a>
+              {{ noEntitiesMatchingText | translate: {entity: searchText} }}
             </span>
+            @if (allowCreateNew) {
+              <span>
+                <a translate (click)="createNewEntity($event, searchText)">entity.create-new-key</a>
+              </span>
+            }
           }
-        </ng-template>
-      </div>
-    </mat-option>
+        </div>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="!inlineField && selectEntityFormGroup.get('entity').hasError('required')">
-    {{ requiredErrorText | translate }}
-  </mat-error>
+  @if (!inlineField && selectEntityFormGroup.get('entity').hasError('required')) {
+    <mat-error>
+      {{ requiredErrorText | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-gateway-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-gateway-select.component.html
index f143fd227c..1b4e58c21e 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-gateway-select.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-gateway-select.component.html
@@ -23,34 +23,43 @@
          (keydown)="gatewayNameEnter($event)"
          (keypress)="gatewayNameEnter($event)"
          [matAutocomplete]="gatewayAutocomplete"
-  >
-  <button *ngIf="selectDeviceGatewayFormGroup.get('gateway').value && !isStateForm" (click)="clear()"
-          type="button" matSuffix mat-icon-button aria-label="Clear">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+         >
+  @if (selectDeviceGatewayFormGroup.get('gateway').value && !isStateForm) {
+    <button (click)="clear()"
+            type="button" matSuffix mat-icon-button aria-label="Clear">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete class="tb-autocomplete"
                     #gatewayAutocomplete="matAutocomplete"
                     [displayWith]="displayGatewayFn">
-    <mat-option *ngFor="let gateway of filteredGateways | async" [value]="gateway">
-      <span [innerHTML]="gateway.name | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredGateways | async)?.length" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span translate>gateway.no-gateway-found</span>
-        </div>
-        <ng-template #searchNotEmpty>
-          <span translate [translateParams]="{item: searchText | truncate:true:6:&apos;...&apos;}">
-            gateway.no-gateway-matching
+    @for (gateway of filteredGateways | async; track gateway) {
+      <mat-option [value]="gateway">
+        <span [innerHTML]="gateway.name | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if (!(filteredGateways | async)?.length) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span translate>gateway.no-gateway-found</span>
+            </div>
+          } @else {
+            <span translate [translateParams]="{item: searchText | truncate:true:6:&apos;...&apos;}">
+              gateway.no-gateway-matching
+            </span>
+          }
+          <span>
+            <a translate (click)="createGateway($event, searchText)">gateway.create-new-gateway</a>
           </span>
-        </ng-template>
-        <span>
-          <a translate (click)="createGateway($event, searchText)">gateway.create-new-gateway</a>
-        </span>
-      </div>
-    </mat-option>
+        </div>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="selectDeviceGatewayFormGroup.get('gateway').hasError('required')">
-    {{ 'gateway.gateway-name-required' | translate }}
-  </mat-error>
+  @if (selectDeviceGatewayFormGroup.get('gateway').hasError('required')) {
+    <mat-error>
+      {{ 'gateway.gateway-name-required' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html b/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html
index 7f7f3d0b40..53c26e0bff 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html
@@ -17,13 +17,16 @@
 -->
 <mat-form-field [formGroup]="keysListFormGroup" class="mat-block tb-chip-list" [appearance]="appearance">
   <mat-chip-grid #chipList>
-    <mat-chip-row
-      *ngFor="let key of modelValue"
-      [removable]="!disabled"
-      (removed)="remove(key)">
-      {{key}}
-      <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
-    </mat-chip-row>
+    @for (key of modelValue; track key) {
+      <mat-chip-row
+        [removable]="!disabled"
+        (removed)="remove(key)">
+        {{key}}
+        @if (!disabled) {
+          <mat-icon matChipRemove>close</mat-icon>
+        }
+      </mat-chip-row>
+    }
     <input matInput type="text" placeholder="{{ !disabled ? (keysText | translate) : '' }}"
            style="max-width: 200px;"
            #keyInput
@@ -42,8 +45,10 @@
                     class="tb-autocomplete"
                     (optionSelected)="selected($event)"
                     [displayWith]="displayKeyFn">
-    <mat-option *ngFor="let key of filteredKeys | async" [value]="key">
-      <span [innerHTML]="key | highlight:searchText"></span>
-    </mat-option>
+    @for (key of filteredKeys | async; track key) {
+      <mat-option [value]="key">
+        <span [innerHTML]="key | highlight:searchText"></span>
+      </mat-option>
+    }
   </mat-autocomplete>
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html
index 0469adca74..6a94f1fc04 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html
@@ -16,27 +16,29 @@
 
 -->
 <div class="tb-entity-list-select flex flex-row" [formGroup]="entityListSelectFormGroup">
-  <tb-entity-type-select
-    [inlineField]="inlineField"
-    [class.flex-1]="inlineField && !modelValue.entityType"
-    style="min-width: 100px; padding-right: 8px;"
-    *ngIf="displayEntityTypeSelect"
-    [showLabel]="true"
-    [required]="required"
-    [useAliasEntityTypes]="useAliasEntityTypes"
-    [allowedEntityTypes]="allowedEntityTypes"
-    [filterAllowedEntityTypes]="filterAllowedEntityTypes"
-    [additionEntityTypes]="additionEntityTypes"
-    formControlName="entityType">
-  </tb-entity-type-select>
-  <tb-entity-list
-    class="flex-1"
-    [inlineField]="inlineField"
-    [class.tb-not-empty]="modelValue.ids?.length > 0"
-    *ngIf="modelValue.entityType"
-    [required]="required"
-    [entityType]="modelValue.entityType"
-    [useEntityDisplayName]="useEntityDisplayName"
-    formControlName="entityIds">
-  </tb-entity-list>
+  @if (displayEntityTypeSelect) {
+    <tb-entity-type-select
+      [inlineField]="inlineField"
+      [class.flex-1]="inlineField && !modelValue.entityType"
+      style="min-width: 100px; padding-right: 8px;"
+      [showLabel]="true"
+      [required]="required"
+      [useAliasEntityTypes]="useAliasEntityTypes"
+      [allowedEntityTypes]="allowedEntityTypes"
+      [filterAllowedEntityTypes]="filterAllowedEntityTypes"
+      [additionEntityTypes]="additionEntityTypes"
+      formControlName="entityType">
+    </tb-entity-type-select>
+  }
+  @if (modelValue.entityType) {
+    <tb-entity-list
+      class="flex-1"
+      [inlineField]="inlineField"
+      [class.tb-not-empty]="modelValue.ids?.length > 0"
+      [required]="required"
+      [entityType]="modelValue.entityType"
+      [useEntityDisplayName]="useEntityDisplayName"
+      formControlName="entityIds">
+    </tb-entity-list>
+  }
 </div>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-list.component.html b/ui-ngx/src/app/shared/components/entity/entity-list.component.html
index 589019b9fa..8781908d82 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-list.component.html
@@ -21,16 +21,21 @@
                 [class.tb-chips]="inlineField"
                 [class.flex]="inlineField"
                 [subscriptSizing]="inlineField ? 'dynamic' : subscriptSizing">
-  <mat-label *ngIf="!inlineField && labelText">{{ labelText }}</mat-label>
+  @if (!inlineField && labelText) {
+    <mat-label>{{ labelText }}</mat-label>
+  }
   <mat-chip-grid #chipList formControlName="entities">
-    <mat-chip-row
-      *ngFor="let entity of entities"
-      class="tb-chip-row-ellipsis"
-      [removable]="!disabled"
-      (removed)="remove(entity)">
-      {{ displayEntityFn(entity) }}
-      <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
-    </mat-chip-row>
+    @for (entity of entities; track entity) {
+      <mat-chip-row
+        class="tb-chip-row-ellipsis"
+        [removable]="!disabled"
+        (removed)="remove(entity)">
+        {{ displayEntityFn(entity) }}
+        @if (!disabled) {
+          <mat-icon matChipRemove>close</mat-icon>
+        }
+      </mat-chip-row>
+    }
     <input matInput type="text" placeholder="{{ !disabled ? placeholderText : '' }}"
            #entityInput
            (focusin)="onFocus()"
@@ -40,43 +45,53 @@
            [matAutocompleteConnectedTo]="origin"
            [matAutocomplete]="entityAutocomplete"
            [matChipInputFor]="chipList">
-    <button mat-button color="primary" matSuffix
-            type="button"
-            *ngIf="allowCreateNew && !disabled"
-            (click)="createNewEntity($event)">
-      <span style="white-space: nowrap">{{ 'entity.create-new' | translate }}</span>
-    </button>
+    @if (allowCreateNew && !disabled) {
+      <button mat-button color="primary" matSuffix
+              type="button"
+              (click)="createNewEntity($event)">
+        <span style="white-space: nowrap">{{ 'entity.create-new' | translate }}</span>
+      </button>
+    }
   </mat-chip-grid>
   <mat-autocomplete #entityAutocomplete="matAutocomplete"
                     class="tb-autocomplete"
                     [displayWith]="displayEntityFn">
-    <mat-option *ngFor="let entity of filteredEntities | async" [value]="entity">
-      <span [innerHTML]="displayEntityFn(entity) | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredEntities | async)?.length" [value]="null">
-      <div (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span>{{ 'entity.no-entities-text' | translate }}</span>
-        </div>
-        <ng-template #searchNotEmpty>
-          <span>
-          {{ 'entity.no-entities-matching' | translate: {entity: searchText} }}
-          </span>
-          @if (allowCreateNew) {
+    @for (entity of filteredEntities | async; track entity) {
+      <mat-option [value]="entity">
+        <span [innerHTML]="displayEntityFn(entity) | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if (!(filteredEntities | async)?.length) {
+      <mat-option [value]="null">
+        <div (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span>{{ 'entity.no-entities-text' | translate }}</span>
+            </div>
+          } @else {
             <span>
-              <a translate (click)="createNewEntity($event, searchText)">entity.create-new-key</a>
+              {{ 'entity.no-entities-matching' | translate: {entity: searchText} }}
             </span>
+            @if (allowCreateNew) {
+              <span>
+                <a translate (click)="createNewEntity($event, searchText)">entity.create-new-key</a>
+              </span>
+            }
           }
-        </ng-template>
-      </div>
-    </mat-option>
+        </div>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-hint *ngIf="!inlineField && hint">
-    {{ hint }}
-  </mat-hint>
-  <mat-error *ngIf="!inlineField && entityListFormGroup.get('entities').hasError('required')">
-    {{ requiredText }}
-  </mat-error>
+  @if (!inlineField && hint) {
+    <mat-hint>
+      {{ hint }}
+    </mat-hint>
+  }
+  @if (!inlineField && entityListFormGroup.get('entities').hasError('required')) {
+    <mat-error>
+      {{ requiredText }}
+    </mat-error>
+  }
   <div matSuffix>
     <ng-content select="[matSuffix]"></ng-content>
   </div>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-select.component.html
index 59d5972c65..e76db03f77 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-select.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-select.component.html
@@ -16,28 +16,30 @@
 
 -->
 <div [formGroup]="entitySelectFormGroup" class="flex flex-row gap-4 xs:flex-col xs:gap-0">
-  <tb-entity-type-select
-    *ngIf="displayEntityTypeSelect"
-    class="flex-1"
-    [label]="entityTypeLabel ?? null"
-    [appearance]="appearance"
-    [showLabel]="true"
-    [required]="required"
-    [useAliasEntityTypes]="useAliasEntityTypes"
-    [allowedEntityTypes]="allowedEntityTypes"
-    [additionEntityTypes]="additionEntityTypes"
-    [filterAllowedEntityTypes]="filterAllowedEntityTypes"
-    formControlName="entityType">
-  </tb-entity-type-select>
-  <tb-entity-autocomplete
-    #entityAutocompleteComponent
-    *ngIf="modelValue.entityType && !entityTypeNullUUID.has(modelValue.entityType)"
-    class="flex-1"
-    [appearance]="appearance"
-    [required]="required && modelValue.entityType !== AliasEntityType.CURRENT_CUSTOMER"
-    [entityType]="modelValue.entityType"
-    [useEntityDisplayName]="useEntityDisplayName"
-    (entityChanged)="changeEntity($event)"
-    formControlName="entityId">
-  </tb-entity-autocomplete>
+  @if (displayEntityTypeSelect) {
+    <tb-entity-type-select
+      class="flex-1"
+      [label]="entityTypeLabel ?? null"
+      [appearance]="appearance"
+      [showLabel]="true"
+      [required]="required"
+      [useAliasEntityTypes]="useAliasEntityTypes"
+      [allowedEntityTypes]="allowedEntityTypes"
+      [additionEntityTypes]="additionEntityTypes"
+      [filterAllowedEntityTypes]="filterAllowedEntityTypes"
+      formControlName="entityType">
+    </tb-entity-type-select>
+  }
+  @if (modelValue.entityType && !entityTypeNullUUID.has(modelValue.entityType)) {
+    <tb-entity-autocomplete
+      #entityAutocompleteComponent
+      class="flex-1"
+      [appearance]="appearance"
+      [required]="required && modelValue.entityType !== AliasEntityType.CURRENT_CUSTOMER"
+      [entityType]="modelValue.entityType"
+      [useEntityDisplayName]="useEntityDisplayName"
+      (entityChanged)="changeEntity($event)"
+      formControlName="entityId">
+    </tb-entity-autocomplete>
+  }
 </div>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-subtype-autocomplete.component.html b/ui-ngx/src/app/shared/components/entity/entity-subtype-autocomplete.component.html
index 942ef0632b..117742515b 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-autocomplete.component.html
@@ -23,24 +23,32 @@
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="subTypeAutocomplete">
-  <button *ngIf="subTypeFormGroup.get('subType').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (subTypeFormGroup.get('subType').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete
     class="tb-autocomplete"
     #subTypeAutocomplete="matAutocomplete"
     [displayWith]="displaySubTypeFn">
-    <mat-option *ngFor="let subType of filteredSubTypes | async" [value]="subType">
-      <span [innerHTML]="subType | highlight:searchText"></span>
-    </mat-option>
+    @for (subType of filteredSubTypes | async; track subType) {
+      <mat-option [value]="subType">
+        <span [innerHTML]="subType | highlight:searchText"></span>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="subTypeFormGroup.get('subType').hasError('required')">
-    {{ entitySubtypeRequiredText | translate }}
-  </mat-error>
-  <mat-error *ngIf="subTypeFormGroup.get('subType').hasError('maxlength')">
-    {{ entitySubtypeMaxLength | translate }}
-  </mat-error>
+  @if (subTypeFormGroup.get('subType').hasError('required')) {
+    <mat-error>
+      {{ entitySubtypeRequiredText | translate }}
+    </mat-error>
+  }
+  @if (subTypeFormGroup.get('subType').hasError('maxlength')) {
+    <mat-error>
+      {{ entitySubtypeMaxLength | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html b/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html
index b6320bacf7..261ecea281 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html
@@ -18,16 +18,21 @@
 <mat-form-field [formGroup]="entitySubtypeListFormGroup" [floatLabel]="floatLabel"
                 [appearance]="appearance" [subscriptSizing]="subscriptSizing"
                 [class.tb-chip-list]="!label" [class]="additionalClasses" class="mat-block">
-  <mat-label *ngIf="label">{{ label }}</mat-label>
+  @if (label) {
+    <mat-label>{{ label }}</mat-label>
+  }
   <mat-chip-grid #chipList formControlName="entitySubtypeList">
-    <mat-chip-row
-      *ngFor="let entitySubtype of entitySubtypeList"
-      class="tb-chip-row-ellipsis"
-      [removable]="!disabled"
-      (removed)="remove(entitySubtype)">
-      {{customTranslate(entitySubtype)}}
-      <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
-    </mat-chip-row>
+    @for (entitySubtype of entitySubtypeList; track entitySubtype) {
+      <mat-chip-row
+        class="tb-chip-row-ellipsis"
+        [removable]="!disabled"
+        (removed)="remove(entitySubtype)">
+        {{customTranslate(entitySubtype)}}
+        @if (!disabled) {
+          <mat-icon matChipRemove>close</mat-icon>
+        }
+      </mat-chip-row>
+    }
     <input matInput type="text" placeholder="{{ !disabled ? ((!entitySubtypeList || !entitySubtypeList.length) ? placeholder : secondaryPlaceholder) : '' }}"
            style="max-width: 200px;"
            #entitySubtypeInput
@@ -46,14 +51,18 @@
                     class="tb-autocomplete"
                     (optionSelected)="selected($event)"
                     [displayWith]="displayEntitySubtypeFn">
-    <mat-option *ngFor="let entitySubtype of filteredEntitySubtypeList | async" [value]="entitySubtype">
-      <span [innerHTML]="entitySubtype | customTranslate | highlight:searchText"></span>
-    </mat-option>
+    @for (entitySubtype of filteredEntitySubtypeList | async; track entitySubtype) {
+      <mat-option [value]="entitySubtype">
+        <span [innerHTML]="entitySubtype | customTranslate | highlight:searchText"></span>
+      </mat-option>
+    }
   </mat-autocomplete>
   <div matSuffix>
     <ng-content select="[matSuffix]"></ng-content>
   </div>
-  <mat-error *ngIf="entitySubtypeListFormGroup.get('entitySubtypeList').hasError('required')">
-    {{ subtypeListEmptyText | translate }}
-  </mat-error>
+  @if (entitySubtypeListFormGroup.get('entitySubtypeList').hasError('required')) {
+    <mat-error>
+      {{ subtypeListEmptyText | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html
index f9fa081c4d..1f62aa4f7b 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html
@@ -16,13 +16,19 @@
 
 -->
 <mat-form-field [formGroup]="subTypeFormGroup" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
-  <mat-label *ngIf="showLabel">{{ entitySubtypeTitle | translate }}</mat-label>
+  @if (showLabel) {
+    <mat-label>{{ entitySubtypeTitle | translate }}</mat-label>
+  }
   <mat-select [class.!hidden]="!subTypesLoaded" class="tb-entity-subtype-select" formControlName="subType">
-    <mat-option *ngFor="let subType of subTypesOptions | async" [value]="subType">
-      {{ displaySubTypeFn(subType) }}
-    </mat-option>
+    @for (subType of subTypesOptions | async; track subType) {
+      <mat-option [value]="subType">
+        {{ displaySubTypeFn(subType) }}
+      </mat-option>
+    }
   </mat-select>
-  <mat-error *ngIf="subTypeFormGroup.get('subType').hasError('required')">
-    {{ entitySubtypeRequiredText | translate }}
-  </mat-error>
+  @if (subTypeFormGroup.get('subType').hasError('required')) {
+    <mat-error>
+      {{ entitySubtypeRequiredText | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-type-list.component.html b/ui-ngx/src/app/shared/components/entity/entity-type-list.component.html
index 15b4c6ae5e..f929e34199 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-type-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-type-list.component.html
@@ -20,15 +20,20 @@
                 class="mat-block" [class]="additionalClasses"
                 [floatLabel]="floatLabel"
                 subscriptSizing="{{ subscriptSizing }}">
-  <mat-label *ngIf="label"> {{ label }}</mat-label>
+  @if (label) {
+    <mat-label> {{ label }}</mat-label>
+  }
   <mat-chip-grid #chipList formControlName="entityTypeList">
-    <mat-chip-row
-      *ngFor="let entityType of entityTypeList"
-      [removable]="!disabled"
-      (removed)="remove(entityType)">
-      {{entityType.name}}
-      <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
-    </mat-chip-row>
+    @for (entityType of entityTypeList; track entityType) {
+      <mat-chip-row
+        [removable]="!disabled"
+        (removed)="remove(entityType)">
+        {{entityType.name}}
+        @if (!disabled) {
+          <mat-icon matChipRemove>close</mat-icon>
+        }
+      </mat-chip-row>
+    }
     <input matInput type="text" placeholder="{{ !disabled ? ((!entityTypeList || !entityTypeList.length) ? placeholder : secondaryPlaceholder) : '' }}"
            style="max-width: 200px;"
            #entityTypeInput
@@ -43,19 +48,25 @@
   <mat-autocomplete #entityTypeAutocomplete="matAutocomplete"
                     class="tb-autocomplete"
                     [displayWith]="displayEntityTypeFn">
-    <mat-option *ngFor="let entityType of filteredEntityTypeList | async" [value]="entityType">
-      <span [innerHTML]="entityType.name | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredEntityTypeList | async)?.length" [value]="null">
-      <span>
+    @for (entityType of filteredEntityTypeList | async; track entityType) {
+      <mat-option [value]="entityType">
+        <span [innerHTML]="entityType.name | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if (!(filteredEntityTypeList | async)?.length) {
+      <mat-option [value]="null">
+        <span>
           {{ translate.get('entity.no-entity-types-matching', {entityType: searchText}) | async }}
-      </span>
-    </mat-option>
+        </span>
+      </mat-option>
+    }
   </mat-autocomplete>
   <div matSuffix>
     <ng-content select="[matSuffix]"></ng-content>
   </div>
-  <mat-error *ngIf="entityTypeListFormGroup.get('entityTypeList').hasError('required')">
-    {{ 'entity.entity-type-list-required' | translate }}
-  </mat-error>
+  @if (entityTypeListFormGroup.get('entityTypeList').hasError('required')) {
+    <mat-error>
+      {{ 'entity.entity-type-list-required' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.html
index 65e3615887..e13e11bde0 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.html
@@ -18,13 +18,19 @@
 <mat-form-field [formGroup]="entityTypeFormGroup"
                 [subscriptSizing]="inlineField ? 'dynamic' : subscriptSizing"
                 [appearance]="inlineField ? 'outline' : appearance">
-  <mat-label *ngIf="showLabel && !inlineField">{{ label }}</mat-label>
+  @if (showLabel && !inlineField) {
+    <mat-label>{{ label }}</mat-label>
+  }
   <mat-select [required]="required" formControlName="entityType">
-    <mat-option *ngFor="let type of entityTypes" [value]="type">
-      {{ displayEntityTypeFn(type) }}
-    </mat-option>
+    @for (type of entityTypes; track type) {
+      <mat-option [value]="type">
+        {{ displayEntityTypeFn(type) }}
+      </mat-option>
+    }
   </mat-select>
-  <mat-error *ngIf="!inlineField && entityTypeFormGroup.get('entityType').hasError('required')">
-    {{ 'entity.type-required' | translate }}
-  </mat-error>
+  @if (!inlineField && entityTypeFormGroup.get('entityType').hasError('required')) {
+    <mat-error>
+      {{ 'entity.type-required' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts
index ffc62ee7c2..99d3a83c64 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts
@@ -173,9 +173,9 @@ export class EntityTypeSelectComponent implements ControlValueAccessor, OnInit,
     }
   }
 
-  displayEntityTypeFn(entityType?: EntityType | AliasEntityType | null): string | undefined {
-    if (this.additionEntityTypes[entityType]) {
-      return this.additionEntityTypes[entityType];
+  displayEntityTypeFn(entityType?: EntityType | AliasEntityType | string | null): string | undefined {
+    if (this.additionEntityTypes[entityType as EntityType]) {
+      return this.additionEntityTypes[entityType as EntityType];
     } else if (entityType) {
       return this.translate.instant(entityTypeTranslations.get(entityType as EntityType).type);
     } else {
diff --git a/ui-ngx/src/app/shared/components/file-input.component.html b/ui-ngx/src/app/shared/components/file-input.component.html
index 86e1d4c7e5..44b5442fac 100644
--- a/ui-ngx/src/app/shared/components/file-input.component.html
+++ b/ui-ngx/src/app/shared/components/file-input.component.html
@@ -16,11 +16,13 @@
 
 -->
 <div class="tb-container" [class.tb-button]="asButton">
-  <label class="tb-title" *ngIf="label"
-         [class.tb-required]="!disabled && required"
-         [class.pointer-event]="hint"
-         tb-hint-tooltip-icon="{{ hint }}">{{ label }}
-  </label>
+  @if (label) {
+    <label class="tb-title"
+           [class.tb-required]="!disabled && required"
+           [class.pointer-event]="hint"
+           tb-hint-tooltip-icon="{{ hint }}">{{ label }}
+    </label>
+  }
   <ng-container #flow="flow"
                 [flowConfig]="{allowDuplicateUploads: true}">
     <div class="tb-file-select-container">
@@ -43,7 +45,7 @@
             <span class="drop-label-text">{{ dropLabel }}</span>
             <button type="button" mat-button color="primary" class="browse-file" [class]="uploadButtonClass">
               <label
-                for="{{inputId}}">{{ uploadButtonText ? uploadButtonText : ((multipleFile ? 'file-input.browse-files' : 'file-input.browse-file') | translate) }}</label>
+              for="{{inputId}}">{{ uploadButtonText ? uploadButtonText : ((multipleFile ? 'file-input.browse-files' : 'file-input.browse-file') | translate) }}</label>
             </button>
           </div>
           <input class="file-input" flowButton #flowInput type="file" [flow]="flow.flowJs"
@@ -53,9 +55,17 @@
     </div>
   </ng-container>
   <div class="tb-file-info-container">
-    <tb-error *ngIf="!fileName && required && requiredAsError" class="font-medium" error="{{ noFileText | translate }}"></tb-error>
-    <div *ngIf="!fileName && !requiredAsError" class="tb-file-name" tbTruncateWithTooltip translate>{{ noFileText }}</div>
-    <div *ngIf="fileName" class="tb-file-name" tbTruncateWithTooltip>{{ fileName }}</div>
-    <div *ngIf="maxSizeByte && !disabled" class="tb-file-hint" tbTruncateWithTooltip translate [translateParams]="{ size: maxSizeByte | fileSize }">dashboard.maximum-upload-file-size</div>
+    @if (!fileName && required && requiredAsError) {
+      <tb-error class="font-medium" error="{{ noFileText | translate }}"></tb-error>
+    }
+    @if (!fileName && !requiredAsError) {
+      <div class="tb-file-name" tbTruncateWithTooltip translate>{{ noFileText }}</div>
+    }
+    @if (fileName) {
+      <div class="tb-file-name" tbTruncateWithTooltip>{{ fileName }}</div>
+    }
+    @if (maxSizeByte && !disabled) {
+      <div class="tb-file-hint" tbTruncateWithTooltip translate [translateParams]="{ size: maxSizeByte | fileSize }">dashboard.maximum-upload-file-size</div>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/footer-fab-buttons.component.html b/ui-ngx/src/app/shared/components/footer-fab-buttons.component.html
index 1ea0f1d6da..d2d408e9ff 100644
--- a/ui-ngx/src/app/shared/components/footer-fab-buttons.component.html
+++ b/ui-ngx/src/app/shared/components/footer-fab-buttons.component.html
@@ -26,14 +26,16 @@
       <mat-icon [@fabToggler]="{value: fabTogglerState}">{{ footerFabButtons.fabTogglerIcon }}</mat-icon>
     </button>
     <div [@speedDialStagger]="buttons.length">
-      <button *ngFor="let btn of buttons"
-              mat-fab
-              color="accent"
-        matTooltip="{{ btn.name | translate }}"
-        matTooltipPosition="above"
-        (click)="btn.onAction($event)">
-        <mat-icon>{{btn.icon}}</mat-icon>
-      </button>
+      @for (btn of buttons; track btn) {
+        <button
+          mat-fab
+          color="accent"
+          matTooltip="{{ btn.name | translate }}"
+          matTooltipPosition="above"
+          (click)="btn.onAction($event)">
+          <mat-icon>{{btn.icon}}</mat-icon>
+        </button>
+      }
     </div>
   </div>
 </section>
diff --git a/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html b/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html
index d83594e0b7..ef57d199dc 100644
--- a/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html
+++ b/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html
@@ -18,28 +18,31 @@
 <cdk-virtual-scroll-viewport #viewport class="tb-scroll-grid-viewport" [itemSize]="calculatedItemSize"
                              [minBufferPx]="minBuffer" [maxBufferPx]="maxBuffer" appendOnly>
   <ng-container *cdkVirtualFor="let itemsRow of dataSource; let row = index; trackBy: trackByItemsRow">
-    <div *ngIf="itemsRow" class="tb-scroll-grid-items-row" [style]="{gap: gap+'px'}">
-      <div *ngFor="let item of itemsRow; let col = index; trackBy: trackByItem" class="tb-scroll-grid-item-container">
-        <ng-container *ngIf="item === 'loadingCell'">
-          <ng-container *ngTemplateOutlet="loadingCell ? loadingCell : defaultLoadingCell"></ng-container>
-        </ng-container>
-        <ng-container *ngIf="isObject(item)">
-          <ng-container *ngTemplateOutlet="itemCard; context:{ item: item, itemIndex: row * dataSource.currentColumns + col }"></ng-container>
-        </ng-container>
+    @if (itemsRow) {
+      <div class="tb-scroll-grid-items-row" [style]="{gap: gap+'px'}">
+        @for (item of itemsRow; track trackByItem(col, item); let col = $index) {
+          <div class="tb-scroll-grid-item-container">
+            @if (item === 'loadingCell') {
+              <ng-container *ngTemplateOutlet="loadingCell ? loadingCell : defaultLoadingCell"></ng-container>
+            }
+            @if (isObject(item)) {
+              <ng-container *ngTemplateOutlet="itemCard; context:{ item: item, itemIndex: row * dataSource.currentColumns + col }"></ng-container>
+            }
+          </div>
+        }
       </div>
-    </div>
+    }
   </ng-container>
 </cdk-virtual-scroll-viewport>
-<ng-container *ngIf="dataSource.isEmpty">
+@if (dataSource.isEmpty) {
   <ng-container *ngTemplateOutlet="loadingItems"></ng-container>
-</ng-container>
+}
 <ng-template #loadingItems>
-  <ng-container *ngIf="dataSource.initialDataLoading; else emptyData">
+  @if (dataSource.initialDataLoading) {
     <ng-container *ngTemplateOutlet="dataLoading ? dataLoading : defaultDataLoading"></ng-container>
-  </ng-container>
-</ng-template>
-<ng-template #emptyData>
-  <ng-container *ngTemplateOutlet="noData"></ng-container>
+  } @else {
+    <ng-container *ngTemplateOutlet="noData"></ng-container>
+  }
 </ng-template>
 <ng-template #defaultLoadingCell>
   <div class="flex flex-col items-center justify-center" [style]="{minHeight: itemSize + 'px'}">
diff --git a/ui-ngx/src/app/shared/components/help-popup.component.html b/ui-ngx/src/app/shared/components/help-popup.component.html
index bec404b063..65edb22cc3 100644
--- a/ui-ngx/src/app/shared/components/help-popup.component.html
+++ b/ui-ngx/src/app/shared/components/help-popup.component.html
@@ -15,44 +15,54 @@
     limitations under the License.
 
 -->
-<fieldset class="tb-help-popup-button-container" *ngIf="!textMode">
-  <div #toggleHelpButton
-       class="tb-toggle-help-popup-button"
-       matTooltip="{{ helpIconTooltip }}"
-       matTooltipPosition="above"
-       (click)="toggleHelp()">
-    <button mat-icon-button
-            [disabled]="disabled()"
-            color="primary"
-            class="tb-help-popup-button"
-            [class]="helpIconButtonClass"
-            type="button">
-      <tb-icon matButtonIcon>{{popoverVisible ? helpOpenedIcon : helpIcon}}</tb-icon>
-      <div *ngIf="popoverVisible && !popoverReady" class="tb-help-popup-button-loading absolute inset-0 flex items-center justify-center">
-        <mat-spinner mode="indeterminate" diameter="20" strokeWidth="2"></mat-spinner>
-      </div>
-    </button>
-  </div>
-</fieldset>
-<fieldset class="tb-help-popup-button-container" *ngIf="textMode">
-  <div #toggleHelpTextButton
-       class="tb-toggle-help-popup-text-button"
-       (click)="toggleHelp()">
-    <button mat-button
-            [disabled]="disabled()"
-            type="button"
-            color="primary"
-            class="tb-help-popup-text-button"
+@if (!textMode) {
+  <fieldset class="tb-help-popup-button-container">
+    <div #toggleHelpButton
+         class="tb-toggle-help-popup-button"
+         matTooltip="{{ helpIconTooltip }}"
+         matTooltipPosition="above"
+         (click)="toggleHelp()">
+      <button mat-icon-button
+              [disabled]="disabled()"
+              color="primary"
+              class="tb-help-popup-button"
+              [class]="helpIconButtonClass"
+              type="button">
+        <tb-icon matButtonIcon>{{popoverVisible ? helpOpenedIcon : helpIcon}}</tb-icon>
+        @if (popoverVisible && !popoverReady) {
+          <div class="tb-help-popup-button-loading absolute inset-0 flex items-center justify-center">
+            <mat-spinner mode="indeterminate" diameter="20" strokeWidth="2"></mat-spinner>
+          </div>
+        }
+      </button>
+    </div>
+  </fieldset>
+}
+@if (textMode) {
+  <fieldset class="tb-help-popup-button-container">
+    <div #toggleHelpTextButton
+         class="tb-toggle-help-popup-text-button"
+         (click)="toggleHelp()">
+      <button mat-button
+              [disabled]="disabled()"
+              type="button"
+              color="primary"
+              class="tb-help-popup-text-button"
             [class]="{'mat-mdc-outlined-button mdc-button--outlined': popoverVisible && popoverReady,
                       'hint-button': hintMode}">
-      <span>
-        <ng-container *ngIf="triggerSafeHtml">
-          <span [style]="triggerStyle" [innerHTML]="triggerSafeHtml"></span>
-        </ng-container>
-        <mat-icon *ngIf="(!popoverVisible || popoverReady)"
-                  [class]="hintMode ? 'tb-mat-12' : 'tb-mat-16'">open_in_new</mat-icon>
-        <mat-spinner *ngIf="popoverVisible && !popoverReady" mode="indeterminate" [diameter]="hintMode ? 12 : 16" strokeWidth="2"></mat-spinner>
-      </span>
-    </button>
-  </div>
-</fieldset>
+        <span>
+          @if (triggerSafeHtml) {
+            <span [style]="triggerStyle" [innerHTML]="triggerSafeHtml"></span>
+          }
+          @if ((!popoverVisible || popoverReady)) {
+            <mat-icon
+            [class]="hintMode ? 'tb-mat-12' : 'tb-mat-16'">open_in_new</mat-icon>
+          }
+          @if (popoverVisible && !popoverReady) {
+            <mat-spinner mode="indeterminate" [diameter]="hintMode ? 12 : 16" strokeWidth="2"></mat-spinner>
+          }
+        </span>
+      </button>
+    </div>
+  </fieldset>
+}
diff --git a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html
index ae84c5633f..f2f0983975 100644
--- a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html
+++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html
@@ -16,7 +16,8 @@
 
 -->
 <ng-content class="tb-hint-tooltip-content"></ng-content>
-<tb-icon class="tb-hint-tooltip-icon tb-mat-18"
-         *ngIf="tooltipText"
-         matTooltip="{{ tooltipText }}"
-         [matTooltipPosition]="tooltipPosition">{{ hintIcon }}</tb-icon>
+@if (tooltipText) {
+  <tb-icon class="tb-hint-tooltip-icon tb-mat-18"
+           matTooltip="{{ tooltipText }}"
+  [matTooltipPosition]="tooltipPosition">{{ hintIcon }}</tb-icon>
+}
diff --git a/ui-ngx/src/app/shared/components/html.component.html b/ui-ngx/src/app/shared/components/html.component.html
index f17272bf71..6520340374 100644
--- a/ui-ngx/src/app/shared/components/html.component.html
+++ b/ui-ngx/src/app/shared/components/html.component.html
@@ -21,9 +21,11 @@
   <div style="min-height: 40px;" class="tb-html-toolbar flex flex-row items-center justify-start">
     <label class="tb-title no-padding" [class]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
     <span class="flex-1"></span>
-    <button type='button' *ngIf="!disabled" mat-button class="tidy" (click)="beautifyHtml()">
-      {{'js-func.tidy' | translate }}
-    </button>
+    @if (!disabled) {
+      <button type='button' mat-button class="tidy" (click)="beautifyHtml()">
+        {{'js-func.tidy' | translate }}
+      </button>
+    }
     <fieldset style="width: initial">
       <div matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
            matTooltipPosition="above"
diff --git a/ui-ngx/src/app/shared/components/image-input.component.html b/ui-ngx/src/app/shared/components/image-input.component.html
index 99fae6649c..6171d0d8be 100644
--- a/ui-ngx/src/app/shared/components/image-input.component.html
+++ b/ui-ngx/src/app/shared/components/image-input.component.html
@@ -16,55 +16,74 @@
 
 -->
 <div class="tb-container">
-  <label class="tb-title" *ngIf="label" [class]="{'tb-error': !disabled && (required && !safeImageUrl), 'tb-required': !disabled && required}">{{label}}</label>
+  @if (label) {
+    <label class="tb-title" [class]="{'tb-error': !disabled && (required && !safeImageUrl), 'tb-required': !disabled && required}">{{label}}</label>
+  }
   <ng-container #flow="flow"
                 [flowConfig]="{singleFile: true, allowDuplicateUploads: true}">
     <div class="tb-image-select-container">
-      <div class="image-container" *ngIf="showPreview && (safeImageUrl || disabled)" [class]="{'disabled': disabled}">
-        <div class="tb-image-preview-container">
-          <div class="tb-image-preview-text" *ngIf="!safeImageUrl && disabled; else elseBlock">{{ 'dashboard.empty-image' | translate }}</div>
-          <ng-template #elseBlock><img class="tb-image-preview" [src]="safeImageUrl" /></ng-template>
-        </div>
-        <button *ngIf="safeImageUrl && showClearButton && !disabled"
-                mat-icon-button color="primary"
-                class="tb-mat-24"
-                type="button"
-                (click)="clearImage()"
-                matTooltip="{{ 'action.remove' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>close</mat-icon>
-        </button>
-      </div>
-      <div *ngIf="!disabled" class="drop-area tb-flow-drop"
-           flowDrop
-           [flow]="flow.flowJs">
-        <div class="upload-label">
-          <mat-icon class="tb-mat-32">cloud_upload</mat-icon>
-          <div class="upload-text-area">
-            <span class="hide-xs" translate>image-input.drag-and-drop</span>
-            <div class="upload-button-area">
-              <span class="hide-xs" translate>image-input.or</span>
-              <button type="button" mat-button color="primary" class="browse-file">
-                <label for="{{inputId}}">{{'image-input.browse' | translate}}</label>
-              </button>
-              <input class="file-input" flowButton type="file" [flow]="flow.flowJs" [flowAttributes]="{accept: accept}" id="{{inputId}}">
-            </div>
+      @if (showPreview && (safeImageUrl || disabled)) {
+        <div class="image-container" [class]="{'disabled': disabled}">
+          <div class="tb-image-preview-container">
+            @if (!safeImageUrl && disabled) {
+              <div class="tb-image-preview-text">{{ 'dashboard.empty-image' | translate }}</div>
+            } @else {
+              <img class="tb-image-preview" [src]="safeImageUrl" />
+            }
           </div>
-        </div>
-      </div>
-      <button *ngIf="!showPreview && safeImageUrl && showClearButton && !disabled"
+          @if (safeImageUrl && showClearButton && !disabled) {
+            <button
               mat-icon-button color="primary"
               class="tb-mat-24"
               type="button"
               (click)="clearImage()"
               matTooltip="{{ 'action.remove' | translate }}"
               matTooltipPosition="above">
-        <mat-icon>close</mat-icon>
-      </button>
-  </div>
+              <mat-icon>close</mat-icon>
+            </button>
+          }
+        </div>
+      }
+      @if (!disabled) {
+        <div class="drop-area tb-flow-drop"
+             flowDrop
+             [flow]="flow.flowJs">
+          <div class="upload-label">
+            <mat-icon class="tb-mat-32">cloud_upload</mat-icon>
+            <div class="upload-text-area">
+              <span class="hide-xs" translate>image-input.drag-and-drop</span>
+              <div class="upload-button-area">
+                <span class="hide-xs" translate>image-input.or</span>
+                <button type="button" mat-button color="primary" class="browse-file">
+                  <label for="{{inputId}}">{{'image-input.browse' | translate}}</label>
+                </button>
+                <input class="file-input" flowButton type="file" [flow]="flow.flowJs" [flowAttributes]="{accept: accept}" id="{{inputId}}">
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+      @if (!showPreview && safeImageUrl && showClearButton && !disabled) {
+        <button
+          mat-icon-button color="primary"
+          class="tb-mat-24"
+          type="button"
+          (click)="clearImage()"
+          matTooltip="{{ 'action.remove' | translate }}"
+          matTooltipPosition="above">
+          <mat-icon>close</mat-icon>
+        </button>
+      }
+    </div>
   </ng-container>
-  <div *ngIf="(showFileName && fileName) || (maxSizeByte && !disabled)" class="tb-image-info-container">
-    <div *ngIf="showFileName && fileName" class="tb-image-file-name" [title]="fileName">{{ fileName }}</div>
-    <div *ngIf="maxSizeByte && !disabled" class="tb-image-file-hint" translate [translateParams]="{ size: maxSizeByte | fileSize}">dashboard.maximum-upload-file-size</div>
-  </div>
+  @if ((showFileName && fileName) || (maxSizeByte && !disabled)) {
+    <div class="tb-image-info-container">
+      @if (showFileName && fileName) {
+        <div class="tb-image-file-name" [title]="fileName">{{ fileName }}</div>
+      }
+      @if (maxSizeByte && !disabled) {
+        <div class="tb-image-file-hint" translate [translateParams]="{ size: maxSizeByte | fileSize}">dashboard.maximum-upload-file-size</div>
+      }
+    </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html b/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
index cf6a054af4..c5a1a749ef 100644
--- a/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
@@ -24,36 +24,45 @@
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-</mat-progress-bar>
-<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+@if (isLoading$ | async) {
+  <mat-progress-bar color="warn" mode="indeterminate">
+  </mat-progress-bar>
+} @else {
+  <div style="height: 4px;"></div>
+}
 <div mat-dialog-content>
-  <div class="tb-form-panel stroked tb-slide-toggle" *ngIf="!readonly || image.public">
-    <mat-expansion-panel class="tb-settings" [expanded]="image.public" disabled>
-      <mat-expansion-panel-header class="flex flex-row flex-wrap">
-        <mat-panel-title>
-          <div *ngIf="!readonly" tb-hint-tooltip-icon="{{ 'image.embed-to-html-hint' | translate }}"
-               class="tb-form-row no-border no-padding">
-            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" [formControl]="publicStatusControl" (click)="$event.stopPropagation()">
-              <div class="tb-form-panel-title">{{ 'image.embed-to-html' | translate }}</div>
-            </mat-slide-toggle>
-          </div>
-          <div *ngIf="readonly" class="tb-form-panel-title" translate>image.embed-to-html</div>
-        </mat-panel-title>
-      </mat-expansion-panel-header>
-      <ng-template matExpansionPanelContent>
-        <div class="tb-embed-image-text" [innerHTML]="'image.embed-to-html-text' | translate"></div>
-        <tb-markdown usePlainMarkdown
-                     containerClass="tb-embed-image-code"
-                     [data]="embedToHtmlCode()"></tb-markdown>
-      </ng-template>
-    </mat-expansion-panel>
-  </div>
+  @if (!readonly || image.public) {
+    <div class="tb-form-panel stroked tb-slide-toggle">
+      <mat-expansion-panel class="tb-settings" [expanded]="image.public" disabled>
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
+          <mat-panel-title>
+            @if (!readonly) {
+              <div tb-hint-tooltip-icon="{{ 'image.embed-to-html-hint' | translate }}"
+                   class="tb-form-row no-border no-padding">
+                <mat-slide-toggle class="mat-slide flex items-stretch justify-center" [formControl]="publicStatusControl" (click)="$event.stopPropagation()">
+                  <div class="tb-form-panel-title">{{ 'image.embed-to-html' | translate }}</div>
+                </mat-slide-toggle>
+              </div>
+            }
+            @if (readonly) {
+              <div class="tb-form-panel-title" translate>image.embed-to-html</div>
+            }
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <ng-template matExpansionPanelContent>
+          <div class="tb-embed-image-text" [innerHTML]="'image.embed-to-html-text' | translate"></div>
+          <tb-markdown usePlainMarkdown
+                       containerClass="tb-embed-image-code"
+          [data]="embedToHtmlCode()"></tb-markdown>
+        </ng-template>
+      </mat-expansion-panel>
+    </div>
+  }
   <div class="tb-form-panel stroked">
     <div class="tb-form-panel-title" translate>image.embed-to-angular-template</div>
     <div class="tb-embed-image-text" [innerHTML]="'image.embed-to-angular-template-text' | translate"></div>
     <tb-markdown usePlainMarkdown
                  containerClass="tb-embed-image-code"
-                 [data]="embedToAngularTemplateCode()"></tb-markdown>
+    [data]="embedToAngularTemplateCode()"></tb-markdown>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/image/gallery-image-input.component.html b/ui-ngx/src/app/shared/components/image/gallery-image-input.component.html
index 2ebe68d897..be6344ffae 100644
--- a/ui-ngx/src/app/shared/components/image/gallery-image-input.component.html
+++ b/ui-ngx/src/app/shared/components/image/gallery-image-input.component.html
@@ -16,79 +16,95 @@
 
 -->
 <div class="tb-container">
-  <label class="tb-title" *ngIf="label" [class]="{'tb-error': !disabled && (required && linkType === ImageLinkType.none), 'tb-required': !disabled && required}">{{label}}</label>
+  @if (label) {
+    <label class="tb-title" [class]="{'tb-error': !disabled && (required && linkType === ImageLinkType.none), 'tb-required': !disabled && required}">{{label}}</label>
+  }
   <div class="tb-image-select-container" [class]="{disabled: disabled && (linkType === ImageLinkType.none || linkType === ImageLinkType.base64)}">
     <div class="tb-image-container">
-      <img *ngIf="linkType !== ImageLinkType.none && imageUrl; else noImage" class="tb-image-preview" [src]="imageUrl | image: {preview: true} | async">
+      @if (linkType !== ImageLinkType.none && imageUrl) {
+        <img class="tb-image-preview" [src]="imageUrl | image: {preview: true} | async">
+      } @else {
+        <div class="tb-no-image">{{ (disabled ? 'image.no-image' : 'image.no-image-selected') | translate }}</div>
+      }
     </div>
-    <div *ngIf="linkType !== ImageLinkType.none && (linkType !== ImageLinkType.base64 || !disabled)" class="tb-image-info-container">
-      <div *ngIf="linkType === ImageLinkType.base64" class="tb-base64-image-container">
-      </div>
-      <div *ngIf="linkType === ImageLinkType.resource" class="tb-resource-image-container" [class]="{loading: loadingImageResource}">
-        <ng-container *ngIf="!loadingImageResource; else loading">
-          <div class="tb-resource-image-name">
-            {{ imageResource.title }}
+    @if (linkType !== ImageLinkType.none && (linkType !== ImageLinkType.base64 || !disabled)) {
+      <div class="tb-image-info-container">
+        @if (linkType === ImageLinkType.base64) {
+          <div class="tb-base64-image-container">
           </div>
-          <div class="tb-resource-image-details">
-            <div>{{ imageResource.descriptor.width }}x{{ imageResource.descriptor.height }}</div>
-            <mat-divider vertical></mat-divider>
-            <div>{{ imageResource.descriptor.size | fileSize }}</div>
+        }
+        @if (linkType === ImageLinkType.resource) {
+          <div class="tb-resource-image-container" [class]="{loading: loadingImageResource}">
+            @if (!loadingImageResource) {
+              <div class="tb-resource-image-name">
+                {{ imageResource.title }}
+              </div>
+              <div class="tb-resource-image-details">
+                <div>{{ imageResource.descriptor.width }}x{{ imageResource.descriptor.height }}</div>
+                <mat-divider vertical></mat-divider>
+                <div>{{ imageResource.descriptor.size | fileSize }}</div>
+              </div>
+            } @else {
+              <mat-spinner [diameter]="80" strokeWidth="4"></mat-spinner>
+            }
           </div>
-        </ng-container>
-      </div>
-      <div *ngIf="linkType === ImageLinkType.external" class="tb-external-image-container">
-        <div class="tb-external-link-label">
-          {{ 'image.image-link' | translate }}
-        </div>
-        <div class="tb-external-link-input-container">
-          <mat-form-field class="tb-inline-field" appearance="outline" subscriptSizing="dynamic">
-            <input matInput [formControl]="externalLinkControl" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-          <button *ngIf="!disabled"
+        }
+        @if (linkType === ImageLinkType.external) {
+          <div class="tb-external-image-container">
+            <div class="tb-external-link-label">
+              {{ 'image.image-link' | translate }}
+            </div>
+            <div class="tb-external-link-input-container">
+              <mat-form-field class="tb-inline-field" appearance="outline" subscriptSizing="dynamic">
+                <input matInput [formControl]="externalLinkControl" placeholder="{{ 'widget-config.set' | translate }}">
+              </mat-form-field>
+              @if (!disabled) {
+                <button
                   class="tb-image-clear-btn"
                   type="button"
                   mat-icon-button
                   matTooltip="{{ 'image.clear-image' | translate }}"
                   matTooltipPosition="above"
                   (click)="clearImage()">
+                  <mat-icon>close</mat-icon>
+                </button>
+              }
+            </div>
+          </div>
+        }
+        @if (!disabled && linkType !== ImageLinkType.external) {
+          <button
+            class="tb-image-clear-btn"
+            type="button"
+            mat-icon-button
+            matTooltip="{{ 'image.clear-image' | translate }}"
+            matTooltipPosition="above"
+            (click)="clearImage()">
             <mat-icon>close</mat-icon>
           </button>
-        </div>
+        }
       </div>
-      <button *ngIf="!disabled && linkType !== ImageLinkType.external"
-              class="tb-image-clear-btn"
-              type="button"
-              mat-icon-button
-              matTooltip="{{ 'image.clear-image' | translate }}"
-              matTooltipPosition="above"
-              (click)="clearImage()">
-        <mat-icon>close</mat-icon>
-      </button>
-    </div>
-    <div *ngIf="linkType === ImageLinkType.none && !disabled" class="tb-image-select-buttons-container">
-      <button mat-stroked-button
-              type="button"
-              color="primary"
-              class="tb-image-select-button"
-              (click)="openGallery($event)">
-        <tb-icon matButtonIcon>filter</tb-icon>
-        <span translate>image.browse-from-gallery</span>
-      </button>
-      <button mat-stroked-button
-              type="button"
-              color="primary"
-              class="tb-image-select-button"
-              (click)="setLink($event)">
-        <tb-icon matButtonIcon>link</tb-icon>
-        <span translate>image.set-link</span>
-      </button>
-    </div>
+    }
+    @if (linkType === ImageLinkType.none && !disabled) {
+      <div class="tb-image-select-buttons-container">
+        <button mat-stroked-button
+                type="button"
+                color="primary"
+                class="tb-image-select-button"
+                (click)="openGallery($event)">
+          <tb-icon matButtonIcon>filter</tb-icon>
+          <span translate>image.browse-from-gallery</span>
+        </button>
+        <button mat-stroked-button
+                type="button"
+                color="primary"
+                class="tb-image-select-button"
+                (click)="setLink($event)">
+          <tb-icon matButtonIcon>link</tb-icon>
+          <span translate>image.set-link</span>
+        </button>
+      </div>
+    }
   </div>
 </div>
 
-<ng-template #noImage>
-  <div class="tb-no-image">{{ (disabled ? 'image.no-image' : 'image.no-image-selected') | translate }}</div>
-</ng-template>
-<ng-template #loading>
-  <mat-spinner [diameter]="80" strokeWidth="4"></mat-spinner>
-</ng-template>
diff --git a/ui-ngx/src/app/shared/components/image/image-dialog.component.html b/ui-ngx/src/app/shared/components/image/image-dialog.component.html
index 0eefce39cf..ee830aa102 100644
--- a/ui-ngx/src/app/shared/components/image/image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/image-dialog.component.html
@@ -25,36 +25,45 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
       <mat-form-field>
         <mat-label translate>image.name</mat-label>
         <input matInput formControlName="title" required>
-        <mat-error *ngIf="imageFormGroup.get('title').hasError('required')">
-          {{ 'image.name-required' | translate }}
-        </mat-error>
-        <button *ngIf="!readonly && imageFormGroup.dirty"
-                matIconSuffix
-                type="button"
-                mat-icon-button [disabled]="isLoading$ | async"
-                matTooltip="{{ 'action.undo' | translate }}"
-                matTooltipPosition="above"
-                (click)="revertInfo()">
-          <mat-icon>close</mat-icon>
-        </button>
-        <button *ngIf="!readonly && !imageFormGroup.invalid && imageFormGroup.dirty"
-                matIconSuffix
-                type="button"
-                color="primary"
-                mat-icon-button [disabled]="isLoading$ | async"
-                matTooltip="{{ 'action.save' | translate }}"
-                matTooltipPosition="above"
-                (click)="saveInfo()">
-          <mat-icon>check</mat-icon>
-        </button>
+        @if (imageFormGroup.get('title').hasError('required')) {
+          <mat-error>
+            {{ 'image.name-required' | translate }}
+          </mat-error>
+        }
+        @if (!readonly && imageFormGroup.dirty) {
+          <button
+            matIconSuffix
+            type="button"
+            mat-icon-button [disabled]="isLoading$ | async"
+            matTooltip="{{ 'action.undo' | translate }}"
+            matTooltipPosition="above"
+            (click)="revertInfo()">
+            <mat-icon>close</mat-icon>
+          </button>
+        }
+        @if (!readonly && !imageFormGroup.invalid && imageFormGroup.dirty) {
+          <button
+            matIconSuffix
+            type="button"
+            color="primary"
+            mat-icon-button [disabled]="isLoading$ | async"
+            matTooltip="{{ 'action.save' | translate }}"
+            matTooltipPosition="above"
+            (click)="saveInfo()">
+            <mat-icon>check</mat-icon>
+          </button>
+        }
       </mat-form-field>
       <div class="tb-image-container tb-primary-fill">
         <div class="tb-image-content">
@@ -82,14 +91,16 @@
                 <mat-icon>code</mat-icon>
               </button>
             </div>
-            <button *ngIf="!readonly"
-                    type="button"
-                    mat-flat-button
-                    color="primary"
-                    [disabled]="isLoading$ | async"
-                    (click)="updateImage($event)">
-              {{ 'image.update-image' | translate }}
-            </button>
+            @if (!readonly) {
+              <button
+                type="button"
+                mat-flat-button
+                color="primary"
+                [disabled]="isLoading$ | async"
+                (click)="updateImage($event)">
+                {{ 'image.update-image' | translate }}
+              </button>
+            }
           </div>
           <div class="tb-image-preview-container">
             <div class="tb-image-preview-spacer"></div>
diff --git a/ui-ngx/src/app/shared/components/image/image-gallery.component.html b/ui-ngx/src/app/shared/components/image/image-gallery.component.html
index b31dc16920..8e4bd5a294 100644
--- a/ui-ngx/src/app/shared/components/image/image-gallery.component.html
+++ b/ui-ngx/src/app/shared/components/image/image-gallery.component.html
@@ -24,7 +24,9 @@
         <div class="mat-toolbar-tools">
           <div class="tb-images-title lt-md:!hidden">
             <div tbTruncateWithTooltip>{{ (isScada ? 'scada.symbols' : 'image.gallery') | translate }}</div>
-            <div *ngIf="isScada" tb-help="scada"></div>
+            @if (isScada) {
+              <div tb-help="scada"></div>
+            }
           </div>
           <div class="tb-images-view-type-toolbar flex flex-row items-center justify-start">
             <div class="tb-toolbar-button" [class.tb-selected]="mode === 'list'">
@@ -44,10 +46,12 @@
               </button>
             </div>
           </div>
-          <mat-slide-toggle *ngIf="!isSysAdmin"
-                            class="lt-lg:!hidden"
-                            [ngModel]="includeSystemImages"
-                            (ngModelChange)="includeSystemImagesChanged($event)">{{ (isScada ? 'scada.include-system-symbols' : 'image.include-system-images') | translate }}</mat-slide-toggle>
+          @if (!isSysAdmin) {
+            <mat-slide-toggle
+              class="lt-lg:!hidden"
+              [ngModel]="includeSystemImages"
+            (ngModelChange)="includeSystemImagesChanged($event)">{{ (isScada ? 'scada.include-system-symbols' : 'image.include-system-images') | translate }}</mat-slide-toggle>
+          }
         </div>
         <section class="flex flex-1 flex-row items-center justify-start gt-md:gap-4">
           <span class="flex-1"></span>
@@ -94,9 +98,11 @@
           </button>
         </section>
       </div>
-      <mat-slide-toggle *ngIf="!isSysAdmin" class="gt-md:!hidden"
-                        [ngModel]="includeSystemImages"
-                        (ngModelChange)="includeSystemImagesChanged($event)">{{ (isScada ? 'scada.include-system-symbols' : 'image.include-system-images') | translate }}</mat-slide-toggle>
+      @if (!isSysAdmin) {
+        <mat-slide-toggle class="gt-md:!hidden"
+                          [ngModel]="includeSystemImages"
+        (ngModelChange)="includeSystemImagesChanged($event)">{{ (isScada ? 'scada.include-system-symbols' : 'image.include-system-images') | translate }}</mat-slide-toggle>
+      }
     </mat-toolbar>
     <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !(mode === 'grid' || dataSource?.selection.isEmpty())">
       <div class="mat-toolbar-tools">
@@ -132,200 +138,208 @@
         </button>
       </div>
     </mat-toolbar>
-    <div *ngIf="mode === 'list'" class="flex flex-1 flex-col min-h-0">
-      <div class="table-container flex-1">
-        <table mat-table [dataSource]="dataSource" [trackBy]="trackByEntity"
-               matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
-          <ng-container matColumnDef="select" sticky>
-            <mat-header-cell *matHeaderCellDef style="width: 30px;">
-              <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
-                            [checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
-                            [indeterminate]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async) === false">
-              </mat-checkbox>
-            </mat-header-cell>
-            <mat-cell *matCellDef="let image">
-              <mat-checkbox (click)="$event.stopPropagation()"
-                            [class.!hidden]="!deleteEnabled(image)"
-                            (change)="$event ? dataSource.selection.toggle(image) : null"
-                            [checked]="dataSource.selection.isSelected(image)">
-              </mat-checkbox>
-            </mat-cell>
-          </ng-container>
-          <ng-container matColumnDef="preview">
-            <mat-header-cell *matHeaderCellDef style="width: 50px; min-width: 50px;"></mat-header-cell>
-            <mat-cell *matCellDef="let image">
-              <div class="tb-image-preview-cell">
-                <img class="tb-image-preview" [src]="image.link | image: {preview: true} | async" alt="{{ image.title }}">
-              </div>
-            </mat-cell>
-          </ng-container>
-          <ng-container matColumnDef="title">
-            <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 100%;"> {{ 'image.name' | translate }} </mat-header-cell>
-            <mat-cell *matCellDef="let image">
-              {{ image.title }}
-            </mat-cell>
-          </ng-container>
-          <ng-container matColumnDef="createdTime">
-            <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 160px; min-width: 160px;"> {{ 'image.created-time' | translate }} </mat-header-cell>
-            <mat-cell *matCellDef="let image">
-              {{ image.createdTime | date:'yyyy-MM-dd HH:mm:ss' }}
-            </mat-cell>
-          </ng-container>
-          <ng-container matColumnDef="resolution">
-            <mat-header-cell *matHeaderCellDef style="width: 80px; min-width: 80px;"> {{ 'image.resolution' | translate }} </mat-header-cell>
-            <mat-cell *matCellDef="let image">
-              {{ image.descriptor.width }}x{{ image.descriptor.height }}
-            </mat-cell>
-          </ng-container>
-          <ng-container matColumnDef="size">
-            <mat-header-cell *matHeaderCellDef style="width: 80px; min-width: 80px;"> {{ 'image.size' | translate }} </mat-header-cell>
-            <mat-cell *matCellDef="let image">
-              {{ image.descriptor.size | fileSize }}
-            </mat-cell>
-          </ng-container>
-          <ng-container matColumnDef="system">
-            <mat-header-cell *matHeaderCellDef style="width: 60px; min-width: 60px;"> {{ 'image.system' | translate }} </mat-header-cell>
-            <mat-cell *matCellDef="let image">
-              <mat-icon class="material-icons mat-icon">{{isSystem(image) ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
-            </mat-cell>
-          </ng-container>
-          <ng-container matColumnDef="actions" stickyEnd>
-            <mat-header-cell *matHeaderCellDef
-                             [class.gt-md:min-w-60]="!isScada"
-                             [class.gt-md:max-w-60]="!isScada"
-                             [class.gt-md:w-60]="!isScada"
-                             [class.gt-md:min-w-48]="isScada"
-                             [class.gt-md:max-w-48]="isScada"
-                             [class.gt-md:w-48]="isScada">
-            </mat-header-cell>
-            <mat-cell *matCellDef="let image"
-                      [class.gt-md:min-w-60]="!isScada"
-                      [class.gt-md:max-w-60]="!isScada"
-                      [class.gt-md:w-60]="!isScada"
-                      [class.gt-md:min-w-48]="isScada"
-                      [class.gt-md:max-w-48]="isScada"
-                      [class.gt-md:w-48]="isScada">
-              <div class="flex flex-1 flex-row items-stretch justify-end lt-lg:!hidden">
-                <button mat-icon-button [disabled]="isLoading$ | async"
-                        matTooltip="{{ (isScada ? 'scada.download-symbol' : 'image.download-image' ) | translate }}"
-                        matTooltipPosition="above"
-                        (click)="downloadImage($event, image)">
-                  <mat-icon>file_download</mat-icon>
-                </button>
-                <button mat-icon-button [disabled]="isLoading$ | async"
-                        matTooltip="{{ (isScada ? 'scada.export-symbol' : 'image.export-image' ) | translate }}"
-                        matTooltipPosition="above"
-                        (click)="exportImage($event, image)">
-                  <tb-icon>mdi:file-export</tb-icon>
-                </button>
-                <button *ngIf="!isScada" mat-icon-button [disabled]="isLoading$ | async"
-                        matTooltip="{{ 'image.embed-image' | translate }}"
-                        matTooltipPosition="above"
-                        (click)="embedImage($event, image)">
-                  <mat-icon>code</mat-icon>
-                </button>
-                <button mat-icon-button [disabled]="isLoading$ | async"
-                        matTooltip="{{ (readonly(image) ? (isScada ? 'scada.symbol-details' : 'image.image-details') : (isScada ? 'scada.edit-symbol' : 'image.edit-image')) | translate }}"
-                        matTooltipPosition="above"
-                        (click)="editImage($event, image)">
-                  <mat-icon>edit</mat-icon>
-                </button>
-                <button mat-icon-button [disabled]="(isLoading$ | async) || !deleteEnabled(image)"
-                        matTooltip="{{ (isScada ? 'scada.delete-symbol' : 'image.delete-image' ) | translate }}"
-                        matTooltipPosition="above"
-                        (click)="deleteImage($event, image)">
-                  <mat-icon>delete</mat-icon>
-                </button>
-              </div>
-              <div class="gt-md:!hidden">
-                <button mat-icon-button
-                        (click)="$event.stopPropagation()"
-                        [matMenuTriggerFor]="cellActionsMenu">
-                  <mat-icon class="material-icons">more_vert</mat-icon>
-                </button>
-                <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                  <button mat-menu-item
-                          [disabled]="isLoading$ | async"
+    @if (mode === 'list') {
+      <div class="flex flex-1 flex-col min-h-0">
+        <div class="table-container flex-1">
+          <table mat-table [dataSource]="dataSource" [trackBy]="trackByEntity"
+                 matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
+            <ng-container matColumnDef="select" sticky>
+              <mat-header-cell *matHeaderCellDef style="width: 30px;">
+                <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
+                              [checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
+                              [indeterminate]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async) === false">
+                </mat-checkbox>
+              </mat-header-cell>
+              <mat-cell *matCellDef="let image">
+                <mat-checkbox (click)="$event.stopPropagation()"
+                              [class.!hidden]="!deleteEnabled(image)"
+                              (change)="$event ? dataSource.selection.toggle(image) : null"
+                              [checked]="dataSource.selection.isSelected(image)">
+                </mat-checkbox>
+              </mat-cell>
+            </ng-container>
+            <ng-container matColumnDef="preview">
+              <mat-header-cell *matHeaderCellDef style="width: 50px; min-width: 50px;"></mat-header-cell>
+              <mat-cell *matCellDef="let image">
+                <div class="tb-image-preview-cell">
+                  <img class="tb-image-preview" [src]="image.link | image: {preview: true} | async" alt="{{ image.title }}">
+                </div>
+              </mat-cell>
+            </ng-container>
+            <ng-container matColumnDef="title">
+              <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 100%;"> {{ 'image.name' | translate }} </mat-header-cell>
+              <mat-cell *matCellDef="let image">
+                {{ image.title }}
+              </mat-cell>
+            </ng-container>
+            <ng-container matColumnDef="createdTime">
+              <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 160px; min-width: 160px;"> {{ 'image.created-time' | translate }} </mat-header-cell>
+              <mat-cell *matCellDef="let image">
+                {{ image.createdTime | date:'yyyy-MM-dd HH:mm:ss' }}
+              </mat-cell>
+            </ng-container>
+            <ng-container matColumnDef="resolution">
+              <mat-header-cell *matHeaderCellDef style="width: 80px; min-width: 80px;"> {{ 'image.resolution' | translate }} </mat-header-cell>
+              <mat-cell *matCellDef="let image">
+                {{ image.descriptor.width }}x{{ image.descriptor.height }}
+              </mat-cell>
+            </ng-container>
+            <ng-container matColumnDef="size">
+              <mat-header-cell *matHeaderCellDef style="width: 80px; min-width: 80px;"> {{ 'image.size' | translate }} </mat-header-cell>
+              <mat-cell *matCellDef="let image">
+                {{ image.descriptor.size | fileSize }}
+              </mat-cell>
+            </ng-container>
+            <ng-container matColumnDef="system">
+              <mat-header-cell *matHeaderCellDef style="width: 60px; min-width: 60px;"> {{ 'image.system' | translate }} </mat-header-cell>
+              <mat-cell *matCellDef="let image">
+                <mat-icon class="material-icons mat-icon">{{isSystem(image) ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
+              </mat-cell>
+            </ng-container>
+            <ng-container matColumnDef="actions" stickyEnd>
+              <mat-header-cell *matHeaderCellDef
+                               [class.gt-md:min-w-60]="!isScada"
+                               [class.gt-md:max-w-60]="!isScada"
+                               [class.gt-md:w-60]="!isScada"
+                               [class.gt-md:min-w-48]="isScada"
+                               [class.gt-md:max-w-48]="isScada"
+                               [class.gt-md:w-48]="isScada">
+              </mat-header-cell>
+              <mat-cell *matCellDef="let image"
+                        [class.gt-md:min-w-60]="!isScada"
+                        [class.gt-md:max-w-60]="!isScada"
+                        [class.gt-md:w-60]="!isScada"
+                        [class.gt-md:min-w-48]="isScada"
+                        [class.gt-md:max-w-48]="isScada"
+                        [class.gt-md:w-48]="isScada">
+                <div class="flex flex-1 flex-row items-stretch justify-end lt-lg:!hidden">
+                  <button mat-icon-button [disabled]="isLoading$ | async"
+                          matTooltip="{{ (isScada ? 'scada.download-symbol' : 'image.download-image' ) | translate }}"
+                          matTooltipPosition="above"
                           (click)="downloadImage($event, image)">
                     <mat-icon>file_download</mat-icon>
-                    <span>{{ (isScada ? 'scada.download-symbol' : 'image.download-image' ) | translate }}</span>
                   </button>
-                  <button mat-menu-item
-                          [disabled]="isLoading$ | async"
+                  <button mat-icon-button [disabled]="isLoading$ | async"
+                          matTooltip="{{ (isScada ? 'scada.export-symbol' : 'image.export-image' ) | translate }}"
+                          matTooltipPosition="above"
                           (click)="exportImage($event, image)">
-                    <tb-icon matMenuItemIcon>mdi:file-export</tb-icon>
-                    <span>{{ (isScada ? 'scada.export-symbol' : 'image.export-image' ) | translate }}</span>
-                  </button>
-                  <button *ngIf="!isScada" mat-menu-item
-                          [disabled]="isLoading$ | async"
-                          (click)="embedImage($event, image)">
-                    <mat-icon>code</mat-icon>
-                    <span>{{ 'image.embed-image' | translate }}</span>
+                    <tb-icon>mdi:file-export</tb-icon>
                   </button>
-                  <button mat-menu-item
-                          [disabled]="isLoading$ | async"
+                  @if (!isScada) {
+                    <button mat-icon-button [disabled]="isLoading$ | async"
+                            matTooltip="{{ 'image.embed-image' | translate }}"
+                            matTooltipPosition="above"
+                            (click)="embedImage($event, image)">
+                      <mat-icon>code</mat-icon>
+                    </button>
+                  }
+                  <button mat-icon-button [disabled]="isLoading$ | async"
+                          matTooltip="{{ (readonly(image) ? (isScada ? 'scada.symbol-details' : 'image.image-details') : (isScada ? 'scada.edit-symbol' : 'image.edit-image')) | translate }}"
+                          matTooltipPosition="above"
                           (click)="editImage($event, image)">
                     <mat-icon>edit</mat-icon>
-                    <span>{{ (readonly(image) ? (isScada ? 'scada.symbol-details' : 'image.image-details') : (isScada ? 'scada.edit-symbol' : 'image.edit-image')) | translate }}</span>
                   </button>
-                  <button mat-menu-item
-                          [disabled]="isLoading$ | async"
-                          [class.!hidden]="!deleteEnabled(image)"
+                  <button mat-icon-button [disabled]="(isLoading$ | async) || !deleteEnabled(image)"
+                          matTooltip="{{ (isScada ? 'scada.delete-symbol' : 'image.delete-image' ) | translate }}"
+                          matTooltipPosition="above"
                           (click)="deleteImage($event, image)">
                     <mat-icon>delete</mat-icon>
-                    <span>{{ (isScada ? 'scada.delete-symbol' : 'image.delete-image' ) | translate }}</span>
                   </button>
-                </mat-menu>
-              </div>
-            </mat-cell>
-          </ng-container>
-          <ng-container matColumnDef="imageSelect" stickyEnd>
-            <mat-header-cell *matHeaderCellDef></mat-header-cell>
-            <mat-cell *matCellDef="let image">
-              <button mat-stroked-button
-                      color="primary"
-                      (click)="selectImage($event, image)">{{ 'action.select' | translate }}</button>
-            </mat-cell>
-          </ng-container>
-          <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-          <mat-row class="mat-row-select"
-                   [class.!hidden]="dataSource.dataLoading"
-                   [class.mat-selected]="dataSource.selection.isSelected(image)"
-                   *matRowDef="let image; columns: displayedColumns;" (click)="rowClick($event, image)"></mat-row>
-        </table>
-        <ng-container *ngIf="(dataSource.isEmpty() | async) && !dataSource.dataLoading">
-          <ng-container *ngTemplateOutlet="noImages"></ng-container>
-        </ng-container>
-        <span [class.!hidden]="!dataSource.dataLoading"
-              class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
+                </div>
+                <div class="gt-md:!hidden">
+                  <button mat-icon-button
+                          (click)="$event.stopPropagation()"
+                          [matMenuTriggerFor]="cellActionsMenu">
+                    <mat-icon class="material-icons">more_vert</mat-icon>
+                  </button>
+                  <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                    <button mat-menu-item
+                            [disabled]="isLoading$ | async"
+                            (click)="downloadImage($event, image)">
+                      <mat-icon>file_download</mat-icon>
+                      <span>{{ (isScada ? 'scada.download-symbol' : 'image.download-image' ) | translate }}</span>
+                    </button>
+                    <button mat-menu-item
+                            [disabled]="isLoading$ | async"
+                            (click)="exportImage($event, image)">
+                      <tb-icon matMenuItemIcon>mdi:file-export</tb-icon>
+                      <span>{{ (isScada ? 'scada.export-symbol' : 'image.export-image' ) | translate }}</span>
+                    </button>
+                    @if (!isScada) {
+                      <button mat-menu-item
+                              [disabled]="isLoading$ | async"
+                              (click)="embedImage($event, image)">
+                        <mat-icon>code</mat-icon>
+                        <span>{{ 'image.embed-image' | translate }}</span>
+                      </button>
+                    }
+                    <button mat-menu-item
+                            [disabled]="isLoading$ | async"
+                            (click)="editImage($event, image)">
+                      <mat-icon>edit</mat-icon>
+                      <span>{{ (readonly(image) ? (isScada ? 'scada.symbol-details' : 'image.image-details') : (isScada ? 'scada.edit-symbol' : 'image.edit-image')) | translate }}</span>
+                    </button>
+                    <button mat-menu-item
+                            [disabled]="isLoading$ | async"
+                            [class.!hidden]="!deleteEnabled(image)"
+                            (click)="deleteImage($event, image)">
+                      <mat-icon>delete</mat-icon>
+                      <span>{{ (isScada ? 'scada.delete-symbol' : 'image.delete-image' ) | translate }}</span>
+                    </button>
+                  </mat-menu>
+                </div>
+              </mat-cell>
+            </ng-container>
+            <ng-container matColumnDef="imageSelect" stickyEnd>
+              <mat-header-cell *matHeaderCellDef></mat-header-cell>
+              <mat-cell *matCellDef="let image">
+                <button mat-stroked-button
+                        color="primary"
+                (click)="selectImage($event, image)">{{ 'action.select' | translate }}</button>
+              </mat-cell>
+            </ng-container>
+            <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+            <mat-row class="mat-row-select"
+                     [class.!hidden]="dataSource.dataLoading"
+                     [class.mat-selected]="dataSource.selection.isSelected(image)"
+            *matRowDef="let image; columns: displayedColumns;" (click)="rowClick($event, image)"></mat-row>
+          </table>
+          @if ((dataSource.isEmpty() | async) && !dataSource.dataLoading) {
+            <ng-container *ngTemplateOutlet="noImages"></ng-container>
+          }
+          <span [class.!hidden]="!dataSource.dataLoading"
+          class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
+        </div>
+        <mat-divider></mat-divider>
+        <mat-paginator [length]="dataSource.total() | async"
+                       [pageIndex]="pageLink.page"
+                       [pageSize]="pageLink.pageSize"
+                       [pageSizeOptions]="pageSizeOptions"
+                       [hidePageSize]="hidePageSize"
+        showFirstLastButtons></mat-paginator>
       </div>
-      <mat-divider></mat-divider>
-      <mat-paginator [length]="dataSource.total() | async"
-                     [pageIndex]="pageLink.page"
-                     [pageSize]="pageLink.pageSize"
-                     [pageSizeOptions]="pageSizeOptions"
-                     [hidePageSize]="hidePageSize"
-                     showFirstLastButtons></mat-paginator>
-    </div>
-    <div *ngIf="mode === 'grid'" class="flex flex-1 flex-col" [class.mat-padding]="!dialogMode">
-      <tb-scroll-grid class="flex-1"
-        [columns]="gridColumns"
-        [itemSize]="gridImagesItemSizeStrategy"
-        [fetchFunction]="gridImagesFetchFunction"
-        [filter]="gridImagesFilter"
-        [itemCard]="imageCard"
-        [loadingCell]="imageLoadingCard"
-        [dataLoading]="loadingImages"
-        [noData]="noImages">
-      </tb-scroll-grid>
-    </div>
+    }
+    @if (mode === 'grid') {
+      <div class="flex flex-1 flex-col" [class.mat-padding]="!dialogMode">
+        <tb-scroll-grid class="flex-1"
+                        [columns]="gridColumns"
+                        [itemSize]="gridImagesItemSizeStrategy"
+                        [fetchFunction]="gridImagesFetchFunction"
+                        [filter]="gridImagesFilter"
+                        [itemCard]="imageCard"
+                        [loadingCell]="imageLoadingCard"
+                        [dataLoading]="loadingImages"
+                        [noData]="noImages">
+        </tb-scroll-grid>
+      </div>
+    }
   </div>
 </div>
 <ng-template #loadingImages>
   <div class="tb-absolute-fill flex flex-col items-center justify-center">
-        <span>
-          {{ 'common.loading' | translate }}
-        </span>
+    <span>
+      {{ 'common.loading' | translate }}
+    </span>
   </div>
 </ng-template>
 <ng-template #noImages>
@@ -337,49 +351,57 @@
 <ng-template #imageCard let-item="item" let-itemIndex="itemIndex">
   <div class="tb-image-card tb-primary-fill">
     <div class="tb-image-card-overlay">
-      <div *ngIf="!selectionMode" class="tb-image-card-overlay-buttons">
-        <button mat-icon-button [disabled]="isLoading$ | async"
-                matTooltip="{{ (isScada ? 'scada.download-symbol' : 'image.download-image' ) | translate }}"
-                matTooltipPosition="above"
-                (click)="downloadImage($event, item)">
-          <mat-icon>file_download</mat-icon>
-        </button>
-        <button mat-icon-button [disabled]="isLoading$ | async"
-                matTooltip="{{ (isScada ? 'scada.export-symbol' : 'image.export-image' ) | translate }}"
-                matTooltipPosition="above"
-                (click)="exportImage($event, item)">
-          <tb-icon>mdi:file-export</tb-icon>
-        </button>
-        <button *ngIf="!isScada" mat-icon-button [disabled]="isLoading$ | async"
-                matTooltip="{{ 'image.embed-image' | translate }}"
-                matTooltipPosition="above"
-                (click)="embedImage($event, item, itemIndex)">
-          <mat-icon>code</mat-icon>
-        </button>
-        <button *ngIf="deleteEnabled(item)"
-                mat-icon-button [disabled]="(isLoading$ | async)"
-                matTooltip="{{ (isScada ? 'scada.delete-symbol' : 'image.delete-image' ) | translate }}"
-                matTooltipPosition="above"
-                (click)="deleteImage($event, item, itemIndex)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </div>
+      @if (!selectionMode) {
+        <div class="tb-image-card-overlay-buttons">
+          <button mat-icon-button [disabled]="isLoading$ | async"
+                  matTooltip="{{ (isScada ? 'scada.download-symbol' : 'image.download-image' ) | translate }}"
+                  matTooltipPosition="above"
+                  (click)="downloadImage($event, item)">
+            <mat-icon>file_download</mat-icon>
+          </button>
+          <button mat-icon-button [disabled]="isLoading$ | async"
+                  matTooltip="{{ (isScada ? 'scada.export-symbol' : 'image.export-image' ) | translate }}"
+                  matTooltipPosition="above"
+                  (click)="exportImage($event, item)">
+            <tb-icon>mdi:file-export</tb-icon>
+          </button>
+          @if (!isScada) {
+            <button mat-icon-button [disabled]="isLoading$ | async"
+                    matTooltip="{{ 'image.embed-image' | translate }}"
+                    matTooltipPosition="above"
+                    (click)="embedImage($event, item, itemIndex)">
+              <mat-icon>code</mat-icon>
+            </button>
+          }
+          @if (deleteEnabled(item)) {
+            <button
+              mat-icon-button [disabled]="(isLoading$ | async)"
+              matTooltip="{{ (isScada ? 'scada.delete-symbol' : 'image.delete-image' ) | translate }}"
+              matTooltipPosition="above"
+              (click)="deleteImage($event, item, itemIndex)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          }
+        </div>
+      }
     </div>
     <div class="tb-image-preview-container">
       <div class="tb-image-preview-overlay" (click)="selectionMode && selectImage($event, item)">
-        <button
-          *ngIf="!selectionMode"
-          mat-flat-button
-          color="primary"
-          (click)="editImage($event, item, itemIndex)">
-          {{ (readonly(item) ? (isScada ? 'scada.symbol-details' : 'image.image-details') : (isScada ? 'scada.edit-symbol' : 'image.edit-image')) | translate }}
-        </button>
-        <button
-          *ngIf="selectionMode"
-          mat-flat-button
-          color="primary"
-          (click)="selectImage($event, item)">{{ 'action.select' | translate }}
-        </button>
+        @if (!selectionMode) {
+          <button
+            mat-flat-button
+            color="primary"
+            (click)="editImage($event, item, itemIndex)">
+            {{ (readonly(item) ? (isScada ? 'scada.symbol-details' : 'image.image-details') : (isScada ? 'scada.edit-symbol' : 'image.edit-image')) | translate }}
+          </button>
+        }
+        @if (selectionMode) {
+          <button
+            mat-flat-button
+            color="primary"
+            (click)="selectImage($event, item)">{{ 'action.select' | translate }}
+          </button>
+        }
       </div>
       <div class="tb-image-preview-spacer"></div>
       <img class="tb-image-preview" [src]="item.link | image: {preview: true} | async" alt="{{ item.title }}">
@@ -389,7 +411,9 @@
         <div class="tb-image-title">
           {{ item.title }}
         </div>
-        <div *ngIf="isSystem(item)" class="tb-image-sys">sys</div>
+        @if (isSystem(item)) {
+          <div class="tb-image-sys">sys</div>
+        }
       </div>
       <div class="tb-image-info-container">
         <div>{{ item.descriptor.width }}x{{ item.descriptor.height }}</div>
diff --git a/ui-ngx/src/app/shared/components/image/image-references.component.html b/ui-ngx/src/app/shared/components/image/image-references.component.html
index 32ce614dc2..421dac3caf 100644
--- a/ui-ngx/src/app/shared/components/image/image-references.component.html
+++ b/ui-ngx/src/app/shared/components/image/image-references.component.html
@@ -15,40 +15,45 @@
     limitations under the License.
 
 -->
-<ng-container *ngIf="simpleList; else complexEntityReferences">
+@if (simpleList) {
   <ng-container *ngTemplateOutlet="referencesList; context:{entriesList: referencedEntitiesList, showDetailsLink: true}"></ng-container>
-</ng-container>
-<ng-template #complexEntityReferences>
-  <ng-container *ngIf="contentReady; else loading">
+} @else {
+  @if (contentReady) {
     <ul class="tb-references">
-      <ng-container *ngFor="let entry of referencedEntitiesEntries">
-        <li class="tb-entities-container tb-primary-fill" *ngIf="isSystem(entry[0]); else tenantEntities">
-          <div class="tb-entities-title">{{ 'image.system-entities' | translate }}</div>
-          <ng-container *ngTemplateOutlet="referencesList; context:{entriesList: entry[1].entities, showDetailsLink: true}"></ng-container>
-        </li>
-        <ng-template #tenantEntities>
+      @for (entry of referencedEntitiesEntries; track entry) {
+        @if (isSystem(entry[0])) {
+          <li class="tb-entities-container tb-primary-fill">
+            <div class="tb-entities-title">{{ 'image.system-entities' | translate }}</div>
+            <ng-container *ngTemplateOutlet="referencesList; context:{entriesList: entry[1].entities, showDetailsLink: true}"></ng-container>
+          </li>
+        } @else {
           <li class="tb-entities-container tb-primary-fill">
             <div class="tb-entities-title">
               {{ 'tenant.tenant' | translate }} <a class="tb-reference" [routerLink]="entry[1].tenantDetailsUrl">{{ entry[1].tenantName }}</a> {{ 'image.entities' | translate }}
             </div>
             <ng-container *ngTemplateOutlet="referencesList; context:{entriesList: entry[1].entities, showDetailsLink: false}"></ng-container>
           </li>
-        </ng-template>
-      </ng-container>
+        }
+      }
     </ul>
-  </ng-container>
-</ng-template>
+  } @else {
+    <mat-spinner [diameter]="32" strokeWidth="2"></mat-spinner>
+  }
+}
 <ng-template #referencesList let-entriesList="entriesList" let-showDetailsLink="showDetailsLink">
   <table class="tb-entities-list-table">
-    <tr *ngFor="let referencedEntity of entriesList">
-      <td class="tb-entity-type">{{ referencedEntity.typeName }}</td>
-      <td class="tb-entity-name">
-        <a *ngIf="showDetailsLink" class="tb-reference" [routerLink]="referencedEntity.detailsUrl">{{ referencedEntity.entity.name }}</a>
-        <span *ngIf="!showDetailsLink">{{ referencedEntity.entity.name }}</span>
-      </td>
-    </tr>
+    @for (referencedEntity of entriesList; track referencedEntity) {
+      <tr>
+        <td class="tb-entity-type">{{ referencedEntity.typeName }}</td>
+        <td class="tb-entity-name">
+          @if (showDetailsLink) {
+            <a class="tb-reference" [routerLink]="referencedEntity.detailsUrl">{{ referencedEntity.entity.name }}</a>
+          }
+          @if (!showDetailsLink) {
+            <span>{{ referencedEntity.entity.name }}</span>
+          }
+        </td>
+      </tr>
+    }
   </table>
 </ng-template>
-<ng-template #loading>
-  <mat-spinner [diameter]="32" strokeWidth="2"></mat-spinner>
-</ng-template>
diff --git a/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.html b/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.html
index 3108e6a67c..9844484987 100644
--- a/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.html
+++ b/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.html
@@ -16,95 +16,114 @@
 
 -->
 <div class="tb-container">
-  <label class="tb-title" *ngIf="label" [class]="{'tb-error': !disabled && (required && !imageUrls.length), 'tb-required': !disabled && required}">{{label}}</label>
+  @if (label) {
+    <label class="tb-title" [class]="{'tb-error': !disabled && (required && !imageUrls.length), 'tb-required': !disabled && required}">{{label}}</label>
+  }
   <div class="images-container flex flex-row gap-2" dndDropzone [dndHorizontal]="true" dndEffectAllowed="move"
        [class.no-images]="!imageUrls.length"
        [dndDisableIf]="disabled" (dndDrop)="imageDrop($event)">
     <div dndPlaceholderRef class="image-card image-dnd-placeholder"></div>
-    <div *ngFor="let imageUrl of imageUrls; let $index = index;"
-         (dndStart)="imageDragStart($index)"
-         (dndEnd)="imageDragEnd()"
-         [dndDraggable]="imageUrl"
-         [dndDisableIf]="disabled"
-         dndEffectAllowed="move"
-         [class.image-dragging]="dragIndex === $index"
-         class="image-card flex flex-col">
-      <span class="image-title">{{ 'image-input.images' | translate }} [{{ $index }}]</span>
-      <div class="image-content-container flex flex-row">
-        <div dndHandle *ngIf="!disabled" class="tb-image-action-container tb-drag-handle">
-          <mat-icon color="primary">drag_indicator</mat-icon>
-        </div>
-        <div class="tb-image-preview-container">
-          <img class="tb-image-preview" [src]="imageUrl | image: {preview: true} | async" />
-        </div>
-        <div *ngIf="!disabled" class="tb-image-action-container">
-          <button mat-icon-button color="primary"
-                  type="button"
-                  (click)="clearImage($index)"
-                  matTooltip="{{ 'action.remove' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>close</mat-icon>
-          </button>
+    @for (imageUrl of imageUrls; track imageUrl) {
+      <div
+        (dndStart)="imageDragStart($index)"
+        (dndEnd)="imageDragEnd()"
+        [dndDraggable]="imageUrl"
+        [dndDisableIf]="disabled"
+        dndEffectAllowed="move"
+        [class.image-dragging]="dragIndex === $index"
+        class="image-card flex flex-col">
+        <span class="image-title">{{ 'image-input.images' | translate }} [{{ $index }}]</span>
+        <div class="image-content-container flex flex-row">
+          @if (!disabled) {
+            <div dndHandle class="tb-image-action-container tb-drag-handle">
+              <mat-icon color="primary">drag_indicator</mat-icon>
+            </div>
+          }
+          <div class="tb-image-preview-container">
+            <img class="tb-image-preview" [src]="imageUrl | image: {preview: true} | async" />
+          </div>
+          @if (!disabled) {
+            <div class="tb-image-action-container">
+              <button mat-icon-button color="primary"
+                      type="button"
+                      (click)="clearImage($index)"
+                      matTooltip="{{ 'action.remove' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>close</mat-icon>
+              </button>
+            </div>
+          }
         </div>
       </div>
-    </div>
-    <div class="no-images-prompt" *ngIf="!imageUrls.length">{{ 'image-input.no-images' | translate }}</div>
+    }
+    @if (!imageUrls.length) {
+      <div class="no-images-prompt">{{ 'image-input.no-images' | translate }}</div>
+    }
   </div>
-  <div *ngIf="!disabled" class="tb-image-select-container">
-    <div class="tb-image-container" *ngIf="linkType === ImageLinkType.external">
-      <img *ngIf="externalLinkControl.value; else noImage" class="tb-image-preview" [src]="externalLinkControl.value | image | async">
-    </div>
-    <div *ngIf="linkType === ImageLinkType.external" class="tb-image-info-container">
-      <div class="tb-external-image-container">
-        <div class="tb-external-link-label">
-          {{ 'image.image-link' | translate }}
+  @if (!disabled) {
+    <div class="tb-image-select-container">
+      @if (linkType === ImageLinkType.external) {
+        <div class="tb-image-container">
+          @if (externalLinkControl.value) {
+            <img class="tb-image-preview" [src]="externalLinkControl.value | image | async">
+          } @else {
+            <div class="tb-no-image">{{ 'image.no-image-selected' | translate }}</div>
+          }
         </div>
-        <div class="tb-external-link-input-container">
-          <mat-form-field class="tb-inline-field" appearance="outline" subscriptSizing="dynamic">
-            <input matInput [formControl]="externalLinkControl" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
-          <button class="tb-image-decline-btn"
+      }
+      @if (linkType === ImageLinkType.external) {
+        <div class="tb-image-info-container">
+          <div class="tb-external-image-container">
+            <div class="tb-external-link-label">
+              {{ 'image.image-link' | translate }}
+            </div>
+            <div class="tb-external-link-input-container">
+              <mat-form-field class="tb-inline-field" appearance="outline" subscriptSizing="dynamic">
+                <input matInput [formControl]="externalLinkControl" placeholder="{{ 'widget-config.set' | translate }}">
+              </mat-form-field>
+              <button class="tb-image-decline-btn"
+                      type="button"
+                      mat-icon-button
+                      matTooltip="{{ 'action.decline' | translate }}"
+                      matTooltipPosition="above"
+                      (click)="declineLink($event)">
+                <mat-icon>close</mat-icon>
+              </button>
+              <button class="tb-image-apply-btn"
+                      type="button"
+                      [disabled]="!externalLinkControl.value"
+                      color="primary"
+                      mat-icon-button
+                      matTooltip="{{ 'action.apply' | translate }}"
+                      matTooltipPosition="above"
+                      (click)="applyLink($event)">
+                <mat-icon>check</mat-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+      }
+      @if (linkType === ImageLinkType.none) {
+        <div class="tb-image-select-buttons-container">
+          <button mat-stroked-button
                   type="button"
-                  mat-icon-button
-                  matTooltip="{{ 'action.decline' | translate }}"
-                  matTooltipPosition="above"
-                  (click)="declineLink($event)">
-            <mat-icon>close</mat-icon>
+                  color="primary"
+                  class="tb-image-select-button"
+                  (click)="toggleGallery($event)">
+            <tb-icon matButtonIcon>filter</tb-icon>
+            <span translate>image.browse-from-gallery</span>
           </button>
-          <button class="tb-image-apply-btn"
+          <button mat-stroked-button
                   type="button"
-                  [disabled]="!externalLinkControl.value"
                   color="primary"
-                  mat-icon-button
-                  matTooltip="{{ 'action.apply' | translate }}"
-                  matTooltipPosition="above"
-                  (click)="applyLink($event)">
-            <mat-icon>check</mat-icon>
+                  class="tb-image-select-button"
+                  (click)="setLink($event)">
+            <tb-icon matButtonIcon>link</tb-icon>
+            <span translate>image.set-link</span>
           </button>
         </div>
-      </div>
+      }
     </div>
-    <div *ngIf="linkType === ImageLinkType.none" class="tb-image-select-buttons-container">
-      <button mat-stroked-button
-              type="button"
-              color="primary"
-              class="tb-image-select-button"
-              (click)="toggleGallery($event)">
-        <tb-icon matButtonIcon>filter</tb-icon>
-        <span translate>image.browse-from-gallery</span>
-      </button>
-      <button mat-stroked-button
-              type="button"
-              color="primary"
-              class="tb-image-select-button"
-              (click)="setLink($event)">
-        <tb-icon matButtonIcon>link</tb-icon>
-        <span translate>image.set-link</span>
-      </button>
-    </div>
-  </div>
+  }
 </div>
 
-<ng-template #noImage>
-  <div class="tb-no-image">{{ 'image.no-image-selected' | translate }}</div>
-</ng-template>
diff --git a/ui-ngx/src/app/shared/components/image/scada-symbol-input.component.html b/ui-ngx/src/app/shared/components/image/scada-symbol-input.component.html
index abaa800acf..99068df58e 100644
--- a/ui-ngx/src/app/shared/components/image/scada-symbol-input.component.html
+++ b/ui-ngx/src/app/shared/components/image/scada-symbol-input.component.html
@@ -16,50 +16,62 @@
 
 -->
 <div class="tb-container">
-  <label class="tb-title" *ngIf="label" [class]="{'tb-error': !disabled && (required && linkType === ScadaSymbolLinkType.none), 'tb-required': !disabled && required}">{{label}}</label>
+  @if (label) {
+    <label class="tb-title" [class]="{'tb-error': !disabled && (required && linkType === ScadaSymbolLinkType.none), 'tb-required': !disabled && required}">{{label}}</label>
+  }
   <div class="tb-scada-symbol-select-container" [class]="{disabled: disabled && linkType === ScadaSymbolLinkType.none}">
     <div class="tb-scada-symbol-container">
-      <img *ngIf="linkType !== ScadaSymbolLinkType.none && scadaSymbolUrl; else noSymbol" class="tb-scada-symbol-preview" [src]="scadaSymbolUrl | image: {preview: true} | async">
+      @if (linkType !== ScadaSymbolLinkType.none && scadaSymbolUrl) {
+        <img class="tb-scada-symbol-preview" [src]="scadaSymbolUrl | image: {preview: true} | async">
+      } @else {
+        <div class="tb-no-symbol">{{ (disabled ? 'scada.no-symbol' : 'scada.no-symbol-selected') | translate }}</div>
+      }
     </div>
-    <div *ngIf="linkType !== ScadaSymbolLinkType.none && !disabled" class="tb-scada-symbol-info-container">
-      <div *ngIf="linkType === ScadaSymbolLinkType.resource" class="tb-resource-scada-symbol-container" [class]="{loading: loadingImageResource}">
-        <ng-container *ngIf="!loadingImageResource; else loading">
-          <div class="tb-scada-symbol-title">
-            {{ imageResource.title | customTranslate }}
+    @if (linkType !== ScadaSymbolLinkType.none && !disabled) {
+      <div class="tb-scada-symbol-info-container">
+        @if (linkType === ScadaSymbolLinkType.resource) {
+          <div class="tb-resource-scada-symbol-container" [class]="{loading: loadingImageResource}">
+            @if (!loadingImageResource) {
+              <div class="tb-scada-symbol-title">
+                {{ imageResource.title | customTranslate }}
+              </div>
+            } @else {
+              <mat-spinner [diameter]="80" strokeWidth="4"></mat-spinner>
+            }
           </div>
-        </ng-container>
+        }
+        @if (linkType === ScadaSymbolLinkType.content) {
+          <div class="tb-resource-scada-symbol-container">
+            <div class="tb-scada-symbol-title">
+              {{ scadaSymbolMetadata.title | customTranslate }}
+            </div>
+          </div>
+        }
+        @if (linkType === ScadaSymbolLinkType.resource && !disabled) {
+          <button
+            class="tb-scada-symbol-clear-btn"
+            type="button"
+            mat-icon-button
+            matTooltip="{{ 'scada.clear-symbol' | translate }}"
+            matTooltipPosition="above"
+            (click)="clearSymbol()">
+            <mat-icon>close</mat-icon>
+          </button>
+        }
       </div>
-      <div *ngIf="linkType === ScadaSymbolLinkType.content" class="tb-resource-scada-symbol-container">
-        <div class="tb-scada-symbol-title">
-          {{ scadaSymbolMetadata.title | customTranslate }}
-        </div>
+    }
+    @if (linkType === ScadaSymbolLinkType.none && !disabled) {
+      <div class="tb-scada-symbol-select-buttons-container">
+        <button mat-stroked-button
+                type="button"
+                color="primary"
+                class="tb-scada-symbol-select-button"
+                (click)="openGallery($event)">
+          <tb-icon matButtonIcon>filter</tb-icon>
+          <span translate>scada.browse-symbol-from-gallery</span>
+        </button>
       </div>
-      <button *ngIf="linkType === ScadaSymbolLinkType.resource && !disabled"
-              class="tb-scada-symbol-clear-btn"
-              type="button"
-              mat-icon-button
-              matTooltip="{{ 'scada.clear-symbol' | translate }}"
-              matTooltipPosition="above"
-              (click)="clearSymbol()">
-        <mat-icon>close</mat-icon>
-      </button>
-    </div>
-    <div *ngIf="linkType === ScadaSymbolLinkType.none && !disabled" class="tb-scada-symbol-select-buttons-container">
-      <button mat-stroked-button
-              type="button"
-              color="primary"
-              class="tb-scada-symbol-select-button"
-              (click)="openGallery($event)">
-        <tb-icon matButtonIcon>filter</tb-icon>
-        <span translate>scada.browse-symbol-from-gallery</span>
-      </button>
-    </div>
+    }
   </div>
 </div>
 
-<ng-template #noSymbol>
-  <div class="tb-no-symbol">{{ (disabled ? 'scada.no-symbol' : 'scada.no-symbol-selected') | translate }}</div>
-</ng-template>
-<ng-template #loading>
-  <mat-spinner [diameter]="80" strokeWidth="4"></mat-spinner>
-</ng-template>
diff --git a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
index 61da3149b9..edde51a8a7 100644
--- a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
@@ -25,9 +25,12 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  } @else {
+    <div style="height: 4px;"></div>
+  }
   <div mat-dialog-content class="relative">
     <fieldset [disabled]="isLoading$ | async" tb-toast toastTarget="uploadRoot" >
       <tb-image-input resultAsFile
@@ -41,13 +44,17 @@
                       [fileName]="data?.image?.fileName"
                       (fileNameChanged)="imageFileNameChanged($event)">
       </tb-image-input>
-      <mat-form-field *ngIf="uploadImage && uploadImageFormGroup.get('file').value" class="mat-block">
-        <mat-label translate>image.name</mat-label>
-        <input matInput formControlName="title" required>
-        <mat-error *ngIf="uploadImageFormGroup.get('title').hasError('required')">
-          {{ 'image.name-required' | translate }}
-        </mat-error>
-      </mat-form-field>
+      @if (uploadImage && uploadImageFormGroup.get('file').value) {
+        <mat-form-field class="mat-block">
+          <mat-label translate>image.name</mat-label>
+          <input matInput formControlName="title" required>
+          @if (uploadImageFormGroup.get('title').hasError('required')) {
+            <mat-error>
+              {{ 'image.name-required' | translate }}
+            </mat-error>
+          }
+        </mat-form-field>
+      }
     </fieldset>
   </div>
   <div mat-dialog-actions class="flex flex-row items-center justify-end">
diff --git a/ui-ngx/src/app/shared/components/js-func-module-row.component.html b/ui-ngx/src/app/shared/components/js-func-module-row.component.html
index 2b60f9071c..5e6463ddd5 100644
--- a/ui-ngx/src/app/shared/components/js-func-module-row.component.html
+++ b/ui-ngx/src/app/shared/components/js-func-module-row.component.html
@@ -18,14 +18,15 @@
 <div [formGroup]="moduleRowFormGroup" class="tb-form-table-row tb-js-func-module-row">
   <mat-form-field class="tb-inline-field tb-alias-field" appearance="outline" subscriptSizing="dynamic">
     <input required matInput formControlName="alias" placeholder="{{ 'widget-config.set' | translate }}">
-    <mat-icon matSuffix
-              matTooltipPosition="above"
-              matTooltipClass="tb-error-tooltip"
-              [matTooltip]="'js-func.invalid-module-alias-name' | translate"
-              *ngIf="moduleRowFormGroup.get('alias').invalid && moduleRowFormGroup.get('alias').touched"
-              class="tb-error">
-      warning
-    </mat-icon>
+    @if (moduleRowFormGroup.get('alias').invalid && moduleRowFormGroup.get('alias').touched) {
+      <mat-icon matSuffix
+                matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
+                [matTooltip]="'js-func.invalid-module-alias-name' | translate"
+                class="tb-error">
+        warning
+      </mat-icon>
+    }
   </mat-form-field>
   <tb-resource-autocomplete class="tb-module-link-field"
                             #resourceAutocomplete
@@ -43,14 +44,14 @@
          help-icon-button-class=""
          help-icon="info_outline"
          help-opened-icon="info"
-         help-icon-tooltip="{{ 'js-func.show-module-info' | translate }}"></div>
+    help-icon-tooltip="{{ 'js-func.show-module-info' | translate }}"></div>
     <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=""
          help-icon="mdi:application-brackets-outline"
          help-opened-icon="mdi:application-brackets"
-         help-icon-tooltip="{{ 'js-func.show-module-source-code' | translate }}"></div>
+    help-icon-tooltip="{{ 'js-func.show-module-source-code' | translate }}"></div>
     <button type="button"
             mat-icon-button
             (click)="moduleRemoved.emit()"
diff --git a/ui-ngx/src/app/shared/components/js-func-modules.component.html b/ui-ngx/src/app/shared/components/js-func-modules.component.html
index a4ec4d4752..554cddf7a4 100644
--- a/ui-ngx/src/app/shared/components/js-func-modules.component.html
+++ b/ui-ngx/src/app/shared/components/js-func-modules.component.html
@@ -25,17 +25,25 @@
           <div class="tb-form-table-header-cell tb-module-link-header" translate>js-func.module-resource</div>
           <div class="tb-form-table-header-cell tb-actions-header"></div>
         </div>
-        <div *ngIf="modulesFormArray().controls.length; else noModules" class="tb-form-table-body">
-          <div *ngFor="let moduleControl of modulesFormArray().controls; trackBy: trackByModule; let $index = index;">
-            <tb-js-func-module-row class="flex"
-                                   [index]="$index"
-                                   [formControl]="moduleControl"
-                                   (moduleRemoved)="removeModule($index)">
-            </tb-js-func-module-row>
+        @if (modulesFormArray().controls.length) {
+          <div class="tb-form-table-body">
+            @for (moduleControl of modulesFormArray().controls; track trackByModule($index, moduleControl)) {
+              <div>
+                <tb-js-func-module-row class="flex"
+                                       [index]="$index"
+                                       [formControl]="moduleControl"
+                                       (moduleRemoved)="removeModule($index)">
+                </tb-js-func-module-row>
+              </div>
+            }
           </div>
-        </div>
-        <tb-error *ngIf="modulesFormGroup.hasError('moduleAliasNotUnique')"
-                  noMargin [error]="'js-func.not-unique-module-aliases-error' | translate" style="padding-left: 12px;"></tb-error>
+        } @else {
+          <span class="tb-prompt flex items-center justify-center">{{ 'js-func.no-modules' | translate }}</span>
+        }
+        @if (modulesFormGroup.hasError('moduleAliasNotUnique')) {
+          <tb-error
+          noMargin [error]="'js-func.not-unique-module-aliases-error' | translate" style="padding-left: 12px;"></tb-error>
+        }
       </div>
       <div>
         <button type="button" mat-stroked-button color="primary" (click)="addModule()">
@@ -61,6 +69,3 @@
   </div>
 </div>
 
-<ng-template #noModules>
-  <span class="tb-prompt flex items-center justify-center">{{ 'js-func.no-modules' | translate }}</span>
-</ng-template>
diff --git a/ui-ngx/src/app/shared/components/js-func.component.html b/ui-ngx/src/app/shared/components/js-func.component.html
index e5d663152d..6cd69d6301 100644
--- a/ui-ngx/src/app/shared/components/js-func.component.html
+++ b/ui-ngx/src/app/shared/components/js-func.component.html
@@ -19,29 +19,37 @@
      tb-fullscreen
      [fullscreen]="fullscreen">
   <div style="min-height: 40px;" class="tb-js-func-toolbar flex flex-row items-center justify-start">
-    <label *ngIf="!hideLabel" class="tb-title no-padding"
-           [class]="{'tb-error': !disabled && (hasErrors || !functionValid || required && !modelValue), 'tb-required': !disabled && required}">
-      {{ functionLabel }}
-    </label>
+    @if (!hideLabel) {
+      <label class="tb-title no-padding"
+             [class]="{'tb-error': !disabled && (hasErrors || !functionValid || required && !modelValue), 'tb-required': !disabled && required}">
+        {{ functionLabel }}
+      </label>
+    }
     <ng-content select="[toolbarStartButton]"></ng-content>
     <span class="flex-1"></span>
     <ng-content select="[toolbarPrefixButton]"></ng-content>
-    <fieldset *ngIf="!disabled && withModules" style="width: initial">
-      <div matTooltip="{{'js-func.modules' | translate}}"
-           matTooltipPosition="above"
-           style="border-radius: 50%"
-           #editModulesButton
-           (click)="editModules($event, editModulesButton)">
-        <button type='button' mat-icon-button class="tb-mat-32">
-          <tb-icon color="primary" matButtonIcon>mdi:application-braces-outline</tb-icon>
-        </button>
-      </div>
-    </fieldset>
-    <button type='button' *ngIf="!disabled" mat-button class="tidy" (click)="beautifyJs()">
-      {{'js-func.tidy' | translate }}
-    </button>
+    @if (!disabled && withModules) {
+      <fieldset style="width: initial">
+        <div matTooltip="{{'js-func.modules' | translate}}"
+             matTooltipPosition="above"
+             style="border-radius: 50%"
+             #editModulesButton
+             (click)="editModules($event, editModulesButton)">
+          <button type='button' mat-icon-button class="tb-mat-32">
+            <tb-icon color="primary" matButtonIcon>mdi:application-braces-outline</tb-icon>
+          </button>
+        </div>
+      </fieldset>
+    }
+    @if (!disabled) {
+      <button type='button' mat-button class="tidy" (click)="beautifyJs()">
+        {{'js-func.tidy' | translate }}
+      </button>
+    }
     <ng-content select="[toolbarSuffixButton]"></ng-content>
-    <div *ngIf="helpId" [tb-help-popup]="helpId" [tb-help-popup-style]="helpPopupStyle"></div>
+    @if (helpId) {
+      <div [tb-help-popup]="helpId" [tb-help-popup-style]="helpPopupStyle"></div>
+    }
     <fieldset style="width: initial">
       <div matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
            matTooltipPosition="above"
@@ -56,7 +64,9 @@
   <div id="tb-javascript-panel" class="tb-js-func-panel flex flex-col" tb-toast toastTarget="{{toastTargetId}}">
     <div #javascriptEditor id="tb-javascript-input" [style]="fillHeight ? {} : {minHeight: minHeight}" [class.fill-height]="fillHeight"></div>
   </div>
-  <div *ngIf="!hideBrackets" class="flex flex-row items-center justify-start" style="height: 40px;">
-    <label class="tb-title no-padding" [class]="{'tb-error': hasErrors || !functionValid || required && !modelValue}">&#125;</label>
-  </div>
+  @if (!hideBrackets) {
+    <div class="flex flex-row items-center justify-start" style="height: 40px;">
+      <label class="tb-title no-padding" [class]="{'tb-error': hasErrors || !functionValid || required && !modelValue}">&#125;</label>
+    </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/shared/components/json-content.component.html b/ui-ngx/src/app/shared/components/json-content.component.html
index 67bdbf732c..665c78d17a 100644
--- a/ui-ngx/src/app/shared/components/json-content.component.html
+++ b/ui-ngx/src/app/shared/components/json-content.component.html
@@ -18,28 +18,34 @@
 <div class="tb-json-content flex flex-col" style="background: #fff;" [class]="{'fill-height': fillHeight}"
      tb-fullscreen
      [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
-  <div style="height: 40px;" class="tb-json-content-toolbar flex flex-row items-center justify-start" *ngIf="!hideToolbar">
-    <label class="tb-title no-padding" [class]="{'tb-error': !disabled && (!contentValid || required && !contentBody), 'tb-required': !disabled && required}">{{ label }}</label>
-    <span class="flex-1"></span>
-    <button type="button"
-            mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="beautifyJSON()">
-      {{'js-func.tidy' | translate }}
-    </button>
-    <button type="button"
-            mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="minifyJSON()">
-      {{'js-func.mini' | translate }}
-    </button>
-    <fieldset style="width: initial">
-      <div matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
-           matTooltipPosition="above"
-           style="border-radius: 50%"
-           (click)="fullscreen = !fullscreen">
-        <button type='button' mat-icon-button class="tb-mat-32">
-          <mat-icon class="material-icons">{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+  @if (!hideToolbar) {
+    <div style="height: 40px;" class="tb-json-content-toolbar flex flex-row items-center justify-start">
+      <label class="tb-title no-padding" [class]="{'tb-error': !disabled && (!contentValid || required && !contentBody), 'tb-required': !disabled && required}">{{ label }}</label>
+      <span class="flex-1"></span>
+      @if (!readonly && !disabled) {
+        <button type="button"
+                mat-button class="tidy" (click)="beautifyJSON()">
+          {{'js-func.tidy' | translate }}
         </button>
-      </div>
-    </fieldset>
-  </div>
+      }
+      @if (!readonly && !disabled) {
+        <button type="button"
+                mat-button class="tidy" (click)="minifyJSON()">
+          {{'js-func.mini' | translate }}
+        </button>
+      }
+      <fieldset style="width: initial">
+        <div matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
+             matTooltipPosition="above"
+             style="border-radius: 50%"
+             (click)="fullscreen = !fullscreen">
+          <button type='button' mat-icon-button class="tb-mat-32">
+            <mat-icon class="material-icons">{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+          </button>
+        </div>
+      </fieldset>
+    </div>
+  }
   <div id="tb-json-panel" tb-toast toastTarget="{{toastTargetId}}"
        class="tb-json-content-panel flex flex-col">
     <div #jsonEditor id="tb-json-input" [style]="editorStyle" [class.fill-height]="fillHeight"></div>
diff --git a/ui-ngx/src/app/shared/components/json-object-edit.component.html b/ui-ngx/src/app/shared/components/json-object-edit.component.html
index 3c18ae38d6..13d2c5fa8a 100644
--- a/ui-ngx/src/app/shared/components/json-object-edit.component.html
+++ b/ui-ngx/src/app/shared/components/json-object-edit.component.html
@@ -24,14 +24,18 @@
                      'tb-readonly': readonly,
                      'tb-error': !objectValid}">{{ label }}</label>
     <span class="flex-1"></span>
-    <button type="button"
-            mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="beautifyJSON()">
-      {{'js-func.tidy' | translate }}
-    </button>
-    <button type="button"
-            mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="minifyJSON()">
-      {{'js-func.mini' | translate }}
-    </button>
+    @if (!readonly && !disabled) {
+      <button type="button"
+              mat-button class="tidy" (click)="beautifyJSON()">
+        {{'js-func.tidy' | translate }}
+      </button>
+    }
+    @if (!readonly && !disabled) {
+      <button type="button"
+              mat-button class="tidy" (click)="minifyJSON()">
+        {{'js-func.mini' | translate }}
+      </button>
+    }
     <ng-content select="[toolbarSuffixButton]"></ng-content>
     <button mat-icon-button class="tb-mat-32" (click)="fullscreen = !fullscreen"
             matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
diff --git a/ui-ngx/src/app/shared/components/json-object-view.component.html b/ui-ngx/src/app/shared/components/json-object-view.component.html
index abab9e31bd..91d3245139 100644
--- a/ui-ngx/src/app/shared/components/json-object-view.component.html
+++ b/ui-ngx/src/app/shared/components/json-object-view.component.html
@@ -16,7 +16,9 @@
 
 -->
 <div style="background: #fff;" [class.fill-height]="fillHeight">
-  <label class="tb-title no-padding" *ngIf="label">{{ label }}</label>
+  @if (label) {
+    <label class="tb-title no-padding">{{ label }}</label>
+  }
   <span class="flex-1"></span>
   <div #jsonViewer id="tb-json-view" [class.fill-height]="fillHeight"></div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/kv-map.component.html b/ui-ngx/src/app/shared/components/kv-map.component.html
index db299076ae..73ed90cab3 100644
--- a/ui-ngx/src/app/shared/components/kv-map.component.html
+++ b/ui-ngx/src/app/shared/components/kv-map.component.html
@@ -17,32 +17,34 @@
 -->
 <section class="tb-kv-map flex flex-col" [formGroup]="kvListFormGroup">
   <label translate class="tb-title">{{ titleText }}</label>
-  <div class="flex flex-row items-center justify-start gap-2"
-       formArrayName="keyVals"
-       *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index">
-    <mat-form-field class="mat-block flex-1" subscriptSizing="{{ subscriptSizing }}">
-      <input [formControl]="keyValControl.get('key')" matInput required
-             placeholder="{{ (keyPlaceholderText ? keyPlaceholderText : 'key-val.key') | translate }}"/>
-    </mat-form-field>
-    <mat-form-field class="mat-block flex-1" subscriptSizing="{{ subscriptSizing }}">
-      <input [formControl]="keyValControl.get('value')" matInput [required]="isValueRequired"
-             placeholder="{{ (valuePlaceholderText ? valuePlaceholderText : 'key-val.value') | translate }}"/>
-    </mat-form-field>
-    <button mat-icon-button color="primary"
-            [class.!hidden]="disabled"
-            type="button"
-            (click)="removeKeyVal($index)"
-            [disabled]="isLoading$ | async"
-            matTooltip="{{ 'key-val.remove-entry' | translate }}"
-            matTooltipPosition="above">
-      <mat-icon>close</mat-icon>
-    </button>
-  </div>
+  @for (keyValControl of keyValsFormArray().controls; track keyValControl) {
+    <div class="flex flex-row items-center justify-start gap-2"
+         formArrayName="keyVals"
+         >
+      <mat-form-field class="mat-block flex-1" subscriptSizing="{{ subscriptSizing }}">
+        <input [formControl]="keyValControl.get('key')" matInput required
+               placeholder="{{ (keyPlaceholderText ? keyPlaceholderText : 'key-val.key') | translate }}"/>
+      </mat-form-field>
+      <mat-form-field class="mat-block flex-1" subscriptSizing="{{ subscriptSizing }}">
+        <input [formControl]="keyValControl.get('value')" matInput [required]="isValueRequired"
+               placeholder="{{ (valuePlaceholderText ? valuePlaceholderText : 'key-val.value') | translate }}"/>
+      </mat-form-field>
+      <button mat-icon-button color="primary"
+              [class.!hidden]="disabled"
+              type="button"
+              (click)="removeKeyVal($index)"
+              [disabled]="isLoading$ | async"
+              matTooltip="{{ 'key-val.remove-entry' | translate }}"
+              matTooltipPosition="above">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
+  }
   <span [class]="{
           'disabled': disabled,
           '!hidden': keyValsFormArray().length
         }"
-        class="no-data-found flex items-center justify-center" translate>{{noDataText ? noDataText : 'key-val.no-data'}}</span>
+  class="no-data-found flex items-center justify-center" translate>{{noDataText ? noDataText : 'key-val.no-data'}}</span>
   <div style="margin-top: 8px;">
     <button mat-button mat-raised-button color="primary"
             [class.!hidden]="disabled"
diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.html b/ui-ngx/src/app/shared/components/markdown-editor.component.html
index 391aa9c0da..5351008b3d 100644
--- a/ui-ngx/src/app/shared/components/markdown-editor.component.html
+++ b/ui-ngx/src/app/shared/components/markdown-editor.component.html
@@ -22,11 +22,13 @@
     <span class="flex-1"></span>
     <button [class.!hidden]="editorMode"
             type="button"
-            mat-button (click)="toggleEditMode()">{{ 'markdown.edit' | translate }}</button>
+    mat-button (click)="toggleEditMode()">{{ 'markdown.edit' | translate }}</button>
     <button [class.!hidden]="!editorMode"
             type="button"
-            mat-button (click)="toggleEditMode()">{{ 'markdown.preview' | translate }}</button>
-    <div *ngIf = "helpId" [tb-help-popup]="helpId" [tb-help-popup-style]="helpPopupStyle"></div>
+    mat-button (click)="toggleEditMode()">{{ 'markdown.preview' | translate }}</button>
+    @if (helpId) {
+      <div [tb-help-popup]="helpId" [tb-help-popup-style]="helpPopupStyle"></div>
+    }
     <fieldset style="width: initial">
       <div matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
            matTooltipPosition="above"
@@ -44,7 +46,9 @@
       <tb-markdown [data]="renderValue" lineNumbers fallbackToPlainMarkdown></tb-markdown>
     </div>
   </div>
-  <div *ngIf="readonly || disabled" class="tb-markdown-view-container">
-    <tb-markdown [data]="renderValue" lineNumbers fallbackToPlainMarkdown></tb-markdown>
-  </div>
+  @if (readonly || disabled) {
+    <div class="tb-markdown-view-container">
+      <tb-markdown [data]="renderValue" lineNumbers fallbackToPlainMarkdown></tb-markdown>
+    </div>
+  }
 </div>
diff --git a/ui-ngx/src/app/shared/components/markdown.component.html b/ui-ngx/src/app/shared/components/markdown.component.html
index 62709f4f90..203900dd96 100644
--- a/ui-ngx/src/app/shared/components/markdown.component.html
+++ b/ui-ngx/src/app/shared/components/markdown.component.html
@@ -17,10 +17,12 @@
 -->
 <ng-container #markdownContainer>
 </ng-container>
-<div *ngIf="error && !fallbackToPlainMarkdown" style="color: #f00; font-size: 14px;
+@if (error && !fallbackToPlainMarkdown) {
+<div style="color: #f00; font-size: 14px;
                                                       line-height: 28px;
                                                       background: #efefef;">
-  {{error}}
-</div>
+    {{error}}
+  </div>
+}
 <div #fallbackElement [class.!hidden]="!usePlainMarkdown && !(error && fallbackToPlainMarkdown)" class="tb-markdown-view" [class]="markdownClass" [style]="style">
 </div>
diff --git a/ui-ngx/src/app/shared/components/material-icon-select.component.html b/ui-ngx/src/app/shared/components/material-icon-select.component.html
index 59566607be..dc22921c7e 100644
--- a/ui-ngx/src/app/shared/components/material-icon-select.component.html
+++ b/ui-ngx/src/app/shared/components/material-icon-select.component.html
@@ -15,20 +15,23 @@
     limitations under the License.
 
 -->
-<div *ngIf="!asBoxInput; else boxInput"  class="flex flex-row" [formGroup]="materialIconFormGroup">
-  <tb-icon class="icon-value" [style]="color ? { color: color } : {}" (click)="openIconDialog()">{{materialIconFormGroup.get('icon').value}}</tb-icon>
-  <mat-form-field class="flex-1">
-    <mat-label>{{ label }}</mat-label>
-    <input [required]="required" matInput formControlName="icon" (mousedown)="openIconDialog()">
-    <button *ngIf="iconClearButton"
-            type="button"
-            matSuffix mat-icon-button aria-label="Clear"
-            (click)="clear()">
-      <tb-icon>close</tb-icon>
-    </button>
-  </mat-form-field>
-</div>
-<ng-template #boxInput>
+@if (!asBoxInput) {
+  <div  class="flex flex-row" [formGroup]="materialIconFormGroup">
+    <tb-icon class="icon-value" [style]="color ? { color: color } : {}" (click)="openIconDialog()">{{materialIconFormGroup.get('icon').value}}</tb-icon>
+    <mat-form-field class="flex-1">
+      <mat-label>{{ label }}</mat-label>
+      <input [required]="required" matInput formControlName="icon" (mousedown)="openIconDialog()">
+      @if (iconClearButton) {
+        <button
+          type="button"
+          matSuffix mat-icon-button aria-label="Clear"
+          (click)="clear()">
+          <tb-icon>close</tb-icon>
+        </button>
+      }
+    </mat-form-field>
+  </div>
+} @else {
   <button type="button"
           mat-stroked-button
           class="tb-box-button"
@@ -39,4 +42,4 @@
           (click)="openIconPopup($event, matButton)">
     <tb-icon matButtonIcon>{{materialIconFormGroup.get('icon').value}}</tb-icon>
   </button>
-</ng-template>
+}
diff --git a/ui-ngx/src/app/shared/components/material-icons.component.html b/ui-ngx/src/app/shared/components/material-icons.component.html
index 97a661bfb1..bb9e3fca58 100644
--- a/ui-ngx/src/app/shared/components/material-icons.component.html
+++ b/ui-ngx/src/app/shared/components/material-icons.component.html
@@ -17,7 +17,9 @@
 -->
 <div class="tb-material-icons-panel">
   <div class="flex w-full">
-    <span *ngIf="showTitle" class="tb-material-icons-title flex-1" translate>icon.icons</span>
+    @if (showTitle) {
+      <span class="tb-material-icons-title flex-1" translate>icon.icons</span>
+    }
     @if (allowedCustomIcon) {
       <tb-toggle-select [(ngModel)]="isCustomIcon" [ngModelOptions]="{standalone: true}" (ngModelChange)="selectedIcon = null">
         <tb-toggle-option [value]="false">{{ 'resource.system' | translate }}</tb-toggle-option>
@@ -30,61 +32,73 @@
     <mat-form-field class="tb-material-icons-search tb-inline-field" appearance="outline" subscriptSizing="dynamic">
       <mat-icon matPrefix>search</mat-icon>
       <input matInput [formControl]="searchIconControl" placeholder="{{ 'icon.search-icon' | translate }}"/>
-      <button *ngIf="searchIconControl.value"
-              type="button"
-              matSuffix mat-icon-button aria-label="Clear"
-              (click)="clearSearch()">
-        <mat-icon class="material-icons">close</mat-icon>
-      </button>
+      @if (searchIconControl.value) {
+        <button
+          type="button"
+          matSuffix mat-icon-button aria-label="Clear"
+          (click)="clearSearch()">
+          <mat-icon class="material-icons">close</mat-icon>
+        </button>
+      }
     </mat-form-field>
     <cdk-virtual-scroll-viewport [class.!hidden]="notFound" #iconsPanel
                                  [itemSize]="iconsRowHeight" class="tb-material-icons-viewport"
                                  [style.width]="iconsPanelWidth"
                                  [style.height]="iconsPanelHeight">
       <div *cdkVirtualFor="let iconRow of iconRows$ | async" class="tb-material-icons-row">
-        <ng-container *ngFor="let icon of iconRow">
-          <button *ngIf="icon.name === selectedIcon"
-                  class="tb-select-icon-button"
-                  mat-raised-button
-                  color="primary"
-                  (click)="selectIcon(icon.name)"
-                  matTooltip="{{ icon.displayName }}"
-                  matTooltipPosition="above"
-                  type="button">
-            <tb-icon matButtonIcon>{{icon.name}}</tb-icon>
-          </button>
-          <button *ngIf="icon.name !== selectedIcon"
-                  class="tb-select-icon-button"
-                  mat-button
-                  (click)="selectIcon(icon.name)"
-                  matTooltip="{{ icon.displayName }}"
-                  matTooltipPosition="above"
-                  type="button">
-            <tb-icon matButtonIcon>{{icon.name}}</tb-icon>
-          </button>
-        </ng-container>
+        @for (icon of iconRow; track icon) {
+          @if (icon.name === selectedIcon) {
+            <button
+              class="tb-select-icon-button"
+              mat-raised-button
+              color="primary"
+              (click)="selectIcon(icon.name)"
+              matTooltip="{{ icon.displayName }}"
+              matTooltipPosition="above"
+              type="button">
+              <tb-icon matButtonIcon>{{icon.name}}</tb-icon>
+            </button>
+          }
+          @if (icon.name !== selectedIcon) {
+            <button
+              class="tb-select-icon-button"
+              mat-button
+              (click)="selectIcon(icon.name)"
+              matTooltip="{{ icon.displayName }}"
+              matTooltipPosition="above"
+              type="button">
+              <tb-icon matButtonIcon>{{icon.name}}</tb-icon>
+            </button>
+          }
+        }
       </div>
     </cdk-virtual-scroll-viewport>
-    <ng-container *ngIf="notFound">
+    @if (notFound) {
       <div class="tb-no-data-available" [style.width]="iconsPanelWidth">
         <div class="tb-no-data-bg"></div>
         <div class="tb-no-data-text">{{ 'icon.no-icons-found' | translate:{iconSearch: searchIconControl.value} }}</div>
       </div>
-    </ng-container>
-    <div class="tb-material-icons-panel-buttons" *ngIf="iconClearButton || !showAllSubject.value">
-      <button *ngIf="iconClearButton"
-              mat-button
-              color="primary"
-              type="button"
-              (click)="clearIcon()"
-              [disabled]="!selectedIcon">
-        {{ 'action.clear' | translate }}
-      </button>
-      <span class="flex-1"></span>
-      <button *ngIf="!showAllSubject.value" class="tb-material-icons-show-more" mat-button color="primary" (click)="showAllSubject.next(true)">
-        {{ 'action.show-more' | translate }}
-      </button>
-    </div>
+    }
+    @if (iconClearButton || !showAllSubject.value) {
+      <div class="tb-material-icons-panel-buttons">
+        @if (iconClearButton) {
+          <button
+            mat-button
+            color="primary"
+            type="button"
+            (click)="clearIcon()"
+            [disabled]="!selectedIcon">
+            {{ 'action.clear' | translate }}
+          </button>
+        }
+        <span class="flex-1"></span>
+        @if (!showAllSubject.value) {
+          <button class="tb-material-icons-show-more" mat-button color="primary" (click)="showAllSubject.next(true)">
+            {{ 'action.show-more' | translate }}
+          </button>
+        }
+      </div>
+    }
   } @else {
     <tb-gallery-image-input [style.width]="iconsPanelWidth"
                             [(ngModel)]="selectedIcon">
diff --git a/ui-ngx/src/app/shared/components/message-type-autocomplete.component.html b/ui-ngx/src/app/shared/components/message-type-autocomplete.component.html
index b073d93a4e..fb82ed8032 100644
--- a/ui-ngx/src/app/shared/components/message-type-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/message-type-autocomplete.component.html
@@ -23,21 +23,27 @@
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="messageTypeAutocomplete">
-  <button *ngIf="messageTypeFormGroup.get('messageType').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (messageTypeFormGroup.get('messageType').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete
     class="tb-autocomplete"
     #messageTypeAutocomplete="matAutocomplete"
     [displayWith]="displayMessageTypeFn">
-    <mat-option *ngFor="let messageType of filteredMessageTypes | async" [value]="messageType">
-      <span [innerHTML]="displayMessageTypeFn(messageType) | highlight:searchText"></span>
-    </mat-option>
+    @for (messageType of filteredMessageTypes | async; track messageType) {
+      <mat-option [value]="messageType">
+        <span [innerHTML]="displayMessageTypeFn(messageType) | highlight:searchText"></span>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="messageTypeFormGroup.get('messageType').hasError('required')">
-    {{ 'rulenode.message-type-required' | translate }}
-  </mat-error>
+  @if (messageTypeFormGroup.get('messageType').hasError('required')) {
+    <mat-error>
+      {{ 'rulenode.message-type-required' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/multiple-image-input.component.html b/ui-ngx/src/app/shared/components/multiple-image-input.component.html
index a906430a7a..da82cf54db 100644
--- a/ui-ngx/src/app/shared/components/multiple-image-input.component.html
+++ b/ui-ngx/src/app/shared/components/multiple-image-input.component.html
@@ -16,7 +16,9 @@
 
 -->
 <div class="tb-container">
-  <label class="tb-title" *ngIf="label" [class]="{'tb-error': !disabled && (required && !safeImageUrls.length), 'tb-required': !disabled && required}">{{label}}</label>
+  @if (label) {
+    <label class="tb-title" [class]="{'tb-error': !disabled && (required && !safeImageUrls.length), 'tb-required': !disabled && required}">{{label}}</label>
+  }
   <ng-container #flow="flow"
                 [flowConfig]="{allowDuplicateUploads: true}">
     <div class="tb-image-select-container" #flowDrop="flowDrop" flowDrop [flow]="flow.flowJs">
@@ -24,46 +26,58 @@
            [dndDisableIf]="disabled" (dndDrop)="imageDrop($event)"
            [class.no-images]="!safeImageUrls.length">
         <div dndPlaceholderRef class="image-card image-dnd-placeholder"></div>
-        <div *ngFor="let safeImageUrl of safeImageUrls; let $index = index;"
-             (dndStart)="imageDragStart($index)"
-             (dndEnd)="imageDragEnd()"
-             [dndDraggable]="safeImageUrl"
-             [dndDisableIf]="disabled"
-             dndEffectAllowed="move"
-             [class.image-dragging]="dragIndex === $index"
-             class="image-card flex flex-col">
-          <span class="image-title">{{ 'image-input.images' | translate }} [{{ $index }}]</span>
-          <div class="image-content-container flex flex-row">
-            <div dndHandle *ngIf="!disabled" class="tb-image-action-container tb-drag-handle">
-              <mat-icon color="primary">drag_indicator</mat-icon>
-            </div>
-            <div class="tb-image-preview-container">
-              <img class="tb-image-preview" [src]="safeImageUrl" />
-            </div>
-            <div *ngIf="!disabled" class="tb-image-action-container">
-              <button mat-icon-button color="primary"
-                      type="button"
-                      (click)="clearImage($index)"
-                      matTooltip="{{ 'action.remove' | translate }}"
-                      matTooltipPosition="above">
-                <mat-icon>close</mat-icon>
-              </button>
+        @for (safeImageUrl of safeImageUrls; track safeImageUrl) {
+          <div
+            (dndStart)="imageDragStart($index)"
+            (dndEnd)="imageDragEnd()"
+            [dndDraggable]="safeImageUrl"
+            [dndDisableIf]="disabled"
+            dndEffectAllowed="move"
+            [class.image-dragging]="dragIndex === $index"
+            class="image-card flex flex-col">
+            <span class="image-title">{{ 'image-input.images' | translate }} [{{ $index }}]</span>
+            <div class="image-content-container flex flex-row">
+              @if (!disabled) {
+                <div dndHandle class="tb-image-action-container tb-drag-handle">
+                  <mat-icon color="primary">drag_indicator</mat-icon>
+                </div>
+              }
+              <div class="tb-image-preview-container">
+                <img class="tb-image-preview" [src]="safeImageUrl" />
+              </div>
+              @if (!disabled) {
+                <div class="tb-image-action-container">
+                  <button mat-icon-button color="primary"
+                          type="button"
+                          (click)="clearImage($index)"
+                          matTooltip="{{ 'action.remove' | translate }}"
+                          matTooltipPosition="above">
+                    <mat-icon>close</mat-icon>
+                  </button>
+                </div>
+              }
             </div>
           </div>
-        </div>
-        <div class="no-images-prompt" *ngIf="!safeImageUrls.length">{{ 'image-input.no-images' | translate }}</div>
+        }
+        @if (!safeImageUrls.length) {
+          <div class="no-images-prompt">{{ 'image-input.no-images' | translate }}</div>
+        }
       </div>
-      <div *ngIf="!disabled" class="drop-area tb-flow-drop">
-        <div class="upload-label">
-          <mat-icon>cloud_upload</mat-icon>
-          <span translate>image-input.drop-images-or</span>
-          <button type="button" mat-button color="primary" class="browse-file">
-            <label for="{{inputId}}">{{'file-input.browse-files' | translate}}</label>
-          </button>
-          <input class="file-input" flowButton type="file" [flow]="flow.flowJs" [flowAttributes]="{accept: 'image/*'}" id="{{inputId}}">
+      @if (!disabled) {
+        <div class="drop-area tb-flow-drop">
+          <div class="upload-label">
+            <mat-icon>cloud_upload</mat-icon>
+            <span translate>image-input.drop-images-or</span>
+            <button type="button" mat-button color="primary" class="browse-file">
+              <label for="{{inputId}}">{{'file-input.browse-files' | translate}}</label>
+            </button>
+            <input class="file-input" flowButton type="file" [flow]="flow.flowJs" [flowAttributes]="{accept: 'image/*'}" id="{{inputId}}">
+          </div>
         </div>
-      </div>
+      }
     </div>
   </ng-container>
-  <div class="tb-hint" *ngIf="maxSizeByte && !disabled" translate [translateParams]="{ size: maxSizeByte | fileSize}">dashboard.maximum-upload-file-size</div>
+  @if (maxSizeByte && !disabled) {
+    <div class="tb-hint" translate [translateParams]="{ size: maxSizeByte | fileSize}">dashboard.maximum-upload-file-size</div>
+  }
 </div>
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.html b/ui-ngx/src/app/shared/components/notification/notification.component.html
index 65e7c936f3..5a7a35eb2a 100644
--- a/ui-ngx/src/app/shared/components/notification/notification.component.html
+++ b/ui-ngx/src/app/shared/components/notification/notification.component.html
@@ -17,35 +17,44 @@
 -->
 <section class="notification flex flex-row items-start justify-between"
          [style]="{borderColor: notificationColor(), backgroundColor: notificationBackgroundColor()}">
-  <div *ngIf="showIcon; else defaultIcon">
-    <tb-icon class="icon" [style.color]="notification.additionalConfig.icon.color">
-      {{ notification.additionalConfig.icon.icon }}
-    </tb-icon>
-  </div>
-  <ng-template #defaultIcon>
-    <tb-icon class="icon" *ngIf="notificationTypeIcons.get(notification.type)" [style]="notificationIconColor()">
-      {{ notificationTypeIcons.get(notification.type) }}
-    </tb-icon>
-  </ng-template>
+  @if (showIcon) {
+    <div>
+      <tb-icon class="icon" [style.color]="notification.additionalConfig.icon.color">
+        {{ notification.additionalConfig.icon.icon }}
+      </tb-icon>
+    </div>
+  } @else {
+    @if (notificationTypeIcons.get(notification.type)) {
+      <tb-icon class="icon" [style]="notificationIconColor()">
+        {{ notificationTypeIcons.get(notification.type) }}
+      </tb-icon>
+    }
+  }
   <div class="content flex-1">
     <div class="title" [innerHTML]="title"></div>
     <div class="message" [innerHTML]="message"></div>
-    <button *ngIf="showButton" mat-stroked-button class="button" color="primary"
-            (click)="navigate($event)">
-      {{ buttonLabel }}
-    </button>
+    @if (showButton) {
+      <button mat-stroked-button class="button" color="primary"
+              (click)="navigate($event)">
+        {{ buttonLabel }}
+      </button>
+    }
   </div>
   <div class="description flex flex-col items-end justify-start">
     <span class="time">{{ notification.createdTime ?? currentDate | dateAgo }}</span>
-    <button mat-icon-button (click)="markRead($event)" *ngIf="!hideMarkAsReadButton"
-            matTooltip="{{ 'notification.mark-as-read' | translate }}" matTooltipPosition="above">
-      <mat-icon>check_circle_outline</mat-icon>
-    </button>
-    <div class="alarm-severity" *ngIf="notification.type === notificationType.ALARM && !notification.info.cleared"
-         [style.background-color]="alarmColorSeverityBackground()">
-      <span [style]="notificationIconColor()" class="severity">
-        {{alarmSeverityTranslations.get(notification.info.alarmSeverity) | translate}}
-      </span>
-    </div>
+    @if (!hideMarkAsReadButton) {
+      <button mat-icon-button (click)="markRead($event)"
+              matTooltip="{{ 'notification.mark-as-read' | translate }}" matTooltipPosition="above">
+        <mat-icon>check_circle_outline</mat-icon>
+      </button>
+    }
+    @if (notification.type === notificationType.ALARM && !notification.info.cleared) {
+      <div class="alarm-severity"
+           [style.background-color]="alarmColorSeverityBackground()">
+        <span [style]="notificationIconColor()" class="severity">
+          {{alarmSeverityTranslations.get(notification.info.alarmSeverity) | translate}}
+        </span>
+      </div>
+    }
   </div>
 </section>
diff --git a/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.html b/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.html
index 9c2f5cade8..26ff960db8 100644
--- a/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.html
@@ -23,53 +23,69 @@
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="templateAutocomplete">
-  <button *ngIf="selectTemplateFormGroup.get('templateName').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
-  <button *ngIf="selectTemplateFormGroup.get('templateName').value?.id && !disabled && allowEdit"
-          type="button"
-          matSuffix mat-icon-button aria-label="Edit"
-          matTooltip="{{ 'notification.edit-notification-template' | translate }}"
-          matTooltipPosition="above"
-          (click)="editTemplate($event)">
-    <mat-icon class="material-icons">edit</mat-icon>
-  </button>
-  <button #createTemplateButton
-          mat-button color="primary" matSuffix
-          *ngIf="allowCreate && !selectTemplateFormGroup.get('templateName').value && !disabled"
-          (click)="createTemplate($event, createTemplateButton)">
-    <span style="white-space: nowrap">{{ 'notification.create-new' | translate }}</span>
-  </button>
+  @if (selectTemplateFormGroup.get('templateName').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
+  @if (selectTemplateFormGroup.get('templateName').value?.id && !disabled && allowEdit) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Edit"
+      matTooltip="{{ 'notification.edit-notification-template' | translate }}"
+      matTooltipPosition="above"
+      (click)="editTemplate($event)">
+      <mat-icon class="material-icons">edit</mat-icon>
+    </button>
+  }
+  @if (allowCreate && !selectTemplateFormGroup.get('templateName').value && !disabled) {
+    <button #createTemplateButton
+            mat-button color="primary" matSuffix
+            (click)="createTemplate($event, createTemplateButton)">
+      <span style="white-space: nowrap">{{ 'notification.create-new' | translate }}</span>
+    </button>
+  }
   <mat-autocomplete class="tb-autocomplete"
                     #templateAutocomplete="matAutocomplete"
                     [displayWith]="displayTemplateFn"
                     >
-    <mat-option *ngFor="let template of filteredTemplate | async" [value]="template" class="template-option">
-      <span class="template-option-name" [innerHTML]="template.name | highlight:searchText"></span>
-      <mat-chip-set>
-        <mat-chip disabled *ngFor="let method of template.configuration.deliveryMethodsTemplates | keyvalue">
-          {{ notificationDeliveryMethodInfoMap.get(method.key).name | translate }}
-        </mat-chip>
-      </mat-chip-set>
-    </mat-option>
-    <mat-option *ngIf="!(filteredTemplate | async)?.length" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span translate>notification.no-notification-templates</span>
+    @for (template of (filteredTemplate | async); track template) {
+      <mat-option [value]="template" class="template-option">
+        <span class="template-option-name" [innerHTML]="template.name | highlight:searchText"></span>
+        <mat-chip-set>
+          @for (method of template.configuration.deliveryMethodsTemplates | keyvalue; track method) {
+            <mat-chip disabled>
+              {{ getNotificationDeliveryMethodInfoMap(method.key).name | translate }}
+            </mat-chip>
+          }
+        </mat-chip-set>
+      </mat-option>
+    }
+    @if (!(filteredTemplate | async)?.length) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span translate>notification.no-notification-templates</span>
+            </div>
+          } @else {
+            <span>{{ 'notification.no-template-matching' | translate : {template: truncate.transform(searchText, true, 6,'...')} }}</span>
+            @if (allowCreate) {
+              <span>
+                <a translate (click)="createTemplateByName($event, searchText)">notification.create-new-template</a>
+              </span>
+            }
+          }
         </div>
-        <ng-template #searchNotEmpty>
-          <span>{{ 'notification.no-template-matching' | translate : {template: truncate.transform(searchText, true, 6, &apos;...&apos;)} }}</span>
-          <span *ngIf="allowCreate">
-            <a translate (click)="createTemplateByName($event, searchText)">notification.create-new-template</a>
-          </span>
-        </ng-template>
-      </div>
-    </mat-option>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="selectTemplateFormGroup.get('templateName').hasError('required')">
-    {{ 'notification.template-required' | translate }}
-  </mat-error>
+  @if (selectTemplateFormGroup.get('templateName').hasError('required')) {
+    <mat-error>
+      {{ 'notification.template-required' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.ts b/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.ts
index 6f3d6243b2..477f93d208 100644
--- a/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.ts
@@ -28,6 +28,7 @@ import { PageLink } from '@shared/models/page/page-link';
 import { Direction } from '@shared/models/page/sort-order';
 import { emptyPageData } from '@shared/models/page/page-data';
 import {
+  NotificationDeliveryMethod,
   NotificationDeliveryMethodInfoMap,
   NotificationTemplate,
   NotificationType
@@ -268,4 +269,8 @@ export class TemplateAutocompleteComponent implements ControlValueAccessor, OnIn
     this.updateView(null);
     this.dirty = true;
   }
+
+  getNotificationDeliveryMethodInfoMap(key: string) {
+    return this.notificationDeliveryMethodInfoMap.get(key as NotificationDeliveryMethod);
+  }
 }
diff --git a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
index df1342fff4..7ff7f7ba2c 100644
--- a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
@@ -25,38 +25,51 @@
          [matAutocomplete]="packageAutocomplete"
          [matAutocompleteDisabled]="disabled"
          [class.!hidden]="showDetailsPageLink && usePackageLink && disabled && otaPackageFormGroup.get('packageId').value">
-  <a *ngIf="showDetailsPageLink && usePackageLink && otaPackageFormGroup.get('packageId').value && disabled"
-     aria-label="Open ota package" [routerLink]=packageURL>
-    {{ displayPackageFn(otaPackageFormGroup.get('packageId').value) }}
-  </a>
-  <button *ngIf="otaPackageFormGroup.get('packageId').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (showDetailsPageLink && usePackageLink && otaPackageFormGroup.get('packageId').value && disabled) {
+    <a
+      aria-label="Open ota package" [routerLink]=packageURL>
+      {{ displayPackageFn(otaPackageFormGroup.get('packageId').value) }}
+    </a>
+  }
+  @if (otaPackageFormGroup.get('packageId').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete class="tb-autocomplete"
                     #packageAutocomplete="matAutocomplete"
                     [displayWith]="displayPackageFn">
-    <mat-option *ngFor="let package of filteredPackages | async" [value]="package">
-      <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()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span>{{ notFoundPackage | translate }}</span>
-        </div>
-        <ng-template #searchNotEmpty>
-          <span>
+    @for (package of filteredPackages | async; track package) {
+      <mat-option [value]="package">
+        <span [innerHTML]="packageTitleText(package) | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if (!(filteredPackages | async)?.length) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span>{{ notFoundPackage | translate }}</span>
+            </div>
+          } @else {
+            <span>
               {{ translate.get(notMatchingPackage,
-            {entity: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
-          </span>
-        </ng-template>
-      </div>
-    </mat-option>
+              {entity: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
+            </span>
+          }
+        </div>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="otaPackageFormGroup.get('packageId').hasError('required')">
-    {{ requiredErrorText | translate }}
-  </mat-error>
-  <mat-hint *ngIf="!disabled">{{ hintText | translate }}</mat-hint>
+  @if (otaPackageFormGroup.get('packageId').hasError('required')) {
+    <mat-error>
+      {{ requiredErrorText | translate }}
+    </mat-error>
+  }
+  @if (!disabled) {
+    <mat-hint>{{ hintText | translate }}</mat-hint>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/phone-input.component.html b/ui-ngx/src/app/shared/components/phone-input.component.html
index 663576bd70..2590b5d913 100644
--- a/ui-ngx/src/app/shared/components/phone-input.component.html
+++ b/ui-ngx/src/app/shared/components/phone-input.component.html
@@ -17,16 +17,24 @@
 -->
 <form [formGroup]="phoneFormGroup">
   <div class="phone-input-container">
-    <div class="flags-select-container" *ngIf="showFlagSelect">
-      <span class="flag-container" *ngIf="!isLoad">{{ flagIcon }}</span>
-      <mat-spinner diameter="20" class="flag-loader" *ngIf="isLoad"></mat-spinner>
-      <mat-select class="country-select" formControlName="country">
-        <mat-option *ngFor="let country of allCountries" [value]="country.iso2">
-          <span style="font-size: 20px;">{{country.flag}}</span>
-          <span>{{' ' + country.name + ' +' + country.dialCode }}</span>
-        </mat-option>
-      </mat-select>
-    </div>
+    @if (showFlagSelect) {
+      <div class="flags-select-container">
+        @if (!isLoad) {
+          <span class="flag-container">{{ flagIcon }}</span>
+        }
+        @if (isLoad) {
+          <mat-spinner diameter="20" class="flag-loader"></mat-spinner>
+        }
+        <mat-select class="country-select" formControlName="country">
+          @for (country of allCountries; track country) {
+            <mat-option [value]="country.iso2">
+              <span style="font-size: 20px;">{{country.flag}}</span>
+              <span>{{' ' + country.name + ' +' + country.dialCode }}</span>
+            </mat-option>
+          }
+        </mat-select>
+      </div>
+    }
     <mat-form-field class="phone-input" [appearance]="appearance" [floatLabel]="floatLabel" subscriptSizing="dynamic">
       <mat-label>{{ label }}</mat-label>
       <input
@@ -38,12 +46,16 @@
         autocomplete="off"
         [required]="required">
       <mat-hint innerHTML="{{ hint | translate: {phoneNumber: phonePlaceholder} }}"></mat-hint>
-      <mat-error *ngIf="phoneFormGroup.get('phoneNumber').hasError('required')">
-        {{ requiredErrorText }}
-      </mat-error>
-      <mat-error *ngIf="phoneFormGroup.get('phoneNumber').hasError('invalidPhoneNumber')">
-        {{ validationErrorText }}
-      </mat-error>
+      @if (phoneFormGroup.get('phoneNumber').hasError('required')) {
+        <mat-error>
+          {{ requiredErrorText }}
+        </mat-error>
+      }
+      @if (phoneFormGroup.get('phoneNumber').hasError('invalidPhoneNumber')) {
+        <mat-error>
+          {{ validationErrorText }}
+        </mat-error>
+      }
     </mat-form-field>
   </div>
 </form>
diff --git a/ui-ngx/src/app/shared/components/popover.component.ts b/ui-ngx/src/app/shared/components/popover.component.ts
index 7b74c90bfd..f971d94ec3 100644
--- a/ui-ngx/src/app/shared/components/popover.component.ts
+++ b/ui-ngx/src/app/shared/components/popover.component.ts
@@ -327,9 +327,9 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
       (overlayOutsideClick)="onClickOutside($event)"
       (detach)="hide()"
       (positionChange)="onPositionChange($event)"
-    >
+      >
       <div #popoverRoot [@popoverMotion]="tbAnimationState"
-           (@popoverMotion.done)="animationDone()">
+        (@popoverMotion.done)="animationDone()">
         <div
           #popover
           class="tb-popover"
@@ -337,28 +337,32 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
           [class.tb-popover-rtl]="dir === 'rtl'"
           [class]="classMap"
           [style]="tbOverlayStyle"
-        >
+          >
           <div class="tb-popover-content">
             <div class="tb-popover-arrow">
               <span class="tb-popover-arrow-content"></span>
             </div>
             <div class="tb-popover-inner" [style]="tbPopoverInnerStyle" role="tooltip">
-              <div *ngIf="tbShowCloseButton" class="tb-popover-close-button" (click)="closeButtonClick($event)">×</div>
+              @if (tbShowCloseButton) {
+                <div class="tb-popover-close-button" (click)="closeButtonClick($event)">×</div>
+              }
               <div style="width: 100%; height: 100%;">
                 <div class="tb-popover-inner-content"  [style]="tbPopoverInnerContentStyle"
-                     [class.strict-position]="strictPosition">
-                  <ng-container *ngIf="tbContent">
+                  [class.strict-position]="strictPosition">
+                  @if (tbContent) {
                     <ng-container *tbStringTemplateOutlet="tbContent; context: tbComponentContext">
                       {{ tbContent }}
                     </ng-container>
-                  </ng-container>
-                  <ng-container *ngIf="tbComponent"
-                                [tbComponentOutlet]="tbComponent"
-                                [tbComponentInjector]="tbComponentInjector"
-                                [tbComponentOutletContext]="tbComponentContext"
-                                (componentChange)="onComponentChange($event)"
-                                [tbComponentStyle]="tbComponentStyle">
-                  </ng-container>
+                  }
+                  @if (tbComponent) {
+                    <ng-container
+                      [tbComponentOutlet]="tbComponent"
+                      [tbComponentInjector]="tbComponentInjector"
+                      [tbComponentOutletContext]="tbComponentContext"
+                      (componentChange)="onComponentChange($event)"
+                      [tbComponentStyle]="tbComponentStyle">
+                    </ng-container>
+                  }
                 </div>
               </div>
             </div>
@@ -366,7 +370,7 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
         </div>
       </div>
     </ng-template>
-  `,
+    `,
     standalone: false
 })
 export class TbPopoverComponent<T = any> implements OnDestroy, OnInit {
diff --git a/ui-ngx/src/app/shared/components/protobuf-content.component.html b/ui-ngx/src/app/shared/components/protobuf-content.component.html
index 167b68d2aa..ae485347d1 100644
--- a/ui-ngx/src/app/shared/components/protobuf-content.component.html
+++ b/ui-ngx/src/app/shared/components/protobuf-content.component.html
@@ -21,10 +21,12 @@
   <div style="height: 40px;" class="tb-protobuf-content-toolbar flex flex-row items-center justify-start">
     <label class="tb-title no-padding">{{ label }}</label>
     <span class="flex-1"></span>
-    <button type="button"
-            mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="beautifyProtobuf()">
-      {{'js-func.tidy' | translate }}
-    </button>
+    @if (!readonly && !disabled) {
+      <button type="button"
+              mat-button class="tidy" (click)="beautifyProtobuf()">
+        {{'js-func.tidy' | translate }}
+      </button>
+    }
     <fieldset style="width: initial">
       <div matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
            matTooltipPosition="above"
diff --git a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html
index 9d1a55d485..89c9dc234f 100644
--- a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html
@@ -24,36 +24,47 @@
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="queueAutocomplete">
-  <button *ngIf="selectQueueFormGroup.get('queueName').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (selectQueueFormGroup.get('queueName').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete class="tb-autocomplete"
                     #queueAutocomplete="matAutocomplete"
                     [displayWith]="displayQueueFn"
                     >
-    <mat-option *ngFor="let queue of filteredQueues | async" [value]="queue" class="queue-option">
-      <span [innerHTML]="queue.name | highlight:searchText"></span>
-      <small class="queue-option-description">{{getDescription(queue)}}</small>
-    </mat-option>
-    <mat-option *ngIf="!(filteredQueues | async)?.length" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-          <span translate>queue.no-queues-found</span>
-        </div>
-        <ng-template #searchNotEmpty>
-          <span>
+    @for (queue of filteredQueues | async; track queue) {
+      <mat-option [value]="queue" class="queue-option">
+        <span [innerHTML]="queue.name | highlight:searchText"></span>
+        <small class="queue-option-description">{{getDescription(queue)}}</small>
+      </mat-option>
+    }
+    @if (!(filteredQueues | async)?.length) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(searchText)) {
+            <div>
+              <span translate>queue.no-queues-found</span>
+            </div>
+          } @else {
+            <span>
               {{ translate.get('queue.no-queues-matching',
-            {queue: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
-          </span>
-        </ng-template>
-      </div>
-    </mat-option>
+              {queue: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
+            </span>
+          }
+        </div>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-hint *ngIf = "autocompleteHint">{{ autocompleteHint | translate }}</mat-hint>
-  <mat-error *ngIf="selectQueueFormGroup.get('queueName').hasError('required')">
-    {{ 'queue.queue-required' | translate }}
-  </mat-error>
+  @if (autocompleteHint) {
+    <mat-hint>{{ autocompleteHint | translate }}</mat-hint>
+  }
+  @if (selectQueueFormGroup.get('queueName').hasError('required')) {
+    <mat-error>
+      {{ 'queue.queue-required' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html b/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html
index 8e4542bad2..397c58dc78 100644
--- a/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html
@@ -17,7 +17,9 @@
 -->
 <mat-form-field [formGroup]="relationTypeFormGroup" [appearance]="appearance" [floatLabel]="required ? 'auto' : 'always'"
                 class="mat-block" [class]="additionalClasses" subscriptSizing="{{ subscriptSizing }}">
-  <mat-label *ngIf="showLabel">{{ 'relation.relation-type' | translate }}</mat-label>
+  @if (showLabel) {
+    <mat-label>{{ 'relation.relation-type' | translate }}</mat-label>
+  }
   <input matInput type="text"
          #relationTypeInput
          formControlName="relationType"
@@ -25,25 +27,33 @@
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="relationTypeAutocomplete">
-  <button *ngIf="relationTypeFormGroup.get('relationType').value && !disabled"
-          type="button" color="primary"
-          matTooltip="{{ 'relation.clear-relation-type' | translate}}"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (relationTypeFormGroup.get('relationType').value && !disabled) {
+    <button
+      type="button" color="primary"
+      matTooltip="{{ 'relation.clear-relation-type' | translate}}"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete
     class="tb-autocomplete"
     #relationTypeAutocomplete="matAutocomplete"
     [displayWith]="displayRelationTypeFn">
-    <mat-option *ngFor="let relationType of filteredRelationTypes | async" [value]="relationType">
-      <span [innerHTML]="relationType | highlight:searchText"></span>
-    </mat-option>
+    @for (relationType of filteredRelationTypes | async; track relationType) {
+      <mat-option [value]="relationType">
+        <span [innerHTML]="relationType | highlight:searchText"></span>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="relationTypeFormGroup.get('relationType').hasError('required')">
-    {{ 'relation.relation-type-required' | translate }}
-  </mat-error>
-  <mat-error *ngIf="relationTypeFormGroup.get('relationType').hasError('maxlength')">
-    {{ 'relation.relation-type-max-length' | translate }}
-  </mat-error>
+  @if (relationTypeFormGroup.get('relationType').hasError('required')) {
+    <mat-error>
+      {{ 'relation.relation-type-required' | translate }}
+    </mat-error>
+  }
+  @if (relationTypeFormGroup.get('relationType').hasError('maxlength')) {
+    <mat-error>
+      {{ 'relation.relation-type-max-length' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.html b/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.html
index 5f3160168e..f461ad16cb 100644
--- a/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.html
@@ -29,36 +29,44 @@
          [required]="required"
          [matAutocomplete]="entityAutocomplete"
          [matAutocompleteDisabled]="!allowAutocomplete">
-  <button *ngIf="resourceFormGroup.get('resource').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (resourceFormGroup.get('resource').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete class="tb-autocomplete"
                     #entityAutocomplete="matAutocomplete"
                     [displayWith]="displayResourceFn">
-    <mat-option *ngFor="let resource of filteredResources$ | async" [value]="resource">
-      <span [innerHTML]="resource.title | highlight:searchText"></span>
-    </mat-option>
-    <ng-container *ngIf="subType !== ResourceSubType.EXTENSION; else extensionNoText">
-      <mat-option *ngIf="!(filteredResources$ | async)?.length" [value]="null">
-        <div (click)="$event.stopPropagation()">
-          <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-            <span>{{ 'js-func.no-js-module-text' | translate }}</span>
-          </div>
-          <ng-template #searchNotEmpty>
-          <span>
-              {{ 'js-func.no-js-module-matching' | translate: {module: searchText | truncate: true: 6: &apos;...&apos;} }}
-          </span>
-          </ng-template>
-        </div>
-      </mat-option>
-    </ng-container>
-    <ng-template #extensionNoText>
-      <mat-option *ngIf="!(filteredResources$ | async)?.length" [value]="searchText">
-        {{ searchText }}
+    @for (resource of filteredResources$ | async; track resource) {
+      <mat-option [value]="resource">
+        <span [innerHTML]="resource.title | highlight:searchText"></span>
       </mat-option>
-    </ng-template>
+    }
+    @if (subType !== ResourceSubType.EXTENSION) {
+      @if (!(filteredResources$ | async)?.length) {
+        <mat-option [value]="null">
+          <div (click)="$event.stopPropagation()">
+            @if (!textIsNotEmpty(searchText)) {
+              <div>
+                <span>{{ 'js-func.no-js-module-text' | translate }}</span>
+              </div>
+            } @else {
+              <span>
+                {{ 'js-func.no-js-module-matching' | translate: {module: searchText | truncate: true: 6: &apos;...&apos;} }}
+              </span>
+            }
+          </div>
+        </mat-option>
+      }
+    } @else {
+      @if (!(filteredResources$ | async)?.length) {
+        <mat-option [value]="searchText">
+          {{ searchText }}
+        </mat-option>
+      }
+    }
   </mat-autocomplete>
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/resource/resources-in-use-dialog.component.html b/ui-ngx/src/app/shared/components/resource/resources-in-use-dialog.component.html
index 5b357b3ed0..253a92e50a 100644
--- a/ui-ngx/src/app/shared/components/resource/resources-in-use-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/resource/resources-in-use-dialog.component.html
@@ -18,7 +18,7 @@
 <h2 mat-dialog-title translate>{{configuration.title}}</h2>
 <div mat-dialog-content class="tb-resources-in-use-content" [class]="{multiple: data.multiple}">
   <div [innerHTML]="configuration.message | safe: 'html'"></div>
-  <ng-container *ngIf="data.multiple; else singleResourceReferences">
+  @if (data.multiple) {
     <div class="table-container">
       <table mat-table [dataSource]="dataSource">
         <ng-container matColumnDef="select" sticky>
@@ -35,20 +35,21 @@
             </mat-checkbox>
           </mat-cell>
         </ng-container>
-        <ng-container matColumnDef="preview" *ngIf="displayPreview">
-          <mat-header-cell *matHeaderCellDef style="width: 50px; min-width: 50px;"></mat-header-cell>
-          <mat-cell *matCellDef="let image">
-            <img class="tb-image-preview" [src]="image.link | image: {preview: true} | async" alt="{{ image.title }}">
-          </mat-cell>
-        </ng-container>
+        @if (displayPreview) {
+          <ng-container matColumnDef="preview">
+            <mat-header-cell *matHeaderCellDef style="width: 50px; min-width: 50px;"></mat-header-cell>
+            <mat-cell *matCellDef="let image">
+              <img class="tb-image-preview" [src]="image.link | image: {preview: true} | async" alt="{{ image.title }}">
+            </mat-cell>
+          </ng-container>
+        }
         <ng-container matColumnDef="title">
           <mat-header-cell *matHeaderCellDef style="width: 100%;">
-            <ng-container *ngIf="dataSource.selection.isEmpty(); else selectedResources">
+            @if (dataSource.selection.isEmpty()) {
               {{ 'resource.title' | translate }}
-            </ng-container>
-            <ng-template #selectedResources>
+            } @else {
               {{ translate.get(configuration.selectedText, {count: dataSource.selection.selected.length}) | async }}
-            </ng-template>
+            }
           </mat-header-cell>
           <mat-cell *matCellDef="let resource">
             {{ resource.title }}
@@ -60,23 +61,22 @@
             <button #showReferencesButton
                     mat-stroked-button
                     color="primary"
-                    (click)="toggleShowReferences($event, resource, showReferencesButton)">{{ 'image.references' | translate }}</button>
+            (click)="toggleShowReferences($event, resource, showReferencesButton)">{{ 'image.references' | translate }}</button>
           </mat-cell>
         </ng-container>
         <mat-header-row class="mat-row-select" *matHeaderRowDef="configuration.columns; sticky: true"></mat-header-row>
         <mat-row class="mat-row-select"
                  [class.mat-selected]="dataSource.selection.isSelected(resource)"
-                 *matRowDef="let resource; columns: configuration.columns;"></mat-row>
+        *matRowDef="let resource; columns: configuration.columns;"></mat-row>
       </table>
     </div>
-  </ng-container>
+  } @else {
+    <tb-image-references [references]="references"></tb-image-references>
+    <div [innerHTML]="configuration.deleteText | translate | safe: 'html'"></div>
+  }
 </div>
 <div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary" (click)="cancel()">{{'action.cancel' | translate}}</button>
   <button mat-raised-button color="accent" (click)="delete()" [disabled]="data.multiple && dataSource.selection.isEmpty()"
-          cdkFocusInitial>{{ (data.multiple ? 'action.delete-selected' : 'action.delete-anyway') | translate}}</button>
+  cdkFocusInitial>{{ (data.multiple ? 'action.delete-selected' : 'action.delete-anyway') | translate}}</button>
 </div>
-<ng-template #singleResourceReferences>
-  <tb-image-references [references]="references"></tb-image-references>
-  <div [innerHTML]="configuration.deleteText | translate | safe: 'html'"></div>
-</ng-template>
diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.html b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.html
index beb6f09081..62584f5336 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.html
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.html
@@ -25,19 +25,25 @@
   <mat-autocomplete class="tb-autocomplete tb-rule-chain-search"
                     #ruleChainAutocomplete="matAutocomplete"
                     (optionSelected)="selected($event)">
-    <mat-option *ngFor="let ruleChain of filteredRuleChains | async"
-                [class.tb-selected-option]="ruleChainId === ruleChain.id.id"
-                [value]="ruleChain">
-      <mat-icon *ngIf="ruleChainId === ruleChain.id.id">check</mat-icon>
-      <span [innerHTML]="ruleChain.name | highlight:searchText:true"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredRuleChains | async)?.length" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <span>
-          {{ 'rulechain.no-rulechains-matching' | translate : {entity: searchText} }}
-        </span>
-      </div>
-    </mat-option>
+    @for (ruleChain of filteredRuleChains | async; track ruleChain) {
+      <mat-option
+        [class.tb-selected-option]="ruleChainId === ruleChain.id.id"
+        [value]="ruleChain">
+        @if (ruleChainId === ruleChain.id.id) {
+          <mat-icon>check</mat-icon>
+        }
+        <span [innerHTML]="ruleChain.name | highlight:searchText:true"></span>
+      </mat-option>
+    }
+    @if (!(filteredRuleChains | async)?.length) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          <span>
+            {{ 'rulechain.no-rulechains-matching' | translate : {entity: searchText} }}
+          </span>
+        </div>
+      </mat-option>
+    }
   </mat-autocomplete>
 </mat-form-field>
 
diff --git a/ui-ngx/src/app/shared/components/slack-conversation-autocomplete.component.html b/ui-ngx/src/app/shared/components/slack-conversation-autocomplete.component.html
index 3db3d06147..a0d3c4023a 100644
--- a/ui-ngx/src/app/shared/components/slack-conversation-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/slack-conversation-autocomplete.component.html
@@ -23,30 +23,39 @@
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="slackAutocomplete">
-  <button *ngIf="conversationSlackFormGroup.get('conversation').value && !disabled"
-          type="button" matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (conversationSlackFormGroup.get('conversation').value && !disabled) {
+    <button
+      type="button" matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete class="tb-autocomplete"
                     #slackAutocomplete="matAutocomplete"
                     [displayWith]="displaySlackConversationFn"
                     >
-    <mat-option *ngFor="let template of slackConversation$ | async" [value]="template" class="template-option">
-      <span [innerHTML]="template.title | highlight:slackSearchText"></span>
-    </mat-option>
-    <mat-option *ngIf="!(slackConversation$ | async)?.length" [value]="null" class="tb-not-found">
-      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
-        <div *ngIf="!textIsNotEmpty(slackSearchText); else searchNotEmpty">
-          <span translate>notification.not-found-slack-recipient</span>
+    @for (template of slackConversation$ | async; track template) {
+      <mat-option [value]="template" class="template-option">
+        <span [innerHTML]="template.title | highlight:slackSearchText"></span>
+      </mat-option>
+    }
+    @if (!(slackConversation$ | async)?.length) {
+      <mat-option [value]="null" class="tb-not-found">
+        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+          @if (!textIsNotEmpty(slackSearchText)) {
+            <div>
+              <span translate>notification.not-found-slack-recipient</span>
+            </div>
+          } @else {
+            <span>Not slack recipient matches {{ truncate.transform(slackSearchText, true, 6, &apos;...&apos;) }}</span>
+          }
         </div>
-        <ng-template #searchNotEmpty>
-          <span>Not slack recipient matches {{ truncate.transform(slackSearchText, true, 6, &apos;...&apos;) }}</span>
-        </ng-template>
-      </div>
-    </mat-option>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="conversationSlackFormGroup.get('conversation').hasError('required')">
-    {{ requiredText }}
-  </mat-error>
+  @if (conversationSlackFormGroup.get('conversation').hasError('required')) {
+    <mat-error>
+      {{ requiredText }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/snack-bar-component.html b/ui-ngx/src/app/shared/components/snack-bar-component.html
index 2197cebdcc..0bd630d154 100644
--- a/ui-ngx/src/app/shared/components/snack-bar-component.html
+++ b/ui-ngx/src/app/shared/components/snack-bar-component.html
@@ -24,11 +24,10 @@
      [class.warn-toast]="notification.type === 'warn'"
      [class.success-toast]="notification.type === 'success'"
      [class.info-toast]="notification.type === 'info'">
-  <ng-container *ngIf="!notification.modern; else modern">
+  @if (!notification.modern) {
     <div class="toast-text" [innerHTML]="notification.message | safe: 'html'"></div>
     <button #actionButton type="button" mat-button (click)="action($event)">{{ 'action.close' | translate }}</button>
-  </ng-container>
-  <ng-template #modern>
+  } @else {
     <div class="tb-modern-toast-panel"
          [class.error-toast]="notification.type === 'error'"
          [class.warn-toast]="notification.type === 'warn'"
@@ -37,5 +36,5 @@
       <div class="toast-text" [innerHTML]="notification.message | safe: 'html'"></div>
       <button #actionButton class="tb-mat-20" mat-icon-button (click)="action($event)"><mat-icon>close</mat-icon></button>
     </div>
-  </ng-template>
+  }
 </div>
diff --git a/ui-ngx/src/app/shared/components/string-autocomplete.component.html b/ui-ngx/src/app/shared/components/string-autocomplete.component.html
index 8891fad40f..2471b5caf3 100644
--- a/ui-ngx/src/app/shared/components/string-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/string-autocomplete.component.html
@@ -17,35 +17,45 @@
 -->
 <mat-form-field [appearance]="appearance" [class]="additionalClass"
                 [subscriptSizing]="subscriptSizing" style="width: 100%">
-  <mat-label *ngIf="label">{{label}}</mat-label>
+  @if (label) {
+    <mat-label>{{label}}</mat-label>
+  }
   <input matInput #nameInput [formControl]="selectionFormControl"
          [placeholder]="placeholderText"
          (focusin)="onFocus()"
          [matAutocomplete]="optionsAutocomplete">
-  <button *ngIf="selectionFormControl.value && !disabled"
-          type="button"
-          class="tb-icon-24"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
-  <mat-icon *ngIf="selectionFormControl.errors && selectionFormControl.touched && !showInlineError"
-            matIconSuffix
-            [matTooltip]="getErrorMessage"
-            matTooltipPosition="above"
-            [matTooltipClass]="tooltipClass"
-            class="material-icons tb-suffix-show-always tb-error">
-    warning
-  </mat-icon>
-  <mat-error *ngIf="selectionFormControl.errors && showInlineError">
-    {{ getErrorMessage }}
-  </mat-error>
+  @if (selectionFormControl.value && !disabled) {
+    <button
+      type="button"
+      class="tb-icon-24"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
+  @if (selectionFormControl.errors && selectionFormControl.touched && !showInlineError) {
+    <mat-icon
+      matIconSuffix
+      [matTooltip]="getErrorMessage"
+      matTooltipPosition="above"
+      [matTooltipClass]="tooltipClass"
+      class="material-icons tb-suffix-show-always tb-error">
+      warning
+    </mat-icon>
+  }
+  @if (selectionFormControl.errors && showInlineError) {
+    <mat-error>
+      {{ getErrorMessage }}
+    </mat-error>
+  }
   <mat-autocomplete
     #optionsAutocomplete="matAutocomplete"
     class="tb-autocomplete"
     [panelWidth]="panelWidth">
-    <mat-option *ngFor="let option of filteredOptions$ | async" [value]="option">
-      <span [innerHTML]="option | highlight:searchText:true:'ig'"></span>
-    </mat-option>
+    @for (option of filteredOptions$ | async; track option) {
+      <mat-option [value]="option">
+        <span [innerHTML]="option | highlight:searchText:true:'ig'"></span>
+      </mat-option>
+    }
   </mat-autocomplete>
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/string-items-list.component.html b/ui-ngx/src/app/shared/components/string-items-list.component.html
index 7a0489345f..dd8f280aab 100644
--- a/ui-ngx/src/app/shared/components/string-items-list.component.html
+++ b/ui-ngx/src/app/shared/components/string-items-list.component.html
@@ -20,16 +20,22 @@
                 [floatLabel]="floatLabel"
                 [appearance]="appearance"
                 [subscriptSizing]="subscriptSizing">
-  <mat-label *ngIf="label">{{ label }}</mat-label>
+  @if (label) {
+    <mat-label>{{ label }}</mat-label>
+  }
   <mat-chip-grid #itemsChipList formControlName="items" [required]="required">
-    <mat-chip-row *ngFor="let item of itemList"
-                  class="tb-chip-row-ellipsis"
-                  [removable]="!disabled"
-                  [contentEditable]="editable && !disabled"
-                  (removed)="removeItems(item)">
-      {{ item.name }}
-      <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
-    </mat-chip-row>
+    @for (item of itemList; track item) {
+      <mat-chip-row
+        class="tb-chip-row-ellipsis"
+        [removable]="!disabled"
+        [contentEditable]="editable && !disabled"
+        (removed)="removeItems(item)">
+        {{ item.name }}
+        @if (!disabled) {
+          <mat-icon matChipRemove>close</mat-icon>
+        }
+      </mat-chip-row>
+    }
     <input matInput type="text"
            placeholder="{{ placeholder }}"
            style="max-width: 300px;min-width: 250px"
@@ -52,7 +58,7 @@
                     class="tb-autocomplete">
     @for (value of filteredValues | async; track value.value) {
       <mat-option [value]="value" (mousedown)="$event.preventDefault()"><span [innerHTML]="value.name | highlight:searchText:true"></span></mat-option>
-    } @empty {
+      } @empty {
       @if (!allowUserValue) {
         <mat-option [value]="null" (mousedown)="$event.preventDefault()">{{ 'common.not-found' | translate }}</mat-option>
       }
@@ -67,7 +73,9 @@
   <div matSuffix>
     <ng-content select="[matSuffix]"></ng-content>
   </div>
-  <mat-error *ngIf="stringItemsForm.get('items').hasError('required')">
-    {{ requiredText }}
-  </mat-error>
+  @if (stringItemsForm.get('items').hasError('required')) {
+    <mat-error>
+      {{ requiredText }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.html b/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.html
index ef2dec83fe..1f10bc4974 100644
--- a/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.html
@@ -17,7 +17,9 @@
 -->
 <mat-form-field [appearance]="appearance" [class]="additionalClass"
                 [subscriptSizing]="subscriptSizing" style="width: 100%">
-  <mat-label *ngIf="label">{{label}}</mat-label>
+  @if (label) {
+    <mat-label>{{label}}</mat-label>
+  }
   <pre #highlightTextRef class="highlighted-text" [class.disabled]="disabled" [innerHTML]="highlightedHtml"></pre>
   <input matInput #inputRef
          class="input-field-highlight"
@@ -34,17 +36,21 @@
       <tb-icon matButtonIcon="">mdi:variable</tb-icon>
     </button>
   }
-  <mat-icon *ngIf="selectionFormControl.hasError('required') && !showInlineError"
-            matIconSuffix
-            [matTooltip]="errorText"
-            matTooltipPosition="above"
-            [matTooltipClass]="tooltipClass"
-            class="material-icons tb-suffix-show-always tb-error">
-    warning
-  </mat-icon>
-  <mat-error *ngIf="selectionFormControl.hasError('required') && showInlineError">
-    {{errorText}}
-  </mat-error>
+  @if (selectionFormControl.hasError('required') && !showInlineError) {
+    <mat-icon
+      matIconSuffix
+      [matTooltip]="errorText"
+      matTooltipPosition="above"
+      [matTooltipClass]="tooltipClass"
+      class="material-icons tb-suffix-show-always tb-error">
+      warning
+    </mat-icon>
+  }
+  @if (selectionFormControl.hasError('required') && showInlineError) {
+    <mat-error>
+      {{errorText}}
+    </mat-error>
+  }
 </mat-form-field>
 <ng-template #autocompleteTemplate>
   <div role="listbox" class="mat-mdc-autocomplete-panel mat-mdc-autocomplete-visible tb-autocomplete tb-sting-pattern-autocomplete-panel">
diff --git a/ui-ngx/src/app/shared/components/svg-xml.component.html b/ui-ngx/src/app/shared/components/svg-xml.component.html
index 55ba188547..a720568c47 100644
--- a/ui-ngx/src/app/shared/components/svg-xml.component.html
+++ b/ui-ngx/src/app/shared/components/svg-xml.component.html
@@ -19,7 +19,9 @@
      tb-fullscreen
      [fullscreen]="fullscreen">
   <div style="min-height: 40px;" class="tb-svg-xml-toolbar flex flex-row items-center justify-start">
-    <label *ngIf="!noLabel" class="tb-title no-padding" [class]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
+    @if (!noLabel) {
+      <label class="tb-title no-padding" [class]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
+    }
     <span class="flex-1"></span>
     <fieldset style="width: initial">
       <div matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
diff --git a/ui-ngx/src/app/shared/components/time-unit-input.component.html b/ui-ngx/src/app/shared/components/time-unit-input.component.html
index 1edb3361e1..a34d65ff25 100644
--- a/ui-ngx/src/app/shared/components/time-unit-input.component.html
+++ b/ui-ngx/src/app/shared/components/time-unit-input.component.html
@@ -27,19 +27,24 @@
       <ng-content select="[matSuffix]"></ng-content>
     </div>
     @if (inlineField) {
-      <mat-icon matSuffix
-                matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
-                [matTooltip]="hasError"
-                *ngIf="hasError"
-                class="tb-error">
-        warning
-      </mat-icon>
+      @if (hasError) {
+        <mat-icon matSuffix
+                  matTooltipPosition="above"
+                  matTooltipClass="tb-error-tooltip"
+                  [matTooltip]="hasError"
+                  class="tb-error">
+          warning
+        </mat-icon>
+      }
+    }
+    @if ((subscriptSizing === 'fixed') && !inlineField) {
+      <mat-hint>{{ hintText }}</mat-hint>
+    }
+    @if (hasError && !inlineField) {
+      <mat-error>
+        {{ hasError }}
+      </mat-error>
     }
-    <mat-hint *ngIf="(subscriptSizing === 'fixed') && !inlineField">{{ hintText }}</mat-hint>
-    <mat-error *ngIf="hasError && !inlineField">
-      {{ hasError }}
-    </mat-error>
   </mat-form-field>
   <mat-form-field [class.h-fit]="!inlineField"
                   [class.max-w-33%]="!inlineField && !sameWidthInputs"
diff --git a/ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.html b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.html
index 8738fd2506..3341556e75 100644
--- a/ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.html
+++ b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.html
@@ -24,9 +24,11 @@
     </div>
     <div class="tb-form-table-body">
       <mat-selection-list formControlName="allowedAggregationTypes">
-        <mat-list-option *ngFor="let type of allAggregationTypes" [value]="type" togglePosition="before" color="primary">
-          {{ aggregationTypesTranslations.get(aggregationTypes[type]) | translate }}
-        </mat-list-option>
+        @for (type of allAggregationTypes; track type) {
+          <mat-list-option [value]="type" togglePosition="before" color="primary">
+            {{ aggregationTypesTranslations.get(aggregationTypes[type]) | translate }}
+          </mat-list-option>
+        }
       </mat-selection-list>
     </div>
   </div>
diff --git a/ui-ngx/src/app/shared/components/time/aggregation/aggregation-type-select.component.html b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-type-select.component.html
index a63ee7540b..bd2a4aee7d 100644
--- a/ui-ngx/src/app/shared/components/time/aggregation/aggregation-type-select.component.html
+++ b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-type-select.component.html
@@ -18,11 +18,15 @@
 <mat-form-field [formGroup]="aggregationTypeFormGroup"
                 [subscriptSizing]="subscriptSizing" [appearance]="appearance"
                 class="flex flex-1">
-  <mat-label *ngIf="displayLabel">{{ label }}</mat-label>
+  @if (displayLabel) {
+    <mat-label>{{ label }}</mat-label>
+  }
   <mat-select [required]="required" formControlName="aggregationType">
-    <mat-option *ngFor="let type of aggregationTypes" [value]="type">
-      {{ displayAggregationTypeFn(type) }}
-    </mat-option>
+    @for (type of aggregationTypes; track type) {
+      <mat-option [value]="type">
+        {{ displayAggregationTypeFn(type) }}
+      </mat-option>
+    }
   </mat-select>
   <ng-container matSuffix>
     <ng-content select="[matSuffix]"></ng-content>
diff --git a/ui-ngx/src/app/shared/components/time/aggregation/grouping-interval-options.component.html b/ui-ngx/src/app/shared/components/time/aggregation/grouping-interval-options.component.html
index 75e53e4404..f3c474d2a4 100644
--- a/ui-ngx/src/app/shared/components/time/aggregation/grouping-interval-options.component.html
+++ b/ui-ngx/src/app/shared/components/time/aggregation/grouping-interval-options.component.html
@@ -20,12 +20,16 @@
                   [subscriptSizing]="subscriptSizing" [appearance]="appearance">
     <mat-select formControlName="aggIntervals" multiple
                 placeholder="{{ 'timewindow.all' | translate }}">
-      <mat-select-trigger *ngIf="timeintervalFormGroup.get('aggIntervals').value?.length === allIntervals.length">
-        {{ 'timewindow.all' | translate }}
-      </mat-select-trigger>
-      <mat-option *ngFor="let interval of allIntervals" [value]="interval.value">
-        {{ interval.name | translate:interval.translateParams }}
-      </mat-option>
+      @if (timeintervalFormGroup.get('aggIntervals').value?.length === allIntervals.length) {
+        <mat-select-trigger>
+          {{ 'timewindow.all' | translate }}
+        </mat-select-trigger>
+      }
+      @for (interval of allIntervals; track interval) {
+        <mat-option [value]="interval.value">
+          {{ interval.name | translate:interval.translateParams }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <mat-form-field class="flex flex-1" [class]="{'tb-inline-field': appearance === 'outline'}"
@@ -33,9 +37,11 @@
     <mat-select formControlName="defaultAggInterval"
                 placeholder="{{ 'action.set' | translate }}">
       <mat-option>--</mat-option>
-      <mat-option *ngFor="let interval of selectedIntervals" [value]="interval.value">
-        {{ interval.name | translate:interval.translateParams }}
-      </mat-option>
+      @for (interval of selectedIntervals; track interval) {
+        <mat-option [value]="interval.value">
+          {{ interval.name | translate:interval.translateParams }}
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>
 </section>
diff --git a/ui-ngx/src/app/shared/components/time/datetime.component.html b/ui-ngx/src/app/shared/components/time/datetime.component.html
index 8ef3ee3c21..25861aa4d4 100644
--- a/ui-ngx/src/app/shared/components/time/datetime.component.html
+++ b/ui-ngx/src/app/shared/components/time/datetime.component.html
@@ -21,14 +21,18 @@
                 [class.tb-time-field]="!fieldClass && type === 'time'"
                 [class.with-clear]="allowClear"
                 [subscriptSizing]="subscriptSizing" [appearance]="appearance" [floatLabel]="floatLabel">
-  <mat-label *ngIf="showLabel">{{ dateText }}</mat-label>
+  @if (showLabel) {
+    <mat-label>{{ dateText }}</mat-label>
+  }
   <div matSuffix class="mat-mdc-form-field-icon-suffix flex flex-row">
-    <button *ngIf="allowClear && date && !disabled"
-            type="button"
-            mat-icon-button aria-label="Clear"
-            (click)="clear($event)">
-      <mat-icon>close</mat-icon>
-    </button>
+    @if (allowClear && date && !disabled) {
+      <button
+        type="button"
+        mat-icon-button aria-label="Clear"
+        (click)="clear($event)">
+        <mat-icon>close</mat-icon>
+      </button>
+    }
     <mat-datetimepicker-toggle [for]="datePicker"></mat-datetimepicker-toggle>
   </div>
   <mat-datetimepicker #datePicker [type]="type" openOnFocus="true"></mat-datetimepicker>
diff --git a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
index c7c983c371..152f4ca083 100644
--- a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
+++ b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
@@ -16,39 +16,49 @@
 
 -->
 <div class="trip-animation-control-panel">
-    <div class="flex flex-row">
-        <button mat-icon-button class="mat-icon-button" aria-label="Start" (click)="moveStart()">
-            <mat-icon class="material-icons" [style.color]="settings.buttonColor">fast_rewind</mat-icon>
-        </button>
-        <button mat-icon-button class="mat-icon-button" aria-label="Previous" (click)="movePrev()">
-            <mat-icon class="material-icons" [style.color]="settings.buttonColor">skip_previous</mat-icon>
-        </button>
-        <div class="flex flex-full flex-col">
-            <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="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()">
-            <mat-icon class="material-icons" [style.color]="settings.buttonColor">skip_next</mat-icon>
-        </button>
-        <button mat-icon-button class="mat-icon-button" aria-label="End" (click)="moveEnd()">
-            <mat-icon class="material-icons" [style.color]="settings.buttonColor">fast_forward</mat-icon>
-        </button>
-        <button mat-icon-button class="mat-icon-button" *ngIf="!playing" (click)="play()" aria-label="Play">
-            <mat-icon class="material-icons" [style.color]="settings.buttonColor">
-                play_circle_outline
-            </mat-icon>
-        </button>
-        <button mat-icon-button class="mat-icon-button" *ngIf="playing" (click)="pause()" aria-label="Stop">
-            <mat-icon class="material-icons" [style.color]="settings.buttonColor">
-                pause_circle_outline
-            </mat-icon>
-        </button>
-        <mat-select [(ngModel)]="speed" (selectionChange)="reInit()" class="speed-select" aria-label="Speed selector">
-            <mat-option [value]="speedValue" *ngFor="let speedValue of speeds">{{speedValue}} </mat-option>
-        </mat-select>
+  <div class="flex flex-row">
+    <button mat-icon-button class="mat-icon-button" aria-label="Start" (click)="moveStart()">
+      <mat-icon class="material-icons" [style.color]="settings.buttonColor">fast_rewind</mat-icon>
+    </button>
+    <button mat-icon-button class="mat-icon-button" aria-label="Previous" (click)="movePrev()">
+      <mat-icon class="material-icons" [style.color]="settings.buttonColor">skip_previous</mat-icon>
+    </button>
+    <div class="flex flex-full flex-col">
+      <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">
+        @if (currentTime) {
+          <span>{{ currentTime | date:'medium'}}</span>
+        }
+        @if (!currentTime) {
+          <span>{{ "widget.no-data-found" | translate}}</span>
+        }
+      </div>
     </div>
+    <button mat-icon-button class="mat-icon-button" aria-label="Next" (click)="moveNext()">
+      <mat-icon class="material-icons" [style.color]="settings.buttonColor">skip_next</mat-icon>
+    </button>
+    <button mat-icon-button class="mat-icon-button" aria-label="End" (click)="moveEnd()">
+      <mat-icon class="material-icons" [style.color]="settings.buttonColor">fast_forward</mat-icon>
+    </button>
+    @if (!playing) {
+      <button mat-icon-button class="mat-icon-button" (click)="play()" aria-label="Play">
+        <mat-icon class="material-icons" [style.color]="settings.buttonColor">
+          play_circle_outline
+        </mat-icon>
+      </button>
+    }
+    @if (playing) {
+      <button mat-icon-button class="mat-icon-button" (click)="pause()" aria-label="Stop">
+        <mat-icon class="material-icons" [style.color]="settings.buttonColor">
+          pause_circle_outline
+        </mat-icon>
+      </button>
+    }
+    <mat-select [(ngModel)]="speed" (selectionChange)="reInit()" class="speed-select" aria-label="Speed selector">
+      @for (speedValue of speeds; track speedValue) {
+        <mat-option [value]="speedValue">{{speedValue}} </mat-option>
+      }
+    </mat-select>
+  </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html
index 8953db42b1..646c63df94 100644
--- a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html
+++ b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html
@@ -32,20 +32,20 @@
         </mat-checkbox>
         {{ "timewindow.interval" | translate }}
       </div>
-      <ng-container *ngIf="aggregation">
+      @if (aggregation) {
         <div class="tb-form-table-header-cell tb-agg-interval-header" tbTruncateWithTooltip>{{"timewindow.allowed-agg-intervals" | translate }}</div>
         <div class="tb-form-table-header-cell tb-agg-interval-header" tbTruncateWithTooltip>{{"timewindow.default-agg-interval" | translate }}</div>
-      </ng-container>
+      }
     </div>
     <div class="tb-form-table-body" formArrayName="intervals">
-      <ng-container *ngFor="let interval of intervalsFormArray.controls; let i = index; trackBy: trackByElement">
+      @for (interval of intervalsFormArray.controls; track trackByElement(i, 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">
               <mat-label tbTruncateWithTooltip>{{ interval.get('name').value }}</mat-label>
             </mat-checkbox>
           </div>
-          <ng-container *ngIf="aggregation">
+          @if (aggregation) {
             <div class="tb-form-table-row-cell tb-agg-interval">
               <tb-grouping-interval-options
                 formControlName="aggIntervalsConfig"
@@ -56,9 +56,9 @@
                 appearance="outline">
               </tb-grouping-interval-options>
             </div>
-          </ng-container>
+          }
         </div>
-      </ng-container>
+      }
     </div>
   </div>
   <div class="flex flex-row gap-2 items-center">
diff --git a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html
index 66bbb01b14..0b95467753 100644
--- a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html
+++ b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html
@@ -17,11 +17,15 @@
 -->
 <section class="interval-section flex flex-1 flex-row" [formGroup]="quickIntervalFormGroup">
   <mat-form-field class="flex-1" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
-    <mat-label *ngIf="displayLabel" translate>timewindow.interval</mat-label>
+    @if (displayLabel) {
+      <mat-label translate>timewindow.interval</mat-label>
+    }
     <mat-select formControlName="interval">
-      <mat-option *ngFor="let interval of intervals" [value]="interval">
-        {{ timeIntervalTranslationMap.get(interval) | translate}}
-      </mat-option>
+      @for (interval of intervals; track interval) {
+        <mat-option [value]="interval">
+          {{ timeIntervalTranslationMap.get(interval) | translate}}
+        </mat-option>
+      }
     </mat-select>
     <ng-container matSuffix>
       <ng-content select="[matSuffix]"></ng-content>
diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.html b/ui-ngx/src/app/shared/components/time/timeinterval.component.html
index cc9793155c..b0955afcc3 100644
--- a/ui-ngx/src/app/shared/components/time/timeinterval.component.html
+++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.html
@@ -19,11 +19,15 @@
   <section class="tb-form-row column-xs no-border no-padding tb-standard-fields">
     <ng-content></ng-content>
     <mat-form-field class="flex flex-1" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
-      <mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label>
+      @if (predefinedName) {
+        <mat-label translate>{{ predefinedName }}</mat-label>
+      }
       <mat-select formControlName="interval">
-        <mat-option *ngFor="let interval of intervals" [value]="interval.value">
-          {{ interval.name | translate:interval.translateParams }}
-        </mat-option>
+        @for (interval of intervals; track interval) {
+          <mat-option [value]="interval.value">
+            {{ interval.name | translate:interval.translateParams }}
+          </mat-option>
+        }
       </mat-select>
       <ng-container matSuffix>
         <ng-content select="[matSuffix]"></ng-content>
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
index c3aee54ac9..272fa6239c 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
@@ -19,7 +19,7 @@
   <mat-toolbar color="primary">
     <h2>{{ 'timewindow.timewindow-settings' | translate }}</h2>
     <span class="flex-1"></span>
-      <div tb-help="timewindowSettings"></div>
+    <div tb-help="timewindowSettings"></div>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -32,160 +32,177 @@
     </tb-toggle-select>
   </div>
   <div class="tb-timewindow-form-content tb-form-panel no-border">
-    <section *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME"
-             formGroupName="realtime" class="tb-form-panel">
-      <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
-      <div class="tb-form-row">
-        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval">
-          {{ 'timewindow.hide-timewindow-section' | translate }}
-        </mat-slide-toggle>
-      </div>
-
-      <tb-toggle-select *ngIf="realtimeTypeSelectionAvailable"
-                        appearance="stroked" [options]="realtimeTimewindowOptions" formControlName="realtimeType">
-      </tb-toggle-select>
-
-      <ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
+    @if (timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME) {
+      <section
+        formGroupName="realtime" class="tb-form-panel">
+        <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
         <div class="tb-form-row">
-          <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomInterval">
-            {{ 'timewindow.disable-custom-interval' | translate }}
+          <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval">
+            {{ 'timewindow.hide-timewindow-section' | translate }}
           </mat-slide-toggle>
         </div>
-        <div class="tb-form-row column-xs">
-          <mat-slide-toggle *ngIf="!quickIntervalOnly"
-                            class="mat-slide" formControlName="hideLastInterval">
-            <div tb-hint-tooltip-icon="{{'timewindow.hide-last-interval' | translate}}">
-              {{ 'timewindow.hide' | translate }}
-            </div>
-          </mat-slide-toggle>
-          <tb-timeinterval
-            formControlName="timewindowMs"
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [allowedIntervals]="timewindowForm.get('realtime.advancedParams.allowedLastIntervals').value"
-            [disabledAdvanced]="timewindowForm.get('realtime.disableCustomInterval').value"
+        @if (realtimeTypeSelectionAvailable) {
+          <tb-toggle-select
+            appearance="stroked" [options]="realtimeTimewindowOptions" formControlName="realtimeType">
+          </tb-toggle-select>
+        }
+        @if (timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL) {
+          <div class="tb-form-row">
+            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomInterval">
+              {{ 'timewindow.disable-custom-interval' | translate }}
+            </mat-slide-toggle>
+          </div>
+          <div class="tb-form-row column-xs">
+            @if (!quickIntervalOnly) {
+              <mat-slide-toggle
+                class="mat-slide" formControlName="hideLastInterval">
+                <div tb-hint-tooltip-icon="{{'timewindow.hide-last-interval' | translate}}">
+                  {{ 'timewindow.hide' | translate }}
+                </div>
+              </mat-slide-toggle>
+            }
+            <tb-timeinterval
+              formControlName="timewindowMs"
+              subscriptSizing="dynamic"
+              appearance="outline"
+              [allowedIntervals]="timewindowForm.get('realtime.advancedParams.allowedLastIntervals').value"
+              [disabledAdvanced]="timewindowForm.get('realtime.disableCustomInterval').value"
             [required]="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME &&
                             timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
-            <button *ngIf="!(timewindowForm.get('realtime.hideLastInterval').value ||
-                            timewindowForm.get('realtime.hideInterval').value)"
-                    matSuffix mat-icon-button type="button"
-                    (click)="configureRealtimeLastIntervalOptions($event)">
-              <mat-icon>edit</mat-icon>
-            </button>
-          </tb-timeinterval>
-        </div>
-      </ng-container>
-
-      <div *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
-           class="tb-form-row column-xs">
-        <mat-slide-toggle *ngIf="!quickIntervalOnly"
-                          class="mat-slide" formControlName="hideQuickInterval">
-          <div tb-hint-tooltip-icon="{{'timewindow.hide-relative-interval' | translate}}">
-            {{ 'timewindow.hide' | translate }}
+              @if (!(timewindowForm.get('realtime.hideLastInterval').value ||
+                timewindowForm.get('realtime.hideInterval').value)) {
+                <button
+                  matSuffix mat-icon-button type="button"
+                  (click)="configureRealtimeLastIntervalOptions($event)">
+                  <mat-icon>edit</mat-icon>
+                </button>
+              }
+            </tb-timeinterval>
           </div>
-        </mat-slide-toggle>
-        <tb-quick-time-interval
-          displayLabel="false"
-          formControlName="quickInterval"
-          onlyCurrentInterval="true"
-          subscriptSizing="dynamic"
-          appearance="outline"
-          [allowedIntervals]="timewindowForm.get('realtime.advancedParams.allowedQuickIntervals').value"
+        }
+        @if (timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL) {
+          <div
+            class="tb-form-row column-xs">
+            @if (!quickIntervalOnly) {
+              <mat-slide-toggle
+                class="mat-slide" formControlName="hideQuickInterval">
+                <div tb-hint-tooltip-icon="{{'timewindow.hide-relative-interval' | translate}}">
+                  {{ 'timewindow.hide' | translate }}
+                </div>
+              </mat-slide-toggle>
+            }
+            <tb-quick-time-interval
+              displayLabel="false"
+              formControlName="quickInterval"
+              onlyCurrentInterval="true"
+              subscriptSizing="dynamic"
+              appearance="outline"
+              [allowedIntervals]="timewindowForm.get('realtime.advancedParams.allowedQuickIntervals').value"
           [required]="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME &&
                           timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
-          <button *ngIf="!(timewindowForm.get('realtime.hideQuickInterval').value ||
-                            timewindowForm.get('realtime.hideInterval').value)"
+              @if (!(timewindowForm.get('realtime.hideQuickInterval').value ||
+                timewindowForm.get('realtime.hideInterval').value)) {
+                <button
                   matSuffix mat-icon-button type="button"
                   (click)="configureRealtimeQuickIntervalOptions($event)">
-            <mat-icon>edit</mat-icon>
-          </button>
-        </tb-quick-time-interval>
-      </div>
-    </section>
-
-    <section *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY"
-             formGroupName="history" class="tb-form-panel">
-      <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
-      <div class="tb-form-row">
-        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval">
-          {{ 'timewindow.hide-timewindow-section' | translate }}
-        </mat-slide-toggle>
-      </div>
-
-      <tb-toggle-select appearance="stroked" [options]="historyTimewindowOptions" formControlName="historyType">
-      </tb-toggle-select>
+                  <mat-icon>edit</mat-icon>
+                </button>
+              }
+            </tb-quick-time-interval>
+          </div>
+        }
+      </section>
+    }
 
-      <ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
+    @if (timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY) {
+      <section
+        formGroupName="history" class="tb-form-panel">
+        <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
         <div class="tb-form-row">
-          <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomInterval">
-            {{ 'timewindow.disable-custom-interval' | translate }}
+          <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval">
+            {{ 'timewindow.hide-timewindow-section' | translate }}
           </mat-slide-toggle>
         </div>
-        <div class="tb-form-row column-xs">
-          <mat-slide-toggle class="mat-slide" formControlName="hideLastInterval">
-            <div tb-hint-tooltip-icon="{{'timewindow.hide-last-interval' | translate}}">
-              {{ 'timewindow.hide' | translate }}
-            </div>
-          </mat-slide-toggle>
-          <tb-timeinterval
-            formControlName="timewindowMs"
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [allowedIntervals]="timewindowForm.get('history.advancedParams.allowedLastIntervals').value"
-            [disabledAdvanced]="timewindowForm.get('history.disableCustomInterval').value"
+        <tb-toggle-select appearance="stroked" [options]="historyTimewindowOptions" formControlName="historyType">
+        </tb-toggle-select>
+        @if (timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL) {
+          <div class="tb-form-row">
+            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomInterval">
+              {{ 'timewindow.disable-custom-interval' | translate }}
+            </mat-slide-toggle>
+          </div>
+          <div class="tb-form-row column-xs">
+            <mat-slide-toggle class="mat-slide" formControlName="hideLastInterval">
+              <div tb-hint-tooltip-icon="{{'timewindow.hide-last-interval' | translate}}">
+                {{ 'timewindow.hide' | translate }}
+              </div>
+            </mat-slide-toggle>
+            <tb-timeinterval
+              formControlName="timewindowMs"
+              subscriptSizing="dynamic"
+              appearance="outline"
+              [allowedIntervals]="timewindowForm.get('history.advancedParams.allowedLastIntervals').value"
+              [disabledAdvanced]="timewindowForm.get('history.disableCustomInterval').value"
             [required]="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY &&
                           timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
-            <button *ngIf="!(timewindowForm.get('history.hideLastInterval').value ||
-                            timewindowForm.get('history.hideInterval').value)"
-                    matSuffix mat-icon-button type="button"
-                    (click)="configureHistoryLastIntervalOptions($event)">
-              <mat-icon>edit</mat-icon>
-            </button>
-          </tb-timeinterval>
-        </div>
-      </ng-container>
-
-      <div *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED" class="tb-form-row column-xs">
-        <mat-slide-toggle class="mat-slide" formControlName="hideFixedInterval">
-          <div tb-hint-tooltip-icon="{{'timewindow.hide-fixed-interval' | translate}}">
-            {{ 'timewindow.hide' | translate }}
+              @if (!(timewindowForm.get('history.hideLastInterval').value ||
+                timewindowForm.get('history.hideInterval').value)) {
+                <button
+                  matSuffix mat-icon-button type="button"
+                  (click)="configureHistoryLastIntervalOptions($event)">
+                  <mat-icon>edit</mat-icon>
+                </button>
+              }
+            </tb-timeinterval>
           </div>
-        </mat-slide-toggle>
-        <tb-datetime-period
-          formControlName="fixedTimewindow"
-          subscriptSizing="dynamic"
-          appearance="outline"
-          class="history-time-input"
+        }
+        @if (timewindowForm.get('history.historyType').value === historyTypes.FIXED) {
+          <div class="tb-form-row column-xs">
+            <mat-slide-toggle class="mat-slide" formControlName="hideFixedInterval">
+              <div tb-hint-tooltip-icon="{{'timewindow.hide-fixed-interval' | translate}}">
+                {{ 'timewindow.hide' | translate }}
+              </div>
+            </mat-slide-toggle>
+            <tb-datetime-period
+              formControlName="fixedTimewindow"
+              subscriptSizing="dynamic"
+              appearance="outline"
+              class="history-time-input"
           [required]="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY &&
                         timewindowForm.get('history.historyType').value === historyTypes.FIXED">
-        </tb-datetime-period>
-      </div>
-
-      <div *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL" class="tb-form-row column-xs">
-          <mat-slide-toggle class="mat-slide" formControlName="hideQuickInterval">
-            <div tb-hint-tooltip-icon="{{'timewindow.hide-relative-interval' | translate}}">
-              {{ 'timewindow.hide' | translate }}
-            </div>
-          </mat-slide-toggle>
-          <tb-quick-time-interval
-            displayLabel="false"
-            formControlName="quickInterval"
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [allowedIntervals]="timewindowForm.get('history.advancedParams.allowedQuickIntervals').value"
+            </tb-datetime-period>
+          </div>
+        }
+        @if (timewindowForm.get('history.historyType').value === historyTypes.INTERVAL) {
+          <div class="tb-form-row column-xs">
+            <mat-slide-toggle class="mat-slide" formControlName="hideQuickInterval">
+              <div tb-hint-tooltip-icon="{{'timewindow.hide-relative-interval' | translate}}">
+                {{ 'timewindow.hide' | translate }}
+              </div>
+            </mat-slide-toggle>
+            <tb-quick-time-interval
+              displayLabel="false"
+              formControlName="quickInterval"
+              subscriptSizing="dynamic"
+              appearance="outline"
+              [allowedIntervals]="timewindowForm.get('history.advancedParams.allowedQuickIntervals').value"
             [required]="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY &&
                         timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
-            <button *ngIf="!(timewindowForm.get('history.hideQuickInterval').value ||
-                            timewindowForm.get('history.hideInterval').value)"
-                    matSuffix mat-icon-button type="button"
-                    (click)="configureHistoryQuickIntervalOptions($event)">
-              <mat-icon>edit</mat-icon>
-            </button>
-          </tb-quick-time-interval>
-        </div>
-    </section>
+              @if (!(timewindowForm.get('history.hideQuickInterval').value ||
+                timewindowForm.get('history.hideInterval').value)) {
+                <button
+                  matSuffix mat-icon-button type="button"
+                  (click)="configureHistoryQuickIntervalOptions($event)">
+                  <mat-icon>edit</mat-icon>
+                </button>
+              }
+            </tb-quick-time-interval>
+          </div>
+        }
+      </section>
+    }
 
-    <ng-container *ngIf="aggregation">
+    @if (aggregation) {
       <section class="tb-form-panel">
         <div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div>
         <div class="tb-form-row column-xs">
@@ -198,37 +215,38 @@
             <tb-aggregation-type-select class="flex" subscriptSizing="dynamic" appearance="outline" displayLabel="false"
                                         formControlName="type"
                                         [allowedAggregationTypes]="timewindowForm.get('allowedAggTypes').value">
-              <button *ngIf="!timewindowForm.get('hideAggregation').value"
-                      matSuffix mat-icon-button type="button"
-                      (click)="openAggregationOptionsConfig($event)">
-                <mat-icon>edit</mat-icon>
-              </button>
+              @if (!timewindowForm.get('hideAggregation').value) {
+                <button
+                  matSuffix mat-icon-button type="button"
+                  (click)="openAggregationOptionsConfig($event)">
+                  <mat-icon>edit</mat-icon>
+                </button>
+              }
             </tb-aggregation-type-select>
           </ng-container>
         </div>
       </section>
-
-      <section class="tb-form-panel"
-               *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
-        <div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div>
-        <div class="tb-form-row column-xs">
-          <mat-slide-toggle class="mat-slide" formControlName="hideAggInterval">
-            <div tb-hint-tooltip-icon="{{'timewindow.hide-max-values' | translate}}">
-              {{ 'timewindow.hide' | translate }}
-            </div>
-          </mat-slide-toggle>
-          <ng-container formGroupName="aggregation">
-            <tb-datapoints-limit formControlName="limit"
-                                 [required]="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
-            </tb-datapoints-limit>
-          </ng-container>
-        </div>
-      </section>
-
+      @if (timewindowForm.get('aggregation.type').value === aggregationTypes.NONE) {
+        <section class="tb-form-panel"
+                 >
+          <div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div>
+          <div class="tb-form-row column-xs">
+            <mat-slide-toggle class="mat-slide" formControlName="hideAggInterval">
+              <div tb-hint-tooltip-icon="{{'timewindow.hide-max-values' | translate}}">
+                {{ 'timewindow.hide' | translate }}
+              </div>
+            </mat-slide-toggle>
+            <ng-container formGroupName="aggregation">
+              <tb-datapoints-limit formControlName="limit"
+                                   [required]="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
+              </tb-datapoints-limit>
+            </ng-container>
+          </div>
+        </section>
+      }
       <section class="tb-form-panel" [class.!hidden]="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
         <div class="tb-form-panel-title">{{ 'aggregation.group-interval' | translate }}</div>
-
-        <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME">
+        @if (timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME) {
           <div class="tb-form-row" formGroupName="realtime">
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomGroupInterval">
               {{ 'timewindow.disable-custom-interval' | translate }}
@@ -250,8 +268,8 @@
               </tb-timeinterval>
             </ng-container>
           </div>
-        </ng-container>
-        <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY">
+        }
+        @if (timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY) {
           <div class="tb-form-row" formGroupName="history">
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomGroupInterval">
               {{ 'timewindow.disable-custom-interval' | translate }}
@@ -273,8 +291,7 @@
               </tb-timeinterval>
             </ng-container>
           </div>
-        </ng-container>
-
+        }
         <ng-template #hideAggInterval>
           <mat-slide-toggle class="mat-slide" formControlName="hideAggInterval">
             <div tb-hint-tooltip-icon="{{'timewindow.hide-group-interval' | translate}}">
@@ -283,7 +300,7 @@
           </mat-slide-toggle>
         </ng-template>
       </section>
-    </ng-container>
+    }
 
     <section class="tb-form-panel">
       <div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
index 6a6ca10734..322da81efb 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
@@ -16,163 +16,194 @@
 
 -->
 <form [formGroup]="timewindowForm" class="tb-timewindow-form">
-  <div class="tb-timewindow-form-header tb-form-panel no-border no-padding-bottom" *ngIf="!historyOnly">
-    <tb-toggle-select class="tb-timewindow-form-type-options" appearance="fill"
-                      [options]="timewindowTypeOptions" formControlName="selectedTab">
-    </tb-toggle-select>
-    <button mat-icon-button type="button" class="tb-timewindow-form-settings-btn tb-mat-24"
-            *ngIf="isEdit"
-            (click)="openTimewindowConfig()">
-      <mat-icon>settings</mat-icon>
-    </button>
-  </div>
+  @if (!historyOnly) {
+    <div class="tb-timewindow-form-header tb-form-panel no-border no-padding-bottom">
+      <tb-toggle-select class="tb-timewindow-form-type-options" appearance="fill"
+                        [options]="timewindowTypeOptions" formControlName="selectedTab">
+      </tb-toggle-select>
+      @if (isEdit) {
+        <button mat-icon-button type="button" class="tb-timewindow-form-settings-btn tb-mat-24"
+                (click)="openTimewindowConfig()">
+          <mat-icon>settings</mat-icon>
+        </button>
+      }
+    </div>
+  }
 
   <div class="tb-timewindow-form-content tb-form-panel no-border" [class.no-padding]="!panelMode">
-    <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME">
-      <section class="tb-form-panel stroked" *ngIf="realtimeIntervalSelectionAvailable; else timezoneSelectionPanel">
-        <div class="tb-flex space-between"
-             [class.align-end]="realtimeTypeSelectionAvailable"
-             [class.align-center]="!realtimeTypeSelectionAvailable">
-          <div class="tb-flex-xs column">
-            <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
-            <ng-container formGroupName="realtime" *ngIf="realtimeTypeSelectionAvailable">
-              <tb-toggle-select appearance="stroked" [options]="realtimeTimewindowOptions" formControlName="realtimeType">
-              </tb-toggle-select>
+    @if (timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME) {
+      @if (realtimeIntervalSelectionAvailable) {
+        <section class="tb-form-panel stroked">
+          <div class="tb-flex space-between"
+               [class.align-end]="realtimeTypeSelectionAvailable"
+               [class.align-center]="!realtimeTypeSelectionAvailable">
+            <div class="tb-flex-xs column">
+              <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
+              @if (realtimeTypeSelectionAvailable) {
+                <ng-container formGroupName="realtime">
+                  <tb-toggle-select appearance="stroked" [options]="realtimeTimewindowOptions" formControlName="realtimeType">
+                  </tb-toggle-select>
+                </ng-container>
+              }
+            </div>
+            <ng-container *ngTemplateOutlet="timezoneSelection">
             </ng-container>
           </div>
-
-          <ng-container *ngTemplateOutlet="timezoneSelection">
-          </ng-container>
-        </div>
-
-        <div class="tb-form-row no-border no-padding" formGroupName="realtime">
-          <tb-timeinterval
-            *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
-            formControlName="timewindowMs"
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [allowedIntervals]="realtimeAllowedLastIntervals"
-            [disabledAdvanced]="realtimeDisableCustomInterval"
+          <div class="tb-form-row no-border no-padding" formGroupName="realtime">
+            @if (timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL) {
+              <tb-timeinterval
+                formControlName="timewindowMs"
+                subscriptSizing="dynamic"
+                appearance="outline"
+                [allowedIntervals]="realtimeAllowedLastIntervals"
+                [disabledAdvanced]="realtimeDisableCustomInterval"
             [required]="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME &&
                               timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
-          </tb-timeinterval>
-
-          <tb-quick-time-interval
-            *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
-            displayLabel="false"
-            formControlName="quickInterval"
-            onlyCurrentInterval="true"
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [allowedIntervals]="realtimeAllowedQuickIntervals"
+              </tb-timeinterval>
+            }
+            @if (timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL) {
+              <tb-quick-time-interval
+                displayLabel="false"
+                formControlName="quickInterval"
+                onlyCurrentInterval="true"
+                subscriptSizing="dynamic"
+                appearance="outline"
+                [allowedIntervals]="realtimeAllowedQuickIntervals"
             [required]="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME &&
                               timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
-          </tb-quick-time-interval>
-        </div>
-      </section>
-    </ng-container>
-
-    <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY">
-      <section class="tb-form-panel stroked" *ngIf="historyIntervalSelectionAvailable; else timezoneSelectionPanel">
-        <div class="tb-flex space-between"
-             [class.align-end]="historyTypeSelectionAvailable"
-             [class.align-center]="!historyTypeSelectionAvailable">
-          <div class="tb-flex-xs column">
-            <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
-            <ng-container formGroupName="history" *ngIf="historyTypeSelectionAvailable">
-              <tb-toggle-select appearance="stroked" [options]="historyTimewindowOptions" formControlName="historyType">
-              </tb-toggle-select>
-            </ng-container>
+              </tb-quick-time-interval>
+            }
           </div>
-
+        </section>
+      } @else {
+        <section class="tb-form-row space-between same-padding">
+          <div>{{ 'timezone.timezone' | translate }}</div>
           <ng-container *ngTemplateOutlet="timezoneSelection">
           </ng-container>
-        </div>
+        </section>
+      }
+    }
 
-        <div class="tb-form-row no-border no-padding"
-             formGroupName="history" *ngIf="historyIntervalSelectionAvailable &&
-                                  timewindowForm.get('history.historyType').value !== historyTypes.FOR_ALL_TIME">
-          <tb-timeinterval
-            *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
-            formControlName="timewindowMs"
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [allowedIntervals]="historyAllowedLastIntervals"
-            [disabledAdvanced]="historyDisableCustomInterval"
+    @if (timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY) {
+      @if (historyIntervalSelectionAvailable) {
+        <section class="tb-form-panel stroked">
+          <div class="tb-flex space-between"
+               [class.align-end]="historyTypeSelectionAvailable"
+               [class.align-center]="!historyTypeSelectionAvailable">
+            <div class="tb-flex-xs column">
+              <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
+              @if (historyTypeSelectionAvailable) {
+                <ng-container formGroupName="history">
+                  <tb-toggle-select appearance="stroked" [options]="historyTimewindowOptions" formControlName="historyType">
+                  </tb-toggle-select>
+                </ng-container>
+              }
+            </div>
+            <ng-container *ngTemplateOutlet="timezoneSelection">
+            </ng-container>
+          </div>
+          @if (historyIntervalSelectionAvailable &&
+            timewindowForm.get('history.historyType').value !== historyTypes.FOR_ALL_TIME) {
+            <div class="tb-form-row no-border no-padding"
+                 formGroupName="history">
+              @if (timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL) {
+                <tb-timeinterval
+                  formControlName="timewindowMs"
+                  subscriptSizing="dynamic"
+                  appearance="outline"
+                  [allowedIntervals]="historyAllowedLastIntervals"
+                  [disabledAdvanced]="historyDisableCustomInterval"
             [required]="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY &&
                             timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
-          </tb-timeinterval>
-
-          <tb-datetime-period
-            *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED"
-            formControlName="fixedTimewindow"
-            subscriptSizing="dynamic"
-            appearance="outline"
-            class="history-time-input"
+                </tb-timeinterval>
+              }
+              @if (timewindowForm.get('history.historyType').value === historyTypes.FIXED) {
+                <tb-datetime-period
+                  formControlName="fixedTimewindow"
+                  subscriptSizing="dynamic"
+                  appearance="outline"
+                  class="history-time-input"
             [required]="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY &&
                             timewindowForm.get('history.historyType').value === historyTypes.FIXED">
-          </tb-datetime-period>
-
-          <tb-quick-time-interval
-            *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
-            displayLabel="false"
-            formControlName="quickInterval"
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [allowedIntervals]="historyAllowedQuickIntervals"
+                </tb-datetime-period>
+              }
+              @if (timewindowForm.get('history.historyType').value === historyTypes.INTERVAL) {
+                <tb-quick-time-interval
+                  displayLabel="false"
+                  formControlName="quickInterval"
+                  subscriptSizing="dynamic"
+                  appearance="outline"
+                  [allowedIntervals]="historyAllowedQuickIntervals"
             [required]="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY &&
                           timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
-          </tb-quick-time-interval>
-        </div>
-      </section>
-    </ng-container>
-
-    <ng-container *ngIf="aggregationOptionsAvailable">
-      <ng-container formGroupName="aggregation">
-        <section class="tb-form-row column-xs space-between same-padding" *ngIf="isEdit || !timewindow.hideAggregation">
-          <div class="fixed-title-width-180">{{ 'aggregation.aggregation' | translate }}</div>
-          <tb-aggregation-type-select class="flex" subscriptSizing="dynamic" appearance="outline" displayLabel="false"
-                                      formControlName="type" [allowedAggregationTypes]="allowedAggTypes">
-          </tb-aggregation-type-select>
+                </tb-quick-time-interval>
+              }
+            </div>
+          }
         </section>
-
-        <section class="tb-form-row column-xs space-between same-padding"
-                 *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE && (isEdit || !timewindow.hideAggInterval)">
-          <div>{{ 'aggregation.limit' | translate }}</div>
-          <tb-datapoints-limit formControlName="limit"
-                               [required]="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
-          </tb-datapoints-limit>
+      } @else {
+        <section class="tb-form-row space-between same-padding">
+          <div>{{ 'timezone.timezone' | translate }}</div>
+          <ng-container *ngTemplateOutlet="timezoneSelection">
+          </ng-container>
         </section>
-      </ng-container>
+      }
+    }
 
-      <section class="tb-form-row column-xs same-padding" *ngIf="timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE"
-               [class.!hidden]="!(isEdit || !timewindow.hideAggInterval)">
-        <ng-container formGroupName="realtime" *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME">
-          <tb-timeinterval
-            formControlName="interval"
-            [min]="minRealtimeAggInterval" [max]="maxRealtimeAggInterval"
-            [allowedIntervals]="realtimeAllowedAggIntervals"
-            useCalendarIntervals
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [disabledAdvanced]="realtimeDisableCustomGroupInterval">
-            <div class="fixed-title-width-180">{{ 'aggregation.group-interval' | translate }}</div>
-          </tb-timeinterval>
-        </ng-container>
-        <ng-container formGroupName="history" *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY">
-          <tb-timeinterval
-            formControlName="interval"
-            [min]="minHistoryAggInterval" [max]="maxHistoryAggInterval"
-            [allowedIntervals]="historyAllowedAggIntervals"
-            useCalendarIntervals
-            subscriptSizing="dynamic"
-            appearance="outline"
-            [disabledAdvanced]="historyDisableCustomGroupInterval">
-            <div class="fixed-title-width-180">{{ 'aggregation.group-interval' | translate }}</div>
-          </tb-timeinterval>
-        </ng-container>
-      </section>
-    </ng-container>
+    @if (aggregationOptionsAvailable) {
+      <ng-container formGroupName="aggregation">
+        @if (isEdit || !timewindow.hideAggregation) {
+          <section class="tb-form-row column-xs space-between same-padding">
+            <div class="fixed-title-width-180">{{ 'aggregation.aggregation' | translate }}</div>
+            <tb-aggregation-type-select class="flex" subscriptSizing="dynamic" appearance="outline" displayLabel="false"
+                                        formControlName="type" [allowedAggregationTypes]="allowedAggTypes">
+            </tb-aggregation-type-select>
+          </section>
+        }
+        @if (timewindowForm.get('aggregation.type').value === aggregationTypes.NONE && (isEdit || !timewindow.hideAggInterval)) {
+          <section class="tb-form-row column-xs space-between same-padding"
+                   >
+            <div>{{ 'aggregation.limit' | translate }}</div>
+            <tb-datapoints-limit formControlName="limit"
+                                 [required]="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
+            </tb-datapoints-limit>
+          </section>
+        }
+      </ng-container>
+      @if (timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE) {
+        <section class="tb-form-row column-xs same-padding"
+                 [class.!hidden]="!(isEdit || !timewindow.hideAggInterval)">
+          @if (timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME) {
+            <ng-container formGroupName="realtime">
+              <tb-timeinterval
+                formControlName="interval"
+                [min]="minRealtimeAggInterval" [max]="maxRealtimeAggInterval"
+                [allowedIntervals]="realtimeAllowedAggIntervals"
+                useCalendarIntervals
+                subscriptSizing="dynamic"
+                appearance="outline"
+                [disabledAdvanced]="realtimeDisableCustomGroupInterval">
+                <div class="fixed-title-width-180">{{ 'aggregation.group-interval' | translate }}</div>
+              </tb-timeinterval>
+            </ng-container>
+          }
+          @if (timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY) {
+            <ng-container formGroupName="history">
+              <tb-timeinterval
+                formControlName="interval"
+                [min]="minHistoryAggInterval" [max]="maxHistoryAggInterval"
+                [allowedIntervals]="historyAllowedAggIntervals"
+                useCalendarIntervals
+                subscriptSizing="dynamic"
+                appearance="outline"
+                [disabledAdvanced]="historyDisableCustomGroupInterval">
+                <div class="fixed-title-width-180">{{ 'aggregation.group-interval' | translate }}</div>
+              </tb-timeinterval>
+            </ng-container>
+          }
+        </section>
+      }
+    }
     @if (saveAsDefaultAvailable) {
       <mat-checkbox class="tb-timewindow-form-checkbox" [formControl]="saveTimewindowControl">
         {{ 'timewindow.save-current-settings-as-default' | translate }}
@@ -180,34 +211,33 @@
     }
   </div>
 
-  <ng-template #timezoneSelectionPanel>
-    <section class="tb-form-row space-between same-padding">
-      <div>{{ 'timezone.timezone' | translate }}</div>
-      <ng-container *ngTemplateOutlet="timezoneSelection">
-      </ng-container>
-    </section>
-  </ng-template>
   <ng-template #timezoneSelection>
-    <tb-timezone *ngIf="timezone && (isEdit || !timewindow.hideTimezone)"
-                 asButton strokedButton noMargin
-                 localBrowserTimezonePlaceholderOnEmpty="true"
-                 formControlName="timezone">
-    </tb-timezone>
+    @if (timezone && (isEdit || !timewindow.hideTimezone)) {
+      <tb-timezone
+        asButton strokedButton noMargin
+        localBrowserTimezonePlaceholderOnEmpty="true"
+        formControlName="timezone">
+      </tb-timezone>
+    }
   </ng-template>
-  <mat-divider *ngIf="panelMode"></mat-divider>
-  <div class="tb-panel-actions tb-flex flex-end no-gap" *ngIf="panelMode">
-    <button type="button"
-            mat-button
-            [disabled]="(isLoading$ | async)"
-            (click)="cancel()">
-      {{ 'action.cancel' | translate }}
-    </button>
-    <button type="button"
-            mat-raised-button
-            color="primary"
-            (click)="update()"
-            [disabled]="(isLoading$ | async) || timewindowForm.invalid || !timewindowForm.dirty">
-      {{ 'action.update' | translate }}
-    </button>
-  </div>
+  @if (panelMode) {
+    <mat-divider></mat-divider>
+  }
+  @if (panelMode) {
+    <div class="tb-panel-actions tb-flex flex-end no-gap">
+      <button type="button"
+              mat-button
+              [disabled]="(isLoading$ | async)"
+              (click)="cancel()">
+        {{ 'action.cancel' | translate }}
+      </button>
+      <button type="button"
+              mat-raised-button
+              color="primary"
+              (click)="update()"
+              [disabled]="(isLoading$ | async) || timewindowForm.invalid || !timewindowForm.dirty">
+        {{ 'action.update' | translate }}
+      </button>
+    </div>
+  }
 </form>
diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.html b/ui-ngx/src/app/shared/components/time/timewindow.component.html
index 55c2f58120..5a2d5016a0 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow.component.html
@@ -15,44 +15,56 @@
     limitations under the License.
 
 -->
-<button *ngIf="asButton && panelMode && !strokedButton && !flatButton"
-        [disabled]="timewindowDisabled"
-        type="button"
-        mat-raised-button color="primary"
-        (click)="toggleTimewindow($event)">
-  <mat-icon class="material-icons">query_builder</mat-icon>
-  <span>{{displayValue()}}</span>
-</button>
-<button *ngIf="asButton && panelMode && strokedButton"
-        [disabled]="timewindowDisabled"
-        type="button"
-        mat-stroked-button color="primary"
-        (click)="toggleTimewindow($event)">
-  <mat-icon class="material-icons">query_builder</mat-icon>
-  <span>{{displayValue()}}</span>
-</button>
-<button *ngIf="asButton && panelMode && flatButton"
-        [disabled]="timewindowDisabled"
-        type="button"
-        mat-button
-        (click)="toggleTimewindow($event)">
-  <mat-icon class="material-icons">query_builder</mat-icon>
-  <span>{{displayValue()}}</span>
-</button>
-<section *ngIf="!asButton && panelMode"
-         class="tb-timewindow"
-         [class]="{'no-padding': noPadding}"
-         matTooltip="{{ 'timewindow.edit' | translate }}"
-         [matTooltipPosition]="tooltipPosition"
-         [matTooltipDisabled]="timewindowDisabled"
-         [style]="timewindowComponentStyle"
-         (click)="toggleTimewindow($event)">
-  <tb-icon *ngIf="computedTimewindowStyle.showIcon && computedTimewindowStyle.iconPosition === 'left'"
-           [style]="timewindowIconStyle">{{ computedTimewindowStyle.icon }}</tb-icon>
-  <div class="tb-timewindow-label" [class.!hidden]="hideLabel">
-    {{innerValue?.displayValue}} <span [class.!hidden]="!(innerValue?.displayTimezoneAbbr !== '')">| <span class="timezone-abbr">{{innerValue?.displayTimezoneAbbr}}</span></span>
-  </div>
-  <tb-icon *ngIf="computedTimewindowStyle.showIcon && computedTimewindowStyle.iconPosition === 'right'"
-           [style]="timewindowIconStyle">{{ computedTimewindowStyle.icon }}</tb-icon>
-</section>
+@if (asButton && panelMode && !strokedButton && !flatButton) {
+  <button
+    [disabled]="timewindowDisabled"
+    type="button"
+    mat-raised-button color="primary"
+    (click)="toggleTimewindow($event)">
+    <mat-icon class="material-icons">query_builder</mat-icon>
+    <span>{{displayValue()}}</span>
+  </button>
+}
+@if (asButton && panelMode && strokedButton) {
+  <button
+    [disabled]="timewindowDisabled"
+    type="button"
+    mat-stroked-button color="primary"
+    (click)="toggleTimewindow($event)">
+    <mat-icon class="material-icons">query_builder</mat-icon>
+    <span>{{displayValue()}}</span>
+  </button>
+}
+@if (asButton && panelMode && flatButton) {
+  <button
+    [disabled]="timewindowDisabled"
+    type="button"
+    mat-button
+    (click)="toggleTimewindow($event)">
+    <mat-icon class="material-icons">query_builder</mat-icon>
+    <span>{{displayValue()}}</span>
+  </button>
+}
+@if (!asButton && panelMode) {
+  <section
+    class="tb-timewindow"
+    [class]="{'no-padding': noPadding}"
+    matTooltip="{{ 'timewindow.edit' | translate }}"
+    [matTooltipPosition]="tooltipPosition"
+    [matTooltipDisabled]="timewindowDisabled"
+    [style]="timewindowComponentStyle"
+    (click)="toggleTimewindow($event)">
+    @if (computedTimewindowStyle.showIcon && computedTimewindowStyle.iconPosition === 'left') {
+      <tb-icon
+      [style]="timewindowIconStyle">{{ computedTimewindowStyle.icon }}</tb-icon>
+    }
+    <div class="tb-timewindow-label" [class.!hidden]="hideLabel">
+      {{innerValue?.displayValue}} <span [class.!hidden]="!(innerValue?.displayTimezoneAbbr !== '')">| <span class="timezone-abbr">{{innerValue?.displayTimezoneAbbr}}</span></span>
+    </div>
+    @if (computedTimewindowStyle.showIcon && computedTimewindowStyle.iconPosition === 'right') {
+      <tb-icon
+      [style]="timewindowIconStyle">{{ computedTimewindowStyle.icon }}</tb-icon>
+    }
+  </section>
+}
 <ng-container #panelContainer></ng-container>
diff --git a/ui-ngx/src/app/shared/components/time/timezone-select.component.html b/ui-ngx/src/app/shared/components/time/timezone-select.component.html
index 73343b71e3..5e343ce946 100644
--- a/ui-ngx/src/app/shared/components/time/timezone-select.component.html
+++ b/ui-ngx/src/app/shared/components/time/timezone-select.component.html
@@ -17,35 +17,45 @@
 -->
 <mat-form-field [formGroup]="selectTimezoneFormGroup" class="mat-block flex flex-1"
                 [subscriptSizing]="subscriptSizing" [appearance]="appearance">
-  <mat-label *ngIf="displayLabel" translate>timezone.timezone</mat-label>
+  @if (displayLabel) {
+    <mat-label translate>timezone.timezone</mat-label>
+  }
   <input matInput type="text" placeholder="{{ 'timezone.select-timezone' | translate }}"
          #timezoneInput
          formControlName="timezone"
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="timezoneAutocomplete">
-  <button *ngIf="selectTimezoneFormGroup.get('timezone').value && !disabled"
-          type="button" style="margin-right: 1px"
-          matSuffix mat-icon-button aria-label="Clear"
-          (mousedown)="ignoreClosePanel = true"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (selectTimezoneFormGroup.get('timezone').value && !disabled) {
+    <button
+      type="button" style="margin-right: 1px"
+      matSuffix mat-icon-button aria-label="Clear"
+      (mousedown)="ignoreClosePanel = true"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete class="tb-autocomplete"
                     #timezoneAutocomplete="matAutocomplete"
                     (closed)="onPanelClosed()"
                     (optionSelected)="ignoreClosePanel = true"
                     [displayWith]="displayTimezoneFn">
-    <mat-option *ngFor="let timezone of filteredTimezones | async" [value]="timezone">
-      <span [innerHTML]="displayTimezoneFn(timezone) | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredTimezones | async)?.length" [value]="null">
-      <span>
+    @for (timezone of filteredTimezones | async; track timezone) {
+      <mat-option [value]="timezone">
+        <span [innerHTML]="displayTimezoneFn(timezone) | highlight:searchText"></span>
+      </mat-option>
+    }
+    @if (!(filteredTimezones | async)?.length) {
+      <mat-option [value]="null">
+        <span>
           {{ translate.get('timezone.no-timezones-matching', {timezone: searchText}) | async }}
-      </span>
-    </mat-option>
+        </span>
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="selectTimezoneFormGroup.get('timezone').hasError('required')">
-    {{ 'timezone.timezone-required' | translate }}
-  </mat-error>
+  @if (selectTimezoneFormGroup.get('timezone').hasError('required')) {
+    <mat-error>
+      {{ 'timezone.timezone-required' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/time/timezone.component.html b/ui-ngx/src/app/shared/components/time/timezone.component.html
index 1ca6c746b8..3f37bcdec9 100644
--- a/ui-ngx/src/app/shared/components/time/timezone.component.html
+++ b/ui-ngx/src/app/shared/components/time/timezone.component.html
@@ -15,40 +15,48 @@
     limitations under the License.
 
 -->
-<button *ngIf="asButton && !strokedButton && !flatButton"
-        [disabled]="timezoneDisabled"
-        [matTooltip]="tooltipValue()"
-        [matTooltipPosition]="tooltipPosition"
-        type="button"
-        mat-raised-button color="primary"
-        (click)="toggleTimezone($event)">
-  <span>{{displayValue()}}</span>
-</button>
-<button *ngIf="asButton && strokedButton"
-        [disabled]="timezoneDisabled"
-        [matTooltip]="tooltipValue()"
-        [matTooltipPosition]="tooltipPosition"
-        type="button"
-        mat-stroked-button color="primary"
-        (click)="toggleTimezone($event)">
-  <span>{{displayValue()}}</span>
-</button>
-<button *ngIf="asButton && flatButton"
-        [disabled]="timezoneDisabled"
-        [matTooltip]="tooltipValue()"
-        [matTooltipPosition]="tooltipPosition"
-        type="button"
-        mat-button
-        (click)="toggleTimezone($event)">
-  <span>{{displayValue()}}</span>
-</button>
-<section *ngIf="!asButton"
-         class="tb-timezone"
-         [class]="{'no-padding': noPadding}"
-         [matTooltip]="tooltipValue()"
-         [matTooltipPosition]="tooltipPosition"
-         (click)="toggleTimezone($event)">
-  <div class="tb-timezone-label" [class.!hidden]="hideLabel">
-    {{displayValue()}}
-  </div>
-</section>
+@if (asButton && !strokedButton && !flatButton) {
+  <button
+    [disabled]="timezoneDisabled"
+    [matTooltip]="tooltipValue()"
+    [matTooltipPosition]="tooltipPosition"
+    type="button"
+    mat-raised-button color="primary"
+    (click)="toggleTimezone($event)">
+    <span>{{displayValue()}}</span>
+  </button>
+}
+@if (asButton && strokedButton) {
+  <button
+    [disabled]="timezoneDisabled"
+    [matTooltip]="tooltipValue()"
+    [matTooltipPosition]="tooltipPosition"
+    type="button"
+    mat-stroked-button color="primary"
+    (click)="toggleTimezone($event)">
+    <span>{{displayValue()}}</span>
+  </button>
+}
+@if (asButton && flatButton) {
+  <button
+    [disabled]="timezoneDisabled"
+    [matTooltip]="tooltipValue()"
+    [matTooltipPosition]="tooltipPosition"
+    type="button"
+    mat-button
+    (click)="toggleTimezone($event)">
+    <span>{{displayValue()}}</span>
+  </button>
+}
+@if (!asButton) {
+  <section
+    class="tb-timezone"
+    [class]="{'no-padding': noPadding}"
+    [matTooltip]="tooltipValue()"
+    [matTooltipPosition]="tooltipPosition"
+    (click)="toggleTimezone($event)">
+    <div class="tb-timezone-label" [class.!hidden]="hideLabel">
+      {{displayValue()}}
+    </div>
+  </section>
+}
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.html b/ui-ngx/src/app/shared/components/toggle-header.component.html
index bddaa896b6..e9063b3be2 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.html
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.html
@@ -26,33 +26,48 @@
         [class.tb-mat-24]="isMdLg">
   <mat-icon>chevron_left</mat-icon>
 </button>
-<div #toggleGroupContainer class="tb-toggle-container"
-     [class.tb-disable-pagination]="disablePagination"
-     [class.fill-height]="fillHeight"
-     [class.extra-padding]="extraPadding"
-     *ngIf="(useSelect$ | async) === false; else select" >
-  <mat-button-toggle-group #toggleGroup
-                           class="tb-toggle-header"
-                           [class.tb-fill]="(appearance === 'fill' || appearance === 'fill-invert')"
-                           [class.tb-invert]="appearance === 'fill-invert'"
-                           [class.tb-primary-fill]="primaryBackground"
-                           [class.tb-ignore-md-lg]="ignoreMdLgSize"
-                           [class.tb-disabled]="disabled"
-                           [name]="name"
-                           [(ngModel)]="value"
-                           (ngModelChange)="valueChange.emit(value)">
-    <mat-button-toggle *ngFor="let option of options; trackBy: trackByHeaderOption" [value]="option.value" [disabled]="disabled" [class.tb-toggle-button-error]="(option.error$ | async) && value !== option.value">
-      {{ option.name }}
-      <mat-icon matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
-                [matTooltip]="(option.error$ | async)"
-                *ngIf="(option.error$ | async) && value !== option.value"
-                class="tb-error tb-error-icon">
-        warning
-      </mat-icon>
-    </mat-button-toggle>
-  </mat-button-toggle-group>
-</div>
+@if ((useSelect$ | async) === false) {
+  <div #toggleGroupContainer class="tb-toggle-container"
+       [class.tb-disable-pagination]="disablePagination"
+       [class.fill-height]="fillHeight"
+       [class.extra-padding]="extraPadding"
+       >
+    <mat-button-toggle-group #toggleGroup
+                             class="tb-toggle-header"
+                             [class.tb-fill]="(appearance === 'fill' || appearance === 'fill-invert')"
+                             [class.tb-invert]="appearance === 'fill-invert'"
+                             [class.tb-primary-fill]="primaryBackground"
+                             [class.tb-ignore-md-lg]="ignoreMdLgSize"
+                             [class.tb-disabled]="disabled"
+                             [name]="name"
+                             [(ngModel)]="value"
+                             (ngModelChange)="valueChange.emit(value)">
+      @for (option of options; track trackByHeaderOption($index, 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) {
+            <mat-icon matTooltipPosition="above"
+                      matTooltipClass="tb-error-tooltip"
+                      [matTooltip]="(option.error$ | async)"
+                      class="tb-error tb-error-icon">
+              warning
+            </mat-icon>
+          }
+        </mat-button-toggle>
+      }
+    </mat-button-toggle-group>
+  </div>
+} @else {
+  <mat-form-field appearance="outline" class="tb-toggle-header-select"
+                  [class.fill-height]="fillHeight"
+                  subscriptSizing="dynamic">
+    <mat-select [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)" [disabled]="disabled">
+      @for (option of options; track option) {
+        <mat-option [value]="option.value"> {{ option.name }}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+}
 <button mat-icon-button
         type="button"
         [disabled]="!rightPaginationEnabled"
@@ -64,12 +79,3 @@
         [class.tb-mat-24]="isMdLg">
   <mat-icon>chevron_right</mat-icon>
 </button>
-<ng-template #select>
-  <mat-form-field appearance="outline" class="tb-toggle-header-select"
-                  [class.fill-height]="fillHeight"
-                  subscriptSizing="dynamic">
-    <mat-select [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)" [disabled]="disabled">
-      <mat-option *ngFor="let option of options" [value]="option.value"> {{ option.name }}</mat-option>
-    </mat-select>
-  </mat-form-field>
-</ng-template>
diff --git a/ui-ngx/src/app/shared/components/unit-input.component.html b/ui-ngx/src/app/shared/components/unit-input.component.html
index 66d92c83d1..c2cd671072 100644
--- a/ui-ngx/src/app/shared/components/unit-input.component.html
+++ b/ui-ngx/src/app/shared/components/unit-input.component.html
@@ -23,27 +23,33 @@
          (focusin)="onFocus()"
          [matAutocomplete]="unitsAutocomplete"
          [matAutocompleteDisabled]="supportsUnitConversion">
-  <button *ngIf="unitsFormControl.value && !disabled && unitsFormControl.valid && !isUnitMapping"
-          type="button"
-          class="tb-icon-24 mr-2"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear($event)">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
-  <mat-icon matSuffix
-            matTooltipPosition="above"
-            matTooltipClass="tb-error-tooltip"
-            [matTooltip]="'widget-config.units-required' | translate"
-            *ngIf="unitsFormControl.hasError('required')" class="material-icons tb-suffix-show-always tb-error">
-    warning
-  </mat-icon>
-  <tb-icon matSuffix
-           [color]="disabled ? null : 'primary'"
-           matTooltipPosition="above"
-           [matTooltip]="'unit.set-unit-conversion' | translate"
-           *ngIf="supportsUnitConversion && isUnitMapping" class="material-icons tb-suffix-show-always mr-2 !p-0">
-    mdi:swap-vertical-circle-outline
-  </tb-icon>
+  @if (unitsFormControl.value && !disabled && unitsFormControl.valid && !isUnitMapping) {
+    <button
+      type="button"
+      class="tb-icon-24 mr-2"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear($event)">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
+  @if (unitsFormControl.hasError('required')) {
+    <mat-icon matSuffix
+              matTooltipPosition="above"
+              matTooltipClass="tb-error-tooltip"
+              [matTooltip]="'widget-config.units-required' | translate"
+              class="material-icons tb-suffix-show-always tb-error">
+      warning
+    </mat-icon>
+  }
+  @if (supportsUnitConversion && isUnitMapping) {
+    <tb-icon matSuffix
+             [color]="disabled ? null : 'primary'"
+             matTooltipPosition="above"
+             [matTooltip]="'unit.set-unit-conversion' | translate"
+             class="material-icons tb-suffix-show-always mr-2 !p-0">
+      mdi:swap-vertical-circle-outline
+    </tb-icon>
+  }
   <mat-autocomplete
     #unitsAutocomplete="matAutocomplete"
     class="tb-autocomplete tb-unit-input-autocomplete"
@@ -58,6 +64,6 @@
           </mat-option>
         }
       </mat-optgroup>
-  }
+    }
   </mat-autocomplete>
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/unit-settings-panel.component.html b/ui-ngx/src/app/shared/components/unit-settings-panel.component.html
index 41875971f8..c27f56dd3f 100644
--- a/ui-ngx/src/app/shared/components/unit-settings-panel.component.html
+++ b/ui-ngx/src/app/shared/components/unit-settings-panel.component.html
@@ -22,9 +22,9 @@
       <div class="min-w-44"
            [class.tb-disabled-label]="unitSettingForm.get('from').disabled"
            tb-hint-tooltip-icon="{{ 'unit.unit-settings.source-unit-hint' | translate }}"
-           translate>unit.unit-settings.source-unit</div>
+      translate>unit.unit-settings.source-unit</div>
       <tb-unit-input class="flex-1" [required]="required" formControlName="from"
-                     [measure]="measure" [tagFilter]="tagFilter"></tb-unit-input>
+      [measure]="measure" [tagFilter]="tagFilter"></tb-unit-input>
     </div>
     <div class="tb-form-panel stroked">
       <mat-slide-toggle class="mat-slide" formControlName="convertUnit">
@@ -36,7 +36,7 @@
         <div class="min-w-44"
              [class.tb-disabled-label]="unitSettingForm.get('METRIC').disabled"
              tb-hint-tooltip-icon="{{ 'unit.unit-settings.target-metric-unit-hint' | translate }}"
-             translate>unit.unit-settings.target-metric-unit</div>
+        translate>unit.unit-settings.target-metric-unit</div>
         <tb-unit-input class="flex-1"
                        onlySystemUnits="true"
                        formControlName="METRIC"
@@ -49,7 +49,7 @@
         <div class="min-w-44"
              [class.tb-disabled-label]="unitSettingForm.get('IMPERIAL').disabled"
              tb-hint-tooltip-icon="{{ 'unit.unit-settings.target-imperial-unit-hint' | translate }}"
-             translate>unit.unit-settings.target-imperial-unit</div>
+        translate>unit.unit-settings.target-imperial-unit</div>
         <tb-unit-input class="flex-1"
                        onlySystemUnits="true"
                        formControlName="IMPERIAL"
@@ -62,7 +62,7 @@
         <div class="min-w-44"
              [class.tb-disabled-label]="unitSettingForm.get('HYBRID').disabled"
              tb-hint-tooltip-icon="{{ 'unit.unit-settings.target-hybrid-unit-hint' | translate }}"
-             translate>unit.unit-settings.target-hybrid-unit</div>
+        translate>unit.unit-settings.target-hybrid-unit</div>
         <tb-unit-input class="flex-1"
                        onlySystemUnits="true"
                        [tagFilter]="tagFilter"
@@ -73,14 +73,15 @@
     </div>
   </div>
   <div class="tb-convert-settings-panel-buttons">
-    <button mat-button
-            color="primary"
-            type="button"
-            *ngIf="!disabled"
-            (click)="clearUnit()"
-            [disabled]="!(!!unitSettingForm.value.from || unitSettingForm.value.convertUnit)">
-      {{ 'action.clear' | translate }}
-    </button>
+    @if (!disabled) {
+      <button mat-button
+              color="primary"
+              type="button"
+              (click)="clearUnit()"
+              [disabled]="!(!!unitSettingForm.value.from || unitSettingForm.value.convertUnit)">
+        {{ 'action.clear' | translate }}
+      </button>
+    }
     <span class="flex-1"></span>
     <button mat-button
             color="primary"
@@ -88,13 +89,14 @@
             (click)="cancel()">
       {{ (disabled ? 'action.close': 'action.cancel') | translate }}
     </button>
-    <button mat-raised-button
-            color="primary"
-            type="button"
-            *ngIf="!disabled"
-            (click)="applyUnitSettings()"
-            [disabled]="unitSettingForm.invalid || unitSettingForm.pristine">
-      {{ 'action.apply' | translate }}
-    </button>
+    @if (!disabled) {
+      <button mat-raised-button
+              color="primary"
+              type="button"
+              (click)="applyUnitSettings()"
+              [disabled]="unitSettingForm.invalid || unitSettingForm.pristine">
+        {{ 'action.apply' | translate }}
+      </button>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/user-menu.component.html b/ui-ngx/src/app/shared/components/user-menu.component.html
index 30b67fd38c..91454db185 100644
--- a/ui-ngx/src/app/shared/components/user-menu.component.html
+++ b/ui-ngx/src/app/shared/components/user-menu.component.html
@@ -16,26 +16,34 @@
 
 -->
 <section class="flex flex-row">
-  <div *ngIf="displayUserInfo" class="tb-user-info flex flex-row lt-lg:!hidden">
-    <mat-icon class="material-icons tb-mini-avatar">account_circle</mat-icon>
-    <div class="flex flex-col items-stretch justify-center">
-      <span *ngIf="userDisplayName$ | async; let userDisplayName" class="tb-user-display-name">{{ userDisplayName }}</span>
-      <span *ngIf="authorityName$ | async; let authorityName" class="tb-user-authority">{{ authorityName | translate }}</span>
+  @if (displayUserInfo) {
+    <div class="tb-user-info flex flex-row lt-lg:!hidden">
+      <mat-icon class="material-icons tb-mini-avatar">account_circle</mat-icon>
+      <div class="flex flex-col items-stretch justify-center">
+        @if (userDisplayName$ | async; as userDisplayName) {
+          <span class="tb-user-display-name">{{ userDisplayName }}</span>
+        }
+        @if (authorityName$ | async; as authorityName) {
+          <span class="tb-user-authority">{{ authorityName | translate }}</span>
+        }
+      </div>
     </div>
-  </div>
+  }
   <button mat-icon-button [matMenuTriggerFor]="userMenu">
     <mat-icon class="material-icons">more_vert</mat-icon>
   </button>
   <mat-menu #userMenu="matMenu" xPosition="before">
-    <div class="tb-user-menu-items" *ngIf="authority$ | async; let authority">
-      <button mat-menu-item (click)="openAccount()">
-        <mat-icon class="material-icons">account_circle</mat-icon>
-        <span translate>account.account</span>
-      </button>
-      <button mat-menu-item (click)="logout()">
-        <mat-icon class="material-icons">exit_to_app</mat-icon>
-        <span translate>home.logout</span>
-      </button>
-    </div>
+    @if (authority$ | async; as authority) {
+      <div class="tb-user-menu-items">
+        <button mat-menu-item (click)="openAccount()">
+          <mat-icon class="material-icons">account_circle</mat-icon>
+          <span translate>account.account</span>
+        </button>
+        <button mat-menu-item (click)="logout()">
+          <mat-icon class="material-icons">exit_to_app</mat-icon>
+          <span translate>home.logout</span>
+        </button>
+      </div>
+    }
   </mat-menu>
 </section>
diff --git a/ui-ngx/src/app/shared/components/value-input.component.html b/ui-ngx/src/app/shared/components/value-input.component.html
index a2f9426aa3..1ee5ac89b3 100644
--- a/ui-ngx/src/app/shared/components/value-input.component.html
+++ b/ui-ngx/src/app/shared/components/value-input.component.html
@@ -17,85 +17,107 @@
 -->
 <form #inputForm="ngForm">
   <section class="flex gap-2" [class]="computedLayout === 'row' ? 'flex-row' : 'flex-col'">
-    <mat-form-field *ngIf="showValueType" appearance="outline" subscriptSizing="dynamic" class="tb-value-type tb-inline-field" [class]="computedLayout">
-      <mat-select [disabled]="disabled" name="valueType" [(ngModel)]="valueType" (ngModelChange)="onValueTypeChanged()">
-        <mat-select-trigger>
-          <div class="tb-value-type-row">
-            <mat-icon class="tb-mat-18" svgIcon="{{ valueTypes.get(valueType).icon }}"></mat-icon>
-            <span>{{ valueTypes.get(valueType).name | translate }}</span>
-          </div>
-        </mat-select-trigger>
-        <mat-option *ngFor="let valueType of valueTypeKeys" [value]="valueType">
-          <mat-icon class="tb-mat-20" svgIcon="{{ valueTypes.get(valueTypeEnum[valueType]).icon }}"></mat-icon>
-          <span>{{ valueTypes.get(valueTypeEnum[valueType]).name | translate }}</span>
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-    <mat-form-field *ngIf="valueType === valueTypeEnum.STRING" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute flex flex-1">
-      <input [disabled]="disabled" matInput [required]="required" name="value" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
-             placeholder="{{ 'value.string-value' | translate }}{{ required ? '*' : ''}}"/>
-      <mat-icon matSuffix
-                matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
-                [matTooltip]="(requiredText ? requiredText : 'value.string-value-required') | translate"
-                *ngIf="value.hasError('required') && value.control.touched"
-                class="tb-error">
-        warning
-      </mat-icon>
-    </mat-form-field>
-    <mat-form-field *ngIf="valueType === valueTypeEnum.INTEGER" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute number flex flex-1">
-      <input [disabled]="disabled" matInput [required]="required" name="value" type="number" step="1" pattern="^-?[0-9]+$" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
-             placeholder="{{ 'value.integer-value' | translate }}{{ required ? '*' : ''}}"/>
-      <mat-icon matSuffix
-                matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
+    @if (showValueType) {
+      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-value-type tb-inline-field" [class]="computedLayout">
+        <mat-select [disabled]="disabled" name="valueType" [(ngModel)]="valueType" (ngModelChange)="onValueTypeChanged()">
+          <mat-select-trigger>
+            <div class="tb-value-type-row">
+              <mat-icon class="tb-mat-18" svgIcon="{{ valueTypes.get(valueType).icon }}"></mat-icon>
+              <span>{{ valueTypes.get(valueType).name | translate }}</span>
+            </div>
+          </mat-select-trigger>
+          @for (valueType of valueTypeKeys; track valueType) {
+            <mat-option [value]="valueType">
+              <mat-icon class="tb-mat-20" svgIcon="{{ valueTypes.get(valueTypeEnum[valueType]).icon }}"></mat-icon>
+              <span>{{ valueTypes.get(valueTypeEnum[valueType]).name | translate }}</span>
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    }
+    @if (valueType === valueTypeEnum.STRING) {
+      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute flex flex-1">
+        <input [disabled]="disabled" matInput [required]="required" name="value" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
+               placeholder="{{ 'value.string-value' | translate }}{{ required ? '*' : ''}}"/>
+        @if (value.hasError('required') && value.control.touched) {
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="(requiredText ? requiredText : 'value.string-value-required') | translate"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        }
+      </mat-form-field>
+    }
+    @if (valueType === valueTypeEnum.INTEGER) {
+      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute number flex flex-1">
+        <input [disabled]="disabled" matInput [required]="required" name="value" type="number" step="1" pattern="^-?[0-9]+$" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
+               placeholder="{{ 'value.integer-value' | translate }}{{ required ? '*' : ''}}"/>
+        @if (value.control.invalid && value.control.touched) {
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
                 [matTooltip]="value.hasError('required') ? ((requiredText ? requiredText : 'value.integer-value-required') | translate) :
                                ('value.invalid-integer-value' | translate)"
-                *ngIf="value.control.invalid && value.control.touched"
-                class="tb-error">
-        warning
-      </mat-icon>
-    </mat-form-field>
-    <mat-form-field *ngIf="valueType === valueTypeEnum.DOUBLE" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute number flex flex-1">
-      <input [disabled]="disabled" matInput [required]="required" name="value" type="number" step="any" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
-             placeholder="{{ 'value.double-value' | translate }}{{ required ? '*' : ''}}"/>
-      <mat-icon matSuffix
-                matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
-                [matTooltip]="(requiredText ? requiredText : 'value.double-value-required') | translate"
-                *ngIf="value.hasError('required') && value.control.touched"
-                class="tb-error">
-        warning
-      </mat-icon>
-    </mat-form-field>
-    <ng-container *ngIf="valueType === valueTypeEnum.BOOLEAN">
-      <mat-chip-listbox *ngIf="!shortBooleanField" class="tb-boolean-input center-stretch flex-1"
-                        [disabled]="disabled" name="value" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()">
-        <mat-chip-option [selectable]="!modelValue" [value]="true">{{ trueLabel }}</mat-chip-option>
-        <mat-chip-option [selectable]="modelValue" [value]="false">{{ falseLabel }}</mat-chip-option>
-      </mat-chip-listbox>
-      <mat-checkbox *ngIf="shortBooleanField" name="value" #value="ngModel" [disabled]="disabled" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()">
-        {{ modelValue ? trueLabel : falseLabel }}
-      </mat-checkbox>
-    </ng-container>
-    <div *ngIf="valueType === valueTypeEnum.JSON" class="flex flex-1 flex-row items-center justify-start gap-2">
-      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute flex flex-1">
-        <input [disabled]="disabled" matInput tb-json-to-string [required]="required" name="value" #value="ngModel"
-               [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()" placeholder="{{ 'value.json-value' | translate }}{{ required ? '*' : ''}}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
+            class="tb-error">
+            warning
+          </mat-icon>
+        }
+      </mat-form-field>
+    }
+    @if (valueType === valueTypeEnum.DOUBLE) {
+      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute number flex flex-1">
+        <input [disabled]="disabled" matInput [required]="required" name="value" type="number" step="any" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
+               placeholder="{{ 'value.double-value' | translate }}{{ required ? '*' : ''}}"/>
+        @if (value.hasError('required') && value.control.touched) {
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="(requiredText ? requiredText : 'value.double-value-required') | translate"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        }
+      </mat-form-field>
+    }
+    @if (valueType === valueTypeEnum.BOOLEAN) {
+      @if (!shortBooleanField) {
+        <mat-chip-listbox class="tb-boolean-input center-stretch flex-1"
+                          [disabled]="disabled" name="value" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()">
+          <mat-chip-option [selectable]="!modelValue" [value]="true">{{ trueLabel }}</mat-chip-option>
+          <mat-chip-option [selectable]="modelValue" [value]="false">{{ falseLabel }}</mat-chip-option>
+        </mat-chip-listbox>
+      }
+      @if (shortBooleanField) {
+        <mat-checkbox name="value" #value="ngModel" [disabled]="disabled" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()">
+          {{ modelValue ? trueLabel : falseLabel }}
+        </mat-checkbox>
+      }
+    }
+    @if (valueType === valueTypeEnum.JSON) {
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute flex flex-1">
+          <input [disabled]="disabled" matInput tb-json-to-string [required]="required" name="value" #value="ngModel"
+                 [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()" placeholder="{{ 'value.json-value' | translate }}{{ required ? '*' : ''}}"/>
+          @if (value.control.invalid && value.control.touched) {
+            <mat-icon matSuffix
+                      matTooltipPosition="above"
+                      matTooltipClass="tb-error-tooltip"
                   [matTooltip]="value.hasError('invalidJSON') ?
                                ('value.json-value-invalid' | translate) :
                                ((requiredText ? requiredText : 'value.json-value-required') | translate)"
-                  *ngIf="value.control.invalid && value.control.touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-      <button *ngIf="!hideJsonEdit" mat-icon-button class="tb-mat-32" (click)="openEditJSONDialog($event)">
-        <mat-icon class="tb-mat-20">open_in_new</mat-icon>
-      </button>
-    </div>
+              class="tb-error">
+              warning
+            </mat-icon>
+          }
+        </mat-form-field>
+        @if (!hideJsonEdit) {
+          <button mat-icon-button class="tb-mat-32" (click)="openEditJSONDialog($event)">
+            <mat-icon class="tb-mat-20">open_in_new</mat-icon>
+          </button>
+        }
+      </div>
+    }
   </section>
 </form>
diff --git a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html
index 26df6befba..40ddca3dce 100644
--- a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html
@@ -29,25 +29,37 @@
          (blur)="onBlur()"
          [required]="required"
          [matAutocomplete]="branchAutocomplete">
-  <button *ngIf="branchFormGroup.get('branch').value && !disabled"
-          type="button"
-          matSuffix mat-icon-button aria-label="Clear"
-          (click)="clear()">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
+  @if (branchFormGroup.get('branch').value && !disabled) {
+    <button
+      type="button"
+      matSuffix mat-icon-button aria-label="Clear"
+      (click)="clear()">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  }
   <mat-autocomplete
     class="tb-autocomplete"
     (closed)="!branchMatInput.focused ? onPanelClosed() : false"
     #branchAutocomplete="matAutocomplete"
     [displayWith]="displayBranchFn">
-    <mat-option *ngFor="let branch of filteredBranches | async" [value]="branch" class="branch-option">
-      <mat-icon class="tb-mat-18" *ngIf="selectionMode && branch.name === modelValue">check</mat-icon>
-      <span class="check-placeholder" *ngIf="selectionMode && branch.name !== modelValue"></span>
-      <span [innerHTML]="branch.name | highlight:searchText"></span>
-      <small *ngIf="branch.default"  class="default-branch">{{ 'version-control.default' | translate }}</small>
-    </mat-option>
+    @for (branch of filteredBranches | async; track branch) {
+      <mat-option [value]="branch" class="branch-option">
+        @if (selectionMode && branch.name === modelValue) {
+          <mat-icon class="tb-mat-18">check</mat-icon>
+        }
+        @if (selectionMode && branch.name !== modelValue) {
+          <span class="check-placeholder"></span>
+        }
+        <span [innerHTML]="branch.name | highlight:searchText"></span>
+        @if (branch.default) {
+          <small  class="default-branch">{{ 'version-control.default' | translate }}</small>
+        }
+      </mat-option>
+    }
   </mat-autocomplete>
-  <mat-error *ngIf="branchFormGroup.get('branch').hasError('required')">
-    {{ 'version-control.branch-required' | translate }}
-  </mat-error>
+  @if (branchFormGroup.get('branch').hasError('required')) {
+    <mat-error>
+      {{ 'version-control.branch-required' | translate }}
+    </mat-error>
+  }
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html b/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
index 8332d0a268..270284dc11 100644
--- a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
+++ b/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
@@ -23,7 +23,9 @@
          (focus)="toggleFocus()"
          (blur)="toggleFocus()"
          [placeholder]=placeholder>
-  <button type="button" *ngIf="searchText" mat-icon-button (click)="clear($event)">
-    <mat-icon class="close">close</mat-icon>
-  </button>
+  @if (searchText) {
+    <button type="button" mat-icon-button (click)="clear($event)">
+      <mat-icon class="close">close</mat-icon>
+    </button>
+  }
 </div>
diff --git a/ui-ngx/src/app/shared/components/widgets-bundle-select.component.html b/ui-ngx/src/app/shared/components/widgets-bundle-select.component.html
index 04355f2bc1..5a69f8ddc3 100644
--- a/ui-ngx/src/app/shared/components/widgets-bundle-select.component.html
+++ b/ui-ngx/src/app/shared/components/widgets-bundle-select.component.html
@@ -27,20 +27,29 @@
     <mat-select-trigger>
       <div class="tb-bundle-item">
         <span>{{widgetsBundle?.title}}</span>
-        <span translate class="tb-bundle-system" *ngIf="isSystem(widgetsBundle)">widgets-bundle.system</span>
+        @if (isSystem(widgetsBundle)) {
+          <span translate class="tb-bundle-system">widgets-bundle.system</span>
+        }
       </div>
     </mat-select-trigger>
-    <mat-option *ngIf="createNew; else empty" [value]="null" (click)="openWidgetsBundleDialog($event)">
-      <a translate>widgets-bundle.create-new</a>
-    </mat-option>
-    <ng-template #empty>
-      <mat-option [value]="null" *ngIf="!required"></mat-option>
-    </ng-template>
-    <mat-option *ngFor="let widgetsBundle of widgetsBundles$ | async" [value]="widgetsBundle">
-      <div class="tb-bundle-item">
-        <span>{{widgetsBundle.title}}</span>
-        <span translate class="tb-bundle-system" *ngIf="isSystem(widgetsBundle)">widgets-bundle.system</span>
-      </div>
-    </mat-option>
+    @if (createNew) {
+      <mat-option [value]="null" (click)="openWidgetsBundleDialog($event)">
+        <a translate>widgets-bundle.create-new</a>
+      </mat-option>
+    } @else {
+      @if (!required) {
+        <mat-option [value]="null"></mat-option>
+      }
+    }
+    @for (widgetsBundle of widgetsBundles$ | async; track widgetsBundle) {
+      <mat-option [value]="widgetsBundle">
+        <div class="tb-bundle-item">
+          <span>{{widgetsBundle.title}}</span>
+          @if (isSystem(widgetsBundle)) {
+            <span translate class="tb-bundle-system">widgets-bundle.system</span>
+          }
+        </div>
+      </mat-option>
+    }
   </mat-select>
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/import-export/export-resource-dialog.component.html b/ui-ngx/src/app/shared/import-export/export-resource-dialog.component.html
index ef27998db3..7bd900f1cf 100644
--- a/ui-ngx/src/app/shared/import-export/export-resource-dialog.component.html
+++ b/ui-ngx/src/app/shared/import-export/export-resource-dialog.component.html
@@ -24,8 +24,10 @@
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<mat-progress-bar color="warn" mode="indeterminate" *ngIf="(isLoading$ | async) && !ignoreLoading">
-</mat-progress-bar>
+@if ((isLoading$ | async) && !ignoreLoading) {
+  <mat-progress-bar color="warn" mode="indeterminate">
+  </mat-progress-bar>
+}
 <div mat-dialog-content>
   <fieldset [disabled]="(isLoading$ | async) && !ignoreLoading" class="tb-form-row no-border no-padding">
     <mat-slide-toggle [formControl]="includeResourcesFormControl" class="mat-slide">{{ prompt | translate }}</mat-slide-toggle>
diff --git a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
index eec9ee4e39..d2cd853e02 100644
--- a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
+++ b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
@@ -27,8 +27,10 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content>
     <mat-vertical-stepper [linear]="true" [selectedIndex]="selectedIndex" #importStepper>
       <mat-step [stepControl]="selectFileFormGroup">
@@ -47,11 +49,11 @@
         <div class="flex flex-row items-center justify-end gap-5">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
-                  (click)="cancel()">{{ 'action.cancel' | translate }}</button>
+          (click)="cancel()">{{ 'action.cancel' | translate }}</button>
           <button mat-raised-button
                   [disabled]="(isLoading$ | async) || selectFileFormGroup.invalid || !selectFileFormGroup.dirty"
                   color="primary"
-                  (click)="nextStep(2)">{{ 'action.continue' | translate }}</button>
+          (click)="nextStep(2)">{{ 'action.continue' | translate }}</button>
         </div>
       </mat-step>
       <mat-step [stepControl]="importParametersFormGroup">
@@ -61,9 +63,11 @@
             <mat-form-field class="mat-block">
               <mat-label translate>import.csv-delimiter</mat-label>
               <mat-select required formControlName="delim">
-                <mat-option *ngFor="let delimiter of delimiters" [value]="delimiter.key">
-                  {{ delimiter.value }}
-                </mat-option>
+                @for (delimiter of delimiters; track delimiter) {
+                  <mat-option [value]="delimiter.key">
+                    {{ delimiter.value }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
             <div class="flex flex-col gap-3">
@@ -79,15 +83,15 @@
         <div class="flex flex-row flex-wrap items-center justify-between">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
-                  (click)="previousStep()">{{ 'action.back' | translate }}</button>
+          (click)="previousStep()">{{ 'action.back' | translate }}</button>
           <div class="flex flex-row flex-wrap gap-5">
             <button mat-button
                     [disabled]="(isLoading$ | async)"
-                    (click)="cancel()">{{ 'action.cancel' | translate }}</button>
+            (click)="cancel()">{{ 'action.cancel' | translate }}</button>
             <button mat-raised-button
                     [disabled]="(isLoading$ | async)"
                     color="primary"
-                    (click)="nextStep(3)">{{ 'action.continue' | translate }}</button>
+            (click)="nextStep(3)">{{ 'action.continue' | translate }}</button>
           </div>
         </div>
       </mat-step>
@@ -99,15 +103,15 @@
         <div class="flex flex-row flex-wrap items-center justify-between">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
-                  (click)="previousStep()">{{ 'action.back' | translate }}</button>
+          (click)="previousStep()">{{ 'action.back' | translate }}</button>
           <div class="flex flex-row flex-wrap gap-5">
             <button mat-button
                     [disabled]="(isLoading$ | async)"
-                    (click)="cancel()">{{ 'action.cancel' | translate }}</button>
+            (click)="cancel()">{{ 'action.cancel' | translate }}</button>
             <button mat-raised-button
                     [disabled]="(isLoading$ | async) || columnTypesFormGroup.invalid || !columnTypesFormGroup.dirty"
                     color="primary"
-                    (click)="nextStep(4)">{{ 'action.continue' | translate }}</button>
+            (click)="nextStep(4)">{{ 'action.continue' | translate }}</button>
           </div>
         </div>
       </mat-step>
@@ -119,32 +123,39 @@
       <mat-step>
         <ng-template matStepLabel>{{ 'action.done' | translate }}</ng-template>
         <div class="flex flex-col">
-          <p class="mat-body-2" *ngIf="statistical?.created">
-            {{ translate.instant('import.message.create-entities', {count: statistical.created}) }}
-          </p>
-          <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="statistical?.errors">
-            {{ translate.instant('import.message.error-entities', {count: statistical.errors}) }}
-          </p>
-          <mat-expansion-panel class="advanced-logs" [expanded]="false"
-                               *ngIf="statistical?.errorsList?.length"
-                               (opened)="initEditor()">
-            <mat-expansion-panel-header [collapsedHeight]="'38px'" [expandedHeight]="'38px'">
-              <mat-panel-title>
-                <div class="tb-small" translate>import.details</div>
-              </mat-panel-title>
-            </mat-expansion-panel-header>
-            <mat-divider></mat-divider>
-            <div #failureDetailsEditor class="tb-failure-details"></div>
-          </mat-expansion-panel>
+          @if (statistical?.created) {
+            <p class="mat-body-2">
+              {{ translate.instant('import.message.create-entities', {count: statistical.created}) }}
+            </p>
+          }
+          @if (statistical?.updated) {
+            <p class="mat-body-2">
+              {{ translate.instant('import.message.update-entities', {count: statistical.updated}) }}
+            </p>
+          }
+          @if (statistical?.errors) {
+            <p class="mat-body-2" style="margin-bottom: 0.8em">
+              {{ translate.instant('import.message.error-entities', {count: statistical.errors}) }}
+            </p>
+          }
+          @if (statistical?.errorsList?.length) {
+            <mat-expansion-panel class="advanced-logs" [expanded]="false"
+                                 (opened)="initEditor()">
+              <mat-expansion-panel-header [collapsedHeight]="'38px'" [expandedHeight]="'38px'">
+                <mat-panel-title>
+                  <div class="tb-small" translate>import.details</div>
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <mat-divider></mat-divider>
+              <div #failureDetailsEditor class="tb-failure-details"></div>
+            </mat-expansion-panel>
+          }
         </div>
         <div class="flex flex-row items-center justify-end gap-5">
           <button mat-raised-button
                   [disabled]="(isLoading$ | async)"
                   color="primary"
-                  (click)="nextStep(6)">{{ 'action.ok' | translate }}</button>
+          (click)="nextStep(6)">{{ 'action.ok' | translate }}</button>
         </div>
       </mat-step>
     </mat-vertical-stepper>
diff --git a/ui-ngx/src/app/shared/import-export/import-dialog.component.html b/ui-ngx/src/app/shared/import-export/import-dialog.component.html
index af672e4281..ec6ed1ff6b 100644
--- a/ui-ngx/src/app/shared/import-export/import-dialog.component.html
+++ b/ui-ngx/src/app/shared/import-export/import-dialog.component.html
@@ -25,32 +25,40 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" mode="indeterminate">
+    </mat-progress-bar>
+  }
   <div mat-dialog-content>
     <div class="flex flex-1 flex-col">
-      <tb-toggle-select *ngIf="enableImportFromContent"
-                        class="flex-1"
-                        formControlName="importType">
-        <tb-toggle-option value="file">{{ importFileLabel | translate }}</tb-toggle-option>
-        <tb-toggle-option value="content">{{ importContentLabel | translate }}</tb-toggle-option>
-      </tb-toggle-select>
-      <tb-file-input *ngIf="importFormGroup.get('importType').value === 'file'"
-        [contentConvertFunction]="loadDataFromJsonContent"
-        [existingFileName]="currentFileName"
-        (fileNameChanged)="currentFileName = $event"
-        formControlName="fileContent"
-        required
-        label="{{importFileLabel | translate}}"
-        dropLabel="{{ 'import.drop-json-file-or' | translate }}"
-        accept=".json,application/json"
-        allowedExtensions="json">
-      </tb-file-input>
-      <tb-json-object-edit *ngIf="importFormGroup.get('importType').value === 'content'"
-        formControlName="jsonContent"
-        jsonRequired
-        label="{{ importContentLabel | translate }}">
-      </tb-json-object-edit>
+      @if (enableImportFromContent) {
+        <tb-toggle-select
+          class="flex-1"
+          formControlName="importType">
+          <tb-toggle-option value="file">{{ importFileLabel | translate }}</tb-toggle-option>
+          <tb-toggle-option value="content">{{ importContentLabel | translate }}</tb-toggle-option>
+        </tb-toggle-select>
+      }
+      @if (importFormGroup.get('importType').value === 'file') {
+        <tb-file-input
+          [contentConvertFunction]="loadDataFromJsonContent"
+          [existingFileName]="currentFileName"
+          (fileNameChanged)="currentFileName = $event"
+          formControlName="fileContent"
+          required
+          label="{{importFileLabel | translate}}"
+          dropLabel="{{ 'import.drop-json-file-or' | translate }}"
+          accept=".json,application/json"
+          allowedExtensions="json">
+        </tb-file-input>
+      }
+      @if (importFormGroup.get('importType').value === 'content') {
+        <tb-json-object-edit
+          formControlName="jsonContent"
+          jsonRequired
+          label="{{ importContentLabel | translate }}">
+        </tb-json-object-edit>
+      }
     </div>
   </div>
   <div mat-dialog-actions class="flex items-center justify-end">
diff --git a/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html b/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html
index 46be8d8c57..10fa39c547 100644
--- a/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html
+++ b/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html
@@ -32,25 +32,33 @@
     <mat-header-cell *matHeaderCellDef class="mat-column-type"> {{ 'import.column-type.column-type' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       <mat-select [(ngModel)]="column.type" (ngModelChange)="columnsUpdated()">
-        <mat-option *ngFor="let type of columnTypes" [value]="type.value" [disabled]="type.disabled">
-          {{ columnTypesTranslations.get(type.value) | translate }}
-        </mat-option>
-        <mat-optgroup label="{{ 'import.credentials' | translate }}" *ngIf="entityType === entityTypeDevice">
-          <mat-option *ngFor="let credential of columnDeviceCredentials" [value]="credential.value" [disabled]="credential.disabled">
-            {{ columnTypesTranslations.get(credential.value) | translate }}
+        @for (type of columnTypes; track type) {
+          <mat-option [value]="type.value" [disabled]="type.disabled">
+            {{ columnTypesTranslations.get(type.value) | translate }}
           </mat-option>
-        </mat-optgroup>
+        }
+        @if (entityType === entityTypeDevice) {
+          <mat-optgroup label="{{ 'import.credentials' | translate }}">
+            @for (credential of columnDeviceCredentials; track credential) {
+              <mat-option [value]="credential.value" [disabled]="credential.disabled">
+                {{ columnTypesTranslations.get(credential.value) | translate }}
+              </mat-option>
+            }
+          </mat-optgroup>
+        }
       </mat-select>
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="key">
     <mat-header-cell *matHeaderCellDef class="mat-column-key"> {{ 'import.column-key' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
-      <mat-form-field *ngIf="isColumnTypeDiffers(column.type)">
-        <input matInput [required]="isColumnTypeDiffers(column.type)"
-               [(ngModel)]="column.key" (ngModelChange)="columnsUpdated()"
-               placeholder="{{ 'import.column-value' | translate }}"/>
-      </mat-form-field>
+      @if (isColumnTypeDiffers(column.type)) {
+        <mat-form-field>
+          <input matInput [required]="isColumnTypeDiffers(column.type)"
+                 [(ngModel)]="column.key" (ngModelChange)="columnsUpdated()"
+                 placeholder="{{ 'import.column-value' | translate }}"/>
+        </mat-form-field>
+      }
     </mat-cell>
   </ng-container>
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>