From 124940bf53c19c25cdbffef92d0cc82c8387ffc7 Mon Sep 17 00:00:00 2001 From: Ankit Singh Date: Thu, 11 Jun 2026 20:56:38 +0530 Subject: [PATCH] Task/migrate various components from NgStyle to style bindings (#7008) * Migrate various components from NgStyle to style bindings * Update changelog --- CHANGELOG.md | 1 + .../benchmark-comparator.component.html | 2 +- .../benchmark-comparator.component.ts | 2 -- .../investment-chart/investment-chart.component.html | 2 +- .../investment-chart/investment-chart.component.ts | 3 +-- .../app/pages/portfolio/fire/fire-page.component.ts | 3 +-- .../src/app/pages/portfolio/fire/fire-page.html | 11 ++++++----- .../fire-calculator/fire-calculator.component.html | 2 +- libs/ui/src/lib/line-chart/line-chart.component.html | 5 +---- libs/ui/src/lib/line-chart/line-chart.component.ts | 3 +-- .../portfolio-proportion-chart.component.html | 5 +---- .../portfolio-proportion-chart.component.ts | 3 +-- .../premium-indicator.component.html | 2 +- .../premium-indicator/premium-indicator.component.ts | 3 +-- .../lib/treemap-chart/treemap-chart.component.html | 5 +---- .../src/lib/treemap-chart/treemap-chart.component.ts | 3 +-- 16 files changed, 20 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 240ca983f..d344a14c4 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html index 4d74c2559..328cccba1 100644 --- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html +++ b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html @@ -53,6 +53,6 @@ diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts index d2dc9e1bb..8d13fb91d 100644 --- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts +++ b/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, diff --git a/apps/client/src/app/components/investment-chart/investment-chart.component.html b/apps/client/src/app/components/investment-chart/investment-chart.component.html index 6f7b083e5..864050ea8 100644 --- a/apps/client/src/app/components/investment-chart/investment-chart.component.html +++ b/apps/client/src/app/components/investment-chart/investment-chart.component.html @@ -10,5 +10,5 @@ diff --git a/apps/client/src/app/components/investment-chart/investment-chart.component.ts b/apps/client/src/app/components/investment-chart/investment-chart.component.ts index 691133009..e55aebdda 100644 --- a/apps/client/src/app/components/investment-chart/investment-chart.component.ts +++ b/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' diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts index dc0a1d776..04165ab11 100644 --- a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts +++ b/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 ], diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.html b/apps/client/src/app/pages/portfolio/fire/fire-page.html index 76ad6cbf6..2730b35cd 100644 --- a/apps/client/src/app/pages/portfolio/fire/fire-page.html +++ b/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)" diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.html b/libs/ui/src/lib/fire-calculator/fire-calculator.component.html index 4f9ac456c..125c69a12 100644 --- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.html +++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.html @@ -81,7 +81,7 @@ diff --git a/libs/ui/src/lib/line-chart/line-chart.component.html b/libs/ui/src/lib/line-chart/line-chart.component.html index e9a5bbbe0..7f115967f 100644 --- a/libs/ui/src/lib/line-chart/line-chart.component.html +++ b/libs/ui/src/lib/line-chart/line-chart.component.html @@ -7,7 +7,4 @@ }" /> } - + diff --git a/libs/ui/src/lib/line-chart/line-chart.component.ts b/libs/ui/src/lib/line-chart/line-chart.component.ts index dd972bc5a..92ee8e4ec 100644 --- a/libs/ui/src/lib/line-chart/line-chart.component.ts +++ b/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' diff --git a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html index c7de5ef4d..75e545d30 100644 --- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html +++ b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html @@ -7,7 +7,4 @@ }" /> } - + diff --git a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts index 7c17b587c..e2c41e956 100644 --- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts +++ b/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' diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.component.html b/libs/ui/src/lib/premium-indicator/premium-indicator.component.html index 3141414e7..71baae6cb 100644 --- a/libs/ui/src/lib/premium-indicator/premium-indicator.component.html +++ b/libs/ui/src/lib/premium-indicator/premium-indicator.component.html @@ -1,7 +1,7 @@ diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.component.ts b/libs/ui/src/lib/premium-indicator/premium-indicator.component.ts index b3ccfd88f..0c3cd6ad7 100644 --- a/libs/ui/src/lib/premium-indicator/premium-indicator.component.ts +++ b/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'], diff --git a/libs/ui/src/lib/treemap-chart/treemap-chart.component.html b/libs/ui/src/lib/treemap-chart/treemap-chart.component.html index c7de5ef4d..75e545d30 100644 --- a/libs/ui/src/lib/treemap-chart/treemap-chart.component.html +++ b/libs/ui/src/lib/treemap-chart/treemap-chart.component.html @@ -7,7 +7,4 @@ }" /> } - + diff --git a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts index 910914230..36ea0023a 100644 --- a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts +++ b/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'