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,8 +13,8 @@
           <div *ngIf="+value > 0" class="mr-1 text-success">+</div>
           <div *ngIf="+value < 0" class="mr-1 text-danger">-</div>
         </ng-container>
+        @if (isPercent) {
           <div
-          *ngIf="isPercent"
             class="mb-0 value"
             [ngClass]="{
               'font-weight-bold h2': size === 'large',
@@ -27,8 +27,8 @@
               {{ formattedValue }}%
             }
           </div>
+        } @else {
           <div
-          *ngIf="!isPercent"
             class="mb-0 value"
             [ngClass]="{
               'font-weight-bold h2': size === 'large',
@@ -41,14 +41,17 @@
               {{ formattedValue }}
             }
           </div>
-        <small *ngIf="unit && size === 'medium'" class="ml-1">
+        }
+        @if (unit) {
+          <small *ngIf="size === 'medium'" class="ml-1">
             {{ unit }}
           </small>
-        <div *ngIf="unit && size !== 'medium'" class="ml-1">
+          <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,12 +61,12 @@
         >
           {{ formattedValue }}
         </div>
-      </ng-container>
+      }
     </div>
   </ng-container>
 
+  @if (value === undefined) {
     <ngx-skeleton-loader
-    *ngIf="value === undefined"
       animation="pulse"
       [theme]="{
         height:
@@ -71,6 +74,7 @@
         width: '5rem'
       }"
     />
+  }
 
   <ng-container>
     <div *ngIf="size === 'large'" class="text-truncate">