From 8b187c96b567edce6b0fa1763cca032206bc7686 Mon Sep 17 00:00:00 2001
From: DmytroSkachko <dmytro.skachko@gmail.com>
Date: Mon, 2 Mar 2026 12:13:24 +0100
Subject: [PATCH] Task/eliminate OnDestroy hook from ZEN page (#6452)

* Eliminate OnDestroy hook
---
 .../src/app/pages/zen/zen-page.component.ts   | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/apps/client/src/app/pages/zen/zen-page.component.ts b/apps/client/src/app/pages/zen/zen-page.component.ts
index 280f33c25..633f15885 100644
--- a/apps/client/src/app/pages/zen/zen-page.component.ts
+++ b/apps/client/src/app/pages/zen/zen-page.component.ts
@@ -2,15 +2,19 @@ import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  OnInit
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { albumsOutline, analyticsOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 @Component({
   host: { class: 'page has-tabs' },
@@ -19,20 +23,19 @@ import { takeUntil } from 'rxjs/operators';
   styleUrls: ['./zen-page.scss'],
   templateUrl: './zen-page.html'
 })
-export class GfZenPageComponent implements OnDestroy, OnInit {
+export class GfZenPageComponent implements OnInit {
   public deviceType: string;
   public tabs: TabConfiguration[] = [];
   public user: User;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
+    private destroyRef: DestroyRef,
     private deviceService: DeviceDetectorService,
     private userService: UserService
   ) {
     this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((state) => {
         if (state?.user) {
           this.tabs = [
@@ -59,9 +62,4 @@ export class GfZenPageComponent implements OnDestroy, OnInit {
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
   }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }