Migrate to control flow (#2991)

* Migrate to control flow
11 months ago · d5d40c0ea1
14 changed files with 380 additions and 353 deletions
--- 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">
--- 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
--- 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>
+}
--- 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>
--- 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>

--- 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>
+}
--- 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>
--- 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"
--- 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>
+}
--- 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' }"
--- 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>
--- 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>
--- 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' }"
--- 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" />
+}