From 55d717ca9397b5e5d3ee5c360b550eedd3dcd5ad Mon Sep 17 00:00:00 2001
From: Erwin-N <111194281+Erwin-N@users.noreply.github.com>
Date: Thu, 12 Mar 2026 20:03:37 +0100
Subject: [PATCH] Task/eliminate OnDestroy lifecycle hook from X-ray page
 (#6522)

* Eliminate OnDestroy lifecycle hook
---
 .../portfolio/x-ray/x-ray-page.component.ts   | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts
index 70b748b10..e97fd4876 100644
--- a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts
@@ -12,7 +12,8 @@ import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 
 import { NgClass } from '@angular/common';
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import {
@@ -21,7 +22,6 @@ import {
   warningOutline
 } from 'ionicons/icons';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { Subject, takeUntil } from 'rxjs';
 
 @Component({
   imports: [
@@ -48,11 +48,10 @@ export class GfXRayPageComponent {
   public statistics: PortfolioReportResponse['xRay']['statistics'];
   public user: User;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private impersonationStorageService: ImpersonationStorageService,
     private userService: UserService
   ) {
@@ -62,13 +61,13 @@ export class GfXRayPageComponent {
   public ngOnInit() {
     this.impersonationStorageService
       .onChangeHasImpersonation()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((impersonationId) => {
         this.hasImpersonationId = !!impersonationId;
       });
 
     this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
@@ -91,28 +90,23 @@ export class GfXRayPageComponent {
   public onRulesUpdated(event: UpdateUserSettingDto) {
     this.dataService
       .putUserSetting(event)
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.userService
           .get(true)
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe();
 
         this.initializePortfolioReport();
       });
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private initializePortfolioReport() {
     this.isLoading = true;
 
     this.dataService
       .fetchPortfolioReport()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ xRay: { categories, statistics } }) => {
         this.categories = categories;
         this.inactiveRules = this.mergeInactiveRules(categories);