Task/migrate various components from NgStyle to style bindings (#7008)

* Migrate various components from NgStyle to style bindings

* Update changelog

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Prefilled the form in the account balance management with the current cash balance
 - Disabled the selection of future dates in the account balance management
+- Migrated various components from `NgStyle` to style bindings
 - Improved the language localization for Korean (`ko`)
 
 ## 3.8.0 - 2026-06-07

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/benchmark-comparator/benchmark-comparator.component.ts

@@ -17,7 +17,6 @@ import { ColorScheme } from '@ghostfolio/common/types';
 import { registerChartConfiguration } from '@ghostfolio/ui/chart';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -53,7 +52,6 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
     FormsModule,
     GfPremiumIndicatorComponent,
     IonIcon,

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/components/investment-chart/investment-chart.component.ts

@@ -16,7 +16,6 @@ import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.in
 import { ColorScheme, GroupBy } from '@ghostfolio/common/types';
 import { registerChartConfiguration } from '@ghostfolio/ui/chart';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -49,7 +48,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, NgxSkeletonLoaderModule],
+  imports: [NgxSkeletonLoaderModule],
   selector: 'gf-investment-chart',
   styleUrls: ['./investment-chart.component.scss'],
   templateUrl: './investment-chart.component.html'

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,14 +19,15 @@
             !hasImpersonationId && hasPermissionToUpdateUserSettings
           "
           [locale]="user?.settings?.locale"
-          [ngStyle]="{
-            opacity: user?.subscription?.type === 'Basic' ? '0.67' : 'initial',
-            'pointer-events':
-              user?.subscription?.type === 'Basic' ? 'none' : 'initial'
-          }"
           [projectedTotalAmount]="user?.settings?.projectedTotalAmount"
           [retirementDate]="user?.settings?.retirementDate"
           [savingsRate]="user?.settings?.savingsRate"
+          [style.opacity]="
+            user?.subscription?.type === 'Basic' ? '0.67' : 'initial'
+          "
+          [style.pointer-events]="
+            user?.subscription?.type === 'Basic' ? 'none' : 'initial'
+          "
           (annualInterestRateChanged)="onAnnualInterestRateChange($event)"
           (calculationCompleted)="onCalculationComplete($event)"
           (projectedTotalAmountChanged)="onProjectedTotalAmountChange($event)"

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

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

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

@@ -12,7 +12,6 @@ import {
 import { LineChartItem } from '@ghostfolio/common/interfaces';
 import { ColorScheme } from '@ghostfolio/common/types';
 
-import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -43,7 +42,7 @@ import { registerChartConfiguration } from '../chart';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, NgxSkeletonLoaderModule],
+  imports: [NgxSkeletonLoaderModule],
   selector: 'gf-line-chart',
   styleUrls: ['./line-chart.component.scss'],
   templateUrl: './line-chart.component.html'

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

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

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

@@ -7,7 +7,6 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { ColorScheme } from '@ghostfolio/common/types';
 
-import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -54,7 +53,7 @@ const {
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, NgxSkeletonLoaderModule],
+  imports: [NgxSkeletonLoaderModule],
   selector: 'gf-portfolio-proportion-chart',
   styleUrls: ['./portfolio-proportion-chart.component.scss'],
   templateUrl: './portfolio-proportion-chart.component.html'

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' }"
   [routerLink]="routerLinkPricing"
+  [style.pointer-events]="enableLink ? 'initial' : 'none'"
   ><ion-icon class="text-muted" name="diamond-outline"
 /></a>

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

@@ -1,6 +1,5 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -14,7 +13,7 @@ import { diamondOutline } from 'ionicons/icons';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, IonIcon, RouterModule],
+  imports: [IonIcon, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-premium-indicator',
   styleUrls: ['./premium-indicator.component.scss'],

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

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

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

@@ -10,7 +10,6 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { ColorScheme, DateRange } from '@ghostfolio/common/types';
 
-import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -45,7 +44,7 @@ const { gray, green, red } = OpenColor;
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, NgxSkeletonLoaderModule],
+  imports: [NgxSkeletonLoaderModule],
   selector: 'gf-treemap-chart',
   styleUrls: ['./treemap-chart.component.scss'],
   templateUrl: './treemap-chart.component.html'