Task/eliminate OnDestroy lifecycle hook from FIRE page (#6521)

* Eliminate OnDestroy lifecycle hook

apps/client/src/app/pages/portfolio/fire/fire-page.component.ts

@@ -12,14 +12,18 @@ import { DataService } from '@ghostfolio/ui/services';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule, NgStyle } from '@angular/common';
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  OnInit
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FormControl } from '@angular/forms';
 import { Big } from 'big.js';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 @Component({
   imports: [
@@ -36,7 +40,7 @@ import { takeUntil } from 'rxjs/operators';
   styleUrls: ['./fire-page.scss'],
   templateUrl: './fire-page.html'
 })
-export class GfFirePageComponent implements OnDestroy, OnInit {
+export class GfFirePageComponent implements OnInit {
   public deviceType: string;
   public fireWealth: FireWealth;
   public hasImpersonationId: boolean;
@@ -52,11 +56,10 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
   public withdrawalRatePerYear: Big;
   public withdrawalRatePerYearProjected: Big;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private deviceService: DeviceDetectorService,
     private impersonationStorageService: ImpersonationStorageService,
     private userService: UserService
@@ -68,7 +71,7 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
 
     this.dataService
       .fetchPortfolioDetails()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ summary }) => {
         this.fireWealth = {
           today: {
@@ -92,19 +95,19 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
 
     this.impersonationStorageService
       .onChangeHasImpersonation()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((impersonationId) => {
         this.hasImpersonationId = !!impersonationId;
       });
 
     this.safeWithdrawalRateControl.valueChanges
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((value) => {
         this.onSafeWithdrawalRateChange(Number(value));
       });
 
     this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
@@ -132,11 +135,11 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
   public onAnnualInterestRateChange(annualInterestRate: number) {
     this.dataService
       .putUserSetting({ annualInterestRate })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.userService
           .get(true)
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe((user) => {
             this.user = user;
 
@@ -163,11 +166,11 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
         retirementDate: retirementDate.toISOString(),
         projectedTotalAmount: null
       })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.userService
           .get(true)
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe((user) => {
             this.user = user;
 
@@ -179,11 +182,11 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
   public onSafeWithdrawalRateChange(safeWithdrawalRate: number) {
     this.dataService
       .putUserSetting({ safeWithdrawalRate })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.userService
           .get(true)
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe((user) => {
             this.user = user;
 
@@ -198,11 +201,11 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
   public onSavingsRateChange(savingsRate: number) {
     this.dataService
       .putUserSetting({ savingsRate })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.userService
           .get(true)
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe((user) => {
             this.user = user;
 
@@ -217,11 +220,11 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
         projectedTotalAmount,
         retirementDate: null
       })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.userService
           .get(true)
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe((user) => {
             this.user = user;
 
@@ -230,11 +233,6 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
       });
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private calculateWithdrawalRates() {
     if (this.fireWealth && this.user?.settings?.safeWithdrawalRate) {
       this.withdrawalRatePerYear = new Big(