Migrate if / else to control flow (#3001)

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -131,9 +131,8 @@
       <ng-container
         *ngIf="assetProfile?.countries?.length > 0 || assetProfile?.sectors?.length > 0"
       >
-        <ng-container
+        @if (assetProfile?.countries?.length === 1 &&
-          *ngIf="assetProfile?.countries?.length === 1 && assetProfile?.sectors?.length === 1; else charts"
+        assetProfile?.sectors?.length === 1 ) {
-        >
         <div *ngIf="assetProfile?.sectors?.length === 1" class="col-6 mb-3">
           <gf-value
             i18n
@@ -152,8 +151,7 @@
             >Country</gf-value
           >
         </div>
-        </ng-container>
+        } @else {
-        <ng-template #charts>
         <div class="col-md-6 mb-3">
           <div class="h5" i18n>Sectors</div>
           <gf-portfolio-proportion-chart
@@ -174,7 +172,7 @@
             [positions]="countries"
           />
         </div>
-        </ng-template>
+        }
       </ng-container>
     </div>
     <div *ngIf="assetProfile?.dataSource === 'MANUAL'" class="mt-3">

apps/client/src/app/components/home-overview/home-overview.html

@@ -1,10 +1,8 @@
 <div
   class="align-items-center container d-flex flex-column h-100 justify-content-center overview p-0 position-relative"
 >
-  <div
+  @if(hasPermissionToCreateOrder && historicalDataItems?.length === 0) {
-    *ngIf="hasPermissionToCreateOrder && historicalDataItems?.length === 0; else isUserActive"
+  <div class="justify-content-center row w-100">
-    class="justify-content-center row w-100"
-  >
     <div class="col introduction">
       <h4 i18n>Welcome to Ghostfolio</h4>
       <p i18n>Ready to take control of your personal finances?</p>
@@ -60,7 +58,7 @@
       </div>
     </div>
   </div>
-  <ng-template #isUserActive>
+  } @else {
   <div class="row w-100">
     <div class="col p-0">
       <div class="chart-container mx-auto position-relative">
@@ -98,5 +96,5 @@
       />
     </div>
   </div>
-  </ng-template>
+  }
 </div>

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html

@@ -186,9 +186,8 @@
       <ng-container
         *ngIf="SymbolProfile?.countries?.length > 0 || SymbolProfile?.sectors?.length > 0"
       >
-        <ng-container
+        @if(SymbolProfile?.countries?.length === 1 &&
-          *ngIf="SymbolProfile?.countries?.length === 1 && SymbolProfile?.sectors?.length === 1; else charts"
+        SymbolProfile?.sectors?.length === 1) {
-        >
         <div *ngIf="SymbolProfile?.sectors?.length === 1" class="col-6 mb-3">
           <gf-value
             i18n
@@ -198,10 +197,7 @@
             >Sector</gf-value
           >
         </div>
-          <div
+        <div *ngIf="SymbolProfile?.countries?.length === 1" class="col-6 mb-3">
-            *ngIf="SymbolProfile?.countries?.length === 1"
-            class="col-6 mb-3"
-          >
           <gf-value
             i18n
             size="medium"
@@ -210,8 +206,7 @@
             >Country</gf-value
           >
         </div>
-        </ng-container>
+        } @else {
-        <ng-template #charts>
         <div class="col-md-6 mb-3">
           <div class="h5" i18n>Sectors</div>
           <gf-portfolio-proportion-chart
@@ -236,7 +231,7 @@
             [positions]="countries"
           />
         </div>
-        </ng-template>
+        }
       </ng-container>
       <div *ngIf="dataProviderInfo" class="col-md-12 mb-3 text-center">
         <hr />

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -24,7 +24,7 @@
         >
       </ng-template>
       <div class="pt-3">
-        <ng-container *ngIf="mode === 'DIVIDEND'; else selectFile">
+        @if (mode === 'DIVIDEND') {
         <form
           [formGroup]="uniqueAssetForm"
           (ngSubmit)="onLoadDividends(stepper)"
@@ -66,8 +66,7 @@
             </button>
           </div>
         </form>
-        </ng-container>
+        } @else {
-        <ng-template #selectFile>
         <div class="d-flex flex-column justify-content-center">
           <button
             class="drop-area p-4 text-center text-muted"
@@ -101,7 +100,7 @@
             </small>
           </p>
         </div>
-        </ng-template>
+        }
       </div>
     </mat-step>
 
@@ -115,7 +114,7 @@
         >
       </ng-template>
       <div class="pt-3">
-        <ng-container *ngIf="errorMessages?.length === 0; else errorMessage">
+        @if(errorMessages?.length === 0) {
         <gf-activities-table
           *ngIf="importStep === 1"
           [baseCurrency]="data?.user?.settings?.baseCurrency"
@@ -151,8 +150,7 @@
             <ng-container i18n>Import</ng-container>
           </button>
         </div>
-        </ng-container>
+        } @else {
-        <ng-template #errorMessage>
         <mat-accordion displayMode="flat">
           <mat-expansion-panel
             *ngFor="let message of errorMessages; let i = index"
@@ -187,7 +185,7 @@
             <ng-container i18n>Import</ng-container>
           </button>
         </div>
-        </ng-template>
+        }
       </div>
     </mat-step>
   </mat-stepper>