diff --git a/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.ts b/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.ts
index ddc9e544c4..94426727c8 100644
--- a/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.ts
+++ b/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.ts
@@ -14,14 +14,13 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Component, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 import { aggregationTranslations, AggregationType } from '@shared/models/time/time.models';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-aggregation-type-select',
@@ -33,7 +32,7 @@ import { takeUntil } from 'rxjs/operators';
     multi: true
   }]
 })
-export class AggregationTypeSelectComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
+export class AggregationTypeSelectComponent implements ControlValueAccessor, OnInit, OnChanges {
 
   aggregationTypeFormGroup: FormGroup;
 
@@ -77,26 +76,13 @@ export class AggregationTypeSelectComponent implements ControlValueAccessor, OnI
 
   private propagateChange = (v: any) => { };
 
-  private destroy$ = new Subject<void>();
-
   constructor(private translate: TranslateService,
               private fb: FormBuilder) {
     this.aggregationTypeFormGroup = this.fb.group({
       aggregationType: [null]
     });
-  }
-
-  registerOnChange(fn: any): void {
-    this.propagateChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-  }
-
-  ngOnInit() {
-    this.aggregationTypes = this.allowedAggregationTypes?.length ? this.allowedAggregationTypes : this.allAggregationTypes;
     this.aggregationTypeFormGroup.get('aggregationType').valueChanges.pipe(
-      takeUntil(this.destroy$)
+      takeUntilDestroyed()
     ).subscribe(
       (value) => {
         let modelValue;
@@ -110,17 +96,23 @@ export class AggregationTypeSelectComponent implements ControlValueAccessor, OnI
     );
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    for (const propName of Object.keys(changes)) {
-      const change = changes[propName];
-      if (!change.firstChange && change.currentValue !== change.previousValue) {
-        if (propName === 'allowedAggregationTypes') {
-          this.aggregationTypes = this.allowedAggregationTypes?.length ? this.allowedAggregationTypes : this.allAggregationTypes;
-          const currentAggregationType: AggregationType = this.aggregationTypeFormGroup.get('aggregationType').value;
-          if (currentAggregationType && !this.aggregationTypes.includes(currentAggregationType)) {
-            this.aggregationTypeFormGroup.get('aggregationType').patchValue(this.aggregationTypes[0], {emitEvent: true});
-          }
-        }
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+  }
+
+  ngOnInit() {
+    this.aggregationTypes = this.allowedAggregationTypes?.length ? this.allowedAggregationTypes : this.allAggregationTypes;
+  }
+
+  ngOnChanges({allowedAggregationTypes}: SimpleChanges): void {
+    if (!allowedAggregationTypes.firstChange && allowedAggregationTypes.currentValue !== allowedAggregationTypes.previousValue) {
+      this.aggregationTypes = this.allowedAggregationTypes?.length ? this.allowedAggregationTypes : this.allAggregationTypes;
+      const currentAggregationType: AggregationType = this.aggregationTypeFormGroup.get('aggregationType').value;
+      if (currentAggregationType && !this.aggregationTypes.includes(currentAggregationType)) {
+        this.aggregationTypeFormGroup.get('aggregationType').patchValue(this.aggregationTypes[0], {emitEvent: true});
       }
     }
   }
@@ -159,8 +151,4 @@ export class AggregationTypeSelectComponent implements ControlValueAccessor, OnI
     }
   }
 
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }
diff --git a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.ts b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.ts
index 247fd144ff..c5b7dba0dc 100644
--- a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.ts
+++ b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.ts
@@ -14,13 +14,12 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Component, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { QuickTimeInterval, QuickTimeIntervalTranslationMap } from '@shared/models/time/time.models';
 import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/decorators/coercion';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-quick-time-interval',
@@ -34,7 +33,7 @@ import { takeUntil } from 'rxjs/operators';
     }
   ]
 })
-export class QuickTimeIntervalComponent implements OnInit, ControlValueAccessor, OnChanges, OnDestroy {
+export class QuickTimeIntervalComponent implements OnInit, ControlValueAccessor, OnChanges {
 
   private allIntervals = Object.values(QuickTimeInterval);
 
@@ -68,14 +67,12 @@ export class QuickTimeIntervalComponent implements OnInit, ControlValueAccessor,
 
   private propagateChange = (_: any) => {};
 
-  private destroy$ = new Subject<void>();
-
   constructor(private fb: FormBuilder) {
     this.quickIntervalFormGroup = this.fb.group({
       interval: [ null ]
     });
     this.quickIntervalFormGroup.get('interval').valueChanges.pipe(
-      takeUntil(this.destroy$)
+      takeUntilDestroyed()
     ).subscribe((value) => {
       let modelValue;
       if (!value) {
@@ -92,17 +89,12 @@ export class QuickTimeIntervalComponent implements OnInit, ControlValueAccessor,
     this.intervals = this.allowedIntervals?.length ? this.allowedIntervals : this.allAvailableIntervals;
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    for (const propName of Object.keys(changes)) {
-      const change = changes[propName];
-      if (!change.firstChange && change.currentValue !== change.previousValue) {
-        if (propName === 'allowedIntervals') {
-          this.intervals = this.allowedIntervals?.length ? this.allowedIntervals : this.allAvailableIntervals;
-          const currentInterval: QuickTimeInterval = this.quickIntervalFormGroup.get('interval').value;
-          if (currentInterval && !this.intervals.includes(currentInterval)) {
-            this.quickIntervalFormGroup.get('interval').patchValue(this.intervals[0], {emitEvent: true});
-          }
-        }
+  ngOnChanges({allowedIntervals}: SimpleChanges): void {
+    if (!allowedIntervals.firstChange && allowedIntervals.currentValue !== allowedIntervals.previousValue) {
+      this.intervals = this.allowedIntervals?.length ? this.allowedIntervals : this.allAvailableIntervals;
+      const currentInterval: QuickTimeInterval = this.quickIntervalFormGroup.get('interval').value;
+      if (currentInterval && !this.intervals.includes(currentInterval)) {
+        this.quickIntervalFormGroup.get('interval').patchValue(this.intervals[0], {emitEvent: true});
       }
     }
   }
@@ -140,11 +132,6 @@ export class QuickTimeIntervalComponent implements OnInit, ControlValueAccessor,
     }
   }
 
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
   private getAllAvailableIntervals() {
     if (this.onlyCurrentInterval) {
       return this.allIntervals.filter(interval => interval.startsWith('CURRENT_'));