Migrate gf-* components to self-closing tags (#2934)

2024-01-28 08:50:43 +01:00 · 2024-01-28 08:50:43 +01:00 · 857708dc4d
commit 857708dc4d
parent 1ca4f885b0
50 changed files with 220 additions and 249 deletions
--- a/apps/client/src/app/app.component.html
+++ b/apps/client/src/app/app.component.html
@ -38,7 +38,7 @@
    [pageTitle]="pageTitle"
    [user]="user"
    (signOut)="onSignOut()"
-  ></gf-header>
+  />
 </header>

 <main role="main">
--- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
+++ b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
@ -4,7 +4,7 @@
  [deviceType]="data.deviceType"
  [title]="name"
  (closeButtonClicked)="onClose()"
-></gf-dialog-header>
+/>

 <div class="flex-grow-1" mat-dialog-content>
  <div class="container p-0">
@ -16,7 +16,7 @@
          [locale]="user?.settings?.locale"
          [unit]="user?.settings?.baseCurrency"
          [value]="valueInBaseCurrency"
-        ></gf-value>
+        />
      </div>
    </div>

@ -28,7 +28,7 @@
        [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
        [isLoading]="isLoadingChart"
        [locale]="user?.settings?.locale"
-      ></gf-investment-chart>
+      />
    </div>

    <div class="mb-3 row">
@ -79,7 +79,7 @@
          [deviceType]="data.deviceType"
          [holdings]="holdings"
          [locale]="user?.settings?.locale"
-        ></gf-holdings-table>
+        />
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
@ -102,7 +102,7 @@
          [totalItems]="totalItems"
          (export)="onExport()"
          (sortChanged)="onSortChanged($event)"
-        ></gf-activities-table-lazy>
+        />
        <gf-activities-table
          *ngIf="user?.settings?.isExperimentalFeatures !== true"
          [activities]="activities"
@ -115,7 +115,7 @@
          [locale]="user?.settings?.locale"
          [showActions]="false"
          (export)="onExport()"
-        ></gf-activities-table>
+        />
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
@ -128,7 +128,7 @@
          [locale]="user?.settings?.locale"
          [showActions]="!hasImpersonationId && hasPermissionToDeleteAccountBalance && !user.settings.isRestrictedView"
          (accountBalanceDeleted)="onDeleteAccountBalance($event)"
-        ></gf-account-balances>
+        />
      </mat-tab>
    </mat-tab-group>
  </div>
@ -138,4 +138,4 @@
  mat-dialog-actions
  [deviceType]="data.deviceType"
  (closeButtonClicked)="onClose()"
-></gf-dialog-footer>
+/>
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.html
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.html
@ -39,7 +39,7 @@
        class="d-inline d-sm-none mr-1"
        [tooltip]="element.Platform?.name"
        [url]="element.Platform?.url"
-      ></gf-symbol-icon>
+      />
      <span>{{ element.name }} </span>
      <span
        *ngIf="element.isDefault"
@ -83,7 +83,7 @@
          class="mr-1"
          [tooltip]="element.Platform?.name"
          [url]="element.Platform?.url"
-        ></gf-symbol-icon>
+        />
        <span>{{ element.Platform?.name }}</span>
      </div>
    </td>
@ -131,7 +131,7 @@
        [isCurrency]="true"
        [locale]="locale"
        [value]="element.balance"
-      ></gf-value>
+      />
    </td>
    <td
      *matFooterCellDef
@ -143,7 +143,7 @@
        [isCurrency]="true"
        [locale]="locale"
        [value]="totalBalanceInBaseCurrency"
-      ></gf-value>
+      />
    </td>
  </ng-container>

@ -166,7 +166,7 @@
        [isCurrency]="true"
        [locale]="locale"
        [value]="element.value"
-      ></gf-value>
+      />
    </td>
    <td
      *matFooterCellDef
@ -178,7 +178,7 @@
        [isCurrency]="true"
        [locale]="locale"
        [value]="totalValueInBaseCurrency"
-      ></gf-value>
+      />
    </td>
  </ng-container>

@ -201,7 +201,7 @@
        [isCurrency]="true"
        [locale]="locale"
        [value]="element.valueInBaseCurrency"
-      ></gf-value>
+      />
    </td>
    <td
      *matFooterCellDef
@ -213,7 +213,7 @@
        [isCurrency]="true"
        [locale]="locale"
        [value]="totalValueInBaseCurrency"
-      ></gf-value>
+      />
    </td>
  </ng-container>

--- a/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.html
+++ b/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.html
@ -8,7 +8,7 @@
    [showXAxis]="true"
    [showYAxis]="true"
    [symbol]="symbol"
-  ></gf-line-chart>
+  />
  <div
    *ngFor="let itemByMonth of marketDataByMonth | keyvalue"
    class="d-flex"
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.html
+++ b/apps/client/src/app/components/admin-market-data/admin-market-data.html
@ -6,7 +6,7 @@
        [isLoading]="isLoading"
        [placeholder]="placeholder"
        (valueChanged)="filters$.next($event)"
-      ></gf-activities-filter>
+      />
    </div>
  </div>
  <div class="row">
--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
+++ b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
@ -50,7 +50,7 @@
      [marketData]="marketDataDetails"
      [symbol]="data.symbol"
      (marketDataChanged)="onMarketDataChanged($event)"
-    ></gf-admin-market-data-detail>
+    />

    <div class="mt-3" formGroupName="historicalData">
      <mat-form-field appearance="outline" class="w-100 without-hint">
@ -162,7 +162,7 @@
              [keys]="['name']"
              [maxItems]="10"
              [positions]="sectors"
-            ></gf-portfolio-proportion-chart>
+            />
          </div>
          <div class="col-md-6 mb-3">
            <div class="h5" i18n>Countries</div>
@ -172,7 +172,7 @@
              [keys]="['name']"
              [maxItems]="10"
              [positions]="countries"
-            ></gf-portfolio-proportion-chart>
+            />
          </div>
        </ng-template>
      </ng-container>
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/apps/client/src/app/components/admin-overview/admin-overview.html
@ -16,7 +16,7 @@
                [locale]="user?.settings?.locale"
                [precision]="0"
                [value]="userCount"
-              ></gf-value>
+              />
            </div>
          </div>
          <div class="d-flex my-3">
@ -26,7 +26,7 @@
                [locale]="user?.settings?.locale"
                [precision]="0"
                [value]="transactionCount"
-              ></gf-value>
+              />
              <div *ngIf="transactionCount && userCount">
                {{ transactionCount / userCount | number : '1.2-2' }}
                <span i18n>per User</span>
@ -39,10 +39,7 @@
              <table>
                <tr *ngFor="let exchangeRate of exchangeRates">
                  <td>
-                    <gf-value
-                      [locale]="user?.settings?.locale"
-                      [value]="1"
-                    ></gf-value>
+                    <gf-value [locale]="user?.settings?.locale" [value]="1" />
                  </td>
                  <td class="pl-1">{{ exchangeRate.label1 }}</td>
                  <td class="px-1">=</td>
@ -52,7 +49,7 @@
                      [locale]="user?.settings?.locale"
                      [precision]="4"
                      [value]="exchangeRate.value"
-                    ></gf-value>
+                    />
                  </td>
                  <td class="pl-1">{{ exchangeRate.label2 }}</td>
                  <td>
--- a/apps/client/src/app/components/admin-platform/admin-platform.component.html
+++ b/apps/client/src/app/components/admin-platform/admin-platform.component.html
@ -35,7 +35,7 @@
              class="d-inline mr-1"
              [tooltip]="element.name"
              [url]="element.url"
-            ></gf-symbol-icon>
+            />
            <span>{{ element.name }}</span>
          </td></ng-container
        >
--- a/apps/client/src/app/components/admin-users/admin-users.html
+++ b/apps/client/src/app/components/admin-users/admin-users.html
@ -46,7 +46,7 @@
                  class="ml-1"
                  [enableLink]="false"
                  [title]="'Expires ' + formatDistanceToNow(element.subscription.expiresAt) + ' (' + (element.subscription.expiresAt | date: defaultDateFormat) + ')'"
-                ></gf-premium-indicator>
+                />
              </div>
            </td>
          </ng-container>
@ -107,7 +107,7 @@
                class="d-inline-block justify-content-end"
                [locale]="user?.settings?.locale"
                [value]="element.accountCount"
-              ></gf-value>
+              />
            </td>
          </ng-container>

@ -128,7 +128,7 @@
                class="d-inline-block justify-content-end"
                [locale]="user?.settings?.locale"
                [value]="element.transactionCount"
-              ></gf-value>
+              />
            </td>
          </ng-container>

@ -153,7 +153,7 @@
                [locale]="user?.settings?.locale"
                [precision]="0"
                [value]="element.engagement"
-              ></gf-value>
+              />
            </td>
          </ng-container>

--- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html
+++ b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html
@ -7,7 +7,7 @@
      <gf-premium-indicator
        *ngIf="user?.subscription?.type === 'Basic'"
        class="ml-1"
-      ></gf-premium-indicator>
+      />
    </div>
  </div>
  <div class="col-md-6 col-xs-12 d-flex justify-content-end">
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@ -7,7 +7,7 @@
        [ngClass]="{ 'w-100': hasTabs }"
        [routerLink]="['/']"
      >
-        <gf-logo class="px-2" [label]="pageTitle"></gf-logo>
+        <gf-logo class="px-2" [label]="pageTitle" />
      </a>
    </div>
    <span class="spacer"></span>
@ -295,7 +295,7 @@
          class="px-2"
          [label]="pageTitle"
          [showLabel]="currentRoute !== 'register'"
-        ></gf-logo>
+        />
      </a>
    </div>
    <span class="spacer"></span>
--- a/apps/client/src/app/components/home-holdings/home-holdings.html
+++ b/apps/client/src/app/components/home-holdings/home-holdings.html
@ -5,7 +5,7 @@
      [isLoading]="positions === undefined"
      [options]="dateRangeOptions"
      (change)="onChangeDateRange($event.value)"
-    ></gf-toggle>
+    />
  </div>
  <div class="row">
    <div class="align-items-center col-xs-12 col-md-8 offset-md-2">
@ -18,7 +18,7 @@
            [locale]="user?.settings?.locale"
            [positions]="positions"
            [range]="user?.settings?.dateRange"
-          ></gf-positions>
+          />
        </mat-card-content>
      </mat-card>
      <div *ngIf="hasPermissionToCreateOrder" class="text-center">
--- a/apps/client/src/app/components/home-market/home-market.html
+++ b/apps/client/src/app/components/home-market/home-market.html
@ -18,11 +18,11 @@
        [yMaxLabel]="greedLabel"
        [yMin]="0"
        [yMinLabel]="fearLabel"
-      ></gf-line-chart>
+      />
      <gf-fear-and-greed-index
        class="d-flex justify-content-center"
        [fearAndGreedIndex]="fearAndGreedIndex"
-      ></gf-fear-and-greed-index>
+      />
    </div>
  </div>

@ -32,7 +32,7 @@
        [benchmarks]="benchmarks"
        [locale]="user?.settings?.locale"
        [user]="user"
-      ></gf-benchmark>
+      />
      <ngx-skeleton-loader
        *ngIf="isLoading"
        animation="pulse"
--- a/apps/client/src/app/components/home-overview/home-overview.html
+++ b/apps/client/src/app/components/home-overview/home-overview.html
@ -78,7 +78,7 @@
            [showLoader]="false"
            [showXAxis]="false"
            [showYAxis]="false"
-          ></gf-line-chart>
+          />
        </div>
      </div>
    </div>
@ -95,7 +95,7 @@
          [performance]="performance"
          [showDetails]="showDetails"
          [unit]="unit"
-        ></gf-portfolio-performance>
+        />
        <div
          *ngIf="showDetails && !user?.settings?.isExperimentalFeatures"
          class="text-center"
@ -105,7 +105,7 @@
            [isLoading]="isLoadingPerformance"
            [options]="dateRangeOptions"
            (change)="onChangeDateRange($event.value)"
-          ></gf-toggle>
+          />
        </div>
      </div>
    </div>
--- a/apps/client/src/app/components/home-summary/home-summary.html
+++ b/apps/client/src/app/components/home-summary/home-summary.html
@ -12,7 +12,7 @@
            [locale]="user?.settings?.locale"
            [summary]="summary"
            (emergencyFundChanged)="onChangeEmergencyFund($event)"
-          ></gf-portfolio-summary>
+          />
        </mat-card-content>
      </mat-card>
    </div>
--- a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
+++ b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
@ -2,7 +2,7 @@
  mat-dialog-title
  [title]="data.title"
  (closeButtonClicked)="onClose()"
-></gf-dialog-header>
+/>

 <div class="py-3" mat-dialog-content>
  <div class="align-items-center d-flex flex-column">
--- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
+++ b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
@ -41,7 +41,7 @@
        [isCurrency]="true"
        [locale]="locale"
        [value]="isLoading ? undefined : performance?.currentNetPerformance"
-      ></gf-value>
+      />
    </div>
    <div class="col">
      <gf-value
@ -51,7 +51,7 @@
        [value]="
          isLoading ? undefined : performance?.currentNetPerformancePercent
        "
-      ></gf-value>
+      />
    </div>
  </div>
 </div>
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
+++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
@ -2,7 +2,7 @@
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Time in Market</div>
    <div class="justify-content-end">
-      <gf-value class="justify-content-end" [value]="timeInMarket"></gf-value>
+      <gf-value class="justify-content-end" [value]="timeInMarket" />
    </div>
  </div>
  <div
@ -26,7 +26,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.totalBuy"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
@ -38,7 +38,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.totalSell"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="row">
@ -53,7 +53,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.committedFunds"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
@ -65,7 +65,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.currentGrossPerformance"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
@ -87,7 +87,7 @@
        [value]="
          isLoading ? undefined : summary?.currentGrossPerformancePercent
        "
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
@ -100,7 +100,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.fees"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="row">
@ -115,7 +115,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.currentNetPerformance"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
@ -135,7 +135,7 @@
        [isPercent]="true"
        [locale]="locale"
        [value]="isLoading ? undefined : summary?.currentNetPerformancePercent"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="row">
@ -151,7 +151,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.currentValue"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
@ -163,7 +163,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.items"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
@ -184,7 +184,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.emergencyFund?.total"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
@ -197,7 +197,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.emergencyFund?.cash"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
@ -210,7 +210,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.emergencyFund?.assets"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
@ -222,7 +222,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.cash"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
@ -234,7 +234,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.excludedAccountsAndActivities"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="row">
@ -254,7 +254,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.liabilities"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="row">
@ -269,7 +269,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.netWorth"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
@ -284,7 +284,7 @@
        [isPercent]="true"
        [locale]="locale"
        [value]="isLoading ? undefined : summary?.annualizedPerformancePercent"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="row">
@ -299,7 +299,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.interest"
-      ></gf-value>
+      />
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
@ -311,7 +311,7 @@
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.dividend"
-      ></gf-value>
+      />
    </div>
  </div>
 </div>
--- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
+++ b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
@ -4,7 +4,7 @@
  [deviceType]="data.deviceType"
  [title]="SymbolProfile?.name ?? SymbolProfile?.symbol"
  (closeButtonClicked)="onClose()"
-></gf-dialog-header>
+/>

 <div class="flex-grow-1" mat-dialog-content>
  <div class="container p-0">
@ -16,7 +16,7 @@
          [locale]="data.locale"
          [unit]="data.baseCurrency"
          [value]="value"
-        ></gf-value>
+        />
      </div>
    </div>

@ -33,7 +33,7 @@
      [showXAxis]="true"
      [showYAxis]="true"
      [symbol]="data.symbol"
-    ></gf-line-chart>
+    />

    <div class="row">
      <div class="col-6 mb-3">
@ -222,7 +222,7 @@
              [locale]="data.locale"
              [maxItems]="10"
              [positions]="sectors"
-            ></gf-portfolio-proportion-chart>
+            />
          </div>
          <div class="col-md-6 mb-3">
            <div class="h5" i18n>Countries</div>
@ -234,7 +234,7 @@
              [locale]="data.locale"
              [maxItems]="10"
              [positions]="countries"
-            ></gf-portfolio-proportion-chart>
+            />
          </div>
        </ng-template>
      </ng-container>
@ -266,7 +266,7 @@
          [sortDisabled]="true"
          [totalItems]="totalItems"
          (export)="onExport()"
-        ></gf-activities-table-lazy>
+        />
        <gf-activities-table
          *ngIf="user?.settings?.isExperimentalFeatures !== true"
          [activities]="activities"
@ -280,7 +280,7 @@
          [showActions]="false"
          [showNameColumn]="false"
          (export)="onExport()"
-        ></gf-activities-table>
+        />
      </div>
    </div>

@ -314,4 +314,4 @@
  mat-dialog-actions
  [deviceType]="data.deviceType"
  (closeButtonClicked)="onClose()"
-></gf-dialog-footer>
+/>
--- a/apps/client/src/app/components/position/position.component.html
+++ b/apps/client/src/app/components/position/position.component.html
@ -18,7 +18,7 @@
          [marketState]="position?.marketState"
          [range]="range"
          [value]="position?.netPerformancePercentage"
-        ></gf-trend-indicator>
+        />
      </div>
      <div *ngIf="isLoading" class="flex-grow-1">
        <ngx-skeleton-loader
@ -50,13 +50,13 @@
            [locale]="locale"
            [unit]="baseCurrency"
            [value]="position?.netPerformance"
-          ></gf-value>
+          />
          <gf-value
            [colorizeSign]="true"
            [isPercent]="true"
            [locale]="locale"
            [value]="position?.netPerformancePercentage"
-          ></gf-value>
+          />
        </div>
      </div>
      <div class="align-items-center d-flex">
--- a/apps/client/src/app/components/positions/positions.component.html
+++ b/apps/client/src/app/components/positions/positions.component.html
@ -2,7 +2,7 @@
  <div class="row no-gutters">
    <div class="col">
      <ng-container *ngIf="positions === undefined">
-        <gf-position [isLoading]="true"></gf-position>
+        <gf-position [isLoading]="true" />
      </ng-container>
      <ng-container *ngIf="positions !== undefined">
        <ng-container *ngIf="hasPositions">
@ -13,7 +13,7 @@
            [locale]="locale"
            [position]="position"
            [range]="range"
-          ></gf-position>
+          />
          <gf-position
            *ngFor="let position of positionsRest"
            [baseCurrency]="baseCurrency"
@ -21,15 +21,13 @@
            [locale]="locale"
            [position]="position"
            [range]="range"
-          ></gf-position>
+          />
        </ng-container>
        <div
          *ngIf="hasPermissionToCreateOrder && !hasPositions"
          class="p-3 text-center"
        >
-          <gf-no-transactions-info-indicator
-            [hasBorder]="false"
-          ></gf-no-transactions-info-indicator>
+          <gf-no-transactions-info-indicator [hasBorder]="false" />
        </div>
      </ng-container>
    </div>
--- a/apps/client/src/app/components/rules/rules.component.html
+++ b/apps/client/src/app/components/rules/rules.component.html
@ -7,15 +7,13 @@
        class="my-2 text-center"
      >
        <mat-card-content>
-          <gf-no-transactions-info-indicator
-            [hasBorder]="false"
-          ></gf-no-transactions-info-indicator
-        ></mat-card-content>
+          <gf-no-transactions-info-indicator [hasBorder]="false" />
+        </mat-card-content>
      </mat-card>

-      <gf-rule *ngIf="rules?.length === 0" [isLoading]="true"></gf-rule>
+      <gf-rule *ngIf="rules?.length === 0" [isLoading]="true" />
      <ng-container *ngIf="rules !== null && rules !== undefined">
-        <gf-rule *ngFor="let rule of rules" [rule]="rule"></gf-rule>
+        <gf-rule *ngFor="let rule of rules" [rule]="rule" />
      </ng-container>
    </div>
  </div>
--- a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
+++ b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
@ -7,10 +7,7 @@
  <div>
    <h5 class="align-items-center d-flex justify-content-center mb-3">
      <span>Ghostfolio Premium</span>
-      <gf-premium-indicator
-        class="ml-1"
-        [enableLink]="false"
-      ></gf-premium-indicator>
+      <gf-premium-indicator class="ml-1" [enableLink]="false" />
    </h5>
    <div class="font-weight-normal h5 mb-3 text-center" i18n>
      Are you an ambitious investor who needs the full picture?
--- a/apps/client/src/app/components/user-account-access/user-account-access.html
+++ b/apps/client/src/app/components/user-account-access/user-account-access.html
@ -6,13 +6,13 @@
    <gf-premium-indicator
      *ngIf="user?.subscription?.type === 'Basic'"
      class="ml-1"
-    ></gf-premium-indicator>
+    />
  </h1>
  <gf-access-table
    [accesses]="accesses"
    [showActions]="hasPermissionToDeleteAccess"
    (accessDeleted)="onDeleteAccess($event)"
-  ></gf-access-table>
+  />
  <div *ngIf="hasPermissionToCreateAccess" class="fab-container">
    <a
      class="align-items-center d-flex justify-content-center"
--- a/apps/client/src/app/components/user-account-membership/user-account-membership.html
+++ b/apps/client/src/app/components/user-account-membership/user-account-membership.html
@ -5,7 +5,7 @@
        <gf-membership-card
          [expiresAt]="user?.subscription?.expiresAt | date: defaultDateFormat"
          [name]="user?.subscription?.type"
-        ></gf-membership-card>
+        />
        <div
          *ngIf="user?.subscription?.type === 'Basic'"
          class="d-flex flex-column mt-5"
@ -43,8 +43,8 @@
              <gf-premium-indicator
                class="d-inline-block ml-1"
                [enableLink]="false"
-              ></gf-premium-indicator
-            ></a>
+              />
+            </a>
            <a
              *ngIf="hasPermissionToUpdateUserSettings"
              class="mx-1"
--- a/apps/client/src/app/pages/accounts/accounts-page.html
+++ b/apps/client/src/app/pages/accounts/accounts-page.html
@ -15,7 +15,7 @@
          (accountDeleted)="onDeleteAccount($event)"
          (accountToUpdate)="onUpdateAccount($event)"
          (transferBalance)="onTransferBalance()"
-        ></gf-accounts-table>
+        />
      </div>
    </div>
  </div>
--- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html
+++ b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html
@ -61,7 +61,7 @@
                class="mr-1"
                [tooltip]="platformEntry.name"
                [url]="platformEntry.url"
-              ></gf-symbol-icon>
+              />
              <span>{{ platformEntry.name }}</span>
            </span>
          </mat-option>
--- a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html
+++ b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html
@ -17,8 +17,7 @@
                class="mr-1"
                [tooltip]="account.Platform?.name"
                [url]="account.Platform?.url"
-              ></gf-symbol-icon
-              ><span>{{ account.name }}</span>
+              /><span>{{ account.name }}</span>
            </div>
          </mat-option>
        </mat-select>
@ -35,8 +34,7 @@
                class="mr-1"
                [tooltip]="account.Platform?.name"
                [url]="account.Platform?.url"
-              ></gf-symbol-icon
-              ><span>{{ account.name }}</span>
+              /><span>{{ account.name }}</span>
            </div>
          </mat-option>
        </mat-select>
--- a/apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.html
+++ b/apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.html
@ -20,8 +20,8 @@
              <gf-premium-indicator
                class="d-inline-block ml-1"
                [enableLink]="false"
-              ></gf-premium-indicator
-            ></span>
+              />
+            </span>
            annual plan for ambitious investors who need the full picture of
            their financial assets.
          </p>
--- a/apps/client/src/app/pages/blog/2023/11/black-week-2023/black-week-2023-page.html
+++ b/apps/client/src/app/pages/blog/2023/11/black-week-2023/black-week-2023-page.html
@ -21,8 +21,8 @@
              <gf-premium-indicator
                class="d-inline-block ml-1"
                [enableLink]="false"
-              ></gf-premium-indicator
-            ></span>
+              />
+            </span>
            annual plan with our exclusive Black Week deal. Elevate your
            financial strategy with the power of Ghostfolio designed to give you
            the full picture of your assets.
--- a/apps/client/src/app/pages/features/features-page.html
+++ b/apps/client/src/app/pages/features/features-page.html
@ -142,7 +142,7 @@
                  <gf-premium-indicator
                    *ngIf="hasPermissionForSubscription"
                    class="ml-1"
-                  ></gf-premium-indicator>
+                  />
                </h4>
                <p class="m-0">
                  Check the rate of return of your portfolio for
@ -162,7 +162,7 @@
                  <gf-premium-indicator
                    *ngIf="hasPermissionForSubscription"
                    class="ml-1"
-                  ></gf-premium-indicator>
+                  />
                </h4>
                <p class="m-0">
                  Check the allocations of your portfolio by account, asset
@ -207,7 +207,7 @@
              <div class="flex-grow-1">
                <h4 class="align-items-center d-flex">
                  <span i18n>Market Mood</span>
-                  <gf-premium-indicator class="ml-1"></gf-premium-indicator>
+                  <gf-premium-indicator class="ml-1" />
                </h4>
                <p class="m-0">
                  Check the current market mood (<a
@ -228,7 +228,7 @@
                  <gf-premium-indicator
                    *ngIf="hasPermissionForSubscription"
                    class="ml-1"
-                  ></gf-premium-indicator>
+                  />
                </h4>
                <p class="m-0">
                  Identify potential risks in your portfolio with Ghostfolio
--- a/apps/client/src/app/pages/landing/landing-page.html
+++ b/apps/client/src/app/pages/landing/landing-page.html
@ -328,11 +328,7 @@
      <gf-carousel [aria-label]="'Testimonials'">
        <div *ngFor="let testimonial of testimonials" gf-carousel-item>
          <div class="d-flex px-4">
-            <gf-logo
-              class="mr-3 mt-2 pt-1"
-              size="medium"
-              [showLabel]="false"
-            ></gf-logo>
+            <gf-logo class="mr-3 mt-2 pt-1" size="medium" [showLabel]="false" />
            <div>
              <div>{{ testimonial.quote }}</div>
              <div class="mt-2 text-muted">
@ -361,10 +357,7 @@
      </h2>
    </div>
    <div class="col-md-8 customer-map-container offset-md-2">
-      <gf-world-map-chart
-        format="👻"
-        [countries]="countriesOfSubscribersMap"
-      ></gf-world-map-chart>
+      <gf-world-map-chart format="👻" [countries]="countriesOfSubscribersMap" />
    </div>
  </div>

@ -450,7 +443,7 @@
    <div
      class="align-items-center d-flex flex-column justify-content-center w-100"
    >
-      <gf-logo size="medium"></gf-logo>
+      <gf-logo size="medium" />
      <div>Wealth Management Software</div>
    </div>
  </div>
--- a/apps/client/src/app/pages/markets/markets-page.html
+++ b/apps/client/src/app/pages/markets/markets-page.html
@ -1,7 +1,7 @@
 <div class="container">
  <div class="row">
    <div class="col">
-      <gf-home-market></gf-home-market>
+      <gf-home-market />
    </div>
  </div>
 </div>
--- a/apps/client/src/app/pages/portfolio/activities/activities-page.html
+++ b/apps/client/src/app/pages/portfolio/activities/activities-page.html
@ -26,7 +26,7 @@
        (importDividends)="onImportDividends()"
        (pageChanged)="onChangePage($event)"
        (sortChanged)="onSortChanged($event)"
-      ></gf-activities-table-lazy>
+      />
      <gf-activities-table
        *ngIf="user?.settings?.isExperimentalFeatures !== true"
        [activities]="activities"
@ -44,7 +44,7 @@
        (exportDrafts)="onExportDrafts($event)"
        (import)="onImport()"
        (importDividends)="onImportDividends()"
-      ></gf-activities-table>
+      />
    </div>
  </div>

--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
@ -82,8 +82,7 @@
                class="mr-1"
                [tooltip]="account.Platform?.name"
                [url]="account.Platform?.url"
-              ></gf-symbol-icon
-              ><span>{{ account.name }}</span>
+              /><span>{{ account.name }}</span>
            </div>
          </mat-option>
        </mat-select>
@ -357,7 +356,7 @@
      [locale]="data.user?.settings?.locale"
      [unit]="activityForm.controls['currency']?.value ?? data.user?.settings?.baseCurrency"
      [value]="total"
-    ></gf-value>
+    />
    <div>
      <button i18n mat-button type="button" (click)="onCancel()">Cancel</button>
      <button
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
@ -3,7 +3,7 @@
  [deviceType]="data.deviceType"
  [title]="dialogTitle"
  (closeButtonClicked)="onCancel()"
-></gf-dialog-header>
+/>

 <div class="flex-grow-1" mat-dialog-content>
  <mat-stepper
@ -136,7 +136,7 @@
            [sortDisabled]="true"
            [totalItems]="totalItems"
            (selectedActivities)="updateSelection($event)"
-          ></gf-activities-table-lazy>
+          />
          <gf-activities-table
            *ngIf="importStep === 1 && data?.user?.settings?.isExperimentalFeatures !== true"
            [activities]="activities"
@ -153,7 +153,7 @@
            [showFooter]="false"
            [showSymbolColumn]="false"
            (selectedActivities)="updateSelection($event)"
-          ></gf-activities-table>
+          />
          <div class="d-flex justify-content-end mt-3">
            <button mat-button (click)="onReset(stepper)">
              <ng-container i18n>Back</ng-container>
@ -214,4 +214,4 @@
  mat-dialog-actions
  [deviceType]="data.deviceType"
  (closeButtonClicked)="onCancel()"
-></gf-dialog-footer>
+/>
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
@ -7,7 +7,7 @@
        [isLoading]="isLoading"
        [placeholder]="placeholder"
        (valueChanged)="filters$.next($event)"
-      ></gf-activities-filter>
+      />
    </div>
  </div>
  <div class="row">
@ -22,7 +22,7 @@
            size="medium"
            [isPercent]="true"
            [value]="isLoading ? undefined : portfolioDetails?.filteredValueInPercentage"
-          ></gf-value>
+          />
        </mat-card-header>
        <mat-card-content>
          <mat-progress-bar
@ -50,7 +50,7 @@
            [keys]="['id']"
            [locale]="user?.settings?.locale"
            [positions]="platforms"
-          ></gf-portfolio-proportion-chart>
+          />
        </mat-card-content>
      </mat-card>
    </div>
@ -62,8 +62,8 @@
            <gf-premium-indicator
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1"
-            ></gf-premium-indicator
-          ></mat-card-title>
+            />
+          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
@ -73,7 +73,7 @@
            [keys]="['currency']"
            [locale]="user?.settings?.locale"
            [positions]="positions"
-          ></gf-portfolio-proportion-chart>
+          />
        </mat-card-content>
      </mat-card>
    </div>
@ -85,8 +85,8 @@
            ><gf-premium-indicator
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1"
-            ></gf-premium-indicator
-          ></mat-card-title>
+            />
+          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
@ -96,7 +96,7 @@
            [keys]="['assetClassLabel', 'assetSubClassLabel']"
            [locale]="user?.settings?.locale"
            [positions]="positions"
-          ></gf-portfolio-proportion-chart>
+          />
        </mat-card-content>
      </mat-card>
    </div>
@ -119,7 +119,7 @@
            [positions]="symbols"
            [showLabels]="deviceType !== 'mobile'"
            (proportionChartClicked)="onSymbolChartClicked($event)"
-          ></gf-portfolio-proportion-chart>
+          />
        </mat-card-content>
      </mat-card>
    </div>
@ -131,8 +131,8 @@
            ><gf-premium-indicator
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1"
-            ></gf-premium-indicator
-          ></mat-card-title>
+            />
+          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
@ -143,7 +143,7 @@
            [locale]="user?.settings?.locale"
            [maxItems]="10"
            [positions]="sectors"
-          ></gf-portfolio-proportion-chart>
+          />
        </mat-card-content>
      </mat-card>
    </div>
@ -155,8 +155,8 @@
            ><gf-premium-indicator
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1"
-            ></gf-premium-indicator
-          ></mat-card-title>
+            />
+          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
@ -166,7 +166,7 @@
            [keys]="['name']"
            [locale]="user?.settings?.locale"
            [positions]="continents"
-          ></gf-portfolio-proportion-chart>
+          />
        </mat-card-content>
      </mat-card>
    </div>
@ -178,8 +178,8 @@
            ><gf-premium-indicator
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1"
-            ></gf-premium-indicator
-          ></mat-card-title>
+            />
+          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
@ -188,7 +188,7 @@
            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
            [locale]="user?.settings?.locale"
            [positions]="marketsAdvanced"
-          ></gf-portfolio-proportion-chart>
+          />
        </mat-card-content>
      </mat-card>
    </div>
@ -202,8 +202,8 @@
            ><gf-premium-indicator
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1"
-            ></gf-premium-indicator
-          ></mat-card-title>
+            />
+          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <div class="world-map-chart-container">
@ -212,7 +212,7 @@
              [format]="worldMapChartFormat"
              [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
              [locale]="user?.settings?.locale"
-            ></gf-world-map-chart>
+            />
          </div>
          <div class="row">
            <div class="col-xs-12 col-md my-2">
@ -275,7 +275,7 @@
            [locale]="user?.settings?.locale"
            [positions]="accounts"
            (proportionChartClicked)="onAccountChartClicked($event)"
-          ></gf-portfolio-proportion-chart>
+          />
        </mat-card-content>
      </mat-card>
    </div>
@ -287,8 +287,8 @@
            ><gf-premium-indicator
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1"
-            ></gf-premium-indicator
-          ></mat-card-title>
+            />
+          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
@ -298,7 +298,7 @@
            [keys]="['etfProvider']"
            [locale]="user?.settings?.locale"
            [positions]="positions"
-          ></gf-portfolio-proportion-chart>
+          />
        </mat-card-content>
      </mat-card>
    </div>
@ -310,8 +310,8 @@
            ><gf-premium-indicator
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1"
-            ></gf-premium-indicator
-          ></mat-card-title>
+            />
+          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
@ -322,7 +322,7 @@
            [locale]="user?.settings?.locale"
            [maxItems]="10"
            [positions]="countries"
-          ></gf-portfolio-proportion-chart>
+          />
        </mat-card-content>
      </mat-card>
    </div>
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
@ -7,14 +7,14 @@
      [isLoading]="isLoadingBenchmarkComparator || isLoadingInvestmentChart"
      [options]="dateRangeOptions"
      (change)="onChangeDateRange($event.value)"
-    ></gf-toggle>
+    />
  </div>
  <gf-activities-filter
    [allFilters]="allFilters"
    [isLoading]="isLoadingBenchmarkComparator || isLoadingInvestmentChart"
    [placeholder]="placeholder"
    (valueChanged)="filters$.next($event)"
-  ></gf-activities-filter>
+  />
  }
  <div class="mb-5 row">
    <div class="col-lg">
@ -30,7 +30,7 @@
        [performanceDataItems]="performanceDataItemsInPercentage"
        [user]="user"
        (benchmarkChanged)="onChangeBenchmark($event)"
-      ></gf-benchmark-comparator>
+      />
    </div>
  </div>

@ -51,7 +51,7 @@
                [locale]="user?.settings?.locale"
                [unit]="user?.settings?.baseCurrency"
                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformance"
-              ></gf-value>
+              />
            </div>
          </div>
          <div class="d-flex mb-3 ml-3 py-1">
@ -66,7 +66,7 @@
                [isPercent]="true"
                [locale]="user?.settings?.locale"
                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformancePercent"
-              ></gf-value>
+              />
            </div>
          </div>
          <div class="d-flex py-1">
@ -81,7 +81,7 @@
                [locale]="user?.settings?.locale"
                [unit]="user?.settings?.baseCurrency"
                [value]="isLoadingInvestmentChart ? undefined : (performance?.currentNetPerformanceWithCurrencyEffect === null ? null : performance?.currentNetPerformanceWithCurrencyEffect - performance?.currentNetPerformance)"
-              ></gf-value>
+              />
            </div>
          </div>
          <div class="d-flex ml-3 py-1">
@ -96,7 +96,7 @@
                [isPercent]="true"
                [locale]="user?.settings?.locale"
                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformancePercentWithCurrencyEffect - performance?.currentNetPerformancePercent"
-              ></gf-value>
+              />
            </div>
          </div>
          <div><hr /></div>
@ -112,7 +112,7 @@
                [locale]="user?.settings?.locale"
                [unit]="user?.settings?.baseCurrency"
                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformanceWithCurrencyEffect"
-              ></gf-value>
+              />
            </div>
          </div>
          <div class="d-flex ml-3 py-1">
@ -127,7 +127,7 @@
                [isPercent]="true"
                [locale]="user?.settings?.locale"
                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformancePercentWithCurrencyEffect"
-              ></gf-value>
+              />
            </div>
          </div>
        </mat-card-content>
@ -167,7 +167,7 @@
                    [isPercent]="true"
                    [locale]="user?.settings?.locale"
                    [value]="position.netPerformancePercentage"
-                  ></gf-value>
+                  />
                </div>
              </a>
            </li>
@ -215,7 +215,7 @@
                    [isPercent]="true"
                    [locale]="user?.settings?.locale"
                    [value]="position.netPerformancePercentage"
-                  ></gf-value>
+                  />
                </div>
              </a>
            </li>
@ -245,7 +245,7 @@
          <gf-premium-indicator
            *ngIf="user?.subscription?.type === 'Basic'"
            class="ml-1"
-          ></gf-premium-indicator>
+          />
        </div>
      </div>
      <div class="chart-container">
@ -260,7 +260,7 @@
          [isLoading]="isLoadingInvestmentChart"
          [locale]="user?.settings?.locale"
          [range]="user?.settings?.dateRange"
-        ></gf-investment-chart>
+        />
      </div>
    </div>
  </div>
@ -275,7 +275,7 @@
          <gf-premium-indicator
            *ngIf="user?.subscription?.type === 'Basic'"
            class="ml-1"
-          ></gf-premium-indicator>
+          />
        </div>
        <gf-toggle
          class="d-none d-lg-block"
@ -283,7 +283,7 @@
          [isLoading]="false"
          [options]="modeOptions"
          (change)="onChangeGroupBy($event.value)"
-        ></gf-toggle>
+        />
      </div>
      <div *ngIf="streaks" class="row">
        <div class="col-md-6 col-xs-12 my-2">
@ -317,7 +317,7 @@
          [locale]="user?.settings?.locale"
          [range]="user?.settings?.dateRange"
          [savingsRate]="savingsRate"
-        ></gf-investment-chart>
+        />
      </div>
    </div>
  </div>
@ -332,7 +332,7 @@
          <gf-premium-indicator
            *ngIf="user?.subscription?.type === 'Basic'"
            class="ml-1"
-          ></gf-premium-indicator>
+          />
        </div>
        <gf-toggle
          class="d-none d-lg-block"
@ -340,7 +340,7 @@
          [isLoading]="false"
          [options]="modeOptions"
          (change)="onChangeGroupBy($event.value)"
-        ></gf-toggle>
+        />
      </div>
      <div class="chart-container">
        <gf-investment-chart
@ -353,7 +353,7 @@
          [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
          [locale]="user?.settings?.locale"
          [range]="user?.settings?.dateRange"
-        ></gf-investment-chart>
+        />
      </div>
    </div>
  </div>
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.html
+++ b/apps/client/src/app/pages/portfolio/fire/fire-page.html
@ -8,7 +8,7 @@
          ><gf-premium-indicator
            *ngIf="user?.subscription?.type === 'Basic'"
            class="ml-1"
-          ></gf-premium-indicator>
+          />
        </h4>
        <gf-fire-calculator
          [annualInterestRate]="user?.settings?.annualInterestRate"
@ -25,7 +25,7 @@
          (projectedTotalAmountChanged)="onProjectedTotalAmountChange($event)"
          (retirementDateChanged)="onRetirementDateChange($event)"
          (savingsRateChanged)="onSavingsRateChange($event)"
-        ></gf-fire-calculator>
+        />
      </div>
    </div>
  </div>
@ -35,7 +35,7 @@
      ><gf-premium-indicator
        *ngIf="user?.subscription?.type === 'Basic'"
        class="ml-1"
-      ></gf-premium-indicator>
+      />
    </h4>
    <div *ngIf="isLoading">
      <ngx-skeleton-loader
@ -63,7 +63,7 @@
          [locale]="user?.settings?.locale"
          [unit]="user?.settings?.baseCurrency"
          [value]="withdrawalRatePerYear?.toNumber()"
-        ></gf-value>
+        />
        per year</span
      >
      or
@ -74,7 +74,7 @@
          [locale]="user?.settings?.locale"
          [unit]="user?.settings?.baseCurrency"
          [value]="withdrawalRatePerMonth?.toNumber()"
-        ></gf-value>
+        />
        per month</span
      >, based on your total assets of
      <span class="font-weight-bold"
@ -84,8 +84,8 @@
          [locale]="user?.settings?.locale"
          [unit]="user?.settings?.baseCurrency"
          [value]="fireWealth?.toNumber()"
-        ></gf-value
-      ></span>
+        />
+      </span>
      and a withdrawal rate of 4%.
    </div>
  </div>
@ -112,12 +112,12 @@
          ><gf-premium-indicator
            *ngIf="user?.subscription?.type === 'Basic'"
            class="ml-1"
-          ></gf-premium-indicator>
+          />
        </h4>
        <gf-rules
          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
          [rules]="emergencyFundRules"
-        ></gf-rules>
+        />
      </div>
      <div class="mb-4">
        <h4 class="align-items-center d-flex m-0">
@ -125,12 +125,12 @@
          ><gf-premium-indicator
            *ngIf="user?.subscription?.type === 'Basic'"
            class="ml-1"
-          ></gf-premium-indicator>
+          />
        </h4>
        <gf-rules
          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
          [rules]="currencyClusterRiskRules"
-        ></gf-rules>
+        />
      </div>
      <div class="mb-4">
        <h4 class="align-items-center d-flex m-0">
@ -138,12 +138,12 @@
          ><gf-premium-indicator
            *ngIf="user?.subscription?.type === 'Basic'"
            class="ml-1"
-          ></gf-premium-indicator>
+          />
        </h4>
        <gf-rules
          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
          [rules]="accountClusterRiskRules"
-        ></gf-rules>
+        />
      </div>
      <div>
        <h4 class="align-items-center d-flex m-0">
@ -151,12 +151,12 @@
          ><gf-premium-indicator
            *ngIf="user?.subscription?.type === 'Basic'"
            class="ml-1"
-          ></gf-premium-indicator>
+          />
        </h4>
        <gf-rules
          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
          [rules]="feeRules"
-        ></gf-rules>
+        />
      </div>
    </div>
  </div>
--- a/apps/client/src/app/pages/portfolio/holdings/holdings-page.html
+++ b/apps/client/src/app/pages/portfolio/holdings/holdings-page.html
@ -8,7 +8,7 @@
        [isLoading]="isLoading"
        [placeholder]="placeholder"
        (valueChanged)="filters$.next($event)"
-      ></gf-activities-filter>
+      />
      }
    </div>
  </div>
@ -20,7 +20,7 @@
        [hasPermissionToCreateActivity]="hasPermissionToCreateOrder"
        [holdings]="holdings"
        [locale]="user?.settings?.locale"
-      ></gf-holdings-table>
+      />
      <div
        *ngIf="hasPermissionToCreateOrder && holdings?.length > 0"
        class="text-center"
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/apps/client/src/app/pages/pricing/pricing-page.html
@ -171,10 +171,7 @@
                <div class="align-items-center d-flex mb-2">
                  <h4 class="align-items-center d-flex flex-grow-1 m-0">
                    <span>Premium</span>
-                    <gf-premium-indicator
-                      class="ml-1"
-                      [enableLink]="false"
-                    ></gf-premium-indicator>
+                    <gf-premium-indicator class="ml-1" [enableLink]="false" />
                  </h4>
                  <div *ngIf="user?.subscription?.type === 'Premium'">
                    <ion-icon class="mr-1" name="checkmark-outline" />
--- a/apps/client/src/app/pages/public/public-page.html
+++ b/apps/client/src/app/pages/public/public-page.html
@ -20,7 +20,7 @@
            [keys]="['symbol']"
            [positions]="symbols"
            [showLabels]="deviceType !== 'mobile'"
-          ></gf-portfolio-proportion-chart>
+          />
        </mat-card-content>
      </mat-card>
    </div>
@ -35,7 +35,7 @@
            [keys]="['currency']"
            [maxItems]="10"
            [positions]="positions"
-          ></gf-portfolio-proportion-chart>
+          />
        </mat-card-content>
      </mat-card>
    </div>
@ -50,7 +50,7 @@
            [keys]="['name']"
            [maxItems]="10"
            [positions]="sectors"
-          ></gf-portfolio-proportion-chart>
+          />
        </mat-card-content>
      </mat-card>
    </div>
@ -64,7 +64,7 @@
            [isInPercent]="true"
            [keys]="['name']"
            [positions]="continents"
-          ></gf-portfolio-proportion-chart>
+          />
        </mat-card-content>
      </mat-card>
    </div>
@ -81,7 +81,7 @@
              format="{0}%"
              [countries]="countries"
              [isInPercent]="true"
-            ></gf-world-map-chart>
+            />
          </div>
          <div class="row">
            <div class="col-xs-12 col-md my-2">
@ -135,7 +135,7 @@
        [hasPermissionToShowValues]="false"
        [holdings]="holdings"
        [pageSize]="7"
-      ></gf-holdings-table>
+      />
    </div>
  </div>
  <div class="row my-5">
--- a/apps/client/src/app/pages/register/register-page.html
+++ b/apps/client/src/app/pages/register/register-page.html
@ -9,7 +9,7 @@
    <div
      class="align-items-center d-flex flex-column justify-content-center w-100"
    >
-      <gf-logo size="large"></gf-logo>
+      <gf-logo size="large" />
      <p class="lead m-0">Wealth Management Software</p>
    </div>
  </div>
--- a/apps/client/src/app/pages/webauthn/webauthn-page.html
+++ b/apps/client/src/app/pages/webauthn/webauthn-page.html
@ -4,7 +4,7 @@
      <div
        class="align-items-center d-flex flex-column justify-content-center mb-4 w-100"
      >
-        <gf-logo size="medium"></gf-logo>
+        <gf-logo size="medium" />
      </div>

      <div *ngIf="!hasError" class="col d-flex justify-content-center">
--- a/apps/client/src/index.html
+++ b/apps/client/src/index.html
@ -48,7 +48,7 @@
    <link href="../assets/site.webmanifest" rel="manifest" />
  </head>
  <body>
-    <gf-root></gf-root>
+    <gf-root />

    <script src="../ionicons/ionicons.esm.js" type="module"></script>
    <script nomodule="" src="ionicons.js"></script>
--- a/libs/ui/src/lib/account-balances/account-balances.component.html
+++ b/libs/ui/src/lib/account-balances/account-balances.component.html
@ -26,7 +26,7 @@
          [locale]="locale"
          [unit]="element?.Account?.currency"
          [value]="element?.value"
-        ></gf-value>
+        />
      </div>
    </td>
  </ng-container>
--- a/libs/ui/src/lib/activities-table-lazy/activities-table-lazy.component.html
+++ b/libs/ui/src/lib/activities-table-lazy/activities-table-lazy.component.html
@ -120,7 +120,7 @@
          [dataSource]="element.SymbolProfile?.dataSource"
          [symbol]="element.SymbolProfile?.symbol"
          [tooltip]="element.SymbolProfile?.name"
-        ></gf-symbol-icon>
+        />
        <div>{{ element.dataSource }}</div>
      </td>
    </ng-container>
@ -154,7 +154,7 @@
        <ng-container i18n>Type</ng-container>
      </th>
      <td *matCellDef="let element" class="px-1" mat-cell>
-        <gf-activity-type [activityType]="element.type"></gf-activity-type>
+        <gf-activity-type [activityType]="element.type" />
      </td>
    </ng-container>

@ -188,7 +188,7 @@
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.quantity"
-          ></gf-value>
+          />
        </div>
      </td>
    </ng-container>
@ -212,7 +212,7 @@
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.unitPrice"
-          ></gf-value>
+          />
        </div>
      </td>
    </ng-container>
@ -236,7 +236,7 @@
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.fee"
-          ></gf-value>
+          />
        </div>
      </td>
    </ng-container>
@ -259,7 +259,7 @@
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.value"
-          ></gf-value>
+          />
        </div>
      </td>
    </ng-container>
@ -291,7 +291,7 @@
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.valueInBaseCurrency"
-          ></gf-value>
+          />
        </div>
      </td>
    </ng-container>
@ -307,7 +307,7 @@
            class="mr-1"
            [tooltip]="element.Account?.Platform?.name"
            [url]="element.Account?.Platform?.url"
-          ></gf-symbol-icon>
+          />
          <span class="d-none d-lg-block">{{ element.Account?.name }}</span>
        </div>
      </td>
@ -486,7 +486,5 @@
  "
  class="p-3 text-center"
 >
-  <gf-no-transactions-info-indicator
-    [hasBorder]="false"
-  ></gf-no-transactions-info-indicator>
+  <gf-no-transactions-info-indicator [hasBorder]="false" />
 </div>
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/libs/ui/src/lib/activities-table/activities-table.component.html
@ -4,7 +4,7 @@
  [ngClass]="{ 'd-none': !hasPermissionToFilter }"
  [placeholder]="placeholder"
  (valueChanged)="filters$.next($event)"
-></gf-activities-filter>
+/>

 <div *ngIf="hasPermissionToCreateActivity" class="d-flex justify-content-end">
  <button
@ -164,7 +164,7 @@
        <ng-container i18n>Type</ng-container>
      </th>
      <td *matCellDef="let element" class="px-1" mat-cell>
-        <gf-activity-type [activityType]="element.type"></gf-activity-type>
+        <gf-activity-type [activityType]="element.type" />
      </td>
      <td *matFooterCellDef class="px-1" mat-footer-cell></td>
    </ng-container>
@ -239,7 +239,7 @@
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.quantity"
-          ></gf-value>
+          />
        </div>
      </td>
      <td
@ -268,7 +268,7 @@
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.unitPrice"
-          ></gf-value>
+          />
        </div>
      </td>
      <td
@ -297,7 +297,7 @@
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.fee"
-          ></gf-value>
+          />
        </div>
      </td>
      <td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell>
@ -306,7 +306,7 @@
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : totalFees"
-          ></gf-value>
+          />
        </div>
      </td>
    </ng-container>
@ -330,7 +330,7 @@
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.value"
-          ></gf-value>
+          />
        </div>
      </td>
      <td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell>
@ -341,7 +341,7 @@
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : totalValue"
-          ></gf-value>
+          />
        </div>
      </td>
    </ng-container>
@ -361,7 +361,7 @@
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.valueInBaseCurrency"
-          ></gf-value>
+          />
        </div>
      </td>
      <td *matFooterCellDef class="d-lg-none d-xl-none px-1" mat-footer-cell>
@ -372,7 +372,7 @@
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : totalValue"
-          ></gf-value>
+          />
        </div>
      </td>
    </ng-container>
@ -393,7 +393,7 @@
            class="mr-1"
            [tooltip]="element.Account?.Platform?.name"
            [url]="element.Account?.Platform?.url"
-          ></gf-symbol-icon>
+          />
          <span class="d-none d-lg-block">{{ element.Account?.name }}</span>
        </div>
      </td>
@ -587,7 +587,5 @@
  "
  class="p-3 text-center"
 >
-  <gf-no-transactions-info-indicator
-    [hasBorder]="false"
-  ></gf-no-transactions-info-indicator>
+  <gf-no-transactions-info-indicator [hasBorder]="false" />
 </div>
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.html
+++ b/libs/ui/src/lib/holdings-table/holdings-table.component.html
@ -14,7 +14,7 @@
          [dataSource]="element.dataSource"
          [symbol]="element.symbol"
          [tooltip]="element.name"
-        ></gf-symbol-icon>
+        />
      </td>
    </ng-container>

@ -59,7 +59,7 @@
            [isDate]="element.dateOfFirstActivity ? true : false"
            [locale]="locale"
            [value]="element.dateOfFirstActivity ?? ''"
-          ></gf-value>
+          />
        </div>
      </td>
    </ng-container>
@ -83,7 +83,7 @@
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.valueInBaseCurrency"
-          ></gf-value>
+          />
        </div>
      </td>
    </ng-container>
@ -104,7 +104,7 @@
            [isPercent]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.allocationInPercentage"
-          ></gf-value>
+          />
        </div>
      </td>
    </ng-container>
@ -126,7 +126,7 @@
            [isPercent]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.netPerformancePercent"
-          ></gf-value>
+          />
        </div>
      </td>
    </ng-container>
@ -179,7 +179,5 @@
  "
  class="p-3 text-center"
 >
-  <gf-no-transactions-info-indicator
-    [hasBorder]="false"
-  ></gf-no-transactions-info-indicator>
+  <gf-no-transactions-info-indicator [hasBorder]="false" />
 </div>
--- a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.html
+++ b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.html
@ -1,6 +1,6 @@
 <div class="p-3">
  <div class="d-flex justify-content-center mb-1">
-    <gf-logo size="large" [showLabel]="false"></gf-logo>
+    <gf-logo size="large" [showLabel]="false" />
  </div>
  <a
    class="align-items-center justify-content-center"