Merge remote-tracking branch 'origin/main' into task/services-type-safety

.github/workflows/build-code.yml

@@ -13,7 +13,7 @@ jobs:
     strategy:
       matrix:
         node_version:
-          - 22
+          - 22.22.1
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

CHANGELOG.md

@@ -11,7 +11,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Consolidated the sign-out logic within the user service to unify cookie, state and token clearance
 - Improved the language localization for Polish (`pl`)
+- Upgraded `@ionic/angular` from version `8.7.3` to `8.8.1`
 - Upgraded `svgmap` from version `2.14.0` to `2.19.2`
+- Pinned the _Node.js_ version in the _Build code_ _GitHub Action_ to ensure environment consistency for tests
+
+### Fixed
+
+- Fixed an issue with the detection of the thousand separator for the `de-CH` locale
 
 ## 2.249.0 - 2026-03-10
 

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

@@ -10,12 +10,13 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   DOCUMENT,
   HostBinding,
   Inject,
-  OnDestroy,
   OnInit
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatDialog } from '@angular/material/dialog';
 import { Title } from '@angular/platform-browser';
 import {
@@ -30,8 +31,7 @@ import { DataSource } from '@prisma/client';
 import { addIcons } from 'ionicons';
 import { openOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { Subject } from 'rxjs';
+import { filter } from 'rxjs/operators';
-import { filter, takeUntil } from 'rxjs/operators';
 
 import { GfFooterComponent } from './components/footer/footer.component';
 import { GfHeaderComponent } from './components/header/header.component';
@@ -47,7 +47,7 @@ import { UserService } from './services/user/user.service';
   styleUrls: ['./app.component.scss'],
   templateUrl: './app.component.html'
 })
