Feature/migrate toggle component to standalone (#5237)

* Migrate toggle component to standalone

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Refactored the toggle component to standalone
+
 ## 2.184.0 - 2025-07-22
 
 ### Added

apps/client/src/app/components/home-holdings/home-holdings.component.ts

@@ -1,4 +1,4 @@
-import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
+import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -38,7 +38,7 @@ import { takeUntil } from 'rxjs/operators';
     CommonModule,
     FormsModule,
     GfHoldingsTableComponent,
-    GfToggleModule,
+    GfToggleComponent,
     GfTreemapChartComponent,
     IonIcon,
     MatButtonModule,

apps/client/src/app/components/home-overview/home-overview.component.ts

@@ -1,5 +1,5 @@
 import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
-import { ToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
+import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { LayoutService } from '@ghostfolio/client/core/layout.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
@@ -43,7 +43,7 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './home-overview.html'
 })
 export class GfHomeOverviewComponent implements OnDestroy, OnInit {
-  public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
+  public dateRangeOptions = GfToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
   public deviceType: string;
   public errors: AssetProfileIdentifier[];
   public hasError: boolean;

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

@@ -1,5 +1,5 @@
 import { GfFearAndGreedIndexModule } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.module';
-import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
+import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { resetHours } from '@ghostfolio/common/helper';
@@ -34,7 +34,7 @@ import { takeUntil } from 'rxjs/operators';
     GfBenchmarkComponent,
     GfFearAndGreedIndexModule,
     GfLineChartComponent,
-    GfToggleModule
+    GfToggleComponent
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-markets',

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

@@ -1,5 +1,6 @@
 import { ToggleOption } from '@ghostfolio/common/interfaces';
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -8,16 +9,17 @@ import {
   OnChanges,
   Output
 } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatRadioModule } from '@angular/material/radio';
 
 @Component({
-  selector: 'gf-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './toggle.component.html',
+  imports: [CommonModule, MatRadioModule, ReactiveFormsModule],
+  selector: 'gf-toggle',
   styleUrls: ['./toggle.component.scss'],
-  standalone: false
+  templateUrl: './toggle.component.html'
 })
-export class ToggleComponent implements OnChanges {
+export class GfToggleComponent implements OnChanges {
   public static DEFAULT_DATE_RANGE_OPTIONS: ToggleOption[] = [
     { label: $localize`Today`, value: '1d' },
     { label: $localize`YTD`, value: 'ytd' },

apps/client/src/app/components/toggle/toggle.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatRadioModule } from '@angular/material/radio';
-
-import { ToggleComponent } from './toggle.component';
-
-@NgModule({
-  declarations: [ToggleComponent],
-  exports: [ToggleComponent],
-  imports: [CommonModule, MatRadioModule, ReactiveFormsModule]
-})
-export class GfToggleModule {}

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

@@ -1,7 +1,6 @@
 import { GfBenchmarkComparatorModule } from '@ghostfolio/client/components/benchmark-comparator/benchmark-comparator.module';
 import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
-import { ToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
+import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
-import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -49,7 +48,7 @@ import { takeUntil } from 'rxjs/operators';
     GfBenchmarkComparatorModule,
     GfInvestmentChartModule,
     GfPremiumIndicatorComponent,
-    GfToggleModule,
+    GfToggleComponent,
     GfValueComponent,
     IonIcon,
     MatButtonModule,
@@ -69,7 +68,7 @@ export class GfAnalysisPageComponent implements OnDestroy, OnInit {
   public benchmarkDataItems: HistoricalDataItem[] = [];
   public benchmarks: Partial<SymbolProfile>[];
   public bottom3: PortfolioPosition[];
-  public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
+  public dateRangeOptions = GfToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
   public deviceType: string;
   public dividendsByGroup: InvestmentItem[];
   public dividendTimelineDataLabel = $localize`Dividend`;