Migrate to control flow (#2992)

apps/client/src/app/pages/about/oss-friends/oss-friends-page.html

@@ -10,10 +10,8 @@
         >
       </h1>
       <div class="row">
-        <div
+        @for (ossFriend of ossFriends; track ossFriend) {
-          *ngFor="let ossFriend of ossFriends"
+        <div class="col-xs-12 col-md-4 mb-3">
-          class="col-xs-12 col-md-4 mb-3"
-        >
           <a target="_blank" [href]="ossFriend.href">
             <mat-card appearance="outlined" class="d-flex flex-column h-100">
               <mat-card-header>
@@ -33,6 +31,7 @@
             </mat-card>
           </a>
         </div>
+        }
       </div>
     </div>
   </div>

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html

@@ -4,8 +4,11 @@
   (keyup.enter)="accountForm.valid && onSubmit()"
   (ngSubmit)="onSubmit()"
 >
-  <h1 *ngIf="data.account.id" i18n mat-dialog-title>Update account</h1>
+  @if (data.account.id) {
-  <h1 *ngIf="!data.account.id" i18n mat-dialog-title>Add account</h1>
+  <h1 i18n mat-dialog-title>Update account</h1>
+  } @else {
+  <h1 i18n mat-dialog-title>Add account</h1>
+  }
   <div class="flex-grow-1 py-3" mat-dialog-content>
     <div>
       <mat-form-field appearance="outline" class="w-100">
@@ -52,10 +55,9 @@
           (keydown.enter)="$event.stopPropagation()"
         />
         <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
-          <mat-option
+          @for (platformEntry of filteredPlatforms | async; track platformEntry)
-            *ngFor="let platformEntry of filteredPlatforms | async"
+          {
-            [value]="platformEntry"
+          <mat-option [value]="platformEntry">
-          >
             <span class="d-flex">
               <gf-symbol-icon
                 class="mr-1"
@@ -65,6 +67,7 @@
               <span>{{ platformEntry.name }}</span>
             </span>
           </mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
     </div>
@@ -85,12 +88,14 @@
         >Exclude from Analysis</mat-checkbox
       >
     </div>
-    <div *ngIf="data.account.id">
+    @if (data.account.id) {
+    <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Account ID</mat-label>
         <input formControlName="accountId" matInput />
       </mat-form-field>
     </div>
+    }
   </div>
   <div class="justify-content-end" mat-dialog-actions>
     <button i18n mat-button type="button" (click)="onCancel()">Cancel</button>

apps/client/src/app/pages/blog/blog-page.html

@@ -8,11 +8,8 @@
           finance</small
         >
       </h1>
-      <mat-card
+      @if (hasPermissionForSubscription) {
-        *ngIf="hasPermissionForSubscription"
+      <mat-card appearance="outlined" class="mb-3">
-        appearance="outlined"
-        class="mb-3"
-      >
         <mat-card-content>
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
@@ -36,6 +33,7 @@
           </div>
         </mat-card-content>
       </mat-card>
+      }
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="container p-0">
@@ -295,11 +293,8 @@
           </div>
         </mat-card-content>
       </mat-card>
-      <mat-card
+      @if (hasPermissionForSubscription) {
-        *ngIf="hasPermissionForSubscription"
+      <mat-card appearance="outlined" class="mb-3">
-        appearance="outlined"
-        class="mb-3"
-      >
         <mat-card-content>
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
@@ -323,6 +318,7 @@
           </div>
         </mat-card-content>
       </mat-card>
+      }
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="container p-0">

apps/client/src/app/pages/features/features-page.html

@@ -139,10 +139,9 @@
               <div class="flex-grow-1">
                 <h4 class="align-items-center d-flex">
                   <span i18n>Portfolio Calculations</span>
-                  <gf-premium-indicator
+                  @if (hasPermissionForSubscription) {
-                    *ngIf="hasPermissionForSubscription"
+                  <gf-premium-indicator class="ml-1" />
-                    class="ml-1"
+                  }
-                  />
                 </h4>
                 <p class="m-0">
                   Check the rate of return of your portfolio for
@@ -159,10 +158,9 @@
               <div class="flex-grow-1">
                 <h4 class="align-items-center d-flex">
                   <span i18n>Portfolio Allocations</span>
-                  <gf-premium-indicator
+                  @if (hasPermissionForSubscription) {
-                    *ngIf="hasPermissionForSubscription"
+                  <gf-premium-indicator class="ml-1" />
-                    class="ml-1"
+                  }
-                  />
                 </h4>
                 <p class="m-0">
                   Check the allocations of your portfolio by account, asset
@@ -198,10 +196,8 @@
             </mat-card-content>
           </mat-card>
         </div>
-        <div
+        @if (hasPermissionForSubscription) {
-          *ngIf="hasPermissionForSubscription"
+        <div class="col-xs-12 col-md-4 mb-3">
-          class="col-xs-12 col-md-4 mb-3"
-        >
           <mat-card appearance="outlined" class="d-flex flex-column h-100">
             <mat-card-content>
               <div class="flex-grow-1">
@@ -219,16 +215,16 @@
             </mat-card-content>
           </mat-card>
         </div>
+        }
         <div class="col-xs-12 col-md-4 mb-3">
           <mat-card appearance="outlined" class="d-flex flex-column h-100">
             <mat-card-content>
               <div class="flex-grow-1">
                 <h4 class="align-items-center d-flex">
                   <span i18n>Static Analysis</span>
-                  <gf-premium-indicator
+                  @if (hasPermissionForSubscription) {
-                    *ngIf="hasPermissionForSubscription"
+                  <gf-premium-indicator class="ml-1" />
-                    class="ml-1"
+                  }
-                  />
                 </h4>
                 <p class="m-0">
                   Identify potential risks in your portfolio with Ghostfolio
@@ -293,11 +289,13 @@
       </div>
     </div>
   </div>
-  <div *ngIf="!user" class="row">
+  @if (!user) {
+  <div class="row">
     <div class="col mt-3 text-center">
       <a color="primary" i18n mat-flat-button [routerLink]="routerLinkRegister"
         >Get Started</a
       >
     </div>
   </div>
+  }
 </div>

apps/client/src/app/pages/portfolio/activities/activities-page.html

@@ -29,10 +29,9 @@
     </div>
   </div>
 
-  <div
+  @if (!hasImpersonationId && hasPermissionToCreateActivity &&
-    *ngIf="!hasImpersonationId && hasPermissionToCreateActivity && !user.settings.isRestrictedView"
+  !user.settings.isRestrictedView) {
-    class="fab-container"
+  <div class="fab-container">
-  >
     <a
       class="align-items-center d-flex justify-content-center"
       color="primary"
@@ -43,4 +42,5 @@
       <ion-icon name="add-outline" size="large" />
     </a>
   </div>
+  }
 </div>

apps/client/src/app/pages/portfolio/holdings/holdings-page.html

@@ -13,10 +13,8 @@
         [holdings]="holdings"
         [locale]="user?.settings?.locale"
       />
-      <div
+      @if (hasPermissionToCreateOrder && holdings?.length > 0) {
-        *ngIf="hasPermissionToCreateOrder && holdings?.length > 0"
+      <div class="text-center">
-        class="text-center"
-      >
         <a
           class="mt-3"
           i18n
@@ -25,6 +23,7 @@
           >Manage Activities</a
         >
       </div>
+      }
     </div>
   </div>
 </div>

apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.html

@@ -18,11 +18,8 @@
           with Ghostfolio.
         </p>
       </div>
-      <mat-card
+      @for (product of products; track product) {
-        *ngFor="let product of products"
+      <mat-card appearance="outlined" class="mb-3">
-        appearance="outlined"
-        class="mb-3"
-      >
         <mat-card-content>
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
@@ -48,6 +45,7 @@
           </div>
         </mat-card-content>
       </mat-card>
+      }
     </div>
   </div>
 </div>

apps/client/src/app/pages/resources/resources-page.html

@@ -170,7 +170,8 @@
             </div>
           </div>
         </div>
-        <div *ngIf="hasPermissionForSubscription" class="mb-4 media">
+        @if (hasPermissionForSubscription) {
+        <div class="mb-4 media">
           <div class="media-body">
             <h3 class="h5 mt-0">Personal Finance Tools</h3>
             <div class="mb-1">
@@ -185,6 +186,7 @@
             </div>
           </div>
         </div>
+        }
         <div class="mb-4 media">
           <div class="media-body">
             <h3 class="h5 mt-0">Stagflation</h3>

apps/client/src/app/pages/webauthn/webauthn-page.html

@@ -7,11 +7,12 @@
         <gf-logo size="medium" />
       </div>
 
-      <div *ngIf="!hasError" class="col d-flex justify-content-center">
+      @if (!hasError) {
+      <div class="col d-flex justify-content-center">
         <mat-spinner [diameter]="20" />
       </div>
+      } @else {
       <div
-        *ngIf="hasError"
         class="align-items-center col d-flex flex-column justify-content-center"
       >
         <h1 class="d-flex h5 justify-content-center mb-0 text-center">
@@ -30,6 +31,7 @@
           <ng-container i18n>Go back to Home Page</ng-container>
         </button>
       </div>
+      }
     </div>
   </div>
 </div>