-export class GfAppComponent implements OnDestroy, OnInit {
+export class GfAppComponent implements OnInit {
   @HostBinding('class.has-info-message') get getHasMessage() {
     return this.hasInfoMessage;
   }
@@ -68,11 +68,10 @@ export class GfAppComponent implements OnDestroy, OnInit {
   public showFooter = false;
   public user: User;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
     @Inject(DOCUMENT) private document: Document,
@@ -87,7 +86,7 @@ export class GfAppComponent implements OnDestroy, OnInit {
     this.user = undefined;
 
     this.route.queryParams
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
         if (
           params['dataSource'] &&
@@ -110,7 +109,7 @@ export class GfAppComponent implements OnDestroy, OnInit {
 
     this.impersonationStorageService
       .onChangeHasImpersonation()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((impersonationId) => {
         this.hasImpersonationId = !!impersonationId;
       });
@@ -199,7 +198,7 @@ export class GfAppComponent implements OnDestroy, OnInit {
       });
 
     this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((state) => {
         this.user = state.user;
 
@@ -243,11 +242,6 @@ export class GfAppComponent implements OnDestroy, OnInit {
     document.location.href = `/${document.documentElement.lang}`;
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private initializeTheme(userPreferredColorScheme?: ColorScheme) {
     const isDarkTheme = userPreferredColorScheme
       ? userPreferredColorScheme === 'DARK'
@@ -271,7 +265,7 @@ export class GfAppComponent implements OnDestroy, OnInit {
   }) {
     this.userService
       .get()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((user) => {
         this.user = user;
 
@@ -317,7 +311,7 @@ export class GfAppComponent implements OnDestroy, OnInit {
 
         dialogRef
           .afterClosed()
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe(() => {
             this.router.navigate([], {
               queryParams: {

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -26,10 +26,11 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  OnDestroy,
+  DestroyRef,
   OnInit,
   ViewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
@@ -63,7 +64,7 @@ import {
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject } from 'rxjs';
-import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { distinctUntilChanged } from 'rxjs/operators';
 
 import { AdminMarketDataService } from './admin-market-data.service';
 import { GfAssetProfileDialogComponent } from './asset-profile-dialog/asset-profile-dialog.component';
@@ -95,9 +96,7 @@ import { CreateAssetProfileDialogParams } from './create-asset-profile-dialog/in
   styleUrls: ['./admin-market-data.scss'],
   templateUrl: './admin-market-data.html'
 })
-export class GfAdminMarketDataComponent
+export class GfAdminMarketDataComponent implements AfterViewInit, OnInit {
-  implements AfterViewInit, OnDestroy, OnInit
-{
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
@@ -166,13 +165,12 @@ export class GfAdminMarketDataComponent
   public totalItems = 0;
   public user: User;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     public adminMarketDataService: AdminMarketDataService,
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
     private route: ActivatedRoute,
@@ -209,7 +207,7 @@ export class GfAdminMarketDataComponent
     this.displayedColumns.push('actions');
 
     this.route.queryParams
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
         if (
           params['assetProfileDialog'] &&
@@ -226,7 +224,7 @@ export class GfAdminMarketDataComponent
       });
 
     this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
@@ -238,7 +236,7 @@ export class GfAdminMarketDataComponent
       });
 
     this.filters$
-      .pipe(distinctUntilChanged(), takeUntil(this.unsubscribeSubject))
+      .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
       .subscribe((filters) => {
         this.activeFilters = filters;
 
@@ -302,7 +300,7 @@ export class GfAdminMarketDataComponent
   public onGather7Days() {
     this.adminService
       .gather7Days()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         setTimeout(() => {
           window.location.reload();
@@ -313,7 +311,7 @@ export class GfAdminMarketDataComponent
   public onGatherMax() {
     this.adminService
       .gatherMax()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         setTimeout(() => {
           window.location.reload();
@@ -324,7 +322,7 @@ export class GfAdminMarketDataComponent
   public onGatherProfileData() {
     this.adminService
       .gatherProfileData()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe();
   }
 
@@ -334,14 +332,14 @@ export class GfAdminMarketDataComponent
   }: AssetProfileIdentifier) {
     this.adminService
       .gatherProfileDataBySymbol({ dataSource, symbol })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe();
   }
 
   public onGatherSymbol({ dataSource, symbol }: AssetProfileIdentifier) {
     this.adminService
       .gatherSymbol({ dataSource, symbol })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe();
   }
 
@@ -358,11 +356,6 @@ export class GfAdminMarketDataComponent
     });
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private loadData(
     {
       pageIndex,
@@ -399,7 +392,7 @@ export class GfAdminMarketDataComponent
         skip: pageIndex * this.pageSize,
         take: this.pageSize
       })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ count, marketData }) => {
         this.totalItems = count;
 
@@ -430,7 +423,7 @@ export class GfAdminMarketDataComponent
   }) {
     this.userService
       .get()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((user) => {
         this.user = user;
 
@@ -452,7 +445,7 @@ export class GfAdminMarketDataComponent
 
         dialogRef
           .afterClosed()
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe(
             (newAssetProfileIdentifier: AssetProfileIdentifier | undefined) => {
               if (newAssetProfileIdentifier) {
@@ -468,7 +461,7 @@ export class GfAdminMarketDataComponent
   private openCreateAssetProfileDialog() {
     this.userService
       .get()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((user) => {
         this.user = user;
 
@@ -486,7 +479,7 @@ export class GfAdminMarketDataComponent
 
         dialogRef
           .afterClosed()
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe((result) => {
             if (!result) {
               this.router.navigate(['.'], { relativeTo: this.route });
@@ -499,7 +492,7 @@ export class GfAdminMarketDataComponent
             if (addAssetProfile && dataSource && symbol) {
               this.adminService
                 .addAssetProfile({ dataSource, symbol })
-                .pipe(takeUntil(this.unsubscribeSubject))
+                .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => {
                   this.loadData();
                 });

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts

@@ -37,12 +37,13 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   ElementRef,
   Inject,
-  OnDestroy,
   OnInit,
   ViewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   AbstractControl,
   FormBuilder,
@@ -87,8 +88,8 @@ import {
   serverOutline
 } from 'ionicons/icons';
 import ms from 'ms';
-import { EMPTY, Subject } from 'rxjs';
+import { EMPTY } from 'rxjs';
-import { catchError, takeUntil } from 'rxjs/operators';
+import { catchError } from 'rxjs/operators';
 
 import { AssetProfileDialogParams } from './interfaces/interfaces';
 
@@ -121,7 +122,7 @@ import { AssetProfileDialogParams } from './interfaces/interfaces';
   styleUrls: ['./asset-profile-dialog.component.scss'],
   templateUrl: 'asset-profile-dialog.html'
 })
-export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
+export class GfAssetProfileDialogComponent implements OnInit {
   private static readonly HISTORICAL_DATA_TEMPLATE = `date;marketPrice\n${format(
     new Date(),
     DATE_FORMAT
@@ -241,14 +242,13 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
 
   public user: User;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     public adminMarketDataService: AdminMarketDataService,
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: AssetProfileDialogParams,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     public dialogRef: MatDialogRef<GfAssetProfileDialogComponent>,
     private formBuilder: FormBuilder,
     private notificationService: NotificationService,
@@ -282,7 +282,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
 
     this.adminService
       .fetchAdminData()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ settings }) => {
         this.isDataGatheringEnabled =
           settings[PROPERTY_IS_DATA_GATHERING_ENABLED] === false ? false : true;
@@ -291,7 +291,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
       });
 
     this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
@@ -300,7 +300,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
 
     this.assetProfileForm
       .get('assetClass')
-      .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
+      .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((assetClass) => {
         const assetSubClasses = ASSET_CLASS_MAPPING.get(assetClass) ?? [];
 
@@ -323,7 +323,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
         dataSource: this.data.dataSource,
         symbol: this.data.symbol
       })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ assetProfile, marketData }) => {
         this.assetProfile = assetProfile;
 
@@ -436,7 +436,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
   }: AssetProfileIdentifier) {
     this.adminService
       .gatherProfileDataBySymbol({ dataSource, symbol })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe();
   }
 
@@ -449,7 +449,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
   } & AssetProfileIdentifier) {
     this.adminService
       .gatherSymbol({ dataSource, range, symbol })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe();
   }
 
@@ -462,7 +462,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
   public onSetBenchmark({ dataSource, symbol }: AssetProfileIdentifier) {
     this.dataService
       .postBenchmark({ dataSource, symbol })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.dataService.updateInfo();
 
@@ -664,7 +664,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
 
           return EMPTY;
         }),
-        takeUntil(this.unsubscribeSubject)
+        takeUntilDestroyed(this.destroyRef)
       )
       .subscribe(() => {
         const newAssetProfileIdentifier = {
@@ -714,7 +714,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
           });
           return EMPTY;
         }),
-        takeUntil(this.unsubscribeSubject)
+        takeUntilDestroyed(this.destroyRef)
       )
       .subscribe(({ price }) => {
         this.notificationService.alert({
@@ -745,7 +745,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
   public onUnsetBenchmark({ dataSource, symbol }: AssetProfileIdentifier) {
     this.dataService
       .deleteBenchmark({ dataSource, symbol })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.dataService.updateInfo();
 
@@ -755,11 +755,6 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
       });
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   public onTriggerSubmitAssetProfileForm() {
     if (this.assetProfileForm.valid) {
       this.onSubmitAssetProfileForm();

apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.component.ts

@@ -10,9 +10,10 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  OnDestroy,
+  DestroyRef,
   OnInit
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   AbstractControl,
   FormBuilder,
@@ -31,7 +32,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatRadioModule } from '@angular/material/radio';
 import { DataSource } from '@prisma/client';
 import { isISO4217CurrencyCode } from 'class-validator';
-import { Subject, switchMap, takeUntil } from 'rxjs';
+import { switchMap } from 'rxjs';
 
 import { CreateAssetProfileDialogMode } from './interfaces/interfaces';
 
@@ -52,19 +53,19 @@ import { CreateAssetProfileDialogMode } from './interfaces/interfaces';
   styleUrls: ['./create-asset-profile-dialog.component.scss'],
   templateUrl: 'create-asset-profile-dialog.html'
 })
-export class GfCreateAssetProfileDialogComponent implements OnDestroy, OnInit {
+export class GfCreateAssetProfileDialogComponent implements OnInit {
   public createAssetProfileForm: FormGroup;
   public ghostfolioPrefix = `${ghostfolioPrefix}_`;
   public mode: CreateAssetProfileDialogMode;
 
   private customCurrencies: string[];
   private dataSourceForExchangeRates: DataSource;
-  private unsubscribeSubject = new Subject<void>();
 
   public constructor(
     public readonly adminService: AdminService,
     private readonly changeDetectorRef: ChangeDetectorRef,
     private readonly dataService: DataService,
+    private readonly destroyRef: DestroyRef,
     public readonly dialogRef: MatDialogRef<GfCreateAssetProfileDialogComponent>,
     public readonly formBuilder: FormBuilder
   ) {}
@@ -125,7 +126,7 @@ export class GfCreateAssetProfileDialogComponent implements OnDestroy, OnInit {
               symbol: `${DEFAULT_CURRENCY}${currency}`
             });
           }),
-          takeUntil(this.unsubscribeSubject)
+          takeUntilDestroyed(this.destroyRef)
         )
         .subscribe(() => {
           this.dialogRef.close({
@@ -154,11 +155,6 @@ export class GfCreateAssetProfileDialogComponent implements OnDestroy, OnInit {
     return false;
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private atLeastOneValid(control: AbstractControl): ValidationErrors {
     const addCurrencyControl = control.get('addCurrency');
     const addSymbolControl = control.get('addSymbol');
@@ -189,7 +185,7 @@ export class GfCreateAssetProfileDialogComponent implements OnDestroy, OnInit {
   private initialize() {
     this.adminService
       .fetchAdminData()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ dataProviders, settings }) => {
         this.customCurrencies = settings[PROPERTY_CURRENCIES] as string[];
 

apps/client/src/app/components/admin-platform/admin-platform.component.ts

@@ -11,11 +11,12 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   Input,
-  OnDestroy,
   OnInit,
   ViewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
@@ -32,7 +33,6 @@ import {
 } from 'ionicons/icons';
 import { get } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { Subject, takeUntil } from 'rxjs';
 
 import { GfCreateOrUpdatePlatformDialogComponent } from './create-or-update-platform-dialog/create-or-update-platform-dialog.component';
 import { CreateOrUpdatePlatformDialogParams } from './create-or-update-platform-dialog/interfaces/interfaces';
@@ -53,7 +53,7 @@ import { CreateOrUpdatePlatformDialogParams } from './create-or-update-platform-
   styleUrls: ['./admin-platform.component.scss'],
   templateUrl: './admin-platform.component.html'
 })
-export class GfAdminPlatformComponent implements OnDestroy, OnInit {
+export class GfAdminPlatformComponent implements OnInit {
   @Input() locale = getLocale();
 
   @ViewChild(MatSort) sort: MatSort;
@@ -63,12 +63,11 @@ export class GfAdminPlatformComponent implements OnDestroy, OnInit {
   public displayedColumns = ['name', 'url', 'accounts', 'actions'];
   public platforms: Platform[];
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
     private notificationService: NotificationService,
@@ -77,7 +76,7 @@ export class GfAdminPlatformComponent implements OnDestroy, OnInit {
     private userService: UserService
   ) {
     this.route.queryParams
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
         if (params['createPlatformDialog']) {
           this.openCreatePlatformDialog();
@@ -119,20 +118,15 @@ export class GfAdminPlatformComponent implements OnDestroy, OnInit {
     });
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private deletePlatform(aId: string) {
     this.adminService
       .deletePlatform(aId)
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: () => {
           this.userService
             .get(true)
-            .pipe(takeUntil(this.unsubscribeSubject))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe();
 
           this.fetchPlatforms();
@@ -143,7 +137,7 @@ export class GfAdminPlatformComponent implements OnDestroy, OnInit {
   private fetchPlatforms() {
     this.adminService
       .fetchPlatforms()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((platforms) => {
         this.platforms = platforms;
 
@@ -175,17 +169,17 @@ export class GfAdminPlatformComponent implements OnDestroy, OnInit {
 
     dialogRef
       .afterClosed()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((platform: CreatePlatformDto | null) => {
         if (platform) {
           this.adminService
             .postPlatform(platform)
-            .pipe(takeUntil(this.unsubscribeSubject))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
               next: () => {
                 this.userService
                   .get(true)
-                  .pipe(takeUntil(this.unsubscribeSubject))
+                  .pipe(takeUntilDestroyed(this.destroyRef))
                   .subscribe();
 
                 this.fetchPlatforms();
@@ -223,17 +217,17 @@ export class GfAdminPlatformComponent implements OnDestroy, OnInit {
 
     dialogRef
       .afterClosed()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((platform: UpdatePlatformDto | null) => {
         if (platform) {
           this.adminService
             .putPlatform(platform)
-            .pipe(takeUntil(this.unsubscribeSubject))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
               next: () => {
                 this.userService
                   .get(true)
-                  .pipe(takeUntil(this.unsubscribeSubject))
+                  .pipe(takeUntilDestroyed(this.destroyRef))
                   .subscribe();
 
                 this.fetchPlatforms();

apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.component.ts

@@ -2,12 +2,7 @@ import { CreatePlatformDto, UpdatePlatformDto } from '@ghostfolio/common/dtos';
 import { validateObjectForForm } from '@ghostfolio/common/utils';
 import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
 
-import {
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-  ChangeDetectionStrategy,
-  Component,
-  Inject,
-  OnDestroy
-} from '@angular/core';
 import {
   FormBuilder,
   FormGroup,
@@ -23,7 +18,6 @@ import {
 } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { Subject } from 'rxjs';
 
 import { CreateOrUpdatePlatformDialogParams } from './interfaces/interfaces';
 
@@ -43,11 +37,9 @@ import { CreateOrUpdatePlatformDialogParams } from './interfaces/interfaces';
   styleUrls: ['./create-or-update-platform-dialog.scss'],
   templateUrl: 'create-or-update-platform-dialog.html'
 })
-export class GfCreateOrUpdatePlatformDialogComponent implements OnDestroy {
+export class GfCreateOrUpdatePlatformDialogComponent {
   public platformForm: FormGroup;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdatePlatformDialogParams,
     public dialogRef: MatDialogRef<GfCreateOrUpdatePlatformDialogComponent>,
@@ -90,9 +82,4 @@ export class GfCreateOrUpdatePlatformDialogComponent implements OnDestroy {
       console.error(error);
     }
   }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }

apps/client/src/app/components/admin-settings/admin-settings.component.ts

@@ -22,10 +22,11 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  OnDestroy,
+  DestroyRef,
   OnInit,
   ViewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatMenuModule } from '@angular/material/menu';
@@ -38,7 +39,7 @@ import { addIcons } from 'ionicons';
 import { ellipsisHorizontal, trashOutline } from 'ionicons/icons';
 import { get } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { catchError, filter, of, Subject, takeUntil } from 'rxjs';
+import { catchError, filter, of } from 'rxjs';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -64,7 +65,7 @@ import { catchError, filter, of, Subject, takeUntil } from 'rxjs';
   styleUrls: ['./admin-settings.component.scss'],
   templateUrl: './admin-settings.component.html'
 })
-export class GfAdminSettingsComponent implements OnDestroy, OnInit {
+export class GfAdminSettingsComponent implements OnInit {
   @ViewChild(MatSort) sort: MatSort;
 
   public dataSource = new MatTableDataSource<DataProviderInfo>();
@@ -82,12 +83,11 @@ export class GfAdminSettingsComponent implements OnDestroy, OnInit {
   public pricingUrl: string;
   public user: User;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private notificationService: NotificationService,
     private userService: UserService
   ) {
@@ -96,7 +96,7 @@ export class GfAdminSettingsComponent implements OnDestroy, OnInit {
 
   public ngOnInit() {
     this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
@@ -153,11 +153,6 @@ export class GfAdminSettingsComponent implements OnDestroy, OnInit {
     });
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private initialize() {
     this.isLoading = true;
 
@@ -165,7 +160,7 @@ export class GfAdminSettingsComponent implements OnDestroy, OnInit {
 
     this.adminService
       .fetchAdminData()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ dataProviders, settings }) => {
         const filteredProviders = dataProviders.filter(({ dataSource }) => {
           return dataSource !== 'MANUAL';
@@ -193,7 +188,7 @@ export class GfAdminSettingsComponent implements OnDestroy, OnInit {
               filter((status) => {
                 return status !== null;
               }),
-              takeUntil(this.unsubscribeSubject)
+              takeUntilDestroyed(this.destroyRef)
             )
             .subscribe((status) => {
               this.ghostfolioApiStatus = status;

apps/client/src/app/components/admin-tag/admin-tag.component.ts

@@ -10,11 +10,12 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   Input,
-  OnDestroy,
   OnInit,
   ViewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
@@ -31,7 +32,6 @@ import {
 } from 'ionicons/icons';
 import { get } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { Subject, takeUntil } from 'rxjs';
 
 import { GfCreateOrUpdateTagDialogComponent } from './create-or-update-tag-dialog/create-or-update-tag-dialog.component';
 import { CreateOrUpdateTagDialogParams } from './create-or-update-tag-dialog/interfaces/interfaces';
@@ -51,7 +51,7 @@ import { CreateOrUpdateTagDialogParams } from './create-or-update-tag-dialog/int
   styleUrls: ['./admin-tag.component.scss'],
   templateUrl: './admin-tag.component.html'
 })
-export class GfAdminTagComponent implements OnDestroy, OnInit {
+export class GfAdminTagComponent implements OnInit {
   @Input() locale = getLocale();
 
   @ViewChild(MatSort) sort: MatSort;
@@ -61,11 +61,10 @@ export class GfAdminTagComponent implements OnDestroy, OnInit {
   public displayedColumns = ['name', 'userId', 'activities', 'actions'];
   public tags: Tag[];
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
     private notificationService: NotificationService,
@@ -74,7 +73,7 @@ export class GfAdminTagComponent implements OnDestroy, OnInit {
     private userService: UserService
   ) {
     this.route.queryParams
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
         if (params['createTagDialog']) {
           this.openCreateTagDialog();
@@ -116,20 +115,15 @@ export class GfAdminTagComponent implements OnDestroy, OnInit {
     });
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private deleteTag(aId: string) {
     this.dataService
       .deleteTag(aId)
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: () => {
           this.userService
             .get(true)
-            .pipe(takeUntil(this.unsubscribeSubject))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe();
 
           this.fetchTags();
@@ -140,7 +134,7 @@ export class GfAdminTagComponent implements OnDestroy, OnInit {
   private fetchTags() {
     this.dataService
       .fetchTags()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((tags) => {
         this.tags = tags;
 
@@ -171,17 +165,17 @@ export class GfAdminTagComponent implements OnDestroy, OnInit {
 
     dialogRef
       .afterClosed()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((tag: CreateTagDto | null) => {
         if (tag) {
           this.dataService
             .postTag(tag)
-            .pipe(takeUntil(this.unsubscribeSubject))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
               next: () => {
                 this.userService
                   .get(true)
-                  .pipe(takeUntil(this.unsubscribeSubject))
+                  .pipe(takeUntilDestroyed(this.destroyRef))
                   .subscribe();
 
                 this.fetchTags();
@@ -210,17 +204,17 @@ export class GfAdminTagComponent implements OnDestroy, OnInit {
 
     dialogRef
       .afterClosed()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((tag: UpdateTagDto | null) => {
         if (tag) {
           this.dataService
             .putTag(tag)
-            .pipe(takeUntil(this.unsubscribeSubject))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
               next: () => {
                 this.userService
                   .get(true)
-                  .pipe(takeUntil(this.unsubscribeSubject))
+                  .pipe(takeUntilDestroyed(this.destroyRef))
                   .subscribe();
 
                 this.fetchTags();

apps/client/src/app/components/admin-tag/create-or-update-tag-dialog/create-or-update-tag-dialog.component.ts

@@ -1,12 +1,7 @@
 import { CreateTagDto, UpdateTagDto } from '@ghostfolio/common/dtos';
 import { validateObjectForForm } from '@ghostfolio/common/utils';
 
-import {
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-  ChangeDetectionStrategy,
-  Component,
-  Inject,
-  OnDestroy
-} from '@angular/core';
 import {
   FormBuilder,
   FormGroup,
@@ -21,7 +16,6 @@ import {
 } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { Subject } from 'rxjs';
 
 import { CreateOrUpdateTagDialogParams } from './interfaces/interfaces';
 
@@ -40,11 +34,9 @@ import { CreateOrUpdateTagDialogParams } from './interfaces/interfaces';
   styleUrls: ['./create-or-update-tag-dialog.scss'],
   templateUrl: 'create-or-update-tag-dialog.html'
 })
-export class GfCreateOrUpdateTagDialogComponent implements OnDestroy {
+export class GfCreateOrUpdateTagDialogComponent {
   public tagForm: FormGroup;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateTagDialogParams,
     public dialogRef: MatDialogRef<GfCreateOrUpdateTagDialogComponent>,
@@ -85,9 +77,4 @@ export class GfCreateOrUpdateTagDialogComponent implements OnDestroy {
       console.error(error);
     }
   }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }

apps/client/src/app/components/admin-users/admin-users.component.ts

@@ -25,10 +25,11 @@ import { CommonModule } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
-  OnDestroy,
+  DestroyRef,
   OnInit,
   ViewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
@@ -55,8 +56,7 @@ import {
 } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { Subject } from 'rxjs';
+import { switchMap, tap } from 'rxjs/operators';
-import { switchMap, takeUntil, tap } from 'rxjs/operators';
 
 @Component({
   imports: [
@@ -75,7 +75,7 @@ import { switchMap, takeUntil, tap } from 'rxjs/operators';
   styleUrls: ['./admin-users.scss'],
   templateUrl: './admin-users.html'
 })
-export class GfAdminUsersComponent implements OnDestroy, OnInit {
+export class GfAdminUsersComponent implements OnInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
   public dataSource = new MatTableDataSource<AdminUsersResponse['users'][0]>();
@@ -93,12 +93,11 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
   public totalItems = 0;
   public user: User;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
     private impersonationStorageService: ImpersonationStorageService,
@@ -139,7 +138,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
 
     this.userService.stateChanged
       .pipe(
-        takeUntil(this.unsubscribeSubject),
+        takeUntilDestroyed(this.destroyRef),
         tap((state) => {
           if (state?.user) {
             this.user = state.user;
@@ -204,7 +203,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       confirmFn: () => {
         this.dataService
           .deleteUser(aId)
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe(() => {
             this.router.navigate(['..'], { relativeTo: this.route });
           });
@@ -222,7 +221,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       confirmFn: () => {
         this.dataService
           .updateUserAccessToken(aUserId)
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe(({ accessToken }) => {
             this.notificationService.alert({
               discardFn: () => {
@@ -258,11 +257,6 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
     );
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private fetchUsers({ pageIndex }: { pageIndex: number } = { pageIndex: 0 }) {
     this.isLoading = true;
 
@@ -275,7 +269,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
         skip: pageIndex * this.pageSize,
         take: this.pageSize
       })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ count, users }) => {
         this.dataSource = new MatTableDataSource(users);
         this.totalItems = count;
@@ -305,7 +299,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
 
     dialogRef
       .afterClosed()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((data) => {
         if (data?.action === 'delete' && data?.userId) {
           this.onDeleteUser(data.userId);

apps/client/src/app/components/data-provider-status/data-provider-status.component.ts

@@ -4,13 +4,14 @@ import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   Input,
-  OnDestroy,
   OnInit
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import type { DataSource } from '@prisma/client';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { catchError, map, type Observable, of, Subject, takeUntil } from 'rxjs';
+import { catchError, map, type Observable, of } from 'rxjs';
 
 import { DataProviderStatus } from './interfaces/interfaces';
 
@@ -20,14 +21,15 @@ import { DataProviderStatus } from './interfaces/interfaces';
   selector: 'gf-data-provider-status',
   templateUrl: './data-provider-status.component.html'
 })
-export class GfDataProviderStatusComponent implements OnDestroy, OnInit {
+export class GfDataProviderStatusComponent implements OnInit {
   @Input() dataSource: DataSource;
 
   public status$: Observable<DataProviderStatus>;
 
-  private unsubscribeSubject = new Subject<void>();
+  public constructor(
-
+    private dataService: DataService,
-  public constructor(private dataService: DataService) {}
+    private destroyRef: DestroyRef
+  ) {}
 
   public ngOnInit() {
     this.status$ = this.dataService
@@ -39,12 +41,7 @@ export class GfDataProviderStatusComponent implements OnDestroy, OnInit {
         catchError(() => {
           return of({ isHealthy: false });
         }),
-        takeUntil(this.unsubscribeSubject)
+        takeUntilDestroyed(this.destroyRef)
       );
   }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }

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

@@ -24,6 +24,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
+  DestroyRef,
   EventEmitter,
   HostListener,
   Input,
@@ -31,6 +32,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
@@ -48,8 +50,8 @@ import {
   radioButtonOffOutline,
   radioButtonOnOutline
 } from 'ionicons/icons';
-import { EMPTY, Subject } from 'rxjs';
+import { EMPTY } from 'rxjs';
-import { catchError, takeUntil } from 'rxjs/operators';
+import { catchError } from 'rxjs/operators';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -131,10 +133,9 @@ export class GfHeaderComponent implements OnChanges {
   public routerLinkRegister = publicRoutes.register.routerLink;
   public routerLinkResources = publicRoutes.resources.routerLink;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private dialog: MatDialog,
     private impersonationStorageService: ImpersonationStorageService,
     private layoutService: LayoutService,
@@ -146,7 +147,7 @@ export class GfHeaderComponent implements OnChanges {
   ) {
     this.impersonationStorageService
       .onChangeHasImpersonation()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((impersonationId) => {
         this.hasImpersonationId = !!impersonationId;
         this.impersonationId = impersonationId;
@@ -224,11 +225,11 @@ export class GfHeaderComponent implements OnChanges {
   public onDateRangeChange(dateRange: DateRange) {
     this.dataService
       .putUserSetting({ dateRange })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.userService
           .get(true)
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe();
       });
   }
@@ -252,11 +253,11 @@ export class GfHeaderComponent implements OnChanges {
 
     this.dataService
       .putUserSetting(userSetting)
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.userService
           .get(true)
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe();
       });
   }
@@ -301,7 +302,7 @@ export class GfHeaderComponent implements OnChanges {
 
     dialogRef
       .afterClosed()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((data) => {
         if (data?.accessToken) {
           this.dataService
@@ -314,7 +315,7 @@ export class GfHeaderComponent implements OnChanges {
 
                 return EMPTY;
               }),
-              takeUntil(this.unsubscribeSubject)
+              takeUntilDestroyed(this.destroyRef)
             )
             .subscribe(({ authToken }) => {
               this.setToken(authToken);
@@ -331,7 +332,7 @@ export class GfHeaderComponent implements OnChanges {
 
     this.userService
       .get()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((user) => {
         const userLanguage = user?.settings?.language;
 
@@ -342,9 +343,4 @@ export class GfHeaderComponent implements OnChanges {
         }
       });
   }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }

apps/client/src/app/pages/auth/auth-page.component.ts

@@ -4,20 +4,18 @@ import {
 } from '@ghostfolio/client/services/settings-storage.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, DestroyRef, OnInit } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'gf-auth-page',
   styleUrls: ['./auth-page.scss'],
   templateUrl: './auth-page.html'
 })
-export class GfAuthPageComponent implements OnDestroy, OnInit {
+export class GfAuthPageComponent implements OnInit {
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
+    private destroyRef: DestroyRef,
     private route: ActivatedRoute,
     private router: Router,
     private settingsStorageService: SettingsStorageService,
@@ -26,7 +24,7 @@ export class GfAuthPageComponent implements OnDestroy, OnInit {
 
   public ngOnInit() {
     this.route.params
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
         const jwt = params['jwt'];
 
@@ -38,9 +36,4 @@ export class GfAuthPageComponent implements OnDestroy, OnInit {
         this.router.navigate(['/']);
       });
   }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }

apps/client/src/app/pages/public/public-page.component.ts

@@ -19,8 +19,10 @@ import {
   ChangeDetectorRef,
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
+  DestroyRef,
   OnInit
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatTableDataSource } from '@angular/material/table';
@@ -29,8 +31,8 @@ import { AssetClass } from '@prisma/client';
 import { StatusCodes } from 'http-status-codes';
 import { isNumber } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { EMPTY, Subject } from 'rxjs';
+import { EMPTY } from 'rxjs';
-import { catchError, takeUntil } from 'rxjs/operators';
+import { catchError } from 'rxjs/operators';
 
 @Component({
   host: { class: 'page' },
@@ -83,12 +85,12 @@ export class GfPublicPageComponent implements OnInit {
   public UNKNOWN_KEY = UNKNOWN_KEY;
 
   private accessId: string;
-  private unsubscribeSubject = new Subject<void>();
 
   public constructor(
     private activatedRoute: ActivatedRoute,
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private deviceService: DeviceDetectorService,
     private router: Router
   ) {
@@ -110,7 +112,7 @@ export class GfPublicPageComponent implements OnInit {
     this.dataService
       .fetchPublicPortfolio(this.accessId)
       .pipe(
-        takeUntil(this.unsubscribeSubject),
+        takeUntilDestroyed(this.destroyRef),
         catchError((error) => {
           if (error.status === StatusCodes.NOT_FOUND) {
             console.error(error);
@@ -246,9 +248,4 @@ export class GfPublicPageComponent implements OnInit {
       };
     }
   }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }

libs/common/src/lib/helper.spec.ts

@@ -25,7 +25,7 @@ describe('Helper', () => {
 
     it('Get decimal number with group (dot notation)', () => {
       expect(
-        extractNumberFromString({ locale: 'de-CH', value: '99’999.99' })
+        extractNumberFromString({ locale: 'de-CH', value: `99'999.99` })
       ).toEqual(99999.99);
     });
 
@@ -54,12 +54,12 @@ describe('Helper', () => {
     });
 
     it('Get de-CH number format group', () => {
-      expect(getNumberFormatGroup('de-CH')).toEqual('’');
+      expect(getNumberFormatGroup('de-CH')).toEqual(`'`);
     });
 
     it('Get de-CH number format group when it is default', () => {
       languageGetter.mockReturnValue('de-CH');
-      expect(getNumberFormatGroup()).toEqual('’');
+      expect(getNumberFormatGroup()).toEqual(`'`);
     });
 
     it('Get de-DE number format group', () => {

libs/ui/src/lib/tags-selector/interfaces/interfaces.ts

@@ -0,0 +1,7 @@
+import { Tag } from '@prisma/client';
+
+export interface NewTag extends Omit<Tag, 'id'> {
+  id: undefined;
+}
+
+export type SelectedTag = NewTag | Tag;

libs/ui/src/lib/tags-selector/tags-selector.component.html

@@ -2,7 +2,7 @@
   <div class="col">
     @if (readonly) {
       <div class="h5" i18n>Tags</div>
-      @if (tags?.length > 0) {
+      @if (tags && tags.length > 0) {
         <mat-chip-listbox>
           @for (tag of tags; track tag) {
             <mat-chip-option disabled>{{ tag.name }}</mat-chip-option>

libs/ui/src/lib/tags-selector/tags-selector.component.ts

@@ -7,11 +7,11 @@ import {
   ElementRef,
   Input,
   OnChanges,
-  OnDestroy,
   OnInit,
   signal,
-  ViewChild
+  viewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   ControlValueAccessor,
   FormControl,
@@ -30,7 +30,9 @@ import { IonIcon } from '@ionic/angular/standalone';
 import { Tag } from '@prisma/client';
 import { addIcons } from 'ionicons';
 import { addCircleOutline, closeOutline } from 'ionicons/icons';
-import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
+
+import { SelectedTag } from './interfaces/interfaces';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -57,27 +59,28 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
   templateUrl: 'tags-selector.component.html'
 })
 export class GfTagsSelectorComponent
-  implements ControlValueAccessor, OnChanges, OnDestroy, OnInit
+  implements ControlValueAccessor, OnChanges, OnInit
 {
   @Input() hasPermissionToCreateTag = false;
   @Input() readonly = false;
-  @Input() tags: Tag[];
+  @Input() tags: SelectedTag[];
-  @Input() tagsAvailable: Tag[];
+  @Input() tagsAvailable: SelectedTag[];
-
-  @ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
 
-  public filteredOptions: Subject<Tag[]> = new BehaviorSubject([]);
+  public readonly filteredOptions: Subject<SelectedTag[]> = new BehaviorSubject(
+    []
+  );
   public readonly separatorKeysCodes: number[] = [COMMA, ENTER];
   public readonly tagInputControl = new FormControl('');
-  public readonly tagsSelected = signal<Tag[]>([]);
+  public readonly tagsSelected = signal<SelectedTag[]>([]);
 
-  private unsubscribeSubject = new Subject<void>();
+  private readonly tagInput =
+    viewChild.required<ElementRef<HTMLInputElement>>('tagInput');
 
   public constructor() {
     this.tagInputControl.valueChanges
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed())
       .subscribe((value) => {
-        this.filteredOptions.next(this.filterTags(value));
+        this.filteredOptions.next(this.filterTags(value ?? ''));
       });
 
     addIcons({ addCircleOutline, closeOutline });
@@ -106,15 +109,18 @@ export class GfTagsSelectorComponent
       };
     }
 
-    this.tagsSelected.update((tags) => {
+    if (tag) {
-      return [...(tags ?? []), tag];
+      this.tagsSelected.update((tags) => {
-    });
+        return [...(tags ?? []), tag];
+      });
 
-    const newTags = this.tagsSelected();
+      const newTags = this.tagsSelected();
-    this.onChange(newTags);
+      this.onChange(newTags);
-    this.onTouched();
+      this.onTouched();
-    this.tagInput.nativeElement.value = '';
+    }
-    this.tagInputControl.setValue(undefined);
+
+    this.tagInput().nativeElement.value = '';
+    this.tagInputControl.setValue(null);
   }
 
   public onRemoveTag(tag: Tag) {
@@ -130,7 +136,7 @@ export class GfTagsSelectorComponent
     this.updateFilters();
   }
 
-  public registerOnChange(fn: (value: Tag[]) => void) {
+  public registerOnChange(fn: (value: SelectedTag[]) => void) {
     this.onChange = fn;
   }
 
@@ -146,17 +152,12 @@ export class GfTagsSelectorComponent
     }
   }
 
-  public writeValue(value: Tag[]) {
+  public writeValue(value: SelectedTag[]) {
     this.tagsSelected.set(value || []);
     this.updateFilters();
   }
 
-  public ngOnDestroy() {
+  private filterTags(query: string = ''): SelectedTag[] {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
-  private filterTags(query: string = ''): Tag[] {
     const tags = this.tagsSelected() ?? [];
     const tagIds = tags.map(({ id }) => {
       return id;
@@ -170,7 +171,7 @@ export class GfTagsSelectorComponent
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  private onChange = (_value: Tag[]): void => {
+  private onChange = (_value: SelectedTag[]): void => {
     // ControlValueAccessor onChange callback
   };
 

package-lock.json

@@ -27,7 +27,7 @@
         "@codewithdan/observable-store": "2.2.15",
         "@date-fns/utc": "2.1.1",
         "@internationalized/number": "3.6.5",
-        "@ionic/angular": "8.7.8",
+        "@ionic/angular": "8.8.1",
         "@keyv/redis": "4.4.0",
         "@nestjs/bull": "11.0.4",
         "@nestjs/cache-manager": "3.1.0",
@@ -5070,12 +5070,12 @@
       }
     },
     "node_modules/@ionic/angular": {
-      "version": "8.7.8",
+      "version": "8.8.1",
-      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.7.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.8.1.tgz",
-      "integrity": "sha512-IBN5h3nIOwbuglLit48S7wNeg7NHtl/vaKAHDggICyzI92cSg5yYL07Fz59pszhkBlZQUB5SQnml990Zj2bZUg==",
+      "integrity": "sha512-Jp7LbouSHAnR00Dsa8qE1CSOZNqAfBCO0XKXScJNz8NKVoZe5fPGy/CboehGtAQ1xgzh2eDa15zMmyetXjAkYA==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.7.8",
+        "@ionic/core": "8.8.1",
         "ionicons": "^8.0.13",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -5089,14 +5089,17 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "8.7.8",
+      "version": "8.8.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.1.tgz",
-      "integrity": "sha512-GLWb/lz3kocpzTZTeQQ5xxoWz4CKHD6zpnbwJknTKsncebohAaw2KTe7uOw5toKQEDdohTseFuSGoDDBoRQ1Ug==",
+      "integrity": "sha512-ksOUHyOEqoyUIVWcwCNSFZVGwNfP1DKrUVeN/Cdk/Xl9Rdd/5MLHGsrOQpWQfoCf3Csdnw+KHHPrXz/2fzMkMA==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.38.0",
+        "@stencil/core": "4.43.0",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">= 16"
       }
     },
     "node_modules/@ioredis/commands": {
@@ -11930,9 +11933,9 @@
       "license": "MIT"
     },
     "node_modules/@stencil/core": {
-      "version": "4.38.0",
+      "version": "4.43.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
-      "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==",
+      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"

package.json

@@ -72,7 +72,7 @@
     "@codewithdan/observable-store": "2.2.15",
     "@date-fns/utc": "2.1.1",
     "@internationalized/number": "3.6.5",
-    "@ionic/angular": "8.7.8",
+    "@ionic/angular": "8.8.1",
     "@keyv/redis": "4.4.0",
     "@nestjs/bull": "11.0.4",
     "@nestjs/cache-manager": "3.1.0",