Prettify markup (#3029)

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

@@ -25,7 +25,9 @@
         class="h-100"
         [currency]="user?.settings?.baseCurrency"
         [historicalDataItems]="historicalDataItems"
-        [isInPercent]="data.hasImpersonationId || user.settings.isRestrictedView"
+        [isInPercent]="
+          data.hasImpersonationId || user.settings.isRestrictedView
+        "
         [isLoading]="isLoadingChart"
         [locale]="user?.settings?.locale"
       />
@@ -92,7 +94,9 @@
           [dataSource]="dataSource"
           [deviceType]="data.deviceType"
           [hasPermissionToCreateActivity]="false"
-          [hasPermissionToExportActivities]="!data.hasImpersonationId && !user.settings.isRestrictedView"
+          [hasPermissionToExportActivities]="
+            !data.hasImpersonationId && !user.settings.isRestrictedView
+          "
           [hasPermissionToFilter]="false"
           [hasPermissionToOpenDetails]="false"
           [locale]="user?.settings?.locale"
@@ -113,7 +117,11 @@
           [accountBalances]="accountBalances"
           [accountId]="data.accountId"
           [locale]="user?.settings?.locale"
-          [showActions]="!data.hasImpersonationId && hasPermissionToDeleteAccountBalance && !user.settings.isRestrictedView"
+          [showActions]="
+            !data.hasImpersonationId &&
+            hasPermissionToDeleteAccountBalance &&
+            !user.settings.isRestrictedView
+          "
           (accountBalanceDeleted)="onDeleteAccountBalance($event)"
         />
       </mat-tab>

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

@@ -163,7 +163,12 @@
             <mat-menu #assetProfileActionsMenu="matMenu" xPosition="before">
               <button
                 mat-menu-item
-                (click)="onOpenAssetProfileDialog({ dataSource: element.dataSource, symbol: element.symbol })"
+                (click)="
+                  onOpenAssetProfileDialog({
+                    dataSource: element.dataSource,
+                    symbol: element.symbol
+                  })
+                "
               >
                 <span class="align-items-center d-flex">
                   <ion-icon class="mr-2" name="create-outline" />
@@ -173,7 +178,12 @@
               <button
                 mat-menu-item
                 [disabled]="element.activitiesCount !== 0"
-                (click)="onDeleteProfileData({dataSource: element.dataSource, symbol: element.symbol})"
+                (click)="
+                  onDeleteProfileData({
+                    dataSource: element.dataSource,
+                    symbol: element.symbol
+                  })
+                "
               >
                 <span class="align-items-center d-flex">
                   <ion-icon class="mr-2" name="trash-outline" />
@@ -189,16 +199,19 @@
           *matRowDef="let row; columns: displayedColumns"
           class="cursor-pointer"
           mat-row
-          (click)="onOpenAssetProfileDialog({ dataSource: row.dataSource, symbol: row.symbol })"
+          (click)="
+            onOpenAssetProfileDialog({
+              dataSource: row.dataSource,
+              symbol: row.symbol
+            })
+          "
         ></tr>
       </table>
 
       <mat-paginator
         [length]="totalItems"
         [ngClass]="{
-          'd-none':
+          'd-none': (isLoading && totalItems === 0) || totalItems <= pageSize
-            (isLoading && totalItems === 0) ||
-            totalItems <= pageSize
         }"
         [pageSize]="pageSize"
         [showFirstLastButtons]="true"

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

@@ -25,7 +25,9 @@
         mat-menu-item
         type="button"
         [disabled]="assetProfileForm.dirty"
-        (click)="onGatherSymbol({dataSource: data.dataSource, symbol: data.symbol})"
+        (click)="
+          onGatherSymbol({ dataSource: data.dataSource, symbol: data.symbol })
+        "
       >
         <ng-container i18n>Gather Historical Data</ng-container>
       </button>
@@ -33,7 +35,12 @@
         mat-menu-item
         type="button"
         [disabled]="assetProfileForm.dirty"
-        (click)="onGatherProfileDataBySymbol({dataSource: data.dataSource, symbol: data.symbol})"
+        (click)="
+          onGatherProfileDataBySymbol({
+            dataSource: data.dataSource,
+            symbol: data.symbol
+          })
+        "
       >
         <ng-container i18n>Gather Profile Data</ng-container>
       </button>
@@ -73,7 +80,12 @@
         color="accent"
         mat-flat-button
         type="button"
-        [disabled]="!assetProfileForm.controls['historicalData']?.controls['csvString'].touched || assetProfileForm.controls['historicalData']?.controls['csvString']?.value === ''"
+        [disabled]="
+          !assetProfileForm.controls['historicalData']?.controls['csvString']
+            .touched ||
+          assetProfileForm.controls['historicalData']?.controls['csvString']
+            ?.value === ''
+        "
         (click)="onImportHistoricalData()"
       >
         <ng-container i18n>Import</ng-container>
@@ -129,10 +141,15 @@
         >
       </div>
       <ng-container
-        *ngIf="assetProfile?.countries?.length > 0 || assetProfile?.sectors?.length > 0"
+        *ngIf="
+          assetProfile?.countries?.length > 0 ||
+          assetProfile?.sectors?.length > 0
+        "
       >
