Feature/migrate assistant and value component to control flow (#4905)

* Migrate to control flow

* Update changelog

CHANGELOG.md

@@ -14,6 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the style of the assistant
+- Migrated the `@ghostfolio/ui/assistant` component to control flow
+- Migrated the `@ghostfolio/ui/value` component to control flow
 - Migrated the `HtmlTemplateMiddleware` to use `@Injectable()`
 - Renamed `User` to `user` in the database schema
 - Improved the language localization for Catalan (`ca`)

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

@@ -40,23 +40,20 @@
       *ngIf="searchFormControl.value"
       class="overflow-auto py-2 result-container"
     >
-      <div
-        *ngIf="searchResults?.quickLinks?.length !== 0 || isLoading.quickLinks"
-        class="mb-2"
-      >
-        <div class="font-weight-bold px-3 text-muted title" i18n>
-          Quick Links
-        </div>
-        @for (
-          searchResultItem of searchResults?.quickLinks;
-          track searchResultItem
-        ) {
-          <gf-assistant-list-item
-            [item]="searchResultItem"
-            (clicked)="onCloseAssistant()"
-          />
-        }
-        <ng-container>
+      @if (searchResults?.quickLinks?.length !== 0 || isLoading.quickLinks) {
+        <div class="mb-2">
+          <div class="font-weight-bold px-3 text-muted title" i18n>
+            Quick Links
+          </div>
+          @for (
+            searchResultItem of searchResults?.quickLinks;
+            track searchResultItem
+          ) {
+            <gf-assistant-list-item
+              [item]="searchResultItem"
+              (clicked)="onCloseAssistant()"
+            />
+          }
           @if (isLoading.quickLinks) {
             <ngx-skeleton-loader
               animation="pulse"
@@ -67,8 +64,8 @@
               }"
             />
           }
-        </ng-container>
-      </div>
+        </div>
+      }
       <div>
         <div class="font-weight-bold px-3 text-muted title" i18n>Holdings</div>
         @for (
@@ -80,7 +77,7 @@
             (clicked)="onCloseAssistant()"
           />
         }
-        <ng-container *ngIf="searchResults?.holdings?.length === 0">
+        @if (searchResults?.holdings?.length === 0) {
           @if (isLoading.holdings) {
             <ngx-skeleton-loader
               animation="pulse"
@@ -93,7 +90,7 @@
           } @else {
             <div class="px-3 py-1 text-muted" i18n>No entries...</div>
           }
-        </ng-container>
+        }
       </div>
       <div *ngIf="hasPermissionToAccessAdminControl" class="mt-2">
         <div class="font-weight-bold px-3 text-muted title" i18n>
@@ -108,7 +105,7 @@
             (clicked)="onCloseAssistant()"
           />
         }
-        <ng-container *ngIf="searchResults?.assetProfiles?.length === 0">
+        @if (searchResults?.assetProfiles?.length === 0) {
           @if (isLoading.assetProfiles) {
             <ngx-skeleton-loader
               animation="pulse"
@@ -121,7 +118,7 @@
           } @else {
             <div class="px-3 py-1 text-muted" i18n>No entries...</div>
           }
-        </ng-container>
+        }
       </div>
     </div>
   </div>
@@ -149,12 +146,14 @@
               @for (account of accounts; track account.id) {
                 <mat-option [value]="account.id">
                   <div class="d-flex">
-                    <gf-entity-logo
-                      *ngIf="account.Platform?.url"
-                      class="mr-1"
-                      [tooltip]="account.Platform?.name"
-                      [url]="account.Platform?.url"
-                    /><span>{{ account.name }}</span>
+                    @if (account.Platform?.url) {
+                      <gf-entity-logo
+                        class="mr-1"
+                        [tooltip]="account.Platform?.name"
+                        [url]="account.Platform?.url"
+                      />
+                    }
+                    <span>{{ account.name }}</span>
                   </div>
                 </mat-option>
               }

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

@@ -1,6 +1,8 @@
-<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">
@@ -10,8 +12,12 @@
     >
       <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>
+          @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
@@ -43,12 +49,15 @@
           </div>
         }
         @if (unit) {
-          <small *ngIf="size === 'medium'" class="ml-1">
-            {{ unit }}
-          </small>
-          <div *ngIf="size !== 'medium'" class="ml-1">
-            {{ unit }}
-          </div>
+          @if (size === 'medium') {
+            <small class="ml-1">
+              {{ unit }}
+            </small>
+          } @else {
+            <div class="ml-1">
+              {{ unit }}
+            </div>
+          }
         }
       </ng-container>
       @if (isString) {
@@ -81,7 +90,9 @@
       <span class="h6"
         ><ng-container *ngTemplateOutlet="label"></ng-container
       ></span>
-      <span *ngIf="subLabel" class="text-muted"> {{ subLabel }}</span>
+      @if (subLabel) {
+        <span class="text-muted"> {{ subLabel }}</span>
+      }
     </div>
     <small *ngIf="size !== 'large'" class="d-block text-truncate">
       <ng-container *ngTemplateOutlet="label"></ng-container>