From a7319844fd5b91d17930b4d5c2d9557fb4dd9759 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 15 Jun 2025 22:05:32 +0200
Subject: [PATCH] Feature/migrate assistant and value component to control flow
 (part 2) (#4948)

* Migrate to control flow

* Update changelog
---
 CHANGELOG.md                               |  2 +
 libs/ui/src/lib/assistant/assistant.html   | 54 +++++++++++-----------
 libs/ui/src/lib/value/value.component.html | 10 ++--
 3 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 594100c63..5909cb3a1 100644
--- a/CHANGELOG.md
+++ b/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`)
 
diff --git a/libs/ui/src/lib/assistant/assistant.html b/libs/ui/src/lib/assistant/assistant.html
index 938f69851..55298f2ec 100644
--- a/libs/ui/src/lib/assistant/assistant.html
+++ b/libs/ui/src/lib/assistant/assistant.html
@@ -92,34 +92,36 @@
           }
         }
       </div>
-      <div *ngIf="hasPermissionToAccessAdminControl" class="mt-2">
-        <div class="font-weight-bold px-3 text-muted title" i18n>
-          Asset Profiles
-        </div>
-        @for (
-          searchResultItem of searchResults?.assetProfiles;
-          track searchResultItem
-        ) {
-          <gf-assistant-list-item
-            [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%'
-              }"
+      @if (hasPermissionToAccessAdminControl) {
+        <div class="mt-2">
+          <div class="font-weight-bold px-3 text-muted title" i18n>
+            Asset Profiles
+          </div>
+          @for (
+            searchResultItem of searchResults?.assetProfiles;
+            track searchResultItem
+          ) {
+            <gf-assistant-list-item
+              [item]="searchResultItem"
+              (clicked)="onCloseAssistant()"
             />
-          } @else {
-            <div class="px-3 py-1 text-muted" i18n>No entries...</div>
           }
-        }
-      </div>
+          @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>
+            }
+          }
+        </div>
+      }
     </div>
   </div>
   <form [formGroup]="filterForm">
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index 62e4efb6f..62b60c1f8 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/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>
-    <div *ngIf="size === 'large'" class="text-truncate">
+  @if (size === 'large') {
+    <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>