Feature/migrate value component to control flow (#4592)

* Migrate to control flow

* Update changelog

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Renamed `User` to `user` in the `Subscription` database schema
 - Migrated the `@ghostfolio/ui/assistant` component to control flow
+- Migrated the `@ghostfolio/ui/value` component to control flow
 
 ### Fixed
 

libs/ui/src/lib/value/value.component.html

@@ -13,42 +13,45 @@
           <div *ngIf="+value > 0" class="mr-1 text-success">+</div>
           <div *ngIf="+value < 0" class="mr-1 text-danger">-</div>
         </ng-container>
-        <div
+        @if (isPercent) {
-          *ngIf="isPercent"
+          <div
-          class="mb-0 value"
+            class="mb-0 value"
-          [ngClass]="{
+            [ngClass]="{
-            'font-weight-bold h2': size === 'large',
+              'font-weight-bold h2': size === 'large',
-            h4: size === 'medium'
+              h4: size === 'medium'
-          }"
+            }"
-        >
+          >
-          @if (value === null) {
+            @if (value === null) {
-            <span class="text-monospace text-muted">*****</span>%
+              <span class="text-monospace text-muted">*****</span>%
-          } @else {
+            } @else {
-            {{ formattedValue }}%
+              {{ formattedValue }}%
-          }
+            }
-        </div>
+          </div>
-        <div
+        } @else {
-          *ngIf="!isPercent"
+          <div
-          class="mb-0 value"
+            class="mb-0 value"
-          [ngClass]="{
+            [ngClass]="{
-            'font-weight-bold h2': size === 'large',
+              'font-weight-bold h2': size === 'large',
-            h4: size === 'medium'
+              h4: size === 'medium'
-          }"
+            }"
-        >
+          >
-          @if (value === null) {
+            @if (value === null) {
-            <span class="text-monospace text-muted">*****</span>
+              <span class="text-monospace text-muted">*****</span>
-          } @else {
+            } @else {
-            {{ formattedValue }}
+              {{ formattedValue }}
-          }
+            }
-        </div>
+          </div>
-        <small *ngIf="unit && size === 'medium'" class="ml-1">
+        }
-          {{ unit }}
+        @if (unit) {
-        </small>
+          <small *ngIf="size === 'medium'" class="ml-1">
-        <div *ngIf="unit && size !== 'medium'" class="ml-1">
+            {{ unit }}
-          {{ unit }}
+          </small>
-        </div>
+          <div *ngIf="size !== 'medium'" class="ml-1">
+            {{ unit }}
+          </div>
+        }
       </ng-container>
-      <ng-container *ngIf="isString">
+      @if (isString) {
         <div
           class="mb-0 text-truncate value"
           [ngClass]="{
@@ -58,19 +61,20 @@
         >
           {{ formattedValue }}
         </div>
-      </ng-container>
+      }
     </div>
   </ng-container>
 
-  <ngx-skeleton-loader
+  @if (value === undefined) {
-    *ngIf="value === undefined"
+    <ngx-skeleton-loader
-    animation="pulse"
+      animation="pulse"
-    [theme]="{
+      [theme]="{
-      height:
+        height:
-        size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
+          size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
-      width: '5rem'
+        width: '5rem'
-    }"
+      }"
-  />
+    />
+  }
 
   <ng-container>
     <div *ngIf="size === 'large'" class="text-truncate">