Task/migrate the components from NgStyle to style bindings

Replaces all 8 [ngStyle] template usages with native [style.*] bindings
per the Angular schematic at https://angular.dev/reference/migrations/ngstyle-to-style.

The single-property cases (display, pointer-events on
investment-chart, benchmark-comparator, treemap-chart, fire-calculator,
line-chart, portfolio-proportion-chart, premium-indicator) become a
single [style.X]="expr". The multi-property case in fire-page.html
(opacity + pointer-events on the GfFireCalculatorComponent) splits
into two separate [style.X]="expr" attributes; the standalone
fire-page component drops its now-unused NgStyle import.

CHANGELOG entry added under 3.2.0 / Changed.

Closes #6816

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Harmonized the unit styling in the value component
+- Migrated the components from `NgStyle` to style bindings
 - Upgraded `stripe` from version `20.4.1` to `21.0.1`
 
 ### Fixed

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html

@@ -53,6 +53,6 @@
   <canvas
     #chartCanvas
     class="h-100"
-    [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
+    [style.display]="isLoading ? 'none' : 'block'"
   ></canvas>
 </div>

apps/client/src/app/components/investment-chart/investment-chart.component.html

@@ -10,5 +10,5 @@
 <canvas
   #chartCanvas
   class="h-100"
-  [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
+  [style.display]="isLoading ? 'none' : 'block'"
 ></canvas>

apps/client/src/app/pages/portfolio/fire/fire-page.component.ts

@@ -12,7 +12,7 @@ import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
-import { CommonModule, NgStyle } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -35,7 +35,6 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
     GfFireCalculatorComponent,
     GfPremiumIndicatorComponent,
     GfValueComponent,
-    NgStyle,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule
   ],

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

@@ -19,11 +19,10 @@
             !hasImpersonationId && hasPermissionToUpdateUserSettings
           "
           [locale]="user?.settings?.locale"
-          [ngStyle]="{
+          [style.opacity]="user?.subscription?.type === 'Basic' ? '0.67' : 'initial'"
-            opacity: user?.subscription?.type === 'Basic' ? '0.67' : 'initial',
+          [style.pointer-events]="
-            'pointer-events':
+            user?.subscription?.type === 'Basic' ? 'none' : 'initial'
-              user?.subscription?.type === 'Basic' ? 'none' : 'initial'
+          "
-          }"
           [projectedTotalAmount]="user?.settings?.projectedTotalAmount"
           [retirementDate]="user?.settings?.retirementDate"
           [savingsRate]="user?.settings?.savingsRate"

libs/ui/src/lib/fire-calculator/fire-calculator.component.html

@@ -81,7 +81,7 @@
         <canvas
           #chartCanvas
           class="h-100"
-          [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
+          [style.display]="isLoading ? 'none' : 'block'"
         ></canvas>
       </div>
     </div>

libs/ui/src/lib/line-chart/line-chart.component.html

@@ -9,5 +9,5 @@
 }
 <canvas
   #chartCanvas
-  [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
+  [style.display]="isLoading ? 'none' : 'block'"
 ></canvas>

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html

@@ -9,5 +9,5 @@
 }
 <canvas
   #chartCanvas
-  [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
+  [style.display]="isLoading ? 'none' : 'block'"
 ></canvas>

libs/ui/src/lib/premium-indicator/premium-indicator.component.html

@@ -1,7 +1,7 @@
 <a
   class="align-items-center d-flex"
   title="Upgrade to Ghostfolio Premium"
-  [ngStyle]="{ 'pointer-events': enableLink ? 'initial' : 'none' }"
+  [style.pointer-events]="enableLink ? 'initial' : 'none'"
   [routerLink]="routerLinkPricing"
   ><ion-icon class="text-muted" name="diamond-outline"
 /></a>

libs/ui/src/lib/treemap-chart/treemap-chart.component.html

@@ -9,5 +9,5 @@
 }
 <canvas
   #chartCanvas
-  [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
+  [style.display]="isLoading ? 'none' : 'block'"
 ></canvas>