-        @if (assetProfile?.countries?.length === 1 &&
+        @if (
-        assetProfile?.sectors?.length === 1 ) {
+          assetProfile?.countries?.length === 1 &&
+          assetProfile?.sectors?.length === 1
+        ) {
           <div *ngIf="assetProfile?.sectors?.length === 1" class="col-6 mb-3">
             <gf-value
               i18n
@@ -222,7 +239,17 @@
           color="primary"
           i18n
           [checked]="isBenchmark"
-          (change)="isBenchmark ? onUnsetBenchmark({dataSource: data.dataSource, symbol: data.symbol}) : onSetBenchmark({dataSource: data.dataSource, symbol: data.symbol})"
+          (change)="
+            isBenchmark
+              ? onUnsetBenchmark({
+                  dataSource: data.dataSource,
+                  symbol: data.symbol
+                })
+              : onSetBenchmark({
+                  dataSource: data.dataSource,
+                  symbol: data.symbol
+                })
+          "
           >Benchmark</mat-checkbox
         >
       </div>
@@ -253,7 +280,9 @@
             color="accent"
             mat-flat-button
             type="button"
-            [disabled]="assetProfileForm.controls['scraperConfiguration'].value === '{}'"
+            [disabled]="
+              assetProfileForm.controls['scraperConfiguration'].value === '{}'
+            "
             (click)="onTestMarketData()"
           >
             <ng-container i18n>Test</ng-container>

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

@@ -112,7 +112,9 @@
               <mat-slide-toggle
                 color="primary"
                 hideIcon="true"
-                [checked]="info.globalPermissions.includes(permissions.createUserAccount)"
+                [checked]="
+                  info.globalPermissions.includes(permissions.createUserAccount)
+                "
                 (change)="onEnableUserSignupModeChange($event)"
               />
             </div>
@@ -143,7 +145,7 @@
             <div class="w-50" i18n>System Message</div>
             <div class="w-50">
               <div *ngIf="systemMessage" class="align-items-center d-flex">
-                <div class="text-truncate">{{ systemMessage | json }}</div>
+                <div class="text-truncate">{{ systemMessage | json }}</div>
                 <button
                   class="h-100 mx-1 no-min-width px-2"
                   mat-button

apps/client/src/app/components/admin-users/admin-users.html

@@ -35,17 +35,23 @@
               mat-cell
             >
               <div class="d-flex align-items-center">
-                <span class="d-none d-sm-inline-block text-monospace"
+                <span class="d-none d-sm-inline-block text-monospace">{{
-                  >{{ element.id }}</span
+                  element.id
-                >
+                }}</span>
-                <span class="d-inline-block d-sm-none text-monospace"
+                <span class="d-inline-block d-sm-none text-monospace">{{
-                  >{{ (element.id | slice:0:5) + '...' }}</span
+                  (element.id | slice: 0 : 5) + '...'
-                >
+                }}</span>
                 <gf-premium-indicator
                   *ngIf="element?.subscription?.type === 'Premium'"
                   class="ml-1"
                   [enableLink]="false"
-                  [title]="'Expires ' + formatDistanceToNow(element.subscription.expiresAt) + ' (' + (element.subscription.expiresAt | date: defaultDateFormat) + ')'"
+                  [title]="
+                    'Expires ' +
+                    formatDistanceToNow(element.subscription.expiresAt) +
+                    ' (' +
+                    (element.subscription.expiresAt | date: defaultDateFormat) +
+                    ')'
+                  "
                 />
               </div>
             </td>
@@ -67,9 +73,9 @@
               class="mat-mdc-cell px-1 py-2"
               mat-cell
             >
-              <span class="h5" [title]="element.country"
+              <span class="h5" [title]="element.country">{{
-                >{{ getEmojiFlag(element.country) }}</span
+                getEmojiFlag(element.country)
-              >
+              }}</span>
             </td>
           </ng-container>
 

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

@@ -32,8 +32,8 @@
             <a class="d-block" [routerLink]="['/portfolio']">
               <span i18n>Monitor and analyze your portfolio</span><br />
               <span class="font-weight-normal" i18n
-              >Track your progress in real-time with comprehensive analysis and
+                >Track your progress in real-time with comprehensive analysis
-              insights.</span
+                and insights.</span
               >
             </a>
           </li>

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

@@ -6,7 +6,9 @@
         <mat-card-content>
           <gf-portfolio-summary
             [baseCurrency]="user?.settings?.baseCurrency"
-            [hasPermissionToUpdateUserSettings]="!hasImpersonationId && hasPermissionToUpdateUserSettings"
+            [hasPermissionToUpdateUserSettings]="
+              !hasImpersonationId && hasPermissionToUpdateUserSettings
+            "
             [isLoading]="isLoading"
             [language]="user?.settings?.language"
             [locale]="user?.settings?.locale"

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

@@ -87,7 +87,11 @@
           size="medium"
           [isCurrency]="true"
           [locale]="data.locale"
-          [ngClass]="{ 'text-danger': minPrice?.toFixed(2) === marketPrice?.toFixed(2) && maxPrice?.toFixed(2) !== minPrice?.toFixed(2) }"
+          [ngClass]="{
+            'text-danger':
+              minPrice?.toFixed(2) === marketPrice?.toFixed(2) &&
+              maxPrice?.toFixed(2) !== minPrice?.toFixed(2)
+          }"
           [unit]="SymbolProfile?.currency"
           [value]="minPrice"
           >Minimum Price</gf-value
@@ -99,7 +103,11 @@
           size="medium"
           [isCurrency]="true"
           [locale]="data.locale"
-          [ngClass]="{ 'text-success': maxPrice?.toFixed(2) === marketPrice?.toFixed(2) && maxPrice?.toFixed(2) !== minPrice?.toFixed(2) }"
+          [ngClass]="{
+            'text-success':
+              maxPrice?.toFixed(2) === marketPrice?.toFixed(2) &&
+              maxPrice?.toFixed(2) !== minPrice?.toFixed(2)
+          }"
           [unit]="SymbolProfile?.currency"
           [value]="maxPrice"
           >Maximum Price</gf-value
@@ -184,10 +192,15 @@
         >
       </div>
       <ng-container
-        *ngIf="SymbolProfile?.countries?.length > 0 || SymbolProfile?.sectors?.length > 0"
+        *ngIf="
+          SymbolProfile?.countries?.length > 0 ||
+          SymbolProfile?.sectors?.length > 0
+        "
       >
-        @if(SymbolProfile?.countries?.length === 1 &&
+        @if (
-        SymbolProfile?.sectors?.length === 1) {
+          SymbolProfile?.countries?.length === 1 &&
+          SymbolProfile?.sectors?.length === 1
+        ) {
           <div *ngIf="SymbolProfile?.sectors?.length === 1" class="col-6 mb-3">
             <gf-value
               i18n
@@ -197,7 +210,10 @@
               >Sector</gf-value
             >
           </div>
-        <div *ngIf="SymbolProfile?.countries?.length === 1" class="col-6 mb-3">
+          <div
+            *ngIf="SymbolProfile?.countries?.length === 1"
+            class="col-6 mb-3"
+          >
             <gf-value
               i18n
               size="medium"
@@ -257,7 +273,9 @@
           [dataSource]="dataSource"
           [deviceType]="data.deviceType"
           [hasPermissionToCreateActivity]="false"
-          [hasPermissionToExportActivities]="!data.hasImpersonationId && !user.settings.isRestrictedView"
+          [hasPermissionToExportActivities]="
+            !data.hasImpersonationId && !user.settings.isRestrictedView
+          "
           [hasPermissionToFilter]="false"
           [hasPermissionToOpenDetails]="false"
           [locale]="data.locale"
@@ -294,15 +312,17 @@
       <div class="col">
         <div class="h5" i18n>Tags</div>
         <mat-chip-listbox>
-          <mat-chip-option *ngFor="let tag of tags" disabled
+          <mat-chip-option *ngFor="let tag of tags" disabled>{{
-            >{{ tag.name }}</mat-chip-option
+            tag.name
-          >
+          }}</mat-chip-option>
         </mat-chip-listbox>
       </div>
     </div>
 
     <div
-      *ngIf="activities?.length > 0 && data.hasPermissionToReportDataGlitch === true"
+      *ngIf="
+        activities?.length > 0 && data.hasPermissionToReportDataGlitch === true
+      "
       class="row"
     >
       <div class="col">

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html

@@ -32,7 +32,9 @@
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Permission</mat-label>
           <mat-select formControlName="permissions">
-          <mat-option i18n value="READ_RESTRICTED">Restricted view</mat-option>
+            <mat-option i18n value="READ_RESTRICTED"
+              >Restricted view</mat-option
+            >
             @if (data?.user?.settings?.isExperimentalFeatures) {
               <mat-option i18n value="READ">View</mat-option>
             }

apps/client/src/app/components/user-account-membership/user-account-membership.html

@@ -3,7 +3,7 @@
     <div class="col">
       <div class="align-items-center d-flex flex-column">
         <gf-membership-card
-          [expiresAt]="user?.subscription?.expiresAt | date: defaultDateFormat"
+          [expiresAt]="user?.subscription?.expiresAt | date: defaultDateFormat"
           [name]="user?.subscription?.type"
         />
         <div
@@ -11,14 +11,19 @@
           class="d-flex flex-column mt-5"
         >
           <ng-container
-            *ngIf="hasPermissionForSubscription && hasPermissionToUpdateUserSettings"
+            *ngIf="
+              hasPermissionForSubscription && hasPermissionToUpdateUserSettings
+            "
           >
             <button color="primary" mat-flat-button (click)="onCheckout()">
               <ng-container *ngIf="user.subscription.offer === 'default'" i18n
                 >Upgrade Plan</ng-container
               >
               <ng-container
-                *ngIf="user.subscription.offer === 'renewal' || user.subscription.offer === 'renewal-early-bird'"
+                *ngIf="
+                  user.subscription.offer === 'renewal' ||
+                  user.subscription.offer === 'renewal-early-bird'
+                "
                 i18n
                 >Renew Plan</ng-container
               >
@@ -27,7 +32,8 @@
               <ng-container *ngIf="coupon"
                 ><del class="text-muted"
                   >{{ baseCurrency }}&nbsp;{{ price }}</del
-                >&nbsp;{{ baseCurrency }}&nbsp;{{ price - coupon
+                >&nbsp;{{ baseCurrency }}&nbsp;{{
+                  price - coupon
                 }}</ng-container
               >
               <ng-container *ngIf="!coupon"

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -32,7 +32,9 @@
                   name="baseCurrency"
                   [disabled]="!hasPermissionToUpdateUserSettings"
                   [value]="user.settings.baseCurrency"
-                  (selectionChange)="onChangeUserSetting('baseCurrency', $event.value)"
+                  (selectionChange)="
+                    onChangeUserSetting('baseCurrency', $event.value)
+                  "
                 >
                   <mat-option
                     *ngFor="let currency of currencies"
@@ -53,7 +55,9 @@
               >
                 If a translation is missing, kindly support us in extending it
                 <a
-                  href="https://github.com/ghostfolio/ghostfolio/blob/main/apps/client/src/locales/messages.{{language}}.xlf"
+                  href="https://github.com/ghostfolio/ghostfolio/blob/main/apps/client/src/locales/messages.{{
+                    language
+                  }}.xlf"
                   target="_blank"
                   >here</a
                 >.
@@ -65,7 +69,9 @@
                   name="language"
                   [disabled]="!hasPermissionToUpdateUserSettings"
                   [value]="language"
-                  (selectionChange)="onChangeUserSetting('language', $event.value)"
+                  (selectionChange)="
+                    onChangeUserSetting('language', $event.value)
+                  "
                 >
                   <mat-option [value]="null" />
                   <mat-option value="de">Deutsch</mat-option>
@@ -115,12 +121,14 @@
                   name="locale"
                   [disabled]="!hasPermissionToUpdateUserSettings"
                   [value]="user.settings.locale"
-                  (selectionChange)="onChangeUserSetting('locale', $event.value)"
+                  (selectionChange)="
+                    onChangeUserSetting('locale', $event.value)
+                  "
                 >
                   <mat-option [value]="null" />
-                  <mat-option *ngFor="let locale of locales" [value]="locale"
+                  <mat-option *ngFor="let locale of locales" [value]="locale">{{
-                    >{{ locale }}</mat-option
+                    locale
-                  >
+                  }}</mat-option>
                 </mat-select>
               </mat-form-field>
             </div>
@@ -137,7 +145,9 @@
                   [disabled]="!hasPermissionToUpdateUserSettings"
                   [placeholder]="appearancePlaceholder"
                   [value]="user?.settings?.colorScheme"
-                  (selectionChange)="onChangeUserSetting('colorScheme', $event.value)"
+                  (selectionChange)="
+                    onChangeUserSetting('colorScheme', $event.value)
+                  "
                 >
                   <mat-option i18n [value]="null">Auto</mat-option>
                   <mat-option i18n value="LIGHT">Light</mat-option>

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

@@ -15,7 +15,9 @@
             <a target="_blank" [href]="ossFriend.href">
               <mat-card appearance="outlined" class="d-flex flex-column h-100">
                 <mat-card-header>
-                <mat-card-title class="h4">{{ ossFriend.name }}</mat-card-title>
+                  <mat-card-title class="h4">{{
+                    ossFriend.name
+                  }}</mat-card-title>
                 </mat-card-header>
                 <mat-card-content class="flex-grow-1">
                   <p>{{ ossFriend.description }}</p>
@@ -23,8 +25,8 @@
                 <mat-card-actions class="justify-content-end">
                   <a mat-button target="_blank" [href]="ossFriend.href">
                     <span
-                    ><ng-container i18n>Visit</ng-container> {{ ossFriend.name
+                      ><ng-container i18n>Visit</ng-container>
-                    }}</span
+                      {{ ossFriend.name }}</span
                     ><ion-icon class="ml-1" name="arrow-forward-outline" />
                   </a>
                 </mat-card-actions>

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

@@ -8,7 +8,11 @@
           [baseCurrency]="user?.settings?.baseCurrency"
           [deviceType]="deviceType"
           [locale]="user?.settings?.locale"
-          [showActions]="!hasImpersonationId && hasPermissionToUpdateAccount && !user.settings.isRestrictedView"
+          [showActions]="
+            !hasImpersonationId &&
+            hasPermissionToUpdateAccount &&
+            !user.settings.isRestrictedView
+          "
           [totalBalanceInBaseCurrency]="totalBalanceInBaseCurrency"
           [totalValueInBaseCurrency]="totalValueInBaseCurrency"
           [transactionCount]="transactionCount"
@@ -21,7 +25,11 @@
   </div>
 
   <div
-    *ngIf="!hasImpersonationId && hasPermissionToCreateAccount && !user.settings.isRestrictedView"
+    *ngIf="
+      !hasImpersonationId &&
+      hasPermissionToCreateAccount &&
+      !user.settings.isRestrictedView
+    "
     class="fab-container"
   >
     <a

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

@@ -38,9 +38,9 @@
           type="number"
           (keydown.enter)="$event.stopPropagation()"
         />
-        <span class="ml-2" matTextSuffix
+        <span class="ml-2" matTextSuffix>{{
-          >{{ accountForm.controls['currency']?.value?.value }}</span
+          accountForm.controls['currency']?.value?.value
-        >
+        }}</span>
       </mat-form-field>
     </div>
     <div [ngClass]="{ 'd-none': platforms?.length < 1 }">
@@ -55,8 +55,10 @@
           (keydown.enter)="$event.stopPropagation()"
         />
         <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
-          @for (platformEntry of filteredPlatforms | async; track platformEntry)
+          @for (
-          {
+            platformEntry of filteredPlatforms | async;
+            track platformEntry
+          ) {
             <mat-option [value]="platformEntry">
               <span class="d-flex">
                 <gf-symbol-icon

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

@@ -292,7 +292,11 @@
   @if (!user) {
     <div class="row">
       <div class="col mt-3 text-center">
-      <a color="primary" i18n mat-flat-button [routerLink]="routerLinkRegister"
+        <a
+          color="primary"
+          i18n
+          mat-flat-button
+          [routerLink]="routerLinkRegister"
           >Get Started</a
         >
       </div>

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

@@ -339,7 +339,8 @@
                   [href]="testimonial.url"
                   >{{ testimonial.author }}</a
                 >
-                <span *ngIf="!testimonial.url">{{ testimonial.author }}</span>,
+                <span *ngIf="!testimonial.url">{{ testimonial.author }}</span
+                >,
                 {{ testimonial.country }}
               </div>
             </div>

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

@@ -11,7 +11,11 @@
         [locale]="user?.settings?.locale"
         [pageIndex]="pageIndex"
         [pageSize]="pageSize"
-        [showActions]="!hasImpersonationId && hasPermissionToDeleteActivity && !user.settings.isRestrictedView"
+        [showActions]="
+          !hasImpersonationId &&
+          hasPermissionToDeleteActivity &&
+          !user.settings.isRestrictedView
+        "
         [sortColumn]="sortColumn"
         [sortDirection]="sortDirection"
         [totalItems]="totalItems"
@@ -29,8 +33,11 @@
     </div>
   </div>
 
-  @if (!hasImpersonationId && hasPermissionToCreateActivity &&
+  @if (
-  !user.settings.isRestrictedView) {
+    !hasImpersonationId &&
+    hasPermissionToCreateActivity &&
+    !user.settings.isRestrictedView
+  ) {
     <div class="fab-container">
       <a
         class="align-items-center d-flex justify-content-center"

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html

@@ -11,48 +11,61 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Type</mat-label>
         <mat-select formControlName="type">
-          <mat-select-trigger
+          <mat-select-trigger>{{
-            >{{ typesTranslationMap[activityForm.controls['type'].value]
+            typesTranslationMap[activityForm.controls['type'].value]
-            }}</mat-select-trigger
+          }}</mat-select-trigger>
-          >
           <mat-option value="BUY">
-            <span><b>{{ typesTranslationMap['BUY'] }}</b></span>
+            <span
+              ><b>{{ typesTranslationMap['BUY'] }}</b></span
+            >
             <small class="d-block line-height-1 text-muted text-nowrap" i18n
               >Stocks, ETFs, bonds, cryptocurrencies, commodities</small
             >
           </mat-option>
           <mat-option value="FEE">
-            <span><b>{{ typesTranslationMap['FEE'] }}</b></span>
+            <span
+              ><b>{{ typesTranslationMap['FEE'] }}</b></span
+            >
             <small class="d-block line-height-1 text-muted text-nowrap" i18n
               >One-time fee, annual account fees</small
             >
           </mat-option>
           <mat-option value="DIVIDEND">
-            <span><b>{{ typesTranslationMap['DIVIDEND'] }}</b></span>
+            <span
+              ><b>{{ typesTranslationMap['DIVIDEND'] }}</b></span
+            >
             <small class="d-block line-height-1 text-muted text-nowrap" i18n
               >Distribution of corporate earnings</small
             >
           </mat-option>
           <mat-option value="INTEREST">
-            <span><b>{{ typesTranslationMap['INTEREST'] }}</b></span>
+            <span
+              ><b>{{ typesTranslationMap['INTEREST'] }}</b></span
+            >
             <small class="d-block line-height-1 text-muted text-nowrap" i18n
               >Revenue for lending out money</small
             >
           </mat-option>
           <mat-option value="LIABILITY">
-            <span><b>{{ typesTranslationMap['LIABILITY'] }}</b></span>
+            <span
+              ><b>{{ typesTranslationMap['LIABILITY'] }}</b></span
+            >
             <small class="d-block line-height-1 text-muted text-nowrap" i18n
               >Mortgages, personal loans, credit cards</small
             >
           </mat-option>
           <mat-option value="SELL">
-            <span><b>{{ typesTranslationMap['SELL'] }}</b></span>
+            <span
+              ><b>{{ typesTranslationMap['SELL'] }}</b></span
+            >
             <small class="d-block line-height-1 text-muted text-nowrap" i18n
               >Stocks, ETFs, bonds, cryptocurrencies, commodities</small
             >
           </mat-option>
           <mat-option value="ITEM">
-            <span><b>{{ typesTranslationMap['ITEM'] }}</b></span>
+            <span
+              ><b>{{ typesTranslationMap['ITEM'] }}</b></span
+            >
             <small class="d-block line-height-1 text-muted text-nowrap" i18n
               >Luxury items, real estate, private companies</small
             >
@@ -69,7 +82,11 @@
         <mat-label i18n>Account</mat-label>
         <mat-select formControlName="accountId">
           <mat-option
-            *ngIf="!activityForm.controls['accountId'].hasValidator(Validators.required)"
+            *ngIf="
+              !activityForm.controls['accountId'].hasValidator(
+                Validators.required
+              )
+            "
             [value]="null"
           />
           <mat-option
@@ -95,7 +112,11 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{ 'd-none': !activityForm.controls['searchSymbol'].hasValidator(Validators.required) }"
+      [ngClass]="{
+        'd-none': !activityForm.controls['searchSymbol'].hasValidator(
+          Validators.required
+        )
+      }"
     >
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Name, symbol or ISIN</mat-label>
@@ -107,7 +128,11 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{ 'd-none': !activityForm.controls['name'].hasValidator(Validators.required) }"
+      [ngClass]="{
+        'd-none': !activityForm.controls['name'].hasValidator(
+          Validators.required
+        )
+      }"
     >
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Name</mat-label>
@@ -118,9 +143,9 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Currency</mat-label>
         <mat-select formControlName="currency">
-          <mat-option *ngFor="let currency of currencies" [value]="currency"
+          <mat-option *ngFor="let currency of currencies" [value]="currency">{{
-            >{{ currency }}</mat-option
+            currency
-          >
+          }}</mat-option>
         </mat-select>
       </mat-form-field>
     </div>
@@ -146,7 +171,13 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{ 'd-none': activityForm.controls['type']?.value === 'FEE' || activityForm.controls['type']?.value === 'INTEREST' || activityForm.controls['type']?.value === 'ITEM' || activityForm.controls['type']?.value === 'LIABILITY' }"
+      [ngClass]="{
+        'd-none':
+          activityForm.controls['type']?.value === 'FEE' ||
+          activityForm.controls['type']?.value === 'INTEREST' ||
+          activityForm.controls['type']?.value === 'ITEM' ||
+          activityForm.controls['type']?.value === 'LIABILITY'
+      }"
     >
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Quantity</mat-label>
@@ -155,7 +186,7 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{ 'd-none': activityForm.controls['type']?.value === 'FEE' }"
+      [ngClass]="{ 'd-none': activityForm.controls['type']?.value === 'FEE' }"
     >
       <div class="align-items-start d-flex">
         <mat-form-field appearance="outline" class="w-100">
@@ -192,17 +223,25 @@
             </mat-select>
           </div>
           <mat-error
-            *ngIf="activityForm.controls['unitPriceInCustomCurrency'].hasError('invalid')"
+            *ngIf="
+              activityForm.controls['unitPriceInCustomCurrency'].hasError(
+                'invalid'
+              )
+            "
             ><ng-container i18n
               >Oops! Could not get the historical exchange rate
               from</ng-container
             >
-            {{ activityForm.controls['date']?.value | date: defaultDateFormat
+            {{
+              activityForm.controls['date']?.value | date: defaultDateFormat
             }}</mat-error
           >
         </mat-form-field>
         <button
-          *ngIf="currentMarketPrice && (data.activity.type === 'BUY' || data.activity.type === 'SELL')"
+          *ngIf="
+            currentMarketPrice &&
+            (data.activity.type === 'BUY' || data.activity.type === 'SELL')
+          "
           class="ml-2 mt-1 no-min-width"
           mat-button
           title="Apply current market price"
@@ -228,14 +267,19 @@
           </ng-container>
         </mat-label>
         <input formControlName="unitPrice" matInput type="number" />
-        <span class="ml-2" matTextSuffix
+        <span class="ml-2" matTextSuffix>{{
-          >{{ activityForm.controls['currency'].value }}</span
+          activityForm.controls['currency'].value
-        >
+        }}</span>
       </mat-form-field>
     </div>
     <div
       class="mb-3"
-      [ngClass]="{ 'd-none': activityForm.controls['type']?.value === 'INTEREST' || activityForm.controls['type']?.value === 'ITEM' || activityForm.controls['type']?.value === 'LIABILITY' }"
+      [ngClass]="{
+        'd-none':
+          activityForm.controls['type']?.value === 'INTEREST' ||
+          activityForm.controls['type']?.value === 'ITEM' ||
+          activityForm.controls['type']?.value === 'LIABILITY'
+      }"
     >
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Fee</mat-label>
@@ -252,11 +296,14 @@
           </mat-select>
         </div>
         <mat-error
-          *ngIf="activityForm.controls['feeInCustomCurrency'].hasError('invalid')"
+          *ngIf="
+            activityForm.controls['feeInCustomCurrency'].hasError('invalid')
+          "
           ><ng-container i18n
             >Oops! Could not get the historical exchange rate from</ng-container
           >
-          {{ activityForm.controls['date']?.value | date: defaultDateFormat
+          {{
+            activityForm.controls['date']?.value | date: defaultDateFormat
           }}</mat-error
         >
       </mat-form-field>
@@ -265,9 +312,9 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Fee</mat-label>
         <input formControlName="fee" matInput type="number" />
-        <span class="ml-2" matTextSuffix
+        <span class="ml-2" matTextSuffix>{{
-          >{{ activityForm.controls['currency'].value }}</span
+          activityForm.controls['currency'].value
-        >
+        }}</span>
       </mat-form-field>
     </div>
     <div class="mb-3">
@@ -340,7 +387,7 @@
           (optionSelected)="onAddTag($event)"
         >
           <mat-option
-            *ngFor="let tag of filteredTagsObservable | async"
+            *ngFor="let tag of filteredTagsObservable | async"
             [value]="tag.id"
           >
             {{ tag.name }}
@@ -354,7 +401,10 @@
       class="flex-grow-1"
       [isCurrency]="true"
       [locale]="data.user?.settings?.locale"
-      [unit]="activityForm.controls['currency']?.value ?? data.user?.settings?.baseCurrency"
+      [unit]="
+        activityForm.controls['currency']?.value ??
+        data.user?.settings?.baseCurrency
+      "
       [value]="total"
     />
     <div>

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

@@ -32,20 +32,25 @@
             <mat-form-field appearance="outline" class="w-100">
               <mat-label i18n>Holding</mat-label>
               <mat-select formControlName="uniqueAsset">
-              <mat-select-trigger
+                <mat-select-trigger>{{
-                >{{ uniqueAssetForm.controls['uniqueAsset']?.value?.name
+                  uniqueAssetForm.controls['uniqueAsset']?.value?.name
-                }}</mat-select-trigger
+                }}</mat-select-trigger>
-              >
                 <mat-option
                   *ngFor="let holding of holdings"
                   class="line-height-1"
-                [value]="{ dataSource: holding.dataSource, name: holding.name, symbol: holding.symbol }"
+                  [value]="{
+                    dataSource: holding.dataSource,
+                    name: holding.name,
+                    symbol: holding.symbol
+                  }"
+                >
+                  <span
+                    ><b>{{ holding.name }}</b></span
                   >
-                <span><b>{{ holding.name }}</b></span>
                   <br />
                   <small class="text-muted"
-                  >{{ holding.symbol | gfSymbol }} · {{ holding.currency
+                    >{{ holding.symbol | gfSymbol }} ·
-                  }}</small
+                    {{ holding.currency }}</small
                   >
                 </mat-option>
               </mat-select>

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

@@ -15,13 +15,20 @@
             class="justify-content-end l-2"
             size="medium"
             [isPercent]="true"
-            [value]="isLoading ? undefined : portfolioDetails?.filteredValueInPercentage"
+            [value]="
+              isLoading
+                ? undefined
+                : portfolioDetails?.filteredValueInPercentage
+            "
           />
         </mat-card-header>
         <mat-card-content>
           <mat-progress-bar
             mode="determinate"
-            [title]="(portfolioDetails?.filteredValueInPercentage * 100).toFixed(2) + '%'"
+            [title]="
+              (portfolioDetails?.filteredValueInPercentage * 100).toFixed(2) +
+              '%'
+            "
             [value]="portfolioDetails?.filteredValueInPercentage * 100"
           />
         </mat-card-content>
@@ -204,7 +211,9 @@
             <gf-world-map-chart
               [countries]="countries"
               [format]="worldMapChartFormat"
-              [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+              [isInPercent]="
+                hasImpersonationId || user.settings.isRestrictedView
+              "
               [locale]="user?.settings?.locale"
             />
           </div>

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

@@ -34,7 +34,11 @@
                   [isCurrency]="true"
                   [locale]="user?.settings?.locale"
                   [unit]="user?.settings?.baseCurrency"
-                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformance"
+                  [value]="
+                    isLoadingInvestmentChart
+                      ? undefined
+                      : performance?.currentNetPerformance
+                  "
                 />
               </div>
             </div>
@@ -49,7 +53,11 @@
                   [colorizeSign]="true"
                   [isPercent]="true"
                   [locale]="user?.settings?.locale"
-                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformancePercent"
+                  [value]="
+                    isLoadingInvestmentChart
+                      ? undefined
+                      : performance?.currentNetPerformancePercent
+                  "
                 />
               </div>
             </div>
@@ -64,7 +72,15 @@
                   [isCurrency]="true"
                   [locale]="user?.settings?.locale"
                   [unit]="user?.settings?.baseCurrency"
-                [value]="isLoadingInvestmentChart ? undefined : (performance?.currentNetPerformanceWithCurrencyEffect === null ? null : performance?.currentNetPerformanceWithCurrencyEffect - performance?.currentNetPerformance)"
+                  [value]="
+                    isLoadingInvestmentChart
+                      ? undefined
+                      : performance?.currentNetPerformanceWithCurrencyEffect ===
+                          null
+                        ? null
+                        : performance?.currentNetPerformanceWithCurrencyEffect -
+                          performance?.currentNetPerformance
+                  "
                 />
               </div>
             </div>
@@ -79,7 +95,12 @@
                   [colorizeSign]="true"
                   [isPercent]="true"
                   [locale]="user?.settings?.locale"
-                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformancePercentWithCurrencyEffect - performance?.currentNetPerformancePercent"
+                  [value]="
+                    isLoadingInvestmentChart
+                      ? undefined
+                      : performance?.currentNetPerformancePercentWithCurrencyEffect -
+                        performance?.currentNetPerformancePercent
+                  "
                 />
               </div>
             </div>
@@ -95,7 +116,11 @@
                   [isCurrency]="true"
                   [locale]="user?.settings?.locale"
                   [unit]="user?.settings?.baseCurrency"
-                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformanceWithCurrencyEffect"
+                  [value]="
+                    isLoadingInvestmentChart
+                      ? undefined
+                      : performance?.currentNetPerformanceWithCurrencyEffect
+                  "
                 />
               </div>
             </div>
@@ -110,7 +135,11 @@
                   [colorizeSign]="true"
                   [isPercent]="true"
                   [locale]="user?.settings?.locale"
-                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformancePercentWithCurrencyEffect"
+                  [value]="
+                    isLoadingInvestmentChart
+                      ? undefined
+                      : performance?.currentNetPerformancePercentWithCurrencyEffect
+                  "
                 />
               </div>
             </div>

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

@@ -16,11 +16,14 @@
           [currency]="user?.settings?.baseCurrency"
           [deviceType]="deviceType"
           [fireWealth]="fireWealth?.toNumber()"
-          [hasPermissionToUpdateUserSettings]="!hasImpersonationId && hasPermissionToUpdateUserSettings"
+          [hasPermissionToUpdateUserSettings]="
+            !hasImpersonationId && hasPermissionToUpdateUserSettings
+          "
           [locale]="user?.settings?.locale"
           [ngStyle]="{
             opacity: user?.subscription?.type === 'Basic' ? '0.67' : 'initial',
-            'pointer-events': user?.subscription?.type === 'Basic' ? 'none' : 'initial'
+            'pointer-events':
+              user?.subscription?.type === 'Basic' ? 'none' : 'initial'
           }"
           [projectedTotalAmount]="user?.settings?.projectedTotalAmount"
           [retirementDate]="user?.settings?.retirementDate"

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

@@ -107,7 +107,7 @@
           <mat-card
             appearance="outlined"
             class="h-100"
-            [ngClass]="{ 'active': user?.subscription?.type === 'Basic' }"
+            [ngClass]="{ active: user?.subscription?.type === 'Basic' }"
           >
             <mat-card-content class="d-flex flex-column h-100">
               <div class="flex-grow-1">
@@ -164,7 +164,7 @@
           <mat-card
             appearance="outlined"
             class="h-100"
-            [ngClass]="{ 'active': user?.subscription?.type === 'Premium' }"
+            [ngClass]="{ active: user?.subscription?.type === 'Premium' }"
           >
             <mat-card-content class="d-flex flex-column h-100">
               <div class="flex-grow-1">
@@ -243,19 +243,22 @@
                   <ng-container *ngIf="coupon"
                     ><del class="text-muted"
                       >{{ baseCurrency }}&nbsp;{{ price }}</del
-                    >&nbsp;{{ baseCurrency }}&nbsp;<strong
+                    >&nbsp;{{ baseCurrency }}&nbsp;<strong>{{
-                      >{{ price - coupon }}</strong
+                      price - coupon
-                    >
+                    }}</strong>
                   </ng-container>
                   <ng-container *ngIf="!coupon"
-                    >{{ baseCurrency }}&nbsp;<strong
+                    >{{ baseCurrency }}&nbsp;<strong>{{
-                      >{{ price }}</strong
+                      price
-                    ></ng-container
+                    }}</strong></ng-container
                   >&nbsp;<span i18n>per year</span></span
                 >
               </p>
               <div
-                *ngIf="hasPermissionToUpdateUserSettings && user?.subscription?.type === 'Basic'"
+                *ngIf="
+                  hasPermissionToUpdateUserSettings &&
+                  user?.subscription?.type === 'Basic'
+                "
                 class="mt-3 text-center"
               >
                 <button color="primary" mat-flat-button (click)="onCheckout()">
@@ -265,7 +268,10 @@
                     >Upgrade Plan</ng-container
                   >
                   <ng-container
-                    *ngIf="user.subscription.offer === 'renewal' || user.subscription.offer === 'renewal-early-bird'"
+                    *ngIf="
+                      user.subscription.offer === 'renewal' ||
+                      user.subscription.offer === 'renewal-early-bird'
+                    "
                     i18n
                     >Renew Plan</ng-container
                   >

apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html

@@ -1,8 +1,8 @@
 <h1 mat-dialog-title>
   <span i18n>Create Account</span
-  ><span *ngIf="data.role === 'ADMIN'" class="badge badge-light ml-2"
+  ><span *ngIf="data.role === 'ADMIN'" class="badge badge-light ml-2">{{
-    >{{ data.role }}</span
+    data.role
-  >
+  }}</span>
 </h1>
 <div class="py-3" mat-dialog-content>
   <div>

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

@@ -25,8 +25,14 @@
               <div class="flex-nowrap no-gutters row">
                 <a
                   class="d-flex overflow-hidden w-100"
-                title="Compare Ghostfolio to {{ product.name }} - {{ product.slogan }}"
+                  title="Compare Ghostfolio to {{ product.name }} - {{
-                [routerLink]="[pathResources, 'personal-finance-tools', pathAlternativeTo + (product.alias ?? product.key)]"
+                    product.slogan
+                  }}"
+                  [routerLink]="[
+                    pathResources,
+                    'personal-finance-tools',
+                    pathAlternativeTo + (product.alias ?? product.key)
+                  ]"
                 >
                   <div class="flex-grow-1 overflow-hidden">
                     <div class="h6 m-0 text-truncate" i18n>

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

@@ -11,8 +11,9 @@
         </div>
         <section class="mb-4">
           <p i18n>
-            Are you looking for an open source alternative to {{ product2.name
+            Are you looking for an open source alternative to
-            }}? <a [routerLink]="routerLinkAbout">Ghostfolio</a> is a powerful
+            {{ product2.name }}?
+            <a [routerLink]="routerLinkAbout">Ghostfolio</a> is a powerful
             portfolio management tool that provides individuals with a
             comprehensive platform to track, analyze, and optimize their
             investments. Whether you are an experienced investor or just
@@ -35,18 +36,22 @@
             its capabilities, security, and user experience.
           </p>
           <p i18n>
-            Let’s dive deeper into the detailed Ghostfolio vs {{ product2.name
+            Let’s dive deeper into the detailed Ghostfolio vs
-            }} comparison table below to gain a thorough understanding of how
+            {{ product2.name }} comparison table below to gain a thorough
-            Ghostfolio positions itself relative to {{ product2.name }}. We will
+            understanding of how Ghostfolio positions itself relative to
-            explore various aspects such as features, data privacy, pricing, and
+            {{ product2.name }}. We will explore various aspects such as
-            more, allowing you to make a well-informed choice for your personal
+            features, data privacy, pricing, and more, allowing you to make a
-            requirements.
+            well-informed choice for your personal requirements.
           </p>
         </section>
         <section class="mb-4">
           <table class="gf-table w-100">
             <caption class="text-center" i18n>
-              Ghostfolio vs {{ product2.name }} comparison table
+              Ghostfolio vs
+              {{
+                product2.name
+              }}
+              comparison table
             </caption>
             <thead>
               <tr class="mat-mdc-header-row">
@@ -187,8 +192,9 @@
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
                   <ng-container *ngIf="product2.pricingPerYear"
-                    ><span i18n>Starting from</span> {{ product2.pricingPerYear
+                    ><span i18n>Starting from</span>
-                    }} / <span i18n>year</span></ng-container
+                    {{ product2.pricingPerYear }} /
+                    <span i18n>year</span></ng-container
                   >
                 </td>
               </tr>
@@ -202,13 +208,13 @@
         </section>
         <section class="mb-4">
           <p i18n>
-            Please note that the information provided in the Ghostfolio vs {{
+            Please note that the information provided in the Ghostfolio vs
-            product2.name }} comparison table is based on our independent
+            {{ product2.name }} comparison table is based on our independent
-            research and analysis. This website is not affiliated with {{
+            research and analysis. This website is not affiliated with
-            product2.name }} or any other product mentioned in the comparison.
+            {{ product2.name }} or any other product mentioned in the
-            As the landscape of personal finance tools evolves, it is essential
+            comparison. As the landscape of personal finance tools evolves, it
-            to verify any specific details or changes directly from the
+            is essential to verify any specific details or changes directly from
-            respective product page. Data needs a refresh? Help us maintain
+            the respective product page. Data needs a refresh? Help us maintain
             accurate data on
             <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
           </p>

libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html

@@ -4,12 +4,13 @@
   [queryParams]="queryParams"
   [routerLink]="routerLink"
   (click)="onClick()"
-  ><span><b>{{ item?.name }}</b></span>
+  ><span
+    ><b>{{ item?.name }}</b></span
+  >
   <br />
   <small class="text-muted"
-    >{{ item?.symbol | gfSymbol }} · {{ item?.currency }}<ng-container
+    >{{ item?.symbol | gfSymbol }} · {{ item?.currency
-      *ngIf="item?.assetSubClassString"
+    }}<ng-container *ngIf="item?.assetSubClassString">
-    >
       · {{ item?.assetSubClassString }}</ng-container
     ></small
   ></a

libs/ui/src/lib/assistant/assistant.html

@@ -39,7 +39,7 @@
       </button>
     </div>
     <div
-      *ngIf="isLoading || searchFormControl.value"
+      *ngIf="isLoading || searchFormControl.value"
       class="overflow-auto py-3 result-container"
     >
       <div>
@@ -87,7 +87,7 @@
     </div>
   </div>
   <form [formGroup]="filterForm">
-    <ng-container *ngIf="!(isLoading || searchFormControl.value)">
+    <ng-container *ngIf="!(isLoading || searchFormControl.value)">
       <div class="date-range-selector-container p-3">
         <mat-form-field appearance="outline" class="w-100 without-hint">
           <mat-label i18n>Date Range</mat-label>
@@ -139,9 +139,9 @@
             <mat-select formControlName="assetClass">
               <mat-option [value]="null" />
               @for (assetClass of assetClasses; track assetClass.id) {
-              <mat-option [value]="assetClass.id"
+                <mat-option [value]="assetClass.id">{{
-                >{{ assetClass.label }}</mat-option
+                  assetClass.label
-              >
+                }}</mat-option>
               }
             </mat-select>
           </mat-form-field>