Feature/migrate assistant and value component to control flow (part 2) (#4948)

* Migrate to control flow

* Update changelog

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changelog
 
+- Migrated the `@ghostfolio/ui/assistant` component to control flow
+- Migrated the `@ghostfolio/ui/value` component to control flow
 - Improved the language localization for Chinese (`zh`)
 - Improved the language localization for Portuguese (`pt`)
 

libs/ui/src/lib/assistant/assistant.html

@@ -92,34 +92,36 @@
           }
         }
       </div>
-      <div *ngIf="hasPermissionToAccessAdminControl" class="mt-2">
+      @if (hasPermissionToAccessAdminControl) {
-        <div class="font-weight-bold px-3 text-muted title" i18n>
+        <div class="mt-2">
-          Asset Profiles
+          <div class="font-weight-bold px-3 text-muted title" i18n>
-        </div>
+            Asset Profiles
-        @for (
+          </div>
-          searchResultItem of searchResults?.assetProfiles;
+          @for (
-          track searchResultItem
+            searchResultItem of searchResults?.assetProfiles;
-        ) {
+            track searchResultItem
-          <gf-assistant-list-item
+          ) {
-            [item]="searchResultItem"
+            <gf-assistant-list-item
-            (clicked)="onCloseAssistant()"
+              [item]="searchResultItem"
-          />
+              (clicked)="onCloseAssistant()"
-        }
-        @if (searchResults?.assetProfiles?.length === 0) {
-          @if (isLoading.assetProfiles) {
-            <ngx-skeleton-loader
-              animation="pulse"
-              class="mx-3"
-              [theme]="{
-                height: '1.5rem',
-                width: '100%'
-              }"
             />
-          } @else {
-            <div class="px-3 py-1 text-muted" i18n>No entries...</div>
           }
-        }
+          @if (searchResults?.assetProfiles?.length === 0) {
-      </div>
+            @if (isLoading.assetProfiles) {
+              <ngx-skeleton-loader
+                animation="pulse"
+                class="mx-3"
+                [theme]="{
+                  height: '1.5rem',
+                  width: '100%'
+                }"
+              />
+            } @else {
+              <div class="px-3 py-1 text-muted" i18n>No entries...</div>
+            }
+          }
+        </div>
+      }
     </div>
   </div>
   <form [formGroup]="filterForm">

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

@@ -11,14 +11,14 @@
       [ngClass]="position === 'end' ? 'justify-content-end' : ''"
     >
       <ng-container *ngIf="isNumber || value === null">
-        <ng-container *ngIf="colorizeSign && !useAbsoluteValue">
+        @if (colorizeSign && !useAbsoluteValue) {
           @if (+value > 0) {
             <div class="mr-1 text-success">+</div>
           }
           @if (+value < 0) {
             <div class="mr-1 text-danger">-</div>
           }
-        </ng-container>
+        }
         @if (isPercent) {
           <div
             class="mb-0 value"
@@ -85,8 +85,8 @@
     />
   }
 
-  <ng-container>
+  @if (size === 'large') {
-    <div *ngIf="size === 'large'" class="text-truncate">
+    <div class="text-truncate">
       <span class="h6"
         ><ng-container *ngTemplateOutlet="label"></ng-container
       ></span>
@@ -97,5 +97,5 @@
     <small *ngIf="size !== 'large'" class="d-block text-truncate">
       <ng-container *ngTemplateOutlet="label"></ng-container>
     </small>
-  </ng-container>
+  }
 </div>