From d55601d7cd818b85fb555738c0bf344593c3c38f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sven=20G=C3=BCnther?= Date: Sun, 7 Sep 2025 17:44:38 +0200 Subject: [PATCH] Task/migrate header component to standalone (#5483) * Migrate header component to standalone * Update changelog --- CHANGELOG.md | 6 ++++ apps/client/src/app/app.module.ts | 4 +-- .../app/components/header/header.component.ts | 34 ++++++++++++++---- .../app/components/header/header.module.ts | 35 ------------------- 4 files changed, 36 insertions(+), 43 deletions(-) delete mode 100644 apps/client/src/app/components/header/header.module.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index da1b51f52..1f1694c01 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/client/src/app/app.module.ts b/apps/client/src/app/app.module.ts index ebc03e3ca..384b83d6c 100644 --- a/apps/client/src/app/app.module.ts +++ b/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, diff --git a/apps/client/src/app/components/header/header.component.ts b/apps/client/src/app/components/header/header.component.ts index f1a6a22b6..66ead4d80 100644 --- a/apps/client/src/app/components/header/header.component.ts +++ b/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 { Router } from '@angular/router'; +import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'; +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'], - standalone: false + styleUrls: ['./header.component.scss'] }) -export class HeaderComponent implements OnChanges { +export class GfHeaderComponent implements OnChanges { @HostListener('window:keydown', ['$event']) openAssistantWithHotKey(event: KeyboardEvent) { if ( diff --git a/apps/client/src/app/components/header/header.module.ts b/apps/client/src/app/components/header/header.module.ts deleted file mode 100644 index 847a4ef4d..000000000 --- a/apps/client/src/app/components/header/header.module.ts +++ /dev/null @@ -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 {}