Web 428 memory leaks in multiple components due to unmanaged subscriptions

src/app/organization/holidays/create-holiday/create-holiday.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports. */
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, OnInit, ViewChild, Injectable } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, Injectable } from '@angular/core';
 import {
   UntypedFormBuilder,
   UntypedFormGroup,
@@ -9,6 +9,8 @@ import {
   ReactiveFormsModule
 } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { Dates } from 'app/core/utils/dates';
 import {
   MatTreeFlatDataSource,
@@ -52,7 +54,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     MatIcon
   ]
 })
-export class CreateHolidayComponent implements OnInit {
+export class CreateHolidayComponent implements OnInit, OnDestroy {
   /** Create Holiday form. */
   holidayForm: UntypedFormGroup;
   /** Repayment Scheduling data. */
@@ -63,6 +65,8 @@ export class CreateHolidayComponent implements OnInit {
   minDate = new Date(2000, 0, 1);
   /** Maximum Date allowed. */
   maxDate = new Date(2100, 0, 1);
+  /** Subject for managing subscriptions. */
+  private destroy$ = new Subject<void>();
   // Stores office data in a trie-like structure
   officesTrie: any;
   // Stores office data for access from DOM via Office ID
@@ -111,7 +115,7 @@ export class CreateHolidayComponent implements OnInit {
     private _database: ChecklistDatabase,
     private createHoliday: CreateHoliday
   ) {
-    this.route.data.subscribe((data: { offices: any; holidayTemplate: any }) => {
+    this.route.data.pipe(takeUntil(this.destroy$)).subscribe((data: { offices: any; holidayTemplate: any }) => {
       this.officesData = data.offices;
       this.repaymentSchedulingTypes = data.holidayTemplate;
       // Constructs trie everytime data changes
@@ -124,7 +128,7 @@ export class CreateHolidayComponent implements OnInit {
     this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
 
     // Listens for changes in CheckListDatabase
-    this._database.dataChange.subscribe((data) => {
+    this._database.dataChange.pipe(takeUntil(this.destroy$)).subscribe((data) => {
       this.dataSource.data = data;
     });
   }
@@ -314,13 +318,16 @@ export class CreateHolidayComponent implements OnInit {
    * Sets the conditional controls.
    */
   buildDependencies() {
-    this.holidayForm.get('reschedulingType').valueChanges.subscribe((option: any) => {
-      if (option === 2) {
-        this.holidayForm.addControl('repaymentsRescheduledTo', new UntypedFormControl('', Validators.required));
-      } else {
-        this.holidayForm.removeControl('repaymentsRescheduledTo');
-      }
-    });
+    this.holidayForm
+      .get('reschedulingType')
+      .valueChanges.pipe(takeUntil(this.destroy$))
+      .subscribe((option: any) => {
+        if (option === 2) {
+          this.holidayForm.addControl('repaymentsRescheduledTo', new UntypedFormControl('', Validators.required));
+        } else {
+          this.holidayForm.removeControl('repaymentsRescheduledTo');
+        }
+      });
   }
 
   /**
@@ -350,14 +357,25 @@ export class CreateHolidayComponent implements OnInit {
       locale,
       offices
     };
-    this.organizationService.createHoliday(data).subscribe((response: any) => {
-      this.router.navigate(
-        [
-          '../',
-          response.resourceId
-        ],
-        { relativeTo: this.route }
-      );
-    });
+    this.organizationService
+      .createHoliday(data)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((response: any) => {
+        this.router.navigate(
+          [
+            '../',
+            response.resourceId
+          ],
+          { relativeTo: this.route }
+        );
+      });
+  }
+
+  /**
+   * Component lifecycle hook to clean up subscriptions.
+   */
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }

src/app/organization/holidays/edit-holiday/edit-holiday.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports. */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import {
   UntypedFormBuilder,
   UntypedFormGroup,
@@ -8,6 +8,8 @@ import {
   ReactiveFormsModule
 } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services. */
@@ -26,7 +28,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     ...STANDALONE_SHARED_IMPORTS
   ]
 })
-export class EditHolidayComponent implements OnInit {
+export class EditHolidayComponent implements OnInit, OnDestroy {
   /** Edit Holiday form. */
   holidayForm: UntypedFormGroup;
   /** Holiday data. */
@@ -39,6 +41,8 @@ export class EditHolidayComponent implements OnInit {
   minDate = new Date(2000, 0, 1);
   /** Maximum Date allowed. */
   maxDate = new Date();
+  /** Subject for managing subscriptions. */
+  private destroy$ = new Subject<void>();
 
   /**
    * Get holiday and holiday template from `Resolver`.
@@ -56,7 +60,7 @@ export class EditHolidayComponent implements OnInit {
     private settingsService: SettingsService,
     private router: Router
   ) {
-    this.route.data.subscribe((data: { holiday: any; holidayTemplate: any }) => {
+    this.route.data.pipe(takeUntil(this.destroy$)).subscribe((data: { holiday: any; holidayTemplate: any }) => {
       this.holidayData = data.holiday;
       this.holidayData.repaymentSchedulingTypes = data.holidayTemplate;
       this.reSchedulingType = this.holidayData.reschedulingType;
@@ -116,14 +120,20 @@ export class EditHolidayComponent implements OnInit {
    * Get Rescheduling Type.
    */
   getReschedulingType() {
-    this.holidayForm.get('reschedulingType').valueChanges.subscribe((option: any) => {
-      this.reSchedulingType = option;
-      if (option === 2) {
-        this.holidayForm.addControl('repaymentsRescheduledTo', new UntypedFormControl(new Date(), Validators.required));
-      } else {
-        this.holidayForm.removeControl('repaymentsRescheduledTo');
-      }
-    });
+    this.holidayForm
+      .get('reschedulingType')
+      .valueChanges.pipe(takeUntil(this.destroy$))
+      .subscribe((option: any) => {
+        this.reSchedulingType = option;
+        if (option === 2) {
+          this.holidayForm.addControl(
+            'repaymentsRescheduledTo',
+            new UntypedFormControl(new Date(), Validators.required)
+          );
+        } else {
+          this.holidayForm.removeControl('repaymentsRescheduledTo');
+        }
+      });
   }
 
   /**
@@ -155,9 +165,20 @@ export class EditHolidayComponent implements OnInit {
       dateFormat,
       locale
     };
-    this.organizatioService.updateHoliday(this.holidayData.id, data).subscribe((response) => {
-      /** TODO Add Redirects to ViewMakerCheckerTask page. */
-      this.router.navigate(['../'], { relativeTo: this.route });
-    });
+    this.organizatioService
+      .updateHoliday(this.holidayData.id, data)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((response) => {
+        /** TODO Add Redirects to ViewMakerCheckerTask page. */
+        this.router.navigate(['../'], { relativeTo: this.route });
+      });
+  }
+
+  /**
+   * Component lifecycle hook to clean up subscriptions.
+   */
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-charges-step/fixed-deposit-product-charges-step.component.ts

@@ -1,7 +1,11 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 
+/** RxJS Imports */
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
 import { TranslateService } from '@ngx-translate/core';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { MatButton, MatIconButton } from '@angular/material/button';
@@ -47,7 +51,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     FormatNumberPipe
   ]
 })
-export class FixedDepositProductChargesStepComponent implements OnInit {
+export class FixedDepositProductChargesStepComponent implements OnInit, OnDestroy {
   @Input() fixedDepositProductsTemplate: any;
   @Input() currencyCode: UntypedFormControl;
 
@@ -61,6 +65,8 @@ export class FixedDepositProductChargesStepComponent implements OnInit {
     'chargeTimeType',
     'action'
   ];
+  /** Subject to handle subscription cleanup */
+  private destroy$ = new Subject<void>();
 
   constructor(
     public dialog: MatDialog,
@@ -74,7 +80,12 @@ export class FixedDepositProductChargesStepComponent implements OnInit {
     } else {
       this.chargesDataSource = [];
     }
-    this.currencyCode.valueChanges.subscribe(() => (this.chargesDataSource = []));
+    this.currencyCode.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => (this.chargesDataSource = []));
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   addCharge(charge: any) {

src/app/products/loan-products/loan-product-stepper/loan-product-charges-step/loan-product-charges-step.component.ts

@@ -1,7 +1,11 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 
+/** RxJS Imports */
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
 import { TranslateService } from '@ngx-translate/core';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { MatButton, MatIconButton } from '@angular/material/button';
@@ -51,7 +55,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     FormatNumberPipe
   ]
 })
-export class LoanProductChargesStepComponent implements OnInit {
+export class LoanProductChargesStepComponent implements OnInit, OnDestroy {
   @Input() loanProductsTemplate: any;
   @Input() currencyCode: UntypedFormControl;
   @Input() multiDisburseLoan: UntypedFormControl;
@@ -69,6 +73,8 @@ export class LoanProductChargesStepComponent implements OnInit {
   ];
 
   pristine = true;
+  /** Subject to handle subscription cleanup */
+  private destroy$ = new Subject<void>();
 
   constructor(
     public dialog: MatDialog,
@@ -86,8 +92,13 @@ export class LoanProductChargesStepComponent implements OnInit {
     this.chargesDataSource = this.loanProductsTemplate.charges || [];
     this.pristine = true;
 
-    this.currencyCode.valueChanges.subscribe(() => (this.chargesDataSource = []));
-    this.multiDisburseLoan.valueChanges.subscribe(() => (this.chargesDataSource = []));
+    this.currencyCode.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => (this.chargesDataSource = []));
+    this.multiDisburseLoan.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => (this.chargesDataSource = []));
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   addCharge(charge: any) {

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-charges-step/recurring-deposit-product-charges-step.component.ts

@@ -1,7 +1,11 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 
+/** RxJS Imports */
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
 import { TranslateService } from '@ngx-translate/core';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { MatButton, MatIconButton } from '@angular/material/button';
@@ -45,7 +49,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     ChargesFilterPipe
   ]
 })
-export class RecurringDepositProductChargesStepComponent implements OnInit {
+export class RecurringDepositProductChargesStepComponent implements OnInit, OnDestroy {
   @Input() recurringDepositProductsTemplate: any;
   @Input() currencyCode: UntypedFormControl;
 
@@ -59,6 +63,8 @@ export class RecurringDepositProductChargesStepComponent implements OnInit {
     'chargeTimeType',
     'action'
   ];
+  /** Subject to handle subscription cleanup */
+  private destroy$ = new Subject<void>();
 
   constructor(
     public dialog: MatDialog,
@@ -72,7 +78,12 @@ export class RecurringDepositProductChargesStepComponent implements OnInit {
     } else {
       this.chargesDataSource = [];
     }
-    this.currencyCode.valueChanges.subscribe(() => (this.chargesDataSource = []));
+    this.currencyCode.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => (this.chargesDataSource = []));
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   addCharge(charge: any) {

src/app/products/share-products/share-product-stepper/share-product-charges-step/share-product-charges-step.component.ts

@@ -1,7 +1,11 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 
+/** RxJS Imports */
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
 import { TranslateService } from '@ngx-translate/core';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { MatButton, MatIconButton } from '@angular/material/button';
@@ -47,7 +51,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     FormatNumberPipe
   ]
 })
-export class ShareProductChargesStepComponent implements OnInit {
+export class ShareProductChargesStepComponent implements OnInit, OnDestroy {
   @Input() shareProductsTemplate: any;
   @Input() currencyCode: UntypedFormControl;
 
@@ -63,6 +67,8 @@ export class ShareProductChargesStepComponent implements OnInit {
   ];
 
   pristine = true;
+  /** Subject to handle subscription cleanup */
+  private destroy$ = new Subject<void>();
 
   constructor(
     public dialog: MatDialog,
@@ -75,7 +81,12 @@ export class ShareProductChargesStepComponent implements OnInit {
     this.chargesDataSource = this.shareProductsTemplate.charges || [];
     this.pristine = true;
 
-    this.currencyCode.valueChanges.subscribe(() => (this.chargesDataSource = []));
+    this.currencyCode.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => (this.chargesDataSource = []));
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   addCharge(charge: any) {