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
-        *ngIf="deviceType !== 'mobile' && !searchFormControl.value"
-        class="hot-key-hint mx-1 px-1"
-      >
-        /
-      </div>
+      @if (deviceType !== 'mobile' && !searchFormControl.value) {
+        <div class="hot-key-hint mx-1 px-1">/</div>
+      }
+      @if (searchFormControl.value) {
         <button
-        *ngIf="searchFormControl.value"
           class="h-100 no-min-width px-3 rounded-0"
           mat-button
           (click)="initialize()"
         >
           <ion-icon class="m-0" name="close-circle-outline" />
         </button>
+      } @else {
         <button
-        *ngIf="!searchFormControl.value"
           class="h-100 no-min-width px-3 rounded-0"
           mat-button
           (click)="onCloseAssistant()"
         >
           <ion-icon class="m-0" name="close-outline" />
         </button>
+      }
     </div>
     <div
       *ngIf="isLoading || searchFormControl.value"
@@ -51,8 +49,8 @@
           (clicked)="onCloseAssistant()"
         />
         <ng-container *ngIf="searchResults?.holdings?.length === 0">
+          @if (isLoading) {
             <ngx-skeleton-loader
-            *ngIf="isLoading"
               animation="pulse"
               class="mx-2"
               [theme]="{
@@ -60,7 +58,9 @@
                 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,8 +72,8 @@
           (clicked)="onCloseAssistant()"
         />
         <ng-container *ngIf="searchResults?.assetProfiles?.length === 0">
+          @if (isLoading) {
             <ngx-skeleton-loader
-            *ngIf="isLoading"
               animation="pulse"
               class="mx-2"
               [theme]="{
@@ -81,7 +81,9 @@
                 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>