feat(client): resolve template errors

apps/client/src/app/components/markets/markets.component.ts

@@ -3,8 +3,8 @@ import { DEFAULT_LOCALE } from '@ghostfolio/common/config';
 import { resetHours } from '@ghostfolio/common/helper';
 import {
   Benchmark,
-  HistoricalDataItem,
   InfoItem,
+  LineChartItem,
   MarketDataOfMarketsResponse,
   User
 } from '@ghostfolio/common/interfaces';
@@ -66,7 +66,7 @@ export class GfMarketsComponent implements OnInit {
   protected fearAndGreedIndexMode: FearAndGreedIndexMode = 'STOCKS';
   protected hasPermissionToAccessFearAndGreedIndex: boolean;
   protected hasPermissionToReadMarketDataOfMarkets: boolean;
-  protected historicalDataItems: HistoricalDataItem[];
+  protected historicalDataItems: LineChartItem[];
   protected isLoadingFearAndGreedIndex = true;
   protected user: User;
 
@@ -159,11 +159,16 @@ export class GfMarketsComponent implements OnInit {
       this.fearAndGreedIndexData[this.fearAndGreedIndexMode]?.marketPrice;
 
     this.historicalDataItems = [
-      ...(this.fearAndGreedIndexData[this.fearAndGreedIndexMode]
-        ?.historicalData ?? []),
+      ...(
+        this.fearAndGreedIndexData[this.fearAndGreedIndexMode]
+          ?.historicalData ?? []
+      ).map(({ date, value }) => ({
+        date,
+        value: value ?? 0
+      })),
       {
         date: resetHours(new Date()).toISOString(),
-        value: this.fearAndGreedIndex
+        value: this.fearAndGreedIndex ?? 0
       }
     ];
   }

apps/client/src/app/components/markets/markets.html

@@ -29,7 +29,7 @@
             [colorScheme]="user?.settings?.colorScheme"
             [historicalDataItems]="historicalDataItems"
             [isAnimated]="true"
-            [locale]="user?.settings?.locale || undefined"
+            [locale]="user?.settings?.locale ?? DEFAULT_LOCALE"
             [showXAxis]="true"
             [showYAxis]="true"
             [yMax]="100"

apps/client/src/app/components/rule/rule-settings-dialog/interfaces/interfaces.ts

@@ -5,7 +5,7 @@ import {
 
 export interface RuleSettingsDialogParams {
   categoryName: string;
-  locale: string;
+  locale?: string;
   rule: PortfolioReportRule;
   settings: XRayRulesSettings['AccountClusterRiskCurrentInvestment'];
 }

apps/client/src/app/components/rule/rule.component.ts

@@ -8,11 +8,10 @@ import {
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   DestroyRef,
-  EventEmitter,
   Input,
-  OnInit,
-  Output
+  output
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
@@ -41,17 +40,20 @@ import { GfRuleSettingsDialogComponent } from './rule-settings-dialog/rule-setti
   styleUrls: ['./rule.component.scss'],
   templateUrl: './rule.component.html'
 })
-export class GfRuleComponent implements OnInit {
+export class GfRuleComponent {
   @Input() categoryName: string;
   @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() isLoading: boolean;
-  @Input() locale: string;
+  @Input() locale?: string;
   @Input() rule: PortfolioReportRule;
   @Input() settings: XRayRulesSettings['AccountClusterRiskCurrentInvestment'];
 
-  @Output() ruleUpdated = new EventEmitter<UpdateUserSettingDto>();
+  public readonly ruleUpdated = output<UpdateUserSettingDto>();
+
+  private readonly deviceType = computed(() => {
+    return this.deviceDetectorService.deviceInfo().deviceType;
+  });
 
-  private deviceType: string;
   public constructor(
     private destroyRef: DestroyRef,
     private deviceDetectorService: DeviceDetectorService,
@@ -67,11 +69,7 @@ export class GfRuleComponent implements OnInit {
     });
   }
 
-  public ngOnInit() {
-    this.deviceType = this.deviceDetectorService.getDeviceInfo().deviceType;
-  }
-
-  public onCustomizeRule(rule: PortfolioReportRule) {
+  protected onCustomizeRule(rule: PortfolioReportRule) {
     const dialogRef = this.dialog.open<
       GfRuleSettingsDialogComponent,
       RuleSettingsDialogParams
@@ -82,7 +80,7 @@ export class GfRuleComponent implements OnInit {
         locale: this.locale,
         settings: this.settings
       },
-      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+      width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 
     dialogRef
@@ -99,7 +97,7 @@ export class GfRuleComponent implements OnInit {
       });
   }
 
-  public onUpdateRule(rule: PortfolioReportRule) {
+  protected onUpdateRule(rule: PortfolioReportRule) {
     const settings: UpdateUserSettingDto = {
       xRayRules: {
         [rule.key]: { isActive: !rule.isActive }

apps/client/src/app/components/rules/rules.component.ts

@@ -8,9 +8,8 @@ import {
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
   Input,
-  Output
+  output
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -26,13 +25,13 @@ export class GfRulesComponent {
   @Input() categoryName: string;
   @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() isLoading: boolean;
-  @Input() locale: string;
+  @Input() locale?: string;
   @Input() rules: PortfolioReportRule[];
-  @Input() settings: XRayRulesSettings;
+  @Input() settings?: XRayRulesSettings;
 
-  @Output() rulesUpdated = new EventEmitter<UpdateUserSettingDto>();
+  public readonly rulesUpdated = output<UpdateUserSettingDto>();
 
-  public onRuleUpdated(event: UpdateUserSettingDto) {
+  protected onRuleUpdated(event: UpdateUserSettingDto) {
     this.rulesUpdated.emit(event);
   }
 }

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

@@ -128,14 +128,12 @@
               [hasPermissionToCreateActivity]="false"
               [hasPermissionToDeleteActivity]="false"
               [hasPermissionToExportActivities]="false"
-              [hasPermissionToFilter]="false"
               [hasPermissionToOpenDetails]="false"
               [locale]="data?.user?.settings?.locale"
               [pageIndex]="pageIndex"
               [pageSize]="pageSize"
               [showActions]="false"
               [showCheckbox]="true"
-              [showSymbolColumn]="false"
               [sortColumn]="sortColumn"
               [sortDirection]="sortDirection"
               [sortDisabled]="true"

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

@@ -178,7 +178,7 @@
                   [isPercent]="true"
                   [locale]="user?.settings?.locale"
                   [precision]="2"
-                  [value]="user?.settings?.annualInterestRate / 100"
+                  [value]="(user?.settings?.annualInterestRate ?? 0) / 100"
               /></span>
               annual interest rate.</ng-container
             >

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

@@ -258,21 +258,23 @@
                 </ul>
               </div>
               <p i18n>Fully managed Ghostfolio cloud offering.</p>
-              <p class="h5 text-right" [hidden]="!price">
-                <span class="font-weight-normal">
-                  @if (coupon) {
-                    <del class="text-muted"
-                      >{{ baseCurrency }}&nbsp;{{ price }}</del
-                    >&nbsp;{{ baseCurrency }}&nbsp;<strong>{{
-                      price - coupon
-                    }}</strong>
-                  } @else {
-                    {{ baseCurrency }}&nbsp;<strong>{{ price }}</strong>
-                  }
-                  <span>&nbsp;</span>
-                  <span i18n>per year</span></span
-                >
-              </p>
+              @if (price) {
+                <p class="h5 text-right">
+                  <span class="font-weight-normal">
+                    @if (coupon) {
+                      <del class="text-muted"
+                        >{{ baseCurrency }}&nbsp;{{ price }}</del
+                      >&nbsp;{{ baseCurrency }}&nbsp;<strong>{{
+                        price - coupon
+                      }}</strong>
+                    } @else {
+                      {{ baseCurrency }}&nbsp;<strong>{{ price }}</strong>
+                    }
+                    <span>&nbsp;</span>
+                    <span i18n>per year</span></span
+                  >
+                </p>
+              }
               @if (
                 hasPermissionToUpdateUserSettings &&
                 user?.subscription?.type === 'Basic'