From 543aa4d3d39997366993dc93f2ffec0a5d26a1d9 Mon Sep 17 00:00:00 2001 From: Matt Van Horn <455140+mvanhorn@users.noreply.github.com> Date: Sun, 3 May 2026 01:30:38 -0700 Subject: [PATCH] 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 | 1 + .../benchmark-comparator.component.html | 2 +- .../investment-chart/investment-chart.component.html | 2 +- .../src/app/pages/portfolio/fire/fire-page.component.ts | 3 +-- apps/client/src/app/pages/portfolio/fire/fire-page.html | 9 ++++----- .../lib/fire-calculator/fire-calculator.component.html | 2 +- libs/ui/src/lib/line-chart/line-chart.component.html | 2 +- .../portfolio-proportion-chart.component.html | 2 +- .../premium-indicator/premium-indicator.component.html | 2 +- .../src/lib/treemap-chart/treemap-chart.component.html | 2 +- 10 files changed, 13 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 43119ff4c..44a4ccaae 100644 --- a/CHANGELOG.md +++ b/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 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 21d68984a..10c2ad741 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/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/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 cabd7fcb4..6638e496f 100644 --- a/apps/client/src/app/pages/portfolio/fire/fire-page.html +++ b/apps/client/src/app/pages/portfolio/fire/fire-page.html @@ -19,11 +19,10 @@ !hasImpersonationId && hasPermissionToUpdateUserSettings " [locale]="user?.settings?.locale" - [ngStyle]="{ - opacity: user?.subscription?.type === 'Basic' ? '0.67' : 'initial', - 'pointer-events': - user?.subscription?.type === 'Basic' ? 'none' : 'initial' - }" + [style.opacity]="user?.subscription?.type === 'Basic' ? '0.67' : 'initial'" + [style.pointer-events]=" + user?.subscription?.type === 'Basic' ? 'none' : 'initial' + " [projectedTotalAmount]="user?.settings?.projectedTotalAmount" [retirementDate]="user?.settings?.retirementDate" [savingsRate]="user?.settings?.savingsRate" 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..541672030 100644 --- a/libs/ui/src/lib/line-chart/line-chart.component.html +++ b/libs/ui/src/lib/line-chart/line-chart.component.html @@ -9,5 +9,5 @@ } 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..9b5fff973 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 @@ -9,5 +9,5 @@ } 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..fcc1edafd 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/treemap-chart/treemap-chart.component.html b/libs/ui/src/lib/treemap-chart/treemap-chart.component.html index c7de5ef4d..9b5fff973 100644 --- a/libs/ui/src/lib/treemap-chart/treemap-chart.component.html +++ b/libs/ui/src/lib/treemap-chart/treemap-chart.component.html @@ -9,5 +9,5 @@ }