Task/modernize templates with untagged template literals (#5453)

* Modernize templates with untagged template literals

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Restructured the response of the portfolio report endpoint (_X-ray_)
+- Modernized the templates with untagged template literals
 - Refactored the create or update access dialog component to standalone
 - Improved the language localization for German (`de`)
 - Upgraded `envalid` from version `8.0.0` to `8.1.0`

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

@@ -30,7 +30,7 @@
                   [ngClass]="{
                     'text-line-through': element.role === 'INACTIVE'
                   }"
-                  >{{ (element.id | slice: 0 : 5) + '...' }}</span
+                  >{{ `${(element.id | slice: 0 : 5)}...` }}</span
                 >
                 @if (element.subscription?.expiresAt) {
                   <gf-premium-indicator

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

@@ -26,9 +26,9 @@
           <mat-progress-bar
             mode="determinate"
             [title]="
-              (
+              `${(
                 portfolioDetails?.summary?.filteredValueInPercentage * 100
-              ).toFixed(2) + '%'
+              ).toFixed(2)}%`
             "
             [value]="portfolioDetails?.summary?.filteredValueInPercentage * 100"
           />

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

@@ -32,10 +32,9 @@
                     personalFinanceTool.name
                   }} - {{ personalFinanceTool.slogan }}"
                   [routerLink]="[
-                    '/' + pathResources,
+                    `/${pathResources}`,
                     pathPersonalFinanceTools,
-                    pathAlternativeTo +
+                    `${pathAlternativeTo}${personalFinanceTool.alias ?? personalFinanceTool.key}`
-                      (personalFinanceTool.alias ?? personalFinanceTool.key)
                   ]"
                 >
                   <div class="flex-grow-1 overflow-hidden">

libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html

@@ -8,23 +8,23 @@
             class="day"
             [ngClass]="{
               'cursor-pointer valid': isDateOfInterest(
-                itemByMonth.key + '-' + (i + 1 < 10 ? '0' + (i + 1) : i + 1)
+                `${itemByMonth.key}-${i + 1 < 10 ? `0${i + 1}` : i + 1}`
               ),
               available:
                 marketDataByMonth[itemByMonth.key][
-                  i + 1 < 10 ? '0' + (i + 1) : i + 1
+                  i + 1 < 10 ? `0${i + 1}` : i + 1
                 ]?.marketPrice,
               today: isToday(
-                itemByMonth.key + '-' + (i + 1 < 10 ? '0' + (i + 1) : i + 1)
+                `${itemByMonth.key}-${i + 1 < 10 ? `0${i + 1}` : i + 1}`
               )
             }"
             [title]="
-              (itemByMonth.key + '-' + (i + 1 < 10 ? '0' + (i + 1) : i + 1)
+              (`${itemByMonth.key}-${i + 1 < 10 ? `0${i + 1}` : i + 1}`
                 | date: defaultDateFormat) ?? ''
             "
             (click)="
               onOpenMarketDataDetail({
-                day: i + 1 < 10 ? '0' + (i + 1) : i + 1,
+                day: i + 1 < 10 ? `0${i + 1}` : i + 1,
                 yearMonth: itemByMonth.key
               })
             "