Task/add destroyRef explicitly to lib components (#6559)

* Add destroyRef explicitly

libs/ui/src/lib/activities-filter/activities-filter.component.ts

@@ -7,6 +7,7 @@ import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   ElementRef,
   Input,
   OnChanges,
@@ -69,9 +70,9 @@ export class GfActivitiesFilterComponent implements OnChanges {
   protected selectedFilters: Filter[] = [];
   protected readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
-  public constructor() {
+  public constructor(private destroyRef: DestroyRef) {
     this.searchControl.valueChanges
-      .pipe(takeUntilDestroyed())
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((filterOrSearchTerm) => {
         if (filterOrSearchTerm) {
           const searchTerm =

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -12,6 +12,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   ElementRef,
   Input,
   OnChanges,
@@ -123,6 +124,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
 
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
+    private destroyRef: DestroyRef,
     private fireCalculatorService: FireCalculatorService,
     private formBuilder: FormBuilder
   ) {
@@ -135,13 +137,13 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
     );
 
     this.calculatorForm.valueChanges
-      .pipe(takeUntilDestroyed())
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.initialize();
       });
 
     this.calculatorForm.valueChanges
-      .pipe(debounceTime(500), takeUntilDestroyed())
+      .pipe(debounceTime(500), takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         const { projectedTotalAmount, retirementDate } =
           this.calculatorForm.getRawValue();
@@ -156,7 +158,10 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
 
     this.calculatorForm
       .get('annualInterestRate')
-      ?.valueChanges.pipe(debounceTime(500), takeUntilDestroyed())
+      ?.valueChanges.pipe(
+        debounceTime(500),
+        takeUntilDestroyed(this.destroyRef)
+      )
       .subscribe((annualInterestRate) => {
         if (annualInterestRate !== null) {
           this.annualInterestRateChanged.emit(annualInterestRate);
@@ -164,7 +169,10 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
       });
     this.calculatorForm
       .get('paymentPerPeriod')
-      ?.valueChanges.pipe(debounceTime(500), takeUntilDestroyed())
+      ?.valueChanges.pipe(
+        debounceTime(500),
+        takeUntilDestroyed(this.destroyRef)
+      )
       .subscribe((savingsRate) => {
         if (savingsRate !== null) {
           this.savingsRateChanged.emit(savingsRate);
@@ -172,7 +180,10 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
       });
     this.calculatorForm
       .get('projectedTotalAmount')
-      ?.valueChanges.pipe(debounceTime(500), takeUntilDestroyed())
+      ?.valueChanges.pipe(
+        debounceTime(500),
+        takeUntilDestroyed(this.destroyRef)
+      )
       .subscribe((projectedTotalAmount) => {
         if (projectedTotalAmount !== null) {
           this.projectedTotalAmountChanged.emit(projectedTotalAmount);
@@ -180,7 +191,10 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
       });
     this.calculatorForm
       .get('retirementDate')
-      ?.valueChanges.pipe(debounceTime(500), takeUntilDestroyed())
+      ?.valueChanges.pipe(
+        debounceTime(500),
+        takeUntilDestroyed(this.destroyRef)
+      )
       .subscribe((retirementDate) => {
         if (retirementDate !== null) {
           this.retirementDateChanged.emit(retirementDate);