Feature/migrate assistant component to control flow (#4591)

* Migrate to control flow

* Update changelog

CHANGELOG.md

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

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

@@ -15,28 +15,26 @@
         [formControl]="searchFormControl"
         [placeholder]="placeholder"
       />
-      <div
+      @if (deviceType !== 'mobile' && !searchFormControl.value) {
-        *ngIf="deviceType !== 'mobile' && !searchFormControl.value"
+        <div class="hot-key-hint mx-1 px-1">/</div>
-        class="hot-key-hint mx-1 px-1"
+      }
-      >
+      @if (searchFormControl.value) {
-        /
+        <button
-      </div>
+          class="h-100 no-min-width px-3 rounded-0"
-      <button
+          mat-button
-        *ngIf="searchFormControl.value"
+          (click)="initialize()"
-        class="h-100 no-min-width px-3 rounded-0"
+        >
-        mat-button
+          <ion-icon class="m-0" name="close-circle-outline" />
-        (click)="initialize()"
+        </button>
-      >
+      } @else {
-        <ion-icon class="m-0" name="close-circle-outline" />
+        <button
-      </button>
+          class="h-100 no-min-width px-3 rounded-0"
-      <button
+          mat-button
-        *ngIf="!searchFormControl.value"
+          (click)="onCloseAssistant()"
-        class="h-100 no-min-width px-3 rounded-0"
+        >
-        mat-button
+          <ion-icon class="m-0" name="close-outline" />
-        (click)="onCloseAssistant()"
+        </button>
-      >
+      }
-        <ion-icon class="m-0" name="close-outline" />
-      </button>
     </div>
     <div
       *ngIf="isLoading || searchFormControl.value"
@@ -51,16 +49,18 @@
           (clicked)="onCloseAssistant()"
         />
         <ng-container *ngIf="searchResults?.holdings?.length === 0">
-          <ngx-skeleton-loader
+          @if (isLoading) {
-            *ngIf="isLoading"
+            <ngx-skeleton-loader
-            animation="pulse"
+              animation="pulse"
-            class="mx-2"
+              class="mx-2"
-            [theme]="{
+              [theme]="{
-              height: '1.5rem',
+                height: '1.5rem',
-              width: '100%'
+                width: '100%'
-            }"
+              }"
-          />
+            />
-          <div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div>
+          } @else {
+            <div class="px-2 py-1" i18n>No entries...</div>
+          }
         </ng-container>
       </div>
       <div *ngIf="hasPermissionToAccessAdminControl" class="mt-3">
@@ -72,16 +72,18 @@
           (clicked)="onCloseAssistant()"
         />
         <ng-container *ngIf="searchResults?.assetProfiles?.length === 0">
-          <ngx-skeleton-loader
+          @if (isLoading) {
-            *ngIf="isLoading"
+            <ngx-skeleton-loader
-            animation="pulse"
+              animation="pulse"
-            class="mx-2"
+              class="mx-2"
-            [theme]="{
+              [theme]="{
-              height: '1.5rem',
+                height: '1.5rem',
-              width: '100%'
+                width: '100%'
-            }"
+              }"
-          />
+            />
-          <div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div>
+          } @else {
+            <div class="px-2 py-1" i18n>No entries...</div>
+          }
         </ng-container>
       </div>
     </div>