Task/migrate header component to standalone (#5483)

* Migrate header 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 header component to standalone
+
 ## 2.197.0 - 2025-09-07
 
 ### Added

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

@@ -30,7 +30,7 @@ import { CustomDateAdapter } from './adapter/custom-date-adapter';
 import { DateFormats } from './adapter/date-formats';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { GfHeaderModule } from './components/header/header.module';
+import { GfHeaderComponent } from './components/header/header.component';
 import { GfSubscriptionInterstitialDialogModule } from './components/subscription-interstitial-dialog/subscription-interstitial-dialog.module';
 import { authInterceptorProviders } from './core/auth.interceptor';
 import { httpResponseInterceptorProviders } from './core/http-response.interceptor';
@@ -48,7 +48,7 @@ export function NgxStripeFactory(): string {
     AppRoutingModule,
     BrowserAnimationsModule,
     BrowserModule,
-    GfHeaderModule,
+    GfHeaderComponent,
     GfLogoComponent,
     GfNotificationModule,
     GfSubscriptionInterstitialDialogModule,

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

@@ -1,5 +1,6 @@
 import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setting.dto';
 import { LoginWithAccessTokenDialog } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.component';
+import { LoginWithAccessTokenDialogModule } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.module';
 import { LayoutService } from '@ghostfolio/client/core/layout.service';
 import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -15,10 +16,14 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes, publicRoutes } from '@ghostfolio/common/routes/routes';
 import { DateRange } from '@ghostfolio/common/types';
 import { GfAssistantComponent } from '@ghostfolio/ui/assistant/assistant.component';
+import { GfLogoComponent } from '@ghostfolio/ui/logo';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
+  CUSTOM_ELEMENTS_SCHEMA,
   EventEmitter,
   HostListener,
   Input,
@@ -26,9 +31,13 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
-import { MatMenuTrigger } from '@angular/material/menu';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
-import { Router } from '@angular/router';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { Router, RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import {
   closeOutline,
@@ -43,13 +52,26 @@ import { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
 
 @Component({
-  selector: 'gf-header',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    GfAssistantComponent,
+    GfLogoComponent,
+    GfPremiumIndicatorComponent,
+    IonIcon,
+    LoginWithAccessTokenDialogModule,
+    MatBadgeModule,
+    MatButtonModule,
+    MatMenuModule,
+    MatToolbarModule,
+    RouterModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'gf-header',
   templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss'],
+  styleUrls: ['./header.component.scss']
-  standalone: false
 })
-export class HeaderComponent implements OnChanges {
+export class GfHeaderComponent implements OnChanges {
   @HostListener('window:keydown', ['$event'])
   openAssistantWithHotKey(event: KeyboardEvent) {
     if (

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

@@ -1,35 +0,0 @@
-import { LoginWithAccessTokenDialogModule } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.module';
-import { GfAssistantComponent } from '@ghostfolio/ui/assistant';
-import { GfLogoComponent } from '@ghostfolio/ui/logo';
-import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { RouterModule } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
-
-import { HeaderComponent } from './header.component';
-
-@NgModule({
-  declarations: [HeaderComponent],
-  exports: [HeaderComponent],
-  imports: [
-    CommonModule,
-    GfAssistantComponent,
-    GfLogoComponent,
-    GfPremiumIndicatorComponent,
-    IonIcon,
-    LoginWithAccessTokenDialogModule,
-    MatBadgeModule,
-    MatButtonModule,
-    MatMenuModule,
-    MatToolbarModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfHeaderModule {}