From d5d40c0ea1441d13d2679b07ea554d3067fa27e0 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 11 Feb 2024 20:51:06 +0100
Subject: [PATCH] Migrate to control flow (#2991)

* Migrate to control flow
---
 .../account-balances.component.html           |  19 +-
 .../activities-filter.component.html          |  45 ++-
 .../activities-table.component.html           | 365 +++++++++---------
 .../activity-type.component.html              |  22 +-
 .../lib/benchmark/benchmark.component.html    |  54 +--
 .../src/lib/carousel/carousel.component.html  |  46 +--
 .../currency-selector.component.html          |  12 +-
 .../fire-calculator.component.html            |  17 +-
 .../holdings-table.component.html             |  55 ++-
 .../lib/line-chart/line-chart.component.html  |  17 +-
 libs/ui/src/lib/logo/logo.component.html      |   6 +-
 .../membership-card.component.html            |  12 +-
 .../portfolio-proportion-chart.component.html |  17 +-
 .../symbol-autocomplete.component.html        |  46 ++-
 14 files changed, 380 insertions(+), 353 deletions(-)

diff --git a/libs/ui/src/lib/account-balances/account-balances.component.html b/libs/ui/src/lib/account-balances/account-balances.component.html
index 3fb557211..0d1a79f41 100644
--- a/libs/ui/src/lib/account-balances/account-balances.component.html
+++ b/libs/ui/src/lib/account-balances/account-balances.component.html
@@ -34,15 +34,16 @@
   <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>
-      <button
-        *ngIf="showActions"
-        class="mx-1 no-min-width px-2"
-        mat-button
-        [matMenuTriggerFor]="accountBalanceMenu"
-        (click)="$event.stopPropagation()"
-      >
-        <ion-icon name="ellipsis-horizontal" />
-      </button>
+      @if (showActions) {
+        <button
+          class="mx-1 no-min-width px-2"
+          mat-button
+          [matMenuTriggerFor]="accountBalanceMenu"
+          (click)="$event.stopPropagation()"
+        >
+          <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">
diff --git a/libs/ui/src/lib/activities-filter/activities-filter.component.html b/libs/ui/src/lib/activities-filter/activities-filter.component.html
index 73c984612..fd22ed351 100644
--- a/libs/ui/src/lib/activities-filter/activities-filter.component.html
+++ b/libs/ui/src/lib/activities-filter/activities-filter.component.html
@@ -3,18 +3,19 @@
     <ion-icon name="search-outline" />
   </button>
   <mat-chip-grid #chipList aria-label="Search keywords">
-    <mat-chip-row
-      *ngFor="let filter of selectedFilters"
-      class="mx-1 my-0 px-2 py-0"
-      matChipRemove
-      [removable]="true"
-      (removed)="onRemoveFilter(filter)"
-    >
-      {{ filter.label | gfSymbol }}
-      <button matChipRemove>
-        <ion-icon name="close-outline" />
-      </button>
-    </mat-chip-row>
+    @for (filter of selectedFilters; track filter) {
+      <mat-chip-row
+        class="mx-1 my-0 px-2 py-0"
+        matChipRemove
+        [removable]="true"
+        (removed)="onRemoveFilter(filter)"
+      >
+        {{ filter.label | gfSymbol }}
+        <button matChipRemove>
+          <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"
-      >
-        {{ filter.label | gfSymbol }}
-      </mat-option>
-    </mat-optgroup>
+    @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
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.html b/libs/ui/src/lib/activities-table/activities-table.component.html
index 02f38c172..626af4519 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/libs/ui/src/lib/activities-table/activities-table.component.html
@@ -1,68 +1,73 @@
-<div *ngIf="hasPermissionToCreateActivity" class="d-flex justify-content-end">
-  <button
-    class="align-items-center d-flex"
-    mat-stroked-button
-    (click)="onImport()"
-  >
-    <ion-icon class="mr-2" name="cloud-upload-outline" />
-    <ng-container i18n>Import Activities</ng-container>...
-  </button>
-  <button
-    *ngIf="hasPermissionToExportActivities"
-    class="mx-1 no-min-width px-2"
-    mat-stroked-button
-    [matMenuTriggerFor]="activitiesMenu"
-    (click)="$event.stopPropagation()"
-  >
-    <ion-icon name="ellipsis-vertical" />
-  </button>
-  <mat-menu #activitiesMenu="matMenu" xPosition="before">
-    <button
-      mat-menu-item
-      [disabled]="dataSource?.data.length === 0"
-      (click)="onImportDividends()"
-    >
-      <span class="align-items-center d-flex">
-        <ion-icon class="mr-2" name="color-wand-outline" />
-        <ng-container i18n>Import Dividends</ng-container>...
-      </span>
-    </button>
+@if (hasPermissionToCreateActivity) {
+  <div class="d-flex justify-content-end">
     <button
-      *ngIf="hasPermissionToExportActivities"
       class="align-items-center d-flex"
-      mat-menu-item
-      [disabled]="dataSource?.data.length === 0"
-      (click)="onExport()"
+      mat-stroked-button
+      (click)="onImport()"
     >
-      <span class="align-items-center d-flex">
-        <ion-icon class="mr-2" name="cloud-download-outline" />
-        <span i18n>Export Activities</span>
-      </span>
+      <ion-icon class="mr-2" name="cloud-upload-outline" />
+      <ng-container i18n>Import Activities</ng-container>...
     </button>
-    <button
-      *ngIf="hasPermissionToExportActivities"
-      class="align-items-center d-flex"
-      mat-menu-item
-      [disabled]="!hasDrafts"
-      (click)="onExportDrafts()"
-    >
-      <span class="align-items-center d-flex">
-        <ion-icon class="mr-2" name="calendar-clear-outline" />
-        <span i18n>Export Drafts as ICS</span>
-      </span>
-    </button>
-    <button
-      class="align-items-center d-flex"
-      mat-menu-item
-      (click)="onDeleteAllActivities()"
-    >
-      <span class="align-items-center d-flex">
-        <ion-icon class="mr-2" name="trash-outline" />
-        <span i18n>Delete all Activities</span>
-      </span>
-    </button>
-  </mat-menu>
-</div>
+    @if (hasPermissionToExportActivities) {
+      <button
+        class="mx-1 no-min-width px-2"
+        mat-stroked-button
+        [matMenuTriggerFor]="activitiesMenu"
+        (click)="$event.stopPropagation()"
+      >
+        <ion-icon name="ellipsis-vertical" />
+      </button>
+    }
+    <mat-menu #activitiesMenu="matMenu" xPosition="before">
+      <button
+        mat-menu-item
+        [disabled]="dataSource?.data.length === 0"
+        (click)="onImportDividends()"
+      >
+        <span class="align-items-center d-flex">
+          <ion-icon class="mr-2" name="color-wand-outline" />
+          <ng-container i18n>Import Dividends</ng-container>...
+        </span>
+      </button>
+      @if (hasPermissionToExportActivities) {
+        <button
+          class="align-items-center d-flex"
+          mat-menu-item
+          [disabled]="dataSource?.data.length === 0"
+          (click)="onExport()"
+        >
+          <span class="align-items-center d-flex">
+            <ion-icon class="mr-2" name="cloud-download-outline" />
+            <span i18n>Export Activities</span>
+          </span>
+        </button>
+      }
+      @if (hasPermissionToExportActivities) {
+        <button
+          class="align-items-center d-flex"
+          mat-menu-item
+          [disabled]="!hasDrafts"
+          (click)="onExportDrafts()"
+        >
+          <span class="align-items-center d-flex">
+            <ion-icon class="mr-2" name="calendar-clear-outline" />
+            <span i18n>Export Drafts as ICS</span>
+          </span>
+        </button>
+      }
+      <button
+        class="align-items-center d-flex"
+        mat-menu-item
+        (click)="onDeleteAllActivities()"
+      >
+        <span class="align-items-center d-flex">
+          <ion-icon class="mr-2" name="trash-outline" />
+          <span i18n>Delete all Activities</span>
+        </span>
+      </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>
-        <div
-          *ngIf="element.error"
-          class="d-flex"
-          matTooltipPosition="above"
-          [matTooltip]="element.error.message"
-        >
-          <ion-icon class="text-danger" name="alert-circle-outline" />
-        </div>
+        @if (element.error) {
+          <div
+            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)">
-          <small class="text-muted">{{
-            element.SymbolProfile?.symbol | gfSymbol
-          }}</small>
-        </div>
+        @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">
-          <gf-symbol-icon
-            *ngIf="element.Account?.Platform?.url"
-            class="mr-1"
-            [tooltip]="element.Account?.Platform?.name"
-            [url]="element.Account?.Platform?.url"
-          />
+          @if (element.Account?.Platform?.url) {
+            <gf-symbol-icon
+              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,90 +330,97 @@
         class="d-none d-lg-table-cell px-1"
         mat-cell
       >
-        <button
-          *ngIf="element.comment"
-          class="mx-1 no-min-width px-2"
-          mat-button
-          title="Note"
-          (click)="onOpenComment(element.comment); $event.stopPropagation()"
-        >
-          <ion-icon name="document-text-outline" />
-        </button>
+        @if (element.comment) {
+          <button
+            class="mx-1 no-min-width px-2"
+            mat-button
+            title="Note"
+            (click)="onOpenComment(element.comment); $event.stopPropagation()"
+          >
+            <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="
-            !hasPermissionToCreateActivity && hasPermissionToExportActivities
-          "
-          class="mx-1 no-min-width px-2"
-          mat-button
-          [matMenuTriggerFor]="activitiesMenu"
-          (click)="$event.stopPropagation()"
-        >
-          <ion-icon name="ellipsis-vertical" />
-        </button>
-        <mat-menu #activitiesMenu="matMenu" xPosition="before">
-          <button
-            *ngIf="hasPermissionToCreateActivity"
-            class="align-items-center d-flex"
-            mat-menu-item
-            (click)="onImport()"
-          >
-            <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="cloud-upload-outline" />
-              <ng-container i18n>Import Activities</ng-container>...
-            </span>
-          </button>
-          <button
-            *ngIf="hasPermissionToCreateActivity"
-            mat-menu-item
-            [disabled]="dataSource?.data.length === 0"
-            (click)="onImportDividends()"
-          >
-            <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="color-wand-outline" />
-              <ng-container i18n>Import Dividends</ng-container>...
-            </span>
-          </button>
-          <button
-            *ngIf="hasPermissionToExportActivities"
-            class="align-items-center d-flex"
-            mat-menu-item
-            [disabled]="dataSource?.data.length === 0"
-            (click)="onExport()"
-          >
-            <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="cloud-download-outline" />
-              <span i18n>Export Activities</span>
-            </span>
-          </button>
+        @if (
+          !hasPermissionToCreateActivity && hasPermissionToExportActivities
+        ) {
           <button
-            *ngIf="hasPermissionToExportActivities"
-            class="align-items-center d-flex"
-            mat-menu-item
-            [disabled]="!hasDrafts"
-            (click)="onExportDrafts()"
+            class="mx-1 no-min-width px-2"
+            mat-button
+            [matMenuTriggerFor]="activitiesMenu"
+            (click)="$event.stopPropagation()"
           >
-            <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="calendar-clear-outline" />
-              <span i18n>Export Drafts as ICS</span>
-            </span>
+            <ion-icon name="ellipsis-vertical" />
           </button>
+        }
+        <mat-menu #activitiesMenu="matMenu" xPosition="before">
+          @if (hasPermissionToCreateActivity) {
+            <button
+              class="align-items-center d-flex"
+              mat-menu-item
+              (click)="onImport()"
+            >
+              <span class="align-items-center d-flex">
+                <ion-icon class="mr-2" name="cloud-upload-outline" />
+                <ng-container i18n>Import Activities</ng-container>...
+              </span>
+            </button>
+          }
+          @if (hasPermissionToCreateActivity) {
+            <button
+              mat-menu-item
+              [disabled]="dataSource?.data.length === 0"
+              (click)="onImportDividends()"
+            >
+              <span class="align-items-center d-flex">
+                <ion-icon class="mr-2" name="color-wand-outline" />
+                <ng-container i18n>Import Dividends</ng-container>...
+              </span>
+            </button>
+          }
+          @if (hasPermissionToExportActivities) {
+            <button
+              class="align-items-center d-flex"
+              mat-menu-item
+              [disabled]="dataSource?.data.length === 0"
+              (click)="onExport()"
+            >
+              <span class="align-items-center d-flex">
+                <ion-icon class="mr-2" name="cloud-download-outline" />
+                <span i18n>Export Activities</span>
+              </span>
+            </button>
+          }
+          @if (hasPermissionToExportActivities) {
+            <button
+              class="align-items-center d-flex"
+              mat-menu-item
+              [disabled]="!hasDrafts"
+              (click)="onExportDrafts()"
+            >
+              <span class="align-items-center d-flex">
+                <ion-icon class="mr-2" name="calendar-clear-outline" />
+                <span i18n>Export Drafts as ICS</span>
+              </span>
+            </button>
+          }
         </mat-menu>
       </th>
       <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-        <button
-          *ngIf="showActions"
-          class="mx-1 no-min-width px-2"
-          mat-button
-          [matMenuTriggerFor]="activityMenu"
-          (click)="$event.stopPropagation()"
-        >
-          <ion-icon name="ellipsis-horizontal" />
-        </button>
+        @if (showActions) {
+          <button
+            class="mx-1 no-min-width px-2"
+            mat-button
+            [matMenuTriggerFor]="activityMenu"
+            (click)="$event.stopPropagation()"
+          >
+            <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,15 +472,16 @@
   </table>
 </div>
 
-<ngx-skeleton-loader
-  *ngIf="isLoading"
-  animation="pulse"
-  class="px-4 py-3"
-  [theme]="{
-    height: '1.5rem',
-    width: '100%'
-  }"
-/>
+@if (isLoading) {
+  <ngx-skeleton-loader
+    animation="pulse"
+    class="px-4 py-3"
+    [theme]="{
+      height: '1.5rem',
+      width: '100%'
+    }"
+  />
+}
 
 <mat-paginator
   [length]="totalItems"
@@ -480,11 +494,10 @@
   (page)="onChangePage($event)"
 />
 
-<div
-  *ngIf="
-    dataSource?.data.length === 0 && hasPermissionToCreateActivity && !isLoading
-  "
-  class="p-3 text-center"
->
-  <gf-no-transactions-info-indicator [hasBorder]="false" />
-</div>
+@if (
+  dataSource?.data.length === 0 && hasPermissionToCreateActivity && !isLoading
+) {
+  <div class="p-3 text-center">
+    <gf-no-transactions-info-indicator [hasBorder]="false" />
+  </div>
+}
diff --git a/libs/ui/src/lib/activity-type/activity-type.component.html b/libs/ui/src/lib/activity-type/activity-type.component.html
index bcf338eb1..78eb2f17b 100644
--- a/libs/ui/src/lib/activity-type/activity-type.component.html
+++ b/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>
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.html b/libs/ui/src/lib/benchmark/benchmark.component.html
index c0fdbf956..2e5c819e7 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.html
+++ b/libs/ui/src/lib/benchmark/benchmark.component.html
@@ -16,16 +16,17 @@
     </th>
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
       <div class="d-flex justify-content-end">
-        <gf-trend-indicator
-          *ngIf="element?.trend50d !== 'UNKNOWN'"
-          [value]="
-            element?.trend50d === 'UP'
-              ? 0.001
-              : element?.trend50d === 'DOWN'
-                ? -0.001
-                : 0
-          "
-        />
+        @if (element?.trend50d !== 'UNKNOWN') {
+          <gf-trend-indicator
+            [value]="
+              element?.trend50d === 'UP'
+                ? 0.001
+                : element?.trend50d === 'DOWN'
+                  ? -0.001
+                  : 0
+            "
+          />
+        }
       </div>
     </td>
   </ng-container>
@@ -40,16 +41,17 @@
     </th>
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
       <div class="d-flex justify-content-end">
-        <gf-trend-indicator
-          *ngIf="element?.trend200d !== 'UNKNOWN'"
-          [value]="
-            element?.trend200d === 'UP'
-              ? 0.001
-              : element?.trend200d === 'DOWN'
-                ? -0.001
-                : 0
-          "
-        />
+        @if (element?.trend200d !== 'UNKNOWN') {
+          <gf-trend-indicator
+            [value]="
+              element?.trend200d === 'UP'
+                ? 0.001
+                : element?.trend200d === 'DOWN'
+                  ? -0.001
+                  : 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"
-      >
-        {{ resolveMarketCondition(element.marketCondition).emoji }}
-      </div>
+      @if (element?.marketCondition) {
+        <div class="text-center" [title]="element?.marketCondition">
+          {{ resolveMarketCondition(element.marketCondition).emoji }}
+        </div>
+      }
     </td>
   </ng-container>
 
diff --git a/libs/ui/src/lib/carousel/carousel.component.html b/libs/ui/src/lib/carousel/carousel.component.html
index cafab3107..27d94dfd5 100644
--- a/libs/ui/src/lib/carousel/carousel.component.html
+++ b/libs/ui/src/lib/carousel/carousel.component.html
@@ -1,14 +1,15 @@
-<button
-  *ngIf="this.showPrevArrow"
-  aria-hidden="true"
-  aria-label="previous"
-  class="carousel-nav carousel-nav-prev no-min-width position-absolute px-1"
-  mat-button
-  tabindex="-1"
-  (click)="previous()"
->
-  <ion-icon name="chevron-back-outline" />
-</button>
+@if (this.showPrevArrow) {
+  <button
+    aria-hidden="true"
+    aria-label="previous"
+    class="carousel-nav carousel-nav-prev no-min-width position-absolute px-1"
+    mat-button
+    tabindex="-1"
+    (click)="previous()"
+  >
+    <ion-icon name="chevron-back-outline" />
+  </button>
+}
 
 <div
   #contentWrapper
@@ -21,14 +22,15 @@
   </div>
 </div>
 
-<button
-  *ngIf="this.showNextArrow"
-  aria-hidden="true"
-  aria-label="next"
-  class="carousel-nav carousel-nav-next no-min-width position-absolute px-1"
-  mat-button
-  tabindex="-1"
-  (click)="next()"
->
-  <ion-icon name="chevron-forward-outline" />
-</button>
+@if (this.showNextArrow) {
+  <button
+    aria-hidden="true"
+    aria-label="next"
+    class="carousel-nav carousel-nav-next no-min-width position-absolute px-1"
+    mat-button
+    tabindex="-1"
+    (click)="next()"
+  >
+    <ion-icon name="chevron-forward-outline" />
+  </button>
+}
diff --git a/libs/ui/src/lib/currency-selector/currency-selector.component.html b/libs/ui/src/lib/currency-selector/currency-selector.component.html
index 38fc6c43e..76fe8fef0 100644
--- a/libs/ui/src/lib/currency-selector/currency-selector.component.html
+++ b/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"
-  >
-    {{ currencyItem.label }}
-  </mat-option>
+  @for (currencyItem of filteredCurrencies; track currencyItem) {
+    <mat-option class="line-height-1" [value]="currencyItem">
+      {{ currencyItem.label }}
+    </mat-option>
+  }
 </mat-autocomplete>
diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.html b/libs/ui/src/lib/fire-calculator/fire-calculator.component.html
index 148c8e817..46cd0999f 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.html
+++ b/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">
-        <ngx-skeleton-loader
-          *ngIf="isLoading"
-          animation="pulse"
-          [theme]="{
-            height: '100%',
-            width: '100%'
-          }"
-        />
+        @if (isLoading) {
+          <ngx-skeleton-loader
+            animation="pulse"
+            [theme]="{
+              height: '100%',
+              width: '100%'
+            }"
+          />
+        }
         <canvas
           #chartCanvas
           class="h-100"
diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.html b/libs/ui/src/lib/holdings-table/holdings-table.component.html
index b18c7447a..f60b11f02 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.html
+++ b/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,30 +154,29 @@
 
 <mat-paginator class="d-none" [pageSize]="pageSize" />
 
-<ngx-skeleton-loader
-  *ngIf="isLoading"
-  animation="pulse"
-  class="px-4 py-3"
-  [theme]="{
-    height: '1.5rem',
-    width: '100%'
-  }"
-/>
+@if (isLoading) {
+  <ngx-skeleton-loader
+    animation="pulse"
+    class="px-4 py-3"
+    [theme]="{
+      height: '1.5rem',
+      width: '100%'
+    }"
+  />
+}
 
-<div
-  *ngIf="dataSource.data.length > pageSize && !isLoading"
-  class="my-3 text-center"
->
-  <button mat-stroked-button (click)="onShowAllPositions()">
-    <ng-container i18n>Show all</ng-container>
-  </button>
-</div>
+@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="
-    dataSource.data.length === 0 && hasPermissionToCreateActivity && !isLoading
-  "
-  class="p-3 text-center"
->
-  <gf-no-transactions-info-indicator [hasBorder]="false" />
-</div>
+@if (
+  dataSource.data.length === 0 && hasPermissionToCreateActivity && !isLoading
+) {
+  <div class="p-3 text-center">
+    <gf-no-transactions-info-indicator [hasBorder]="false" />
+  </div>
+}
diff --git a/libs/ui/src/lib/line-chart/line-chart.component.html b/libs/ui/src/lib/line-chart/line-chart.component.html
index e60f964b7..e9a5bbbe0 100644
--- a/libs/ui/src/lib/line-chart/line-chart.component.html
+++ b/libs/ui/src/lib/line-chart/line-chart.component.html
@@ -1,11 +1,12 @@
-<ngx-skeleton-loader
-  *ngIf="isLoading && showLoader"
-  animation="pulse"
-  [theme]="{
-    height: '100%',
-    width: '100%'
-  }"
-/>
+@if (isLoading && showLoader) {
+  <ngx-skeleton-loader
+    animation="pulse"
+    [theme]="{
+      height: '100%',
+      width: '100%'
+    }"
+  />
+}
 <canvas
   #chartCanvas
   [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
diff --git a/libs/ui/src/lib/logo/logo.component.html b/libs/ui/src/lib/logo/logo.component.html
index ac0839cf6..6e31e0f9e 100644
--- a/libs/ui/src/lib/logo/logo.component.html
+++ b/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>
diff --git a/libs/ui/src/lib/membership-card/membership-card.component.html b/libs/ui/src/lib/membership-card/membership-card.component.html
index d069274ca..02a4a03f7 100644
--- a/libs/ui/src/lib/membership-card/membership-card.component.html
+++ b/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">
-        <div class="heading text-muted" i18n>Valid until</div>
-        <div class="text-truncate value">
-          {{ expiresAt }}
+      @if (expiresAt) {
+        <div>
+          <div class="heading text-muted" i18n>Valid until</div>
+          <div class="text-truncate value">
+            {{ expiresAt }}
+          </div>
         </div>
-      </div>
+      }
     </div>
   </a>
 </div>
diff --git a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html
index 67e4798f7..c7de5ef4d 100644
--- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html
+++ b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html
@@ -1,11 +1,12 @@
-<ngx-skeleton-loader
-  *ngIf="isLoading"
-  animation="pulse"
-  class="h-100"
-  [theme]="{
-    height: '100%'
-  }"
-/>
+@if (isLoading) {
+  <ngx-skeleton-loader
+    animation="pulse"
+    class="h-100"
+    [theme]="{
+      height: '100%'
+    }"
+  />
+}
 <canvas
   #chartCanvas
   [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
index fed5bc2ed..2a2f98d7d 100644
--- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
+++ b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
@@ -11,26 +11,30 @@
   [displayWith]="displayFn"
   (optionSelected)="onUpdateSymbol($event)"
 >
-  <ng-container *ngIf="!isLoading">
-    <mat-option
-      *ngFor="let lookupItem of filteredLookupItems"
-      class="line-height-1"
-      [disabled]="lookupItem.dataProviderInfo.isPremium"
-      [value]="lookupItem"
-    >
-      <span class="align-items-center d-flex line-height-1"
-        ><b>{{ lookupItem.name }}</b>
-        @if (lookupItem.dataProviderInfo.isPremium) {
-          <gf-premium-indicator class="ml-1" [enableLink]="false" />
-        }
-      </span>
-      <small class="text-muted"
-        >{{ lookupItem.symbol | gfSymbol }} · {{ lookupItem.currency
-        }}<ng-container *ngIf="lookupItem.assetSubClass">
-          · {{ lookupItem.assetSubClassString }}</ng-container
-        ></small
+  @if (!isLoading) {
+    @for (lookupItem of filteredLookupItems; track lookupItem) {
+      <mat-option
+        class="line-height-1"
+        [disabled]="lookupItem.dataProviderInfo.isPremium"
+        [value]="lookupItem"
       >
-    </mat-option>
-  </ng-container>
+        <span class="align-items-center d-flex line-height-1"
+          ><b>{{ lookupItem.name }}</b>
+          @if (lookupItem.dataProviderInfo.isPremium) {
+            <gf-premium-indicator class="ml-1" [enableLink]="false" />
+          }
+        </span>
+        <small class="text-muted"
+          >{{ lookupItem.symbol | gfSymbol }} · {{ lookupItem.currency }}
+          @if (lookupItem.assetSubClass) {
+            · {{ lookupItem.assetSubClassString }}
+          }
+        </small>
+      </mat-option>
+    }
+  }
 </mat-autocomplete>
-<mat-spinner *ngIf="isLoading" class="position-absolute" [diameter]="20" />
+
+@if (isLoading) {
+  <mat-spinner class="position-absolute" [diameter]="20" />
+}