Migrate to control flow (#2991)

* Migrate to control flow

libs/ui/src/lib/account-balances/account-balances.component.html

@@ -34,8 +34,8 @@
   <ng-container matColumnDef="actions" stickyEnd>
     <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
     <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      @if (showActions) {
         <button
-        *ngIf="showActions"
           class="mx-1 no-min-width px-2"
           mat-button
           [matMenuTriggerFor]="accountBalanceMenu"
@@ -43,6 +43,7 @@
         >
           <ion-icon name="ellipsis-horizontal" />
         </button>
+      }
       <mat-menu #accountBalanceMenu="matMenu" xPosition="before">
         <button mat-menu-item (click)="onDeleteAccountBalance(element.id)">
           <span class="align-items-center d-flex">

libs/ui/src/lib/activities-filter/activities-filter.component.html

@@ -3,8 +3,8 @@
     <ion-icon name="search-outline" />
   </button>
   <mat-chip-grid #chipList aria-label="Search keywords">
+    @for (filter of selectedFilters; track filter) {
       <mat-chip-row
-      *ngFor="let filter of selectedFilters"
         class="mx-1 my-0 px-2 py-0"
         matChipRemove
         [removable]="true"
@@ -15,6 +15,7 @@
           <ion-icon name="close-outline" />
         </button>
       </mat-chip-row>
+    }
     <input
       #searchInput
       name="close-outline"
@@ -30,17 +31,15 @@
     #autocomplete="matAutocomplete"
     (optionSelected)="onSelectFilter($event)"
   >
-    <mat-optgroup
-      *ngFor="let filterGroup of filterGroups$ | async"
-      [label]="filterGroup.name"
-    >
-      <mat-option
-        *ngFor="let filter of filterGroup.filters"
-        [value]="filter.id"
-      >
+    @for (filterGroup of filterGroups$ | async; track filterGroup) {
+      <mat-optgroup [label]="filterGroup.name">
+        @for (filter of filterGroup.filters; track filter) {
+          <mat-option [value]="filter.id">
             {{ filter.label | gfSymbol }}
           </mat-option>
+        }
       </mat-optgroup>
+    }
   </mat-autocomplete>
 
   <button

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -1,4 +1,5 @@
-<div *ngIf="hasPermissionToCreateActivity" class="d-flex justify-content-end">
+@if (hasPermissionToCreateActivity) {
+  <div class="d-flex justify-content-end">
     <button
       class="align-items-center d-flex"
       mat-stroked-button
@@ -7,8 +8,8 @@
       <ion-icon class="mr-2" name="cloud-upload-outline" />
       <ng-container i18n>Import Activities</ng-container>...
     </button>
+    @if (hasPermissionToExportActivities) {
       <button
-    *ngIf="hasPermissionToExportActivities"
         class="mx-1 no-min-width px-2"
         mat-stroked-button
         [matMenuTriggerFor]="activitiesMenu"
@@ -16,6 +17,7 @@
       >
         <ion-icon name="ellipsis-vertical" />
       </button>
+    }
     <mat-menu #activitiesMenu="matMenu" xPosition="before">
       <button
         mat-menu-item
@@ -27,8 +29,8 @@
           <ng-container i18n>Import Dividends</ng-container>...
         </span>
       </button>
+      @if (hasPermissionToExportActivities) {
         <button
-      *ngIf="hasPermissionToExportActivities"
           class="align-items-center d-flex"
           mat-menu-item
           [disabled]="dataSource?.data.length === 0"
@@ -39,8 +41,9 @@
             <span i18n>Export Activities</span>
           </span>
         </button>
+      }
+      @if (hasPermissionToExportActivities) {
         <button
-      *ngIf="hasPermissionToExportActivities"
           class="align-items-center d-flex"
           mat-menu-item
           [disabled]="!hasDrafts"
@@ -51,6 +54,7 @@
             <span i18n>Export Drafts as ICS</span>
           </span>
         </button>
+      }
       <button
         class="align-items-center d-flex"
         mat-menu-item
@@ -63,6 +67,7 @@
       </button>
     </mat-menu>
   </div>
+}
 
 <div class="activities">
   <table
@@ -102,14 +107,15 @@
         <ng-container i18n></ng-container>
       </th>
       <td *matCellDef="let element" class="px-1" mat-cell>
+        @if (element.error) {
           <div
-          *ngIf="element.error"
             class="d-flex"
             matTooltipPosition="above"
             [matTooltip]="element.error.message"
           >
             <ion-icon class="text-danger" name="alert-circle-outline" />
           </div>
+        }
       </td>
     </ng-container>
 
@@ -133,19 +139,18 @@
         <div class="align-items-center d-flex line-height-1">
           <div>
             <span class="text-truncate">{{ element.SymbolProfile?.name }}</span>
-            <span
-              *ngIf="element.isDraft"
-              class="badge badge-secondary ml-1"
-              i18n
-              >Draft</span
-            >
+            @if (element.isDraft) {
+              <span class="badge badge-secondary ml-1" i18n>Draft</span>
+            }
           </div>
         </div>
-        <div *ngIf="!isUUID(element.SymbolProfile?.symbol)">
+        @if (!isUUID(element.SymbolProfile?.symbol)) {
+          <div>
             <small class="text-muted">{{
               element.SymbolProfile?.symbol | gfSymbol
             }}</small>
           </div>
+        }
       </td>
     </ng-container>
 
@@ -302,12 +307,13 @@
       </th>
       <td *matCellDef="let element" class="px-1" mat-cell>
         <div class="d-flex">
+          @if (element.Account?.Platform?.url) {
             <gf-symbol-icon
-            *ngIf="element.Account?.Platform?.url"
               class="mr-1"
               [tooltip]="element.Account?.Platform?.name"
               [url]="element.Account?.Platform?.url"
             />
+          }
           <span class="d-none d-lg-block">{{ element.Account?.name }}</span>
         </div>
       </td>
@@ -324,8 +330,8 @@
         class="d-none d-lg-table-cell px-1"
         mat-cell
       >
+        @if (element.comment) {
           <button
-          *ngIf="element.comment"
             class="mx-1 no-min-width px-2"
             mat-button
             title="Note"
@@ -333,15 +339,16 @@
           >
             <ion-icon name="document-text-outline" />
           </button>
+        }
       </td>
     </ng-container>
 
     <ng-container matColumnDef="actions" stickyEnd>
       <th *matHeaderCellDef class="px-1 text-center" mat-header-cell>
-        <button
-          *ngIf="
+        @if (
           !hasPermissionToCreateActivity && hasPermissionToExportActivities
-          "
+        ) {
+          <button
             class="mx-1 no-min-width px-2"
             mat-button
             [matMenuTriggerFor]="activitiesMenu"
@@ -349,9 +356,10 @@
           >
             <ion-icon name="ellipsis-vertical" />
           </button>
+        }
         <mat-menu #activitiesMenu="matMenu" xPosition="before">
+          @if (hasPermissionToCreateActivity) {
             <button
-            *ngIf="hasPermissionToCreateActivity"
               class="align-items-center d-flex"
               mat-menu-item
               (click)="onImport()"
@@ -361,8 +369,9 @@
                 <ng-container i18n>Import Activities</ng-container>...
               </span>
             </button>
+          }
+          @if (hasPermissionToCreateActivity) {
             <button
-            *ngIf="hasPermissionToCreateActivity"
               mat-menu-item
               [disabled]="dataSource?.data.length === 0"
               (click)="onImportDividends()"
@@ -372,8 +381,9 @@
                 <ng-container i18n>Import Dividends</ng-container>...
               </span>
             </button>
+          }
+          @if (hasPermissionToExportActivities) {
             <button
-            *ngIf="hasPermissionToExportActivities"
               class="align-items-center d-flex"
               mat-menu-item
               [disabled]="dataSource?.data.length === 0"
@@ -384,8 +394,9 @@
                 <span i18n>Export Activities</span>
               </span>
             </button>
+          }
+          @if (hasPermissionToExportActivities) {
             <button
-            *ngIf="hasPermissionToExportActivities"
               class="align-items-center d-flex"
               mat-menu-item
               [disabled]="!hasDrafts"
@@ -396,11 +407,12 @@
                 <span i18n>Export Drafts as ICS</span>
               </span>
             </button>
+          }
         </mat-menu>
       </th>
       <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+        @if (showActions) {
           <button
-          *ngIf="showActions"
             class="mx-1 no-min-width px-2"
             mat-button
             [matMenuTriggerFor]="activityMenu"
@@ -408,6 +420,7 @@
           >
             <ion-icon name="ellipsis-horizontal" />
           </button>
+        }
         <mat-menu #activityMenu="matMenu" xPosition="before">
           <button mat-menu-item (click)="onUpdateActivity(element)">
             <span class="align-items-center d-flex">
@@ -459,8 +472,8 @@
   </table>
 </div>
 
+@if (isLoading) {
   <ngx-skeleton-loader
-  *ngIf="isLoading"
     animation="pulse"
     class="px-4 py-3"
     [theme]="{
@@ -468,6 +481,7 @@
       width: '100%'
     }"
   />
+}
 
 <mat-paginator
   [length]="totalItems"
@@ -480,11 +494,10 @@
   (page)="onChangePage($event)"
 />
 
-<div
-  *ngIf="
+@if (
   dataSource?.data.length === 0 && hasPermissionToCreateActivity && !isLoading
-  "
-  class="p-3 text-center"
->
+) {
+  <div class="p-3 text-center">
     <gf-no-transactions-info-indicator [hasBorder]="false" />
   </div>
+}

libs/ui/src/lib/activity-type/activity-type.component.html

@@ -10,14 +10,18 @@
     sell: activityType === 'SELL'
   }"
 >
-  <ion-icon *ngIf="activityType === 'BUY'" name="arrow-up-circle-outline" />
-  <ion-icon
-    *ngIf="activityType === 'DIVIDEND' || activityType === 'INTEREST'"
-    name="add-circle-outline"
-  />
-  <ion-icon *ngIf="activityType === 'FEE'" name="hammer-outline" />
-  <ion-icon *ngIf="activityType === 'ITEM'" name="cube-outline" />
-  <ion-icon *ngIf="activityType === 'LIABILITY'" name="flame-outline" />
-  <ion-icon *ngIf="activityType === 'SELL'" name="arrow-down-circle-outline" />
+  @if (activityType === 'BUY') {
+    <ion-icon name="arrow-up-circle-outline" />
+  } @else if (activityType === 'DIVIDEND' || activityType === 'INTEREST') {
+    <ion-icon name="add-circle-outline" />
+  } @else if (activityType === 'FEE') {
+    <ion-icon name="hammer-outline" />
+  } @else if (activityType === 'ITEM') {
+    <ion-icon name="cube-outline" />
+  } @else if (activityType === 'LIABILITY') {
+    <ion-icon name="flame-outline" />
+  } @else if (activityType === 'SELL') {
+    <ion-icon name="arrow-down-circle-outline" />
+  }
   <span class="d-none d-lg-block mx-1">{{ activityTypeLabel }}</span>
 </div>

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

