From 6aad3172c4f3b28988e4c701be1b88e426c86a95 Mon Sep 17 00:00:00 2001
From: Shaunak <shaundj20@gmail.com>
Date: Sat, 15 Feb 2025 15:44:10 +0530
Subject: [PATCH] migrate to angular fow syntax

---
 ...ghostfolio-premium-api-dialog.component.ts |   2 -
 .../asset-profile-icon.component.ts           |   4 +-
 .../rule-settings-dialog.component.ts         |   9 +-
 .../alert-dialog/alert-dialog.component.ts    |   4 +-
 .../confirmation-dialog.component.ts          |   4 +-
 .../prompt-dialog/prompt-dialog.component.ts  |   2 -
 .../product-page.component.ts                 |   4 +-
 .../src/lib/assistant/assistant.component.ts  |   5 +-
 libs/ui/src/lib/assistant/assistant.html      | 305 +++++++++---------
 .../benchmark-detail-dialog.component.ts      |   5 +-
 .../data-provider-credits.component.html      |  13 +-
 .../data-provider-credits.component.ts        |   4 +-
 ...cal-market-data-editor-dialog.component.ts |   5 +-
 .../tags-selector/tags-selector.component.ts  |   5 +-
 .../trend-indicator.component.ts              |   4 +-
 libs/ui/src/lib/value/value.component.html    | 145 +++++----
 16 files changed, 270 insertions(+), 250 deletions(-)

diff --git a/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts b/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts
index 8c2907064..e42e6259e 100644
--- a/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts
+++ b/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts
@@ -3,7 +3,6 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { PROPERTY_API_KEY_GHOSTFOLIO } from '@ghostfolio/common/config';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
-import { CommonModule } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import {
@@ -18,7 +17,6 @@ import { GhostfolioPremiumApiDialogParams } from './interfaces/interfaces';
 
 @Component({
   imports: [
-    CommonModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
     GfPremiumIndicatorComponent,
diff --git a/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.ts b/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.ts
index 5db862969..7bce92a2d 100644
--- a/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.ts
+++ b/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.ts
@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -10,7 +10,7 @@ import { DataSource } from '@prisma/client';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule],
+  imports: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-asset-profile-icon',
   styleUrls: ['./asset-profile-icon.component.scss'],
diff --git a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
index 7ee9c66cf..b57bcb0fd 100644
--- a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
+++ b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
@@ -1,6 +1,5 @@
 import { XRayRulesSettings } from '@ghostfolio/common/interfaces';
 
-import { CommonModule } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -14,13 +13,7 @@ import { MatSliderModule } from '@angular/material/slider';
 import { IRuleSettingsDialogParams } from './interfaces/interfaces';
 
 @Component({
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatButtonModule,
-    MatDialogModule,
-    MatSliderModule
-  ],
+  imports: [FormsModule, MatButtonModule, MatDialogModule, MatSliderModule],
   selector: 'gf-rule-settings-dialog',
   styleUrls: ['./rule-settings-dialog.scss'],
   templateUrl: './rule-settings-dialog.html'
diff --git a/apps/client/src/app/core/notification/alert-dialog/alert-dialog.component.ts b/apps/client/src/app/core/notification/alert-dialog/alert-dialog.component.ts
index 8aefe84cf..d1368f8a2 100644
--- a/apps/client/src/app/core/notification/alert-dialog/alert-dialog.component.ts
+++ b/apps/client/src/app/core/notification/alert-dialog/alert-dialog.component.ts
@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
@@ -6,7 +6,7 @@ import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { IAlertDialogParams } from './interfaces/interfaces';
 
 @Component({
-  imports: [CommonModule, MatButtonModule, MatDialogModule],
+  imports: [MatButtonModule, MatDialogModule],
   selector: 'gf-alert-dialog',
   styleUrls: ['./alert-dialog.scss'],
   templateUrl: './alert-dialog.html'
diff --git a/apps/client/src/app/core/notification/confirmation-dialog/confirmation-dialog.component.ts b/apps/client/src/app/core/notification/confirmation-dialog/confirmation-dialog.component.ts
index 9aced99cc..692ee7f62 100644
--- a/apps/client/src/app/core/notification/confirmation-dialog/confirmation-dialog.component.ts
+++ b/apps/client/src/app/core/notification/confirmation-dialog/confirmation-dialog.component.ts
@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import { Component, HostListener } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
@@ -7,7 +7,7 @@ import { ConfirmationDialogType } from './confirmation-dialog.type';
 import { IConfirmDialogParams } from './interfaces/interfaces';
 
 @Component({
-  imports: [CommonModule, MatButtonModule, MatDialogModule],
+  imports: [MatButtonModule, MatDialogModule],
   selector: 'gf-confirmation-dialog',
   styleUrls: ['./confirmation-dialog.scss'],
   templateUrl: './confirmation-dialog.html'
diff --git a/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.component.ts b/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.component.ts
index 4ec634da9..6c8af4197 100644
--- a/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.component.ts
+++ b/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -8,7 +7,6 @@ import { MatInputModule } from '@angular/material/input';
 
 @Component({
   imports: [
-    CommonModule,
     FormsModule,
     MatButtonModule,
     MatDialogModule,
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts
index 3a0ec4ffb..fe10fe7dc 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts
@@ -3,14 +3,14 @@ import { Product } from '@ghostfolio/common/interfaces';
 import { personalFinanceTools } from '@ghostfolio/common/personal-finance-tools';
 import { translate } from '@ghostfolio/ui/i18n';
 
-import { CommonModule } from '@angular/common';
+
 import { Component, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 
 @Component({
   host: { class: 'page' },
-  imports: [CommonModule, MatButtonModule, RouterModule],
+  imports: [MatButtonModule, RouterModule],
   selector: 'gf-product-page',
   styleUrls: ['./product-page.scss'],
   templateUrl: './product-page.html'
diff --git a/libs/ui/src/lib/assistant/assistant.component.ts b/libs/ui/src/lib/assistant/assistant.component.ts
index d8c3dcc2e..863e6b659 100644
--- a/libs/ui/src/lib/assistant/assistant.component.ts
+++ b/libs/ui/src/lib/assistant/assistant.component.ts
@@ -8,7 +8,7 @@ import { DateRange } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
 
 import { FocusKeyManager } from '@angular/cdk/a11y';
-import { CommonModule } from '@angular/common';
+
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -59,7 +59,6 @@ import {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
     FormsModule,
     GfAssetProfileIconComponent,
     GfAssistantListItemComponent,
@@ -70,7 +69,7 @@ import {
     NgxSkeletonLoaderModule,
     ReactiveFormsModule,
     RouterModule
-  ],
+],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-assistant',
   styleUrls: ['./assistant.scss'],
diff --git a/libs/ui/src/lib/assistant/assistant.html b/libs/ui/src/lib/assistant/assistant.html
index 33b4db3ff..18a2432f4 100644
--- a/libs/ui/src/lib/assistant/assistant.html
+++ b/libs/ui/src/lib/assistant/assistant.html
@@ -2,7 +2,7 @@
   <div
     [style.width]="deviceType === 'mobile' ? '85vw' : '30rem'"
     (keydown.tab)="$event.stopPropagation()"
-  >
+    >
     <div class="align-items-center d-flex search-container">
       <ion-icon class="ml-2 mr-0" name="search-outline" />
       <input
@@ -14,77 +14,91 @@
         type="text"
         [formControl]="searchFormControl"
         [placeholder]="placeholder"
-      />
-      <div
-        *ngIf="deviceType !== 'mobile' && !searchFormControl.value"
-        class="hot-key-hint mx-1 px-1"
-      >
-        /
-      </div>
-      <button
-        *ngIf="searchFormControl.value"
-        class="h-100 no-min-width px-3 rounded-0"
-        mat-button
-        (click)="initialize()"
-      >
-        <ion-icon class="m-0" name="close-circle-outline" />
-      </button>
-      <button
-        *ngIf="!searchFormControl.value"
-        class="h-100 no-min-width px-3 rounded-0"
-        mat-button
-        (click)="onCloseAssistant()"
-      >
-        <ion-icon class="m-0" name="close-outline" />
-      </button>
-    </div>
-    <div
-      *ngIf="isLoading || searchFormControl.value"
-      class="overflow-auto py-3 result-container"
-    >
-      <div>
-        <div class="h6 mb-1 px-2" i18n>Holdings</div>
-        <gf-assistant-list-item
-          *ngFor="let searchResultItem of searchResults?.holdings"
-          mode="holding"
-          [item]="searchResultItem"
-          (clicked)="onCloseAssistant()"
         />
-        <ng-container *ngIf="searchResults?.holdings?.length === 0">
-          <ngx-skeleton-loader
-            *ngIf="isLoading"
-            animation="pulse"
-            class="mx-2"
+      @if (deviceType !== 'mobile' && !searchFormControl.value) {
+        <div
+          class="hot-key-hint mx-1 px-1"
+          >
+          /
+        </div>
+      }
+      @if (searchFormControl.value) {
+        <button
+          class="h-100 no-min-width px-3 rounded-0"
+          mat-button
+          (click)="initialize()"
+          >
+          <ion-icon class="m-0" name="close-circle-outline" />
+        </button>
+      }
+      @if (!searchFormControl.value) {
+        <button
+          class="h-100 no-min-width px-3 rounded-0"
+          mat-button
+          (click)="onCloseAssistant()"
+          >
+          <ion-icon class="m-0" name="close-outline" />
+        </button>
+      }
+    </div>
+    @if (isLoading || searchFormControl.value) {
+      <div
+        class="overflow-auto py-3 result-container"
+        >
+        <div>
+          <div class="h6 mb-1 px-2" i18n>Holdings</div>
+          @for (searchResultItem of searchResults?.holdings; track searchResultItem) {
+            <gf-assistant-list-item
+              mode="holding"
+              [item]="searchResultItem"
+              (clicked)="onCloseAssistant()"
+              />
+          }
+          @if (searchResults?.holdings?.length === 0) {
+            @if (isLoading) {
+              <ngx-skeleton-loader
+                animation="pulse"
+                class="mx-2"
             [theme]="{
               height: '1.5rem',
               width: '100%'
             }"
-          />
-          <div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div>
-        </ng-container>
-      </div>
-      <div *ngIf="hasPermissionToAccessAdminControl" class="mt-3">
-        <div class="h6 mb-1 px-2" i18n>Asset Profiles</div>
-        <gf-assistant-list-item
-          *ngFor="let searchResultItem of searchResults?.assetProfiles"
-          mode="assetProfile"
-          [item]="searchResultItem"
-          (clicked)="onCloseAssistant()"
-        />
-        <ng-container *ngIf="searchResults?.assetProfiles?.length === 0">
-          <ngx-skeleton-loader
-            *ngIf="isLoading"
-            animation="pulse"
-            class="mx-2"
+                />
+            }
+            @if (!isLoading) {
+              <div class="px-2 py-1" i18n>No entries...</div>
+            }
+          }
+        </div>
+        @if (hasPermissionToAccessAdminControl) {
+          <div class="mt-3">
+            <div class="h6 mb-1 px-2" i18n>Asset Profiles</div>
+            @for (searchResultItem of searchResults?.assetProfiles; track searchResultItem) {
+              <gf-assistant-list-item
+                mode="assetProfile"
+                [item]="searchResultItem"
+                (clicked)="onCloseAssistant()"
+                />
+            }
+            @if (searchResults?.assetProfiles?.length === 0) {
+              @if (isLoading) {
+                <ngx-skeleton-loader
+                  animation="pulse"
+                  class="mx-2"
             [theme]="{
               height: '1.5rem',
               width: '100%'
             }"
-          />
-          <div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div>
-        </ng-container>
+                  />
+              }
+              @if (!isLoading) {
+                <div class="px-2 py-1" i18n>No entries...</div>
+              }
+            }
+          </div>
+        }
       </div>
-    </div>
+    }
   </div>
   <form [formGroup]="filterForm">
     @if (!searchFormControl.value) {
@@ -94,7 +108,7 @@
           <mat-select
             [formControl]="dateRangeFormControl"
             (selectionChange)="onChangeDateRange($event.value)"
-          >
+            >
             @for (range of dateRangeOptions; track range) {
               <mat-option [value]="range.value">{{ range.label }}</mat-option>
             }
@@ -110,93 +124,94 @@
               @for (account of accounts; track account.id) {
                 <mat-option [value]="account.id">
                   <div class="d-flex">
-                    <gf-asset-profile-icon
-                      *ngIf="account.Platform?.url"
-                      class="mr-1"
-                      [tooltip]="account.Platform?.name"
-                      [url]="account.Platform?.url"
-                    /><span>{{ account.name }}</span>
-                  </div>
-                </mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="mb-3">
-          <mat-form-field appearance="outline" class="w-100 without-hint">
-            <mat-label i18n>Holding</mat-label>
-            <mat-select
-              formControlName="holding"
-              [compareWith]="holdingComparisonFunction"
-            >
-              <mat-select-trigger>{{
-                filterForm.get('holding')?.value?.name
-              }}</mat-select-trigger>
-              <mat-option [value]="null" />
-              @for (holding of holdings; track holding.name) {
-                <mat-option [value]="holding">
-                  <div class="line-height-1 text-truncate">
-                    <span
-                      ><b>{{ holding.name }}</b></span
-                    >
-                    <br />
-                    <small class="text-muted"
-                      >{{ holding.symbol | gfSymbol }} ·
-                      {{ holding.currency }}</small
-                    >
-                  </div>
-                </mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="mb-3">
-          <mat-form-field appearance="outline" class="w-100 without-hint">
-            <mat-label i18n>Tag</mat-label>
-            <mat-select formControlName="tag">
-              <mat-option [value]="null" />
-              @for (tag of tags; track tag.id) {
-                <mat-option [value]="tag.id">{{ tag.label }}</mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="mb-3">
-          <mat-form-field appearance="outline" class="w-100 without-hint">
-            <mat-label i18n>Asset Class</mat-label>
-            <mat-select formControlName="assetClass">
-              <mat-option [value]="null" />
-              @for (assetClass of assetClasses; track assetClass.id) {
-                <mat-option [value]="assetClass.id">{{
-                  assetClass.label
-                }}</mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="d-flex w-100">
-          <button
-            i18n
-            mat-button
+                    @if (account.Platform?.url) {
+                      <gf-asset-profile-icon
+                        class="mr-1"
+                        [tooltip]="account.Platform?.name"
+                        [url]="account.Platform?.url"
+                        />
+                      }<span>{{ account.name }}</span>
+                    </div>
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          </div>
+          <div class="mb-3">
+            <mat-form-field appearance="outline" class="w-100 without-hint">
+              <mat-label i18n>Holding</mat-label>
+              <mat-select
+                formControlName="holding"
+                [compareWith]="holdingComparisonFunction"
+                >
+                <mat-select-trigger>{{
+                  filterForm.get('holding')?.value?.name
+                }}</mat-select-trigger>
+                <mat-option [value]="null" />
+                @for (holding of holdings; track holding.name) {
+                  <mat-option [value]="holding">
+                    <div class="line-height-1 text-truncate">
+                      <span
+                        ><b>{{ holding.name }}</b></span
+                        >
+                        <br />
+                        <small class="text-muted"
+                          >{{ holding.symbol | gfSymbol }} ·
+                          {{ holding.currency }}</small
+                          >
+                        </div>
+                      </mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              </div>
+              <div class="mb-3">
+                <mat-form-field appearance="outline" class="w-100 without-hint">
+                  <mat-label i18n>Tag</mat-label>
+                  <mat-select formControlName="tag">
+                    <mat-option [value]="null" />
+                    @for (tag of tags; track tag.id) {
+                      <mat-option [value]="tag.id">{{ tag.label }}</mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              </div>
+              <div class="mb-3">
+                <mat-form-field appearance="outline" class="w-100 without-hint">
+                  <mat-label i18n>Asset Class</mat-label>
+                  <mat-select formControlName="assetClass">
+                    <mat-option [value]="null" />
+                    @for (assetClass of assetClasses; track assetClass.id) {
+                      <mat-option [value]="assetClass.id">{{
+                        assetClass.label
+                      }}</mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              </div>
+              <div class="d-flex w-100">
+                <button
+                  i18n
+                  mat-button
             [disabled]="
               !hasFilter(filterForm.value) || !hasPermissionToChangeFilters
             "
-            (click)="onResetFilters()"
-          >
+                  (click)="onResetFilters()"
+                  >
             Reset Filters
           </button>
-          <span class="gf-spacer"></span>
-          <button
-            color="primary"
-            i18n
-            mat-flat-button
-            [disabled]="!filterForm.dirty || !hasPermissionToChangeFilters"
-            (click)="onApplyFilters()"
-          >
+                <span class="gf-spacer"></span>
+                <button
+                  color="primary"
+                  i18n
+                  mat-flat-button
+                  [disabled]="!filterForm.dirty || !hasPermissionToChangeFilters"
+                  (click)="onApplyFilters()"
+                  >
             Apply Filters
           </button>
-        </div>
+              </div>
+            </div>
+          }
+        </form>
       </div>
-    }
-  </form>
-</div>
diff --git a/libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts b/libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts
index 38c6252a8..4c2abdecb 100644
--- a/libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts
+++ b/libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts
@@ -8,7 +8,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 
-import { CommonModule } from '@angular/common';
+
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -33,12 +33,11 @@ import { BenchmarkDetailDialogParams } from './interfaces/interfaces';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'd-flex flex-column h-100' },
   imports: [
-    CommonModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
     GfLineChartComponent,
     MatDialogModule
-  ],
+],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-benchmark-detail-dialog',
   styleUrls: ['./benchmark-detail-dialog.component.scss'],
diff --git a/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html b/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html
index fb9f2c13b..911294e86 100644
--- a/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html
+++ b/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html
@@ -1,9 +1,10 @@
 <small class="text-muted">
-  <ng-container i18n>Market data provided by</ng-container>&nbsp;<ng-container
-    *ngFor="let dataProviderInfo of dataProviderInfos; let last = last"
-    ><a target="_blank" [href]="dataProviderInfo.url">{{
-      dataProviderInfo.name
+  <ng-container i18n>Market data provided by</ng-container>&nbsp;@for (dataProviderInfo of dataProviderInfos; track dataProviderInfo; let last = $last) {
+  <a target="_blank" [href]="dataProviderInfo.url">{{
+    dataProviderInfo.name
     }}</a
-    ><ng-container *ngIf="!last">, </ng-container></ng-container
-  >.
+    >@if (!last) {
+    ,
+  }
+  }.
 </small>
diff --git a/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.ts b/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.ts
index 9be034e64..86a3d87b5 100644
--- a/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.ts
+++ b/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.ts
@@ -1,6 +1,6 @@
 import { DataProviderInfo } from '@ghostfolio/common/interfaces';
 
-import { CommonModule } from '@angular/common';
+
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -10,7 +10,7 @@ import {
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule],
+  imports: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-data-provider-credits',
   styleUrls: ['./data-provider-credits.component.scss'],
diff --git a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts
index 710cb4020..24841179f 100644
--- a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts
+++ b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts
@@ -1,7 +1,7 @@
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 
-import { CommonModule } from '@angular/common';
+
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -29,7 +29,6 @@ import { HistoricalMarketDataEditorDialogParams } from './interfaces/interfaces'
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'h-100' },
   imports: [
-    CommonModule,
     FormsModule,
     MatButtonModule,
     MatDatepickerModule,
@@ -37,7 +36,7 @@ import { HistoricalMarketDataEditorDialogParams } from './interfaces/interfaces'
     MatFormFieldModule,
     MatInputModule,
     ReactiveFormsModule
-  ],
+],
   selector: 'gf-historical-market-data-editor-dialog',
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   styleUrls: ['./historical-market-data-editor-dialog.scss'],
diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.ts b/libs/ui/src/lib/tags-selector/tags-selector.component.ts
index 02b3a0a95..9dc768e74 100644
--- a/libs/ui/src/lib/tags-selector/tags-selector.component.ts
+++ b/libs/ui/src/lib/tags-selector/tags-selector.component.ts
@@ -1,5 +1,5 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { CommonModule } from '@angular/common';
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -28,14 +28,13 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
     FormsModule,
     MatAutocompleteModule,
     MatChipsModule,
     MatFormFieldModule,
     MatInputModule,
     ReactiveFormsModule
-  ],
+],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-tags-selector',
   styleUrls: ['./tags-selector.component.scss'],
diff --git a/libs/ui/src/lib/trend-indicator/trend-indicator.component.ts b/libs/ui/src/lib/trend-indicator/trend-indicator.component.ts
index e44c41aa9..5ec32901e 100644
--- a/libs/ui/src/lib/trend-indicator/trend-indicator.component.ts
+++ b/libs/ui/src/lib/trend-indicator/trend-indicator.component.ts
@@ -1,6 +1,6 @@
 import { DateRange, MarketState } from '@ghostfolio/common/types';
 
-import { CommonModule } from '@angular/common';
+
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -11,7 +11,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, NgxSkeletonLoaderModule],
+  imports: [NgxSkeletonLoaderModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-trend-indicator',
   styleUrls: ['./trend-indicator.component.scss'],
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index a691c54e8..10a81c345 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -1,54 +1,66 @@
-<div *ngIf="icon" class="align-self-center mr-3">
-  <ion-icon class="h3 m-0" [name]="icon" />
-</div>
+@if (icon) {
+  <div class="align-self-center mr-3">
+    <ion-icon class="h3 m-0" [name]="icon" />
+  </div>
+}
 <div class="d-flex flex-column w-100">
   <ng-template #label><ng-content></ng-content></ng-template>
-  <ng-container *ngIf="value || value === 0 || value === null">
+  @if (value || value === 0 || value === null) {
     <div
       class="align-items-center d-flex"
       [ngClass]="position === 'end' ? 'justify-content-end' : ''"
     >
-      <ng-container *ngIf="isNumber || value === null">
-        <ng-container *ngIf="colorizeSign && !useAbsoluteValue">
-          <div *ngIf="value > 0" class="mr-1 text-success">+</div>
-          <div *ngIf="value < 0" class="mr-1 text-danger">-</div>
-        </ng-container>
-        <div
-          *ngIf="isPercent"
-          class="mb-0 value"
-          [ngClass]="{
-            'font-weight-bold h2': size === 'large',
-            h4: size === 'medium'
-          }"
-        >
-          @if (value === null) {
-            <span class="text-monospace text-muted">*****</span>%
-          } @else {
-            {{ formattedValue }}%
+      @if (isNumber || value === null) {
+        @if (colorizeSign && !useAbsoluteValue) {
+          @if (+value > 0) {
+            <div class="mr-1 text-success">+</div>
           }
-        </div>
-        <div
-          *ngIf="!isPercent"
-          class="mb-0 value"
-          [ngClass]="{
-            'font-weight-bold h2': size === 'large',
-            h4: size === 'medium'
-          }"
-        >
-          @if (value === null) {
-            <span class="text-monospace text-muted">*****</span>
-          } @else {
-            {{ formattedValue }}
+          @if (+value < 0) {
+            <div class="mr-1 text-danger">-</div>
           }
-        </div>
-        <small *ngIf="unit && size === 'medium'" class="ml-1">
-          {{ unit }}
-        </small>
-        <div *ngIf="unit && size !== 'medium'" class="ml-1">
-          {{ unit }}
-        </div>
-      </ng-container>
-      <ng-container *ngIf="isString">
+        }
+        @if (isPercent) {
+          <div
+            class="mb-0 value"
+            [ngClass]="{
+              'font-weight-bold h2': size === 'large',
+              h4: size === 'medium'
+            }"
+          >
+            @if (value === null) {
+              <span class="text-monospace text-muted">*****</span>%
+            } @else {
+              {{ formattedValue }}%
+            }
+          </div>
+        }
+        @if (!isPercent) {
+          <div
+            class="mb-0 value"
+            [ngClass]="{
+              'font-weight-bold h2': size === 'large',
+              h4: size === 'medium'
+            }"
+          >
+            @if (value === null) {
+              <span class="text-monospace text-muted">*****</span>
+            } @else {
+              {{ formattedValue }}
+            }
+          </div>
+        }
+        @if (unit && size === 'medium') {
+          <small class="ml-1">
+            {{ unit }}
+          </small>
+        }
+        @if (unit && size !== 'medium') {
+          <div class="ml-1">
+            {{ unit }}
+          </div>
+        }
+      }
+      @if (isString) {
         <div
           class="mb-0 text-truncate value"
           [ngClass]="{
@@ -58,29 +70,36 @@
         >
           {{ formattedValue }}
         </div>
-      </ng-container>
+      }
     </div>
-  </ng-container>
+  }
 
-  <ngx-skeleton-loader
-    *ngIf="value === undefined"
-    animation="pulse"
-    [theme]="{
-      height:
-        size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
-      width: '5rem'
-    }"
-  />
+  @if (value === undefined) {
+    <ngx-skeleton-loader
+      animation="pulse"
+      [theme]="{
+        height:
+          size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
+        width: '5rem'
+      }"
+    />
+  }
 
   <ng-container>
-    <div *ngIf="size === 'large'" class="text-truncate">
-      <span class="h6"
-        ><ng-container *ngTemplateOutlet="label"></ng-container
-      ></span>
-      <span *ngIf="subLabel" class="text-muted"> {{ subLabel }}</span>
-    </div>
-    <small *ngIf="size !== 'large'" class="d-block text-truncate">
-      <ng-container *ngTemplateOutlet="label"></ng-container>
-    </small>
+    @if (size === 'large') {
+      <div class="text-truncate">
+        <span class="h6"
+          ><ng-container *ngTemplateOutlet="label"></ng-container
+        ></span>
+        @if (subLabel) {
+          <span class="text-muted"> {{ subLabel }}</span>
+        }
+      </div>
+    }
+    @if (size !== 'large') {
+      <small class="d-block text-truncate">
+        <ng-container *ngTemplateOutlet="label"></ng-container>
+      </small>
+    }
   </ng-container>
 </div>