@@ -16,8 +16,8 @@
     </th>
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
       <div class="d-flex justify-content-end">
+        @if (element?.trend50d !== 'UNKNOWN') {
           <gf-trend-indicator
-          *ngIf="element?.trend50d !== 'UNKNOWN'"
             [value]="
               element?.trend50d === 'UP'
                 ? 0.001
@@ -26,6 +26,7 @@
                   : 0
             "
           />
+        }
       </div>
     </td>
   </ng-container>
@@ -40,8 +41,8 @@
     </th>
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
       <div class="d-flex justify-content-end">
+        @if (element?.trend200d !== 'UNKNOWN') {
           <gf-trend-indicator
-          *ngIf="element?.trend200d !== 'UNKNOWN'"
             [value]="
               element?.trend200d === 'UP'
                 ? 0.001
@@ -50,6 +51,7 @@
                   : 0
             "
           />
+        }
       </div>
     </td>
   </ng-container>
@@ -99,13 +101,11 @@
   <ng-container matColumnDef="marketCondition">
     <th *matHeaderCellDef mat-header-cell></th>
     <td *matCellDef="let element" class="px-0" mat-cell>
-      <div
-        *ngIf="element?.marketCondition"
-        class="text-center"
-        [title]="element?.marketCondition"
-      >
+      @if (element?.marketCondition) {
+        <div class="text-center" [title]="element?.marketCondition">
           {{ resolveMarketCondition(element.marketCondition).emoji }}
         </div>
+      }
     </td>
   </ng-container>
 

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

@@ -1,5 +1,5 @@
+@if (this.showPrevArrow) {
   <button
-  *ngIf="this.showPrevArrow"
     aria-hidden="true"
     aria-label="previous"
     class="carousel-nav carousel-nav-prev no-min-width position-absolute px-1"
@@ -9,6 +9,7 @@
   >
     <ion-icon name="chevron-back-outline" />
   </button>
+}
 
 <div
   #contentWrapper
@@ -21,8 +22,8 @@
   </div>
 </div>
 
+@if (this.showNextArrow) {
   <button
-  *ngIf="this.showNextArrow"
     aria-hidden="true"
     aria-label="next"
     class="carousel-nav carousel-nav-next no-min-width position-absolute px-1"
@@ -32,3 +33,4 @@
   >
     <ion-icon name="chevron-forward-outline" />
   </button>
+}

libs/ui/src/lib/currency-selector/currency-selector.component.html

@@ -11,11 +11,9 @@
   [displayWith]="displayFn"
   (optionSelected)="onUpdateCurrency($event)"
 >
-  <mat-option
-    *ngFor="let currencyItem of filteredCurrencies"
-    class="line-height-1"
-    [value]="currencyItem"
-  >
+  @for (currencyItem of filteredCurrencies; track currencyItem) {
+    <mat-option class="line-height-1" [value]="currencyItem">
       {{ currencyItem.label }}
     </mat-option>
+  }
 </mat-autocomplete>

libs/ui/src/lib/fire-calculator/fire-calculator.component.html

@@ -70,14 +70,15 @@
     </div>
     <div class="col-md-9 text-center">
       <div class="chart-container mb-4">
+        @if (isLoading) {
           <ngx-skeleton-loader
-          *ngIf="isLoading"
             animation="pulse"
             [theme]="{
               height: '100%',
               width: '100%'
             }"
           />
+        }
         <canvas
           #chartCanvas
           class="h-100"

libs/ui/src/lib/holdings-table/holdings-table.component.html

@@ -30,9 +30,9 @@
       <td *matCellDef="let element" class="line-height-1 px-1" mat-cell>
         <div class="text-truncate">
           {{ element.name }}
-          <span *ngIf="element.name === element.symbol"
-            >({{ element.assetSubClassLabel }})</span
-          >
+          @if (element.name === element.symbol) {
+            <span>({{ element.assetSubClassLabel }})</span>
+          }
         </div>
         <div>
           <small class="text-muted">{{ element.symbol }}</small>
@@ -154,8 +154,8 @@
 
 <mat-paginator class="d-none" [pageSize]="pageSize" />
 
+@if (isLoading) {
   <ngx-skeleton-loader
-  *ngIf="isLoading"
     animation="pulse"
     class="px-4 py-3"
     [theme]="{
@@ -163,21 +163,20 @@
       width: '100%'
     }"
   />
+}
 
-<div
-  *ngIf="dataSource.data.length > pageSize && !isLoading"
-  class="my-3 text-center"
->
+@if (dataSource.data.length > pageSize && !isLoading) {
+  <div class="my-3 text-center">
     <button mat-stroked-button (click)="onShowAllPositions()">
       <ng-container i18n>Show all</ng-container>
     </button>
   </div>
+}
 
-<div
-  *ngIf="
+@if (
   dataSource.data.length === 0 && hasPermissionToCreateActivity && !isLoading
-  "
-  class="p-3 text-center"
->
+) {
+  <div class="p-3 text-center">
     <gf-no-transactions-info-indicator [hasBorder]="false" />
   </div>
+}

libs/ui/src/lib/line-chart/line-chart.component.html

@@ -1,11 +1,12 @@
+@if (isLoading && showLoader) {
   <ngx-skeleton-loader
-  *ngIf="isLoading && showLoader"
     animation="pulse"
     [theme]="{
       height: '100%',
       width: '100%'
     }"
   />
+}
 <canvas
   #chartCanvas
   [ngStyle]="{ display: isLoading ? 'none' : 'block' }"

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

@@ -1,4 +1,6 @@
 <span class="align-items-center d-flex"
   ><span class="d-inline-block logo" [ngClass]="{ 'mr-1': showLabel }"></span>
-  <span *ngIf="showLabel" class="label">{{ label ?? 'Ghostfolio' }}</span></span
->
+  @if (showLabel) {
+    <span class="label">{{ label ?? 'Ghostfolio' }}</span>
+  }
+</span>

libs/ui/src/lib/membership-card/membership-card.component.html

@@ -18,12 +18,14 @@
         <div class="heading text-muted" i18n>Membership</div>
         <div class="text-truncate value">{{ name }}</div>
       </div>
-      <div *ngIf="expiresAt">
+      @if (expiresAt) {
+        <div>
           <div class="heading text-muted" i18n>Valid until</div>
           <div class="text-truncate value">
             {{ expiresAt }}
           </div>
         </div>
+      }
     </div>
   </a>
 </div>

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html

@@ -1,11 +1,12 @@
+@if (isLoading) {
   <ngx-skeleton-loader
-  *ngIf="isLoading"
     animation="pulse"
     class="h-100"
     [theme]="{
       height: '100%'
     }"
   />
+}
 <canvas
   #chartCanvas
   [ngStyle]="{ display: isLoading ? 'none' : 'block' }"

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html

@@ -11,9 +11,9 @@
   [displayWith]="displayFn"
   (optionSelected)="onUpdateSymbol($event)"
 >
-  <ng-container *ngIf="!isLoading">
+  @if (!isLoading) {
+    @for (lookupItem of filteredLookupItems; track lookupItem) {
       <mat-option
-      *ngFor="let lookupItem of filteredLookupItems"
         class="line-height-1"
         [disabled]="lookupItem.dataProviderInfo.isPremium"
         [value]="lookupItem"
@@ -25,12 +25,16 @@
           }
         </span>
         <small class="text-muted"
-        >{{ lookupItem.symbol | gfSymbol }} · {{ lookupItem.currency
-        }}<ng-container *ngIf="lookupItem.assetSubClass">
-          · {{ lookupItem.assetSubClassString }}</ng-container
-        ></small
-      >
+          >{{ lookupItem.symbol | gfSymbol }} · {{ lookupItem.currency }}
+          @if (lookupItem.assetSubClass) {
+            · {{ lookupItem.assetSubClassString }}
+          }
+        </small>
       </mat-option>
-  </ng-container>
+    }
+  }
 </mat-autocomplete>
-<mat-spinner *ngIf="isLoading" class="position-absolute" [diameter]="20" />
+
+@if (isLoading) {
+  <mat-spinner class="position-absolute" [diameter]="20" />
+}