Merge pull request #12301 from vvlladd28/bug/memory-leak/platform-form

Fixed memory leak in form handling

ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.ts

@@ -16,6 +16,7 @@
 
 import {
   Component,
+  DestroyRef,
   ElementRef,
   forwardRef,
   Inject,
@@ -46,6 +47,7 @@ import { EntityType } from '@shared/models/entity-type.models';
 import { fromEvent, Subscription } from 'rxjs';
 import { POSITION_MAP } from '@shared/models/overlay.models';
 import { UtilsService } from '@core/services/utils.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export const ALARM_FILTER_CONFIG_DATA = new InjectionToken<any>('AlarmFilterConfigData');
 
@@ -129,7 +131,8 @@ export class AlarmFilterConfigComponent implements OnInit, OnDestroy, ControlVal
               private overlay: Overlay,
               private nativeElement: ElementRef,
               private viewContainerRef: ViewContainerRef,
-              private utils: UtilsService) {
+              private utils: UtilsService,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -149,7 +152,9 @@ export class AlarmFilterConfigComponent implements OnInit, OnDestroy, ControlVal
       searchPropagatedAlarms: [false, []],
       assigneeId: [AlarmAssigneeOption.noAssignee, []]
     });
-    this.alarmFilterConfigForm.valueChanges.subscribe(
+    this.alarmFilterConfigForm.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => {
         if (!this.buttonMode) {
           this.alarmConfigUpdated(this.alarmFilterConfigForm.value);

ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
+import { Component, DestroyRef, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
@@ -40,6 +40,7 @@ import { DialogService } from '@core/services/dialog.service';
 import { deepClone, isUndefined } from '@core/utils';
 import { EntityAliasDialogComponent, EntityAliasDialogData } from './entity-alias-dialog.component';
 import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface EntityAliasesDialogData {
   entityAliases: EntityAliases;
@@ -80,7 +81,8 @@ export class EntityAliasesDialogComponent extends DialogComponent<EntityAliasesD
               private dashboardUtils: DashboardUtilsService,
               private translate: TranslateService,
               private dialogs: DialogService,
-              private dialog: MatDialog) {
+              private dialog: MatDialog,
+              private destroyRef: DestroyRef) {
     super(store, router, dialogRef);
     this.title = data.customTitle ? data.customTitle : 'entity.aliases';
     this.disableAdd = this.data.disableAdd;
@@ -151,7 +153,9 @@ export class EntityAliasesDialogComponent extends DialogComponent<EntityAliasesD
       filter: [entityAlias ? entityAlias.filter : null],
       resolveMultiple: [entityAlias ? entityAlias.filter.resolveMultiple : false]
     });
-    aliasFormControl.get('resolveMultiple').valueChanges.subscribe((resolveMultiple: boolean) => {
+    aliasFormControl.get('resolveMultiple').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((resolveMultiple: boolean) => {
       (aliasFormControl.get('filter').value as EntityAliasFilter).resolveMultiple = resolveMultiple;
     });
     return aliasFormControl;

ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.ts

@@ -40,6 +40,7 @@ import { AliasesInfo } from '@shared/models/alias.models';
 import { ItemBufferService } from '@core/services/item-buffer.service';
 import { StateObject } from '@core/api/widget-api.models';
 import { FiltersInfo } from '@shared/models/query/query.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface AddWidgetToDashboardDialogData {
   entityId: EntityId;
@@ -83,7 +84,9 @@ export class AddWidgetToDashboardDialogComponent extends
       }
     );
 
-    this.addWidgetFormGroup.get('addToDashboardType').valueChanges.subscribe(
+    this.addWidgetFormGroup.get('addToDashboardType').valueChanges.pipe(
+      takeUntilDestroyed()
+    ).subscribe(
       (addToDashboardType: number) => {
         if (addToDashboardType === 0) {
           this.addWidgetFormGroup.get('dashboardId').setValidators([Validators.required]);

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.ts

@@ -28,6 +28,7 @@ import html2canvas from 'html2canvas';
 import { map, share } from 'rxjs/operators';
 import { BehaviorSubject, from } from 'rxjs';
 import { isNumber } from '@core/utils';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface DashboardImageDialogData {
   dashboardId: DashboardId;
@@ -84,7 +85,9 @@ export class DashboardImageDialogComponent extends DialogComponent<DashboardImag
       dashboardImage: [this.data.currentImage]
     });
 
-    this.dashboardImageFormGroup.get('dashboardImage').valueChanges.subscribe(
+    this.dashboardImageFormGroup.get('dashboardImage').valueChanges.pipe(
+      takeUntilDestroyed()
+    ).subscribe(
       (newImage) => {
         this.updateImage(newImage);
       }

ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts

@@ -34,6 +34,7 @@ import { DashboardState } from '@app/shared/models/dashboard.models';
 import { DashboardStateInfo } from '@home/components/dashboard-page/states/manage-dashboard-states-dialog.component.models';
 import { TranslateService } from '@ngx-translate/core';
 import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface DashboardStateDialogData {
   states: {[id: string]: DashboardState };
@@ -89,11 +90,15 @@ export class DashboardStateDialogComponent extends
       root: [this.state.root, []],
     });
 
-    this.stateFormGroup.get('name').valueChanges.subscribe((name: string) => {
+    this.stateFormGroup.get('name').valueChanges.pipe(
+      takeUntilDestroyed()
+    ).subscribe((name: string) => {
       this.checkStateName(name);
     });
 
-    this.stateFormGroup.get('id').valueChanges.subscribe((id: string) => {
+    this.stateFormGroup.get('id').valueChanges.pipe(
+      takeUntilDestroyed()
+    ).subscribe((id: string) => {
       this.stateIdTouched = true;
     });
   }

ui-ngx/src/app/modules/home/components/device/device-info-filter.component.ts

@@ -17,6 +17,7 @@
 import {
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   ElementRef,
   forwardRef,
   Inject,
@@ -38,6 +39,7 @@ import { DeviceInfoFilter } from '@shared/models/device.models';
 import { isDefinedAndNotNull } from '@core/utils';
 import { EntityInfoData } from '@shared/models/entity.models';
 import { DeviceProfileService } from '@core/http/device-profile.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export const DEVICE_FILTER_CONFIG_DATA = new InjectionToken<any>('DeviceFilterConfigData');
 
@@ -96,7 +98,8 @@ export class DeviceInfoFilterComponent implements OnInit, OnDestroy, ControlValu
               private nativeElement: ElementRef,
               private viewContainerRef: ViewContainerRef,
               private deviceProfileService: DeviceProfileService,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -108,7 +111,9 @@ export class DeviceInfoFilterComponent implements OnInit, OnDestroy, ControlValu
       deviceProfileId: [null, []],
       active: ['', []]
     });
-    this.deviceInfoFilterForm.valueChanges.subscribe(
+    this.deviceInfoFilterForm.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => {
         this.updateValidators();
         if (!this.buttonMode) {

ui-ngx/src/app/modules/home/components/entity/contact-based.component.ts

@@ -18,15 +18,18 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { ContactBased } from '@shared/models/contact-based.model';
-import { AfterViewInit, ChangeDetectorRef, Directive } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, DestroyRef, Directive, inject } from '@angular/core';
 import { HasId } from '@shared/models/base-data';
 import { EntityComponent } from './entity.component';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import { CountryData } from '@shared/models/country.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Directive()
 export abstract class ContactBasedComponent<T extends ContactBased<HasId>> extends EntityComponent<T> implements AfterViewInit {
 
+  protected destroyRef = inject(DestroyRef);
+
   protected constructor(protected store: Store<AppState>,
                         protected fb: UntypedFormBuilder,
                         protected entityValue: T,
@@ -65,7 +68,9 @@ export abstract class ContactBasedComponent<T extends ContactBased<HasId>> exten
   }
 
   ngAfterViewInit() {
-    this.entityForm.get('country').valueChanges.subscribe(
+    this.entityForm.get('country').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       (country) => {
         this.entityForm.get('zip').setValidators(this.zipValidators(country));
         this.entityForm.get('zip').updateValueAndValidity({onlySelf: true});

ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   UntypedFormBuilder,
@@ -32,6 +32,7 @@ import {
   EntityKeyValueType,
   FilterPredicateType
 } from '@shared/models/query/query.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-boolean-filter-predicate',
@@ -68,7 +69,8 @@ export class BooleanFilterPredicateComponent implements ControlValueAccessor, Va
 
   private propagateChange = null;
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -76,7 +78,9 @@ export class BooleanFilterPredicateComponent implements ControlValueAccessor, Va
       operation: [BooleanOperation.EQUAL, [Validators.required]],
       value: [null, [Validators.required]]
     });
-    this.booleanFilterPredicateFormGroup.valueChanges.subscribe(() => {
+    this.booleanFilterPredicateFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   UntypedFormBuilder,
@@ -35,6 +35,7 @@ import {
   inheritModeForDynamicValueSourceType,
   StringOperation
 } from '@shared/models/query/query.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-filter-predicate-value',
@@ -113,7 +114,8 @@ export class FilterPredicateValueComponent implements ControlValueAccessor, Vali
   private propagateChange = null;
   private propagateChangePending = false;
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -147,7 +149,9 @@ export class FilterPredicateValueComponent implements ControlValueAccessor, Vali
         }
       )
     });
-    this.filterPredicateValueFormGroup.get('dynamicValue').get('sourceType').valueChanges.subscribe(
+    this.filterPredicateValueFormGroup.get('dynamicValue').get('sourceType').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       (sourceType) => {
         if (!sourceType) {
           this.filterPredicateValueFormGroup.get('dynamicValue').get('sourceAttribute').patchValue(null, {emitEvent: false});
@@ -156,7 +160,9 @@ export class FilterPredicateValueComponent implements ControlValueAccessor, Vali
       }
     );
     this.updateValidationDynamicMode();
-    this.filterPredicateValueFormGroup.valueChanges.subscribe(() => {
+    this.filterPredicateValueFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   UntypedFormBuilder,
@@ -26,6 +26,7 @@ import {
   Validators
 } from '@angular/forms';
 import { EntityKeyValueType, FilterPredicateType, KeyFilterPredicateInfo } from '@shared/models/query/query.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-filter-predicate',
@@ -66,7 +67,8 @@ export class FilterPredicateComponent implements ControlValueAccessor, Validator
 
   private propagateChange = null;
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -74,7 +76,9 @@ export class FilterPredicateComponent implements ControlValueAccessor, Validator
       predicate: [null, [Validators.required]],
       userInfo: [null, []]
     });
-    this.filterPredicateFormGroup.valueChanges.subscribe(() => {
+    this.filterPredicateFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.ts

@@ -29,6 +29,7 @@ import {
   StringOperation
 } from '@shared/models/query/query.models';
 import { TranslateService } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface FilterUserInfoDialogData {
   key: string;
@@ -73,7 +74,9 @@ export class FilterUserInfoDialogComponent extends
     );
     this.onAutogeneratedLabelChange();
     if (!this.data.readonly) {
-      this.filterUserInfoFormGroup.get('autogeneratedLabel').valueChanges.subscribe(() => {
+      this.filterUserInfoFormGroup.get('autogeneratedLabel').valueChanges.pipe(
+        takeUntilDestroyed()
+      ).subscribe(() => {
         this.onAutogeneratedLabelChange();
       });
     } else {

ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   UntypedFormBuilder,
@@ -32,6 +32,7 @@ import {
   NumericOperation,
   numericOperationTranslationMap,
 } from '@shared/models/query/query.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-numeric-filter-predicate',
@@ -70,7 +71,8 @@ export class NumericFilterPredicateComponent implements ControlValueAccessor, Va
 
   private propagateChange = null;
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -78,7 +80,9 @@ export class NumericFilterPredicateComponent implements ControlValueAccessor, Va
       operation: [NumericOperation.EQUAL, [Validators.required]],
       value: [null, [Validators.required]]
     });
-    this.numericFilterPredicateFormGroup.valueChanges.subscribe(() => {
+    this.numericFilterPredicateFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   UntypedFormBuilder,
@@ -32,6 +32,7 @@ import {
   StringOperation,
   stringOperationTranslationMap
 } from '@shared/models/query/query.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-string-filter-predicate',
@@ -68,7 +69,8 @@ export class StringFilterPredicateComponent implements ControlValueAccessor, Val
 
   private propagateChange = null;
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -77,7 +79,9 @@ export class StringFilterPredicateComponent implements ControlValueAccessor, Val
       value: [null, [Validators.required]],
       ignoreCase: [false]
     });
-    this.stringFilterPredicateFormGroup.valueChanges.subscribe(() => {
+    this.stringFilterPredicateFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
+import { Component, DestroyRef, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
@@ -38,6 +38,7 @@ import {
   UserFilterInputInfo
 } from '@shared/models/query/query.models';
 import { isDefinedAndNotNull } from '@core/utils';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface UserFilterDialogData {
   filter: Filter;
@@ -66,7 +67,8 @@ export class UserFilterDialogComponent extends DialogComponent<UserFilterDialogC
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<UserFilterDialogComponent, Filter>,
               private fb: UntypedFormBuilder,
-              public translate: TranslateService) {
+              public translate: TranslateService,
+              private destroyRef: DestroyRef) {
     super(store, router, dialogRef);
     this.filter = data.filter;
     const userInputs = filterToUserFilterInfoList(this.filter, translate);
@@ -91,7 +93,9 @@ export class UserFilterDialogComponent extends DialogComponent<UserFilterDialogC
         userInput.valueType === EntityKeyValueType.NUMERIC ||
         userInput.valueType === EntityKeyValueType.DATE_TIME  ? [Validators.required] : []]
     });
-    userInputControl.get('value').valueChanges.subscribe(userValue => {
+    userInputControl.get('value').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(userValue => {
       (userInput.info.keyFilterPredicate as any).value.userValue = userValue;
     });
     return userInputControl;

ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts

@@ -46,6 +46,7 @@ import { Observable } from 'rxjs';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { map } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface AddDeviceProfileDialogData {
   deviceProfileName: string;
@@ -125,7 +126,9 @@ export class AddDeviceProfileDialogComponent extends
           [Validators.required]]
       }
     );
-    this.transportConfigFormGroup.get('transportType').valueChanges.subscribe(() => {
+    this.transportConfigFormGroup.get('transportType').valueChanges.pipe(
+      takeUntilDestroyed()
+    ).subscribe(() => {
       this.deviceProfileTransportTypeChanged();
     });
 

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import {
   DynamicValueSourceType,
@@ -24,6 +24,7 @@ import {
   inheritModeForDynamicValueSourceType
 } from '@shared/models/query/query.models';
 import { AlarmConditionType } from '@shared/models/device.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-alarm-duration-predicate-value',
@@ -76,7 +77,8 @@ export class AlarmDurationPredicateValueComponent implements ControlValueAccesso
 
   private propagateChange = null;
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -90,7 +92,9 @@ export class AlarmDurationPredicateValueComponent implements ControlValueAccesso
         }
       )
     });
-    this.alarmDurationPredicateValueFormGroup.get('dynamicValue').get('sourceType').valueChanges.subscribe(
+    this.alarmDurationPredicateValueFormGroup.get('dynamicValue').get('sourceType').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       (sourceType) => {
         if (!sourceType) {
           this.alarmDurationPredicateValueFormGroup.get('dynamicValue').get('sourceAttribute').patchValue(null, {emitEvent: false});
@@ -98,7 +102,9 @@ export class AlarmDurationPredicateValueComponent implements ControlValueAccesso
         this.updateShowInheritMode(sourceType);
       }
     );
-    this.alarmDurationPredicateValueFormGroup.valueChanges.subscribe(() => {
+    this.alarmDurationPredicateValueFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   UntypedFormBuilder,
@@ -26,6 +26,7 @@ import {
   dynamicValueSourceTypeTranslationMap,
   getDynamicSourcesForAllowUser
 } from '@shared/models/query/query.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-alarm-dynamic-value',
@@ -49,7 +50,8 @@ export class AlarmDynamicValue implements ControlValueAccessor, OnInit{
   @Input()
   disabled: boolean;
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -58,7 +60,9 @@ export class AlarmDynamicValue implements ControlValueAccessor, OnInit{
       sourceAttribute: [null]
     })
 
-    this.dynamicValue.get('sourceType').valueChanges.subscribe(
+    this.dynamicValue.get('sourceType').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       (sourceType) => {
         if (!sourceType) {
           this.dynamicValue.get('sourceAttribute').patchValue(null, {emitEvent: false});
@@ -66,7 +70,9 @@ export class AlarmDynamicValue implements ControlValueAccessor, OnInit{
       }
     );
 
-    this.dynamicValue.valueChanges.subscribe(() => {
+    this.dynamicValue.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     })
   }

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.ts

@@ -27,6 +27,7 @@ import { keyFilterInfosToKeyFilters, keyFiltersToKeyFilterInfos } from '@shared/
 import { AlarmCondition, AlarmConditionType, AlarmConditionTypeTranslationMap } from '@shared/models/device.models';
 import { TimeUnit, timeUnitTranslationMap } from '@shared/models/time/time.models';
 import { EntityId } from '@shared/models/id/entity-id';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface AlarmRuleConditionDialogData {
   readonly: boolean;
@@ -74,7 +75,9 @@ export class AlarmRuleConditionDialogComponent extends DialogComponent<AlarmRule
       })
     });
     this.conditionFormGroup.patchValue({spec: this.condition?.spec});
-    this.conditionFormGroup.get('spec.type').valueChanges.subscribe((type) => {
+    this.conditionFormGroup.get('spec.type').valueChanges.pipe(
+      takeUntilDestroyed()
+    ).subscribe((type) => {
       this.updateValidators(type, true, true);
     });
     if (this.readonly) {

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   UntypedFormBuilder,
@@ -36,6 +36,7 @@ import {
 import { EntityId } from '@shared/models/id/entity-id';
 import { DashboardId } from '@shared/models/id/dashboard-id';
 import { UtilsService } from '@core/services/utils.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-alarm-rule',
@@ -81,7 +82,8 @@ export class AlarmRuleComponent implements ControlValueAccessor, OnInit, Validat
 
   constructor(private dialog: MatDialog,
               private utils: UtilsService,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   registerOnChange(fn: any): void {
@@ -98,7 +100,9 @@ export class AlarmRuleComponent implements ControlValueAccessor, OnInit, Validat
       alarmDetails: [null],
       dashboardId: [null]
     });
-    this.alarmRuleFormGroup.valueChanges.subscribe(() => {
+    this.alarmRuleFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -40,6 +40,7 @@ import {
 import { isDefined, isDefinedAndNotNull } from '@core/utils';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { getDefaultTimezone } from '@shared/models/time/time.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-alarm-schedule',
@@ -80,7 +81,8 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
 
   private propagateChange = (v: any) => { };
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -94,13 +96,17 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
       dynamicValue: [null]
     });
 
-    this.alarmScheduleForm.get('type').valueChanges.subscribe((type) => {
+    this.alarmScheduleForm.get('type').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((type) => {
       const defaultTimezone = getDefaultTimezone();
       this.alarmScheduleForm.reset({type, items: this.defaultItems, timezone: defaultTimezone}, {emitEvent: false});
       this.updateValidators(type, true);
       this.alarmScheduleForm.updateValueAndValidity();
     });
-    this.alarmScheduleForm.valueChanges.subscribe(() => {
+    this.alarmScheduleForm.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
+import { Component, DestroyRef, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
 import {
   ControlValueAccessor,
   UntypedFormBuilder,
@@ -31,6 +31,7 @@ import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { EntityId } from '@shared/models/id/entity-id';
 import { UtilsService } from '@core/services/utils.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-device-profile-alarm',
@@ -74,7 +75,8 @@ export class DeviceProfileAlarmComponent implements ControlValueAccessor, OnInit
 
   constructor(private dialog: MatDialog,
               private utils: UtilsService,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   registerOnChange(fn: any): void {
@@ -101,7 +103,9 @@ export class DeviceProfileAlarmComponent implements ControlValueAccessor, OnInit
       propagateToOwner: [null],
       propagateToTenant: [null]
     }, { validators: deviceProfileAlarmValidator });
-    this.alarmFormGroup.valueChanges.subscribe(() => {
+    this.alarmFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   UntypedFormBuilder,
@@ -37,6 +37,7 @@ import { ActionNotificationShow } from '@core/notification/notification.actions'
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-device-profile-provision-configuration',
@@ -79,7 +80,8 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder,
-              private translate: TranslateService) {
+              private translate: TranslateService,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -91,7 +93,9 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
       certificateRegExPattern: [{value: null, disabled: true}, Validators.required],
       allowCreateNewDevicesByX509Certificate: [{value: null, disabled: true}, Validators.required]
     });
-    this.provisionConfigurationFormGroup.get('type').valueChanges.subscribe((type) => {
+    this.provisionConfigurationFormGroup.get('type').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((type) => {
       if (type === DeviceProvisionType.DISABLED) {
         for (const field in this.provisionConfigurationFormGroup.controls) {
           if (field !== 'type') {
@@ -129,7 +133,9 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
         this.provisionConfigurationFormGroup.get('provisionDeviceKey').enable({emitEvent: false});
       }
     });
-    this.provisionConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.provisionConfigurationFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/profile/device-profile.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, Inject, Input, Optional } from '@angular/core';
+import { ChangeDetectorRef, Component, DestroyRef, Inject, Input, Optional } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
@@ -43,6 +43,7 @@ import { EntityId } from '@shared/models/id/entity-id';
 import { OtaUpdateType } from '@shared/models/ota-package.models';
 import { DashboardId } from '@shared/models/id/dashboard-id';
 import { RuleChainType } from '@shared/models/rule-chain.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-device-profile',
@@ -83,7 +84,8 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
               @Optional() @Inject('entity') protected entityValue: DeviceProfile,
               @Optional() @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<DeviceProfile>,
               protected fb: UntypedFormBuilder,
-              protected cd: ChangeDetectorRef) {
+              protected cd: ChangeDetectorRef,
+              private destroyRef: DestroyRef) {
     super(store, fb, entityValue, entitiesTableConfigValue, cd);
   }
 
@@ -129,10 +131,14 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
         description: [entity ? entity.description : '', []],
       }
     );
-    form.get('type').valueChanges.subscribe(() => {
+    form.get('type').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.deviceProfileTypeChanged(form);
     });
-    form.get('transportType').valueChanges.subscribe(() => {
+    form.get('transportType').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.deviceProfileTransportTypeChanged(form);
     });
     this.checkIsNewDeviceProfile(entity, form);

ui-ngx/src/app/modules/home/components/profile/device/default-device-profile-configuration.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
@@ -23,6 +23,7 @@ import {
   DeviceProfileConfiguration,
   DeviceProfileType
 } from '@shared/models/device.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-default-device-profile-configuration',
@@ -44,7 +45,8 @@ export class DefaultDeviceProfileConfigurationComponent implements ControlValueA
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   registerOnChange(fn: any): void {
@@ -58,7 +60,9 @@ export class DefaultDeviceProfileConfigurationComponent implements ControlValueA
     this.defaultDeviceProfileConfigurationFormGroup = this.fb.group({
       configuration: [null, Validators.required]
     });
-    this.defaultDeviceProfileConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.defaultDeviceProfileConfigurationFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/profile/device/default-device-profile-transport-configuration.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALIDATORS,
@@ -29,6 +29,7 @@ import {
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { DefaultDeviceProfileTransportConfiguration, DeviceTransportType } from '@shared/models/device.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-default-device-profile-transport-configuration',
@@ -57,7 +58,8 @@ export class DefaultDeviceProfileTransportConfigurationComponent implements Cont
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   registerOnChange(fn: any): void {
@@ -71,7 +73,9 @@ export class DefaultDeviceProfileTransportConfigurationComponent implements Cont
     this.defaultDeviceProfileTransportConfigurationFormGroup = this.fb.group({
       configuration: [null, Validators.required]
     });
-    this.defaultDeviceProfileTransportConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.defaultDeviceProfileTransportConfigurationFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/profile/device/device-profile-transport-configuration.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALIDATORS,
@@ -29,6 +29,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { DeviceProfileTransportConfiguration, DeviceTransportType } from '@shared/models/device.models';
 import { deepClone } from '@core/utils';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-device-profile-transport-configuration',
@@ -64,7 +65,8 @@ export class DeviceProfileTransportConfigurationComponent implements ControlValu
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   registerOnChange(fn: any): void {
@@ -78,7 +80,9 @@ export class DeviceProfileTransportConfigurationComponent implements ControlValu
     this.deviceProfileTransportConfigurationFormGroup = this.fb.group({
       configuration: [null]
     });
-    this.deviceProfileTransportConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.deviceProfileTransportConfigurationFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-list.component.ts

@@ -34,6 +34,7 @@ import { Direction } from '@shared/models/page/sort-order';
 import { isDefined, isDefinedAndNotNull, isObject, isString } from '@core/utils';
 import { PageLink } from '@shared/models/page/page-link';
 import { TruncatePipe } from '@shared/pipe/truncate.pipe';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-profile-lwm2m-object-list',
@@ -90,7 +91,9 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V
       objectsList: [this.objectsList],
       objectLwm2m: ['']
     });
-    this.lwm2mListFormGroup.get('objectsList').valueChanges.subscribe((value) => {
+    this.lwm2mListFormGroup.get('objectsList').valueChanges.pipe(
+      takeUntilDestroyed()
+    ).subscribe((value) => {
       if (!value.length || (value.length && isObject(value[0]))) {
         let formValue = null;
         if (this.lwm2mListFormGroup.valid) {

ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, Inject, Input, Optional } from '@angular/core';
+import { ChangeDetectorRef, Component, DestroyRef, Inject, Input, Optional } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
@@ -24,6 +24,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import { EntityComponent } from '../entity/entity.component';
 import { guid } from '@core/utils';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-tenant-profile',
@@ -40,7 +41,8 @@ export class TenantProfileComponent extends EntityComponent<TenantProfile> {
               @Optional() @Inject('entity') protected entityValue: TenantProfile,
               @Optional() @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<TenantProfile>,
               protected fb: UntypedFormBuilder,
-              protected cd: ChangeDetectorRef) {
+              protected cd: ChangeDetectorRef,
+              private destroyRef: DestroyRef) {
     super(store, fb, entityValue, entitiesTableConfigValue, cd);
   }
 
@@ -142,7 +144,9 @@ export class TenantProfileComponent extends EntityComponent<TenantProfile> {
         description: [entity ? entity.description : '', []],
       }
     );
-    formGroup.get('isolatedTbRuleEngine').valueChanges.subscribe((value) => {
+    formGroup.get('isolatedTbRuleEngine').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((value) => {
       if (value) {
         formGroup.get('profileData').patchValue({
             queueConfiguration: mainQueue

ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.ts

@@ -128,7 +128,9 @@ export class DefaultTenantProfileConfigurationComponent implements ControlValueA
       }
     );
 
-    this.defaultTenantProfileConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.defaultTenantProfileConfigurationFormGroup.valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.ts

@@ -56,7 +56,6 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
 
   rateLimitsArray: Array<RateLimits>;
 
-  private valueChangeSubscription: Subscription = null;
   private destroy$ = new Subject<void>();
   private propagateChange = (v: any) => { };
 
@@ -66,7 +65,7 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
     this.rateLimitsListFormGroup = this.fb.group({
       rateLimits: this.fb.array([])
     });
-    this.valueChangeSubscription = this.rateLimitsListFormGroup.valueChanges
+    this.rateLimitsListFormGroup.valueChanges
       .pipe(takeUntil(this.destroy$))
       .subscribe((value) => {
         this.updateView(value?.rateLimits);

ui-ngx/src/app/modules/home/components/profile/tenant/tenant-profile-configuration.component.ts

@@ -14,13 +14,14 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { deepClone } from '@core/utils';
 import { TenantProfileConfiguration, TenantProfileType } from '@shared/models/tenant.model';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-tenant-profile-configuration',
@@ -55,7 +56,8 @@ export class TenantProfileConfigurationComponent implements ControlValueAccessor
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   registerOnChange(fn: any): void {
@@ -69,7 +71,9 @@ export class TenantProfileConfigurationComponent implements ControlValueAccessor
     this.tenantProfileConfigurationFormGroup = this.fb.group({
       configuration: [null, Validators.required]
     });
-    this.tenantProfileConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.tenantProfileConfigurationFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/queue/queue-form.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   UntypedFormBuilder,
@@ -35,6 +35,7 @@ import {
 } from '@shared/models/queue.models';
 import { isDefinedAndNotNull } from '@core/utils';
 import { Subscription } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-queue-form',
@@ -53,7 +54,7 @@ import { Subscription } from 'rxjs';
     }
   ]
 })
-export class QueueFormComponent implements ControlValueAccessor, OnInit, OnDestroy, Validator {
+export class QueueFormComponent implements ControlValueAccessor, OnInit, Validator {
 
   @Input()
   disabled: boolean;
@@ -77,10 +78,10 @@ export class QueueFormComponent implements ControlValueAccessor, OnInit, OnDestr
   private modelValue: QueueInfo;
   private propagateChange = null;
   private propagateChangePending = false;
-  private valueChange$: Subscription = null;
 
   constructor(private utils: UtilsService,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   registerOnChange(fn: any): void {
@@ -122,24 +123,23 @@ export class QueueFormComponent implements ControlValueAccessor, OnInit, OnDestr
           duplicateMsgToAllPartitions: [false]
         })
       });
-    this.valueChange$ = this.queueFormGroup.valueChanges.subscribe(() => {
+    this.queueFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
-    this.queueFormGroup.get('name').valueChanges.subscribe((value) => {
+    this.queueFormGroup.get('name').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((value) => {
       this.queueFormGroup.patchValue({topic: `tb_rule_engine.${value}`});
     });
-    this.queueFormGroup.get('submitStrategy').get('type').valueChanges.subscribe(() => {
+    this.queueFormGroup.get('submitStrategy').get('type').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.submitStrategyTypeChanged();
     });
   }
 
-  ngOnDestroy() {
-    if (this.valueChange$) {
-      this.valueChange$.unsubscribe();
-      this.valueChange$ = null;
-    }
-  }
-
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
     if (this.disabled) {

ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnInit, SkipSelf, ViewChild } from '@angular/core';
+import { Component, DestroyRef, Inject, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
@@ -32,6 +32,7 @@ import { forkJoin, Observable } from 'rxjs';
 import { JsonObjectEditComponent } from '@shared/components/json-object-edit.component';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@shared/components/dialog.component';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface RelationDialogData {
   isAdd: boolean;
@@ -65,7 +66,8 @@ export class RelationDialogComponent extends DialogComponent<RelationDialogCompo
               private entityRelationService: EntityRelationService,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<RelationDialogComponent, boolean>,
-              public fb: UntypedFormBuilder) {
+              public fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
     super(store, router, dialogRef);
     this.isAdd = data.isAdd;
     this.direction = data.direction;
@@ -83,7 +85,9 @@ export class RelationDialogComponent extends DialogComponent<RelationDialogCompo
       this.relationFormGroup.get('type').disable();
       this.relationFormGroup.get('targetEntityIds').disable();
     }
-    this.additionalInfo.valueChanges.subscribe(
+    this.additionalInfo.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => {
         this.submitted = false;
       }

ui-ngx/src/app/modules/home/components/sms/aws-sns-provider-configuration.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
@@ -25,6 +25,7 @@ import {
   SmsProviderConfiguration,
   SmsProviderType
 } from '@shared/models/settings.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-aws-sns-provider-configuration',
@@ -57,7 +58,8 @@ export class AwsSnsProviderConfigurationComponent implements ControlValueAccesso
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   registerOnChange(fn: any): void {
@@ -73,7 +75,9 @@ export class AwsSnsProviderConfigurationComponent implements ControlValueAccesso
         secretAccessKey: [null, [Validators.required]],
         region: [null, [Validators.required]]
     });
-    this.awsSnsProviderConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.awsSnsProviderConfigurationFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import {
   AwsSnsSmsProviderConfiguration,
@@ -33,6 +33,7 @@ import {
 } from '@shared/models/settings.models';
 import { isDefinedAndNotNull } from '@core/utils';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-smpp-sms-provider-configuration',
@@ -46,7 +47,8 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 })
 
 export class SmppSmsProviderConfigurationComponent  implements ControlValueAccessor, OnInit{
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
   private requiredValue: boolean;
 
@@ -98,7 +100,9 @@ export class SmppSmsProviderConfigurationComponent  implements ControlValueAcces
       codingScheme: [null, []],
     });
 
-    this.smppSmsProviderConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.smppSmsProviderConfigurationFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValue();
     });
   }

ui-ngx/src/app/modules/home/components/sms/sms-provider-configuration.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
@@ -31,6 +31,7 @@ import {
   SmsProviderType,
   smsProviderTypeTranslationMap
 } from '@shared/models/settings.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-sms-provider-configuration',
@@ -65,7 +66,8 @@ export class SmsProviderConfigurationComponent implements ControlValueAccessor,
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   registerOnChange(fn: any): void {
@@ -80,10 +82,14 @@ export class SmsProviderConfigurationComponent implements ControlValueAccessor,
       type: [null, Validators.required],
       configuration: [null, smsProviderConfigurationValidator(true)]
     });
-    this.smsProviderConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.smsProviderConfigurationFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
-    this.smsProviderConfigurationFormGroup.get('type').valueChanges.subscribe(() => {
+    this.smsProviderConfigurationFormGroup.get('type').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.smsProviderTypeChanged();
     });
   }

ui-ngx/src/app/modules/home/components/sms/twilio-sms-provider-configuration.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
@@ -26,6 +26,7 @@ import {
   SmsProviderType,
   TwilioSmsProviderConfiguration
 } from '@shared/models/settings.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-twilio-sms-provider-configuration',
@@ -60,7 +61,8 @@ export class TwilioSmsProviderConfigurationComponent implements ControlValueAcce
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   registerOnChange(fn: any): void {
@@ -76,7 +78,9 @@ export class TwilioSmsProviderConfigurationComponent implements ControlValueAcce
       accountSid: [null, Validators.required],
       accountToken: [null, Validators.required]
     });
-    this.twilioSmsProviderConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.twilioSmsProviderConfigurationFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -40,6 +40,7 @@ import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
 import { EntityType, entityTypeTranslations } from '@shared/models/entity-type.models';
 import { isDefinedAndNotNull } from '@core/utils';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-entity-types-version-create',
@@ -80,7 +81,8 @@ export class EntityTypesVersionCreateComponent extends PageComponent implements
 
   constructor(protected store: Store<AppState>,
               private translate: TranslateService,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -88,7 +90,9 @@ export class EntityTypesVersionCreateComponent extends PageComponent implements
     this.entityTypesVersionCreateFormGroup = this.fb.group({
       entityTypes: this.fb.array([], [])
     });
-    this.entityTypesVersionCreateFormGroup.valueChanges.subscribe(() => {
+    this.entityTypesVersionCreateFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }
@@ -152,7 +156,9 @@ export class EntityTypesVersionCreateComponent extends PageComponent implements
       }
     );
     this.updateEntityTypeValidators(entityTypeControl);
-    entityTypeControl.get('config.allEntities').valueChanges.subscribe(() => {
+    entityTypeControl.get('config.allEntities').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateEntityTypeValidators(entityTypeControl);
     });
     return entityTypeControl;

ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -40,6 +40,7 @@ import { EntityType, entityTypeTranslations } from '@shared/models/entity-type.m
 import { MatCheckbox } from '@angular/material/checkbox';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { RemoveOtherEntitiesConfirmComponent } from '@home/components/vc/remove-other-entities-confirm.component';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-entity-types-version-load',
@@ -79,7 +80,8 @@ export class EntityTypesVersionLoadComponent extends PageComponent implements On
               private popoverService: TbPopoverService,
               private renderer: Renderer2,
               private viewContainerRef: ViewContainerRef,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -87,7 +89,9 @@ export class EntityTypesVersionLoadComponent extends PageComponent implements On
     this.entityTypesVersionLoadFormGroup = this.fb.group({
       entityTypes: this.fb.array([], [])
     });
-    this.entityTypesVersionLoadFormGroup.valueChanges.subscribe(() => {
+    this.entityTypesVersionLoadFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/vc/repository-settings.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, DestroyRef, Input, OnInit } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { UntypedFormBuilder, UntypedFormGroup, FormGroupDirective, Validators } from '@angular/forms';
 import { select, Store } from '@ngrx/store';
@@ -35,6 +35,7 @@ import { catchError, mergeMap, take } from 'rxjs/operators';
 import { of } from 'rxjs';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { coerceBoolean } from '@shared/decorators/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-repository-settings',
@@ -71,7 +72,8 @@ export class RepositorySettingsComponent extends PageComponent implements OnInit
               private dialogService: DialogService,
               private translate: TranslateService,
               private cd: ChangeDetectorRef,
-              public fb: UntypedFormBuilder) {
+              public fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -89,10 +91,14 @@ export class RepositorySettingsComponent extends PageComponent implements OnInit
       privateKeyPassword: [null, []]
     });
     this.updateValidators(false);
-    this.repositorySettingsForm.get('authMethod').valueChanges.subscribe(() => {
+    this.repositorySettingsForm.get('authMethod').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators(true);
     });
-    this.repositorySettingsForm.get('privateKeyFileName').valueChanges.subscribe(() => {
+    this.repositorySettingsForm.get('privateKeyFileName').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators(false);
     });
     this.store.pipe(

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts

@@ -17,6 +17,7 @@
 import {
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   EventEmitter,
   forwardRef,
   Input,
@@ -53,6 +54,7 @@ import {
   AggregatedValueCardKeySettings
 } from '@home/components/widget/lib/cards/aggregated-value-card.models';
 import { WidgetConfigCallbacks } from '@home/components/widget/config/widget-config.component.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-aggregated-data-key-row',
@@ -128,7 +130,8 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
               private cd: ChangeDetectorRef,
               public translate: TranslateService,
               public truncate: TruncatePipe,
-              private widgetConfigComponent: WidgetConfigComponent) {
+              private widgetConfigComponent: WidgetConfigComponent,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
@@ -140,7 +143,9 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
       color: [null, []],
       showArrow: [null, []]
     });
-    this.keyRowFormGroup.valueChanges.subscribe(
+    this.keyRowFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => this.updateModel()
     );
   }

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.ts

@@ -17,6 +17,7 @@
 import {
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   forwardRef,
   Input,
   OnChanges,
@@ -39,6 +40,7 @@ import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { UtilsService } from '@core/services/utils.service';
 import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models';
 import { aggregatedValueCardDefaultKeySettings } from '@home/components/widget/lib/cards/aggregated-value-card.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-aggregated-data-keys-panel',
@@ -87,14 +89,17 @@ export class AggregatedDataKeysPanelComponent implements ControlValueAccessor, O
               private dialog: MatDialog,
               private cd: ChangeDetectorRef,
               private utils: UtilsService,
-              private widgetConfigComponent: WidgetConfigComponent) {
+              private widgetConfigComponent: WidgetConfigComponent,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
     this.keysListFormGroup = this.fb.group({
       keys: [this.fb.array([]), []]
     });
-    this.keysListFormGroup.valueChanges.subscribe(
+    this.keysListFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       (val) => this.propagateChange(this.keysListFormGroup.get('keys').value)
     );
     this.updateParams();

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-key-row.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, forwardRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectorRef, Component, DestroyRef, forwardRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -29,6 +29,7 @@ import {
   DatasourceType
 } from '@shared/models/widget.models';
 import { deepClone } from '@core/utils';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-comparison-key-row',
@@ -60,7 +61,8 @@ export class ComparisonKeyRowComponent implements ControlValueAccessor, OnInit {
   private propagateChange = (_val: any) => {};
 
   constructor(private fb: UntypedFormBuilder,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
@@ -70,10 +72,14 @@ export class ComparisonKeyRowComponent implements ControlValueAccessor, OnInit {
       comparisonValuesLabel: [null, []],
       color: [null, []]
     });
-    this.keyRowFormGroup.valueChanges.subscribe(
+    this.keyRowFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => this.updateModel()
     );
-    this.keyRowFormGroup.get('showValuesForComparison').valueChanges.subscribe(() => this.updateValidators());
+    this.keyRowFormGroup.get('showValuesForComparison').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => this.updateValidators());
   }
 
   registerOnChange(fn: any): void {

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -24,6 +24,7 @@ import {
   UntypedFormGroup
 } from '@angular/forms';
 import { DataKey, DatasourceType } from '@shared/models/widget.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-comparison-keys-table',
@@ -55,14 +56,17 @@ export class ComparisonKeysTableComponent implements ControlValueAccessor, OnIni
 
   private propagateChange = (_val: any) => {};
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
     this.keysListFormGroup = this.fb.group({
       keys: [this.fb.array([]), []]
     });
-    this.keysListFormGroup.valueChanges.subscribe(
+    this.keysListFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => {
         const keys: DataKey[] = this.keysListFormGroup.get('keys').value;
         this.propagateChange(keys);

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts

@@ -52,6 +52,7 @@ import {
   TimeSeriesChartYAxisId
 } from '@home/components/widget/lib/chart/time-series-chart.models';
 import { TimeSeriesChartTooltipTrigger } from '@home/components/widget/lib/chart/time-series-chart-tooltip.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-time-series-chart-basic-config',
@@ -204,7 +205,9 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
     if (this.chartType === TimeSeriesChartType.state) {
       this.timeSeriesChartWidgetConfigForm.addControl('states', this.fb.control(settings.states, []));
     }
-    this.timeSeriesChartWidgetConfigForm.get('comparisonEnabled').valueChanges.subscribe(() => this.updateSeriesState());
+    this.timeSeriesChartWidgetConfigForm.get('comparisonEnabled').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => this.updateSeriesState());
   }
 
   protected prepareOutputConfig(config: any): WidgetConfigComponentData {

ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.ts

@@ -17,6 +17,7 @@
 import {
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   EventEmitter,
   forwardRef,
   Input,
@@ -66,6 +67,7 @@ import {
   TimeSeriesChartYAxisId
 } from '@home/components/widget/lib/chart/time-series-chart.models';
 import { WidgetConfigCallbacks } from '@home/components/widget/config/widget-config.component.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export const dataKeyValid = (key: DataKey): boolean => !!key && !!key.type && !!key.name;
 
@@ -234,7 +236,8 @@ export class DataKeyRowComponent implements ControlValueAccessor, OnInit, OnChan
   constructor(private fb: UntypedFormBuilder,
               private dialog: MatDialog,
               private cd: ChangeDetectorRef,
-              private widgetConfigComponent: WidgetConfigComponent) {
+              private widgetConfigComponent: WidgetConfigComponent,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
@@ -252,7 +255,9 @@ export class DataKeyRowComponent implements ControlValueAccessor, OnInit, OnChan
       this.keyRowFormGroup.addControl('yAxis', this.fb.control(null));
       this.keyRowFormGroup.addControl('timeSeriesType', this.fb.control(null));
     }
-    merge(this.keyFormControl.valueChanges, this.keyRowFormGroup.valueChanges).subscribe(
+    merge(this.keyFormControl.valueChanges, this.keyRowFormGroup.valueChanges).pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => this.updateModel()
     );
   }

ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.ts

@@ -17,6 +17,7 @@
 import {
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   forwardRef,
   Input,
   OnChanges,
@@ -45,6 +46,7 @@ import { UtilsService } from '@core/services/utils.service';
 import { DataKeysCallbacks, DataKeySettingsFunction } from '@home/components/widget/config/data-keys.component.models';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { TimeSeriesChartYAxisId } from '@home/components/widget/lib/chart/time-series-chart.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-data-keys-panel',
@@ -180,14 +182,17 @@ export class DataKeysPanelComponent implements ControlValueAccessor, OnInit, OnC
               private dialog: MatDialog,
               private cd: ChangeDetectorRef,
               private utils: UtilsService,
-              private widgetConfigComponent: WidgetConfigComponent) {
+              private widgetConfigComponent: WidgetConfigComponent,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
     this.keysListFormGroup = this.fb.group({
       keys: [this.fb.array([]), []]
     });
-    this.keysListFormGroup.valueChanges.subscribe(
+    this.keysListFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => {
         let keys: DataKey[] = this.keysListFormGroup.get('keys').value;
         if (keys) {

ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { WidgetActionsData } from '@home/components/widget/action/manage-widget-actions.component.models';
@@ -25,6 +25,7 @@ import {
 } from '@home/components/widget/action/manage-widget-actions-dialog.component';
 import { deepClone } from '@core/utils';
 import { MatDialog } from '@angular/material/dialog';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-widget-actions-panel',
@@ -50,14 +51,17 @@ export class WidgetActionsPanelComponent implements ControlValueAccessor, OnInit
   constructor(private fb: UntypedFormBuilder,
               private dialog: MatDialog,
               private cd: ChangeDetectorRef,
-              private widgetConfigComponent: WidgetConfigComponent) {
+              private widgetConfigComponent: WidgetConfigComponent,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
     this.actionsFormGroup = this.fb.group({
       actions: [null, []]
     });
-    this.actionsFormGroup.get('actions').valueChanges.subscribe(
+    this.actionsFormGroup.get('actions').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       (val) => this.propagateChange(val)
     );
   }

ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts

@@ -63,6 +63,7 @@ import { map, share, tap } from 'rxjs/operators';
 import { Observable, of, ReplaySubject } from 'rxjs';
 import { ResourcesService } from '@core/services/resources.service';
 import { UtilsService } from '@core/services/utils.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'liquid-level-card-basic-config',
@@ -228,7 +229,9 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
       actions: [configData.config.actions || {}, []]
     });
 
-    this.levelCardWidgetConfigForm.get('selectedShape').valueChanges.subscribe(() => {
+    this.levelCardWidgetConfigForm.get('selectedShape').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.cd.detectChanges();
       this.layoutsImageCardsSelect?.imageCardsSelectOptions.notifyOnChanges();
     });

ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, DestroyRef, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -58,6 +58,7 @@ import { WidgetConfigComponentData } from '@home/models/widget-component.models'
 import { WidgetComponentService } from '@home/components/widget/widget-component.service';
 import { WidgetConfigCallbacks } from '@home/components/widget/config/widget-config.component.models';
 import { isNotEmptyTbFunction, TbFunction } from '@shared/models/js-function.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-data-key-config',
@@ -188,7 +189,8 @@ export class DataKeyConfigComponent extends PageComponent implements OnInit, Con
               private translate: TranslateService,
               private widgetService: WidgetService,
               private widgetComponentService: WidgetComponentService,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
     super(store);
     this.functionScopeVariables = this.widgetService.getWidgetScopeVariables();
   }
@@ -240,7 +242,9 @@ export class DataKeyConfigComponent extends PageComponent implements OnInit, Con
       this.dataKeySettingsFormGroup = this.fb.group({
         settings: [null, []]
       });
-      this.dataKeySettingsFormGroup.valueChanges.subscribe(() => {
+      this.dataKeySettingsFormGroup.valueChanges.pipe(
+        takeUntilDestroyed(this.destroyRef)
+      ).subscribe(() => {
         this.updateModel();
       });
     }
@@ -260,7 +264,9 @@ export class DataKeyConfigComponent extends PageComponent implements OnInit, Con
       postFuncBody: [null, []]
     });
 
-    this.dataKeyFormGroup.get('aggregationType').valueChanges.subscribe(
+    this.dataKeyFormGroup.get('aggregationType').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       (aggType) => {
         if (!this.dataKeyFormGroup.get('label').dirty) {
           let newLabel = this.dataKeyFormGroup.get('name').value;
@@ -274,23 +280,31 @@ export class DataKeyConfigComponent extends PageComponent implements OnInit, Con
       }
     );
 
-    this.dataKeyFormGroup.get('comparisonEnabled').valueChanges.subscribe(
+    this.dataKeyFormGroup.get('comparisonEnabled').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => {
         this.updateComparisonValues();
       }
     );
 
-    this.dataKeyFormGroup.get('timeForComparison').valueChanges.subscribe(
+    this.dataKeyFormGroup.get('timeForComparison').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => {
         this.updateComparisonValues();
       }
     );
 
-    this.dataKeyFormGroup.valueChanges.subscribe(() => {
+    this.dataKeyFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
 
-    this.dataKeyFormGroup.get('usePostProcessing').valueChanges.subscribe((usePostProcessing: boolean) => {
+    this.dataKeyFormGroup.get('usePostProcessing').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((usePostProcessing: boolean) => {
       const postFuncBody: TbFunction = this.dataKeyFormGroup.get('postFuncBody').value;
       if (usePostProcessing && !isNotEmptyTbFunction(postFuncBody)) {
         this.dataKeyFormGroup.get('postFuncBody').patchValue('return value;');

ui-ngx/src/app/modules/home/components/widget/config/datasource.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit, Optional } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit, Optional } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALIDATORS,
@@ -43,6 +43,7 @@ import { DataKeysCallbacks, DataKeySettingsFunction } from '@home/components/wid
 import { EntityType } from '@shared/models/entity-type.models';
 import { DatasourcesComponent } from '@home/components/widget/config/datasources.component';
 import { WidgetConfigCallbacks } from '@home/components/widget/config/widget-config.component.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-datasource',
@@ -188,7 +189,8 @@ export class DatasourceComponent implements ControlValueAccessor, OnInit, Valida
   constructor(private fb: UntypedFormBuilder,
               @Optional()
               private datasourcesComponent: DatasourcesComponent,
-              private widgetConfigComponent: WidgetConfigComponent) {
+              private widgetConfigComponent: WidgetConfigComponent,
+              private destroyRef: DestroyRef) {
   }
 
   registerOnChange(fn: any): void {
@@ -238,10 +240,14 @@ export class DatasourceComponent implements ControlValueAccessor, OnInit, Valida
     if (this.hasAdditionalLatestDataKeys) {
       this.datasourceFormGroup.addControl('latestDataKeys', this.fb.control(null));
     }
-    this.datasourceFormGroup.get('type').valueChanges.subscribe(() => {
+    this.datasourceFormGroup.get('type').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
-    this.datasourceFormGroup.valueChanges.subscribe(
+    this.datasourceFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => {
         this.datasourceUpdated(this.datasourceFormGroup.value);
       }

ui-ngx/src/app/modules/home/components/widget/config/datasources.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -42,6 +42,7 @@ import { UtilsService } from '@core/services/utils.service';
 import { DataKeysCallbacks, DataKeySettingsFunction } from '@home/components/widget/config/data-keys.component.models';
 import { TranslateService } from '@ngx-translate/core';
 import { coerceBoolean } from '@shared/decorators/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-datasources',
@@ -149,7 +150,8 @@ export class DatasourcesComponent implements ControlValueAccessor, OnInit, Valid
   constructor(private fb: UntypedFormBuilder,
               private utils: UtilsService,
               public translate: TranslateService,
-              private widgetConfigComponent: WidgetConfigComponent) {
+              private widgetConfigComponent: WidgetConfigComponent,
+              private destroyRef: DestroyRef) {
   }
 
   registerOnChange(fn: any): void {
@@ -177,7 +179,9 @@ export class DatasourcesComponent implements ControlValueAccessor, OnInit, Valid
     this.datasourcesFormGroup = this.fb.group({
       datasources: this.fb.array([])
     });
-    this.datasourcesFormGroup.valueChanges.subscribe(
+    this.datasourcesFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => {
         this.datasourcesUpdated(this.datasourcesFormGroup.get('datasources').value);
       }

ui-ngx/src/app/modules/home/components/widget/config/target-device.component.ts

@@ -24,7 +24,7 @@ import {
   Validator,
   Validators
 } from '@angular/forms';
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
@@ -32,6 +32,7 @@ import { TargetDevice, TargetDeviceType } from '@shared/models/widget.models';
 import { EntityType } from '@shared/models/entity-type.models';
 import { IAliasController } from '@core/api/widget-api.models';
 import { EntityAliasSelectCallbacks } from '@home/components/alias/entity-alias-select.component.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-target-device',
@@ -80,7 +81,8 @@ export class TargetDeviceComponent implements ControlValueAccessor, OnInit, Vali
   constructor(private fb: UntypedFormBuilder,
               private utils: UtilsService,
               public translate: TranslateService,
-              private widgetConfigComponent: WidgetConfigComponent) {
+              private widgetConfigComponent: WidgetConfigComponent,
+              private destroyRef: DestroyRef) {
   }
 
   registerOnChange(fn: any): void {
@@ -111,10 +113,14 @@ export class TargetDeviceComponent implements ControlValueAccessor, OnInit, Vali
       deviceId: [null, (!this.widgetEditMode && !this.targetDeviceOptional) ? [Validators.required] : []],
       entityAliasId: [null, (!this.widgetEditMode && !this.targetDeviceOptional) ? [Validators.required] : []]
     });
-    this.targetDeviceFormGroup.get('type').valueChanges.subscribe(() => {
+    this.targetDeviceFormGroup.get('type').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
-    this.targetDeviceFormGroup.valueChanges.subscribe(
+    this.targetDeviceFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => {
         this.targetDeviceUpdated(this.targetDeviceFormGroup.value);
       }

ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { WidgetConfig, widgetType } from '@shared/models/widget.models';
@@ -23,6 +23,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { isDefined } from '@core/utils';
 import { TimewindowStyle } from '@shared/models/widget-settings.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface TimewindowConfigData {
   useDashboardTimewindow: boolean;
@@ -81,7 +82,8 @@ export class TimewindowConfigPanelComponent implements ControlValueAccessor, OnI
 
   constructor(private fb: UntypedFormBuilder,
               public translate: TranslateService,
-              private widgetConfigComponent: WidgetConfigComponent) {
+              private widgetConfigComponent: WidgetConfigComponent,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
@@ -91,13 +93,19 @@ export class TimewindowConfigPanelComponent implements ControlValueAccessor, OnI
       timewindow: [null, []],
       timewindowStyle: [null, []]
     });
-    this.timewindowConfig.valueChanges.subscribe(
+    this.timewindowConfig.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => this.propagateChange(this.timewindowConfig.getRawValue())
     );
-    this.timewindowConfig.get('useDashboardTimewindow').valueChanges.subscribe(() => {
+    this.timewindowConfig.get('useDashboardTimewindow').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateTimewindowConfigEnabledState();
     });
-    this.timewindowConfig.get('displayTimewindow').valueChanges.subscribe(() => {
+    this.timewindowConfig.get('displayTimewindow').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateTimewindowConfigEnabledState();
     });
   }

ui-ngx/src/app/modules/home/components/widget/config/timewindow-style-panel.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { defaultTimewindowStyle, TimewindowStyle } from '@shared/models/widget-settings.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
@@ -23,6 +23,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Timewindow } from '@shared/models/time/time.models';
 import { deepClone } from '@core/utils';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-timewindow-style-panel',
@@ -50,7 +51,8 @@ export class TimewindowStylePanelComponent extends PageComponent implements OnIn
   previewTimewindowStyle: TimewindowStyle;
 
   constructor(private fb: UntypedFormBuilder,
-              protected store: Store<AppState>) {
+              protected store: Store<AppState>,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -69,13 +71,17 @@ export class TimewindowStylePanelComponent extends PageComponent implements OnIn
     );
     this.updatePreviewStyle(this.timewindowStyle);
     this.updateTimewindowStyleEnabledState();
-    this.timewindowStyleFormGroup.valueChanges.subscribe((timewindowStyle: TimewindowStyle) => {
+    this.timewindowStyleFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((timewindowStyle: TimewindowStyle) => {
       if (this.timewindowStyleFormGroup.valid) {
         this.updatePreviewStyle(timewindowStyle);
         setTimeout(() => {this.popover?.updatePosition();}, 0);
       }
     });
-    this.timewindowStyleFormGroup.get('showIcon').valueChanges.subscribe(() => {
+    this.timewindowStyleFormGroup.get('showIcon').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateTimewindowStyleEnabledState();
     });
   }

ui-ngx/src/app/modules/home/components/widget/config/widget-config.component.models.ts

@@ -18,7 +18,7 @@ import { WidgetActionCallbacks } from '@home/components/widget/action/manage-wid
 import { DatasourceCallbacks } from '@home/components/widget/config/datasource.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
 import { Observable } from 'rxjs';
-import { AfterViewInit, Directive, EventEmitter, Inject, OnInit } from '@angular/core';
+import { AfterViewInit, DestroyRef, Directive, EventEmitter, inject, Inject, OnInit } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -27,6 +27,7 @@ import { DataKey, DatasourceType, WidgetConfigMode, widgetType } from '@shared/m
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { isDefinedAndNotNull } from '@core/utils';
 import { IAliasController } from '@core/api/widget-api.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export type WidgetConfigCallbacks = DatasourceCallbacks & WidgetActionCallbacks;
 
@@ -77,6 +78,8 @@ export abstract class BasicWidgetConfigComponent extends PageComponent implement
   widgetConfigChangedEmitter = new EventEmitter<WidgetConfigComponentData>();
   widgetConfigChanged = this.widgetConfigChangedEmitter.asObservable();
 
+  protected destroyRef = inject(DestroyRef);
+
   protected constructor(@Inject(Store) protected store: Store<AppState>,
                         protected widgetConfigComponent: WidgetConfigComponent) {
     super(store);
@@ -104,11 +107,15 @@ export abstract class BasicWidgetConfigComponent extends PageComponent implement
       for (const part of path) {
         control = control.get(part);
       }
-      control.valueChanges.subscribe(() => {
+      control.valueChanges.pipe(
+        takeUntilDestroyed(this.destroyRef)
+      ).subscribe(() => {
         this.updateValidators(true, trigger);
       });
     }
-    this.configForm().valueChanges.subscribe(() => {
+    this.configForm().valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.onConfigChanged(this.prepareOutputConfig(this.configForm().getRawValue()));
     });
   }

ui-ngx/src/app/modules/home/components/widget/config/widget-settings.component.ts

@@ -154,6 +154,10 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnDestroy,
     if (this.definedSettingsComponentRef) {
       this.definedSettingsComponentRef.destroy();
     }
+    if (this.changeSubscription) {
+      this.changeSubscription.unsubscribe();
+      this.changeSubscription = null;
+    }
   }
 
   setDisabledState(isDisabled: boolean): void {

ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, Input, OnInit } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { Store } from '@ngrx/store';
@@ -31,6 +31,7 @@ import { EntityType } from '@shared/models/entity-type.models';
 import { createLabelFromDatasource, isDefinedAndNotNull } from '@core/utils';
 import { Observable } from 'rxjs';
 import { jsonRequired } from '@shared/components/json-object-edit.component';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 enum JsonInputWidgetMode {
   ATTRIBUTE = 'ATTRIBUTE',
@@ -77,7 +78,8 @@ export class JsonInputWidgetComponent extends PageComponent implements OnInit {
               private utils: UtilsService,
               private fb: UntypedFormBuilder,
               private attributeService: AttributeService,
-              private translate: TranslateService) {
+              private translate: TranslateService,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -137,7 +139,9 @@ export class JsonInputWidgetComponent extends PageComponent implements OnInit {
     this.attributeUpdateFormGroup = this.fb.group({
       currentValue: [{}, validators]
     });
-    this.attributeUpdateFormGroup.valueChanges.subscribe(() => {
+    this.attributeUpdateFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.ctx.detectChanges();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, OnInit } from '@angular/core';
+import { Component, DestroyRef, OnInit } from '@angular/core';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -23,6 +23,7 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { RequestData } from '@shared/models/rpc.models';
 import { TranslateService } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-persistent-add-dialog',
@@ -41,7 +42,8 @@ export class PersistentAddDialogComponent extends DialogComponent<PersistentAddD
               protected router: Router,
               public dialogRef: MatDialogRef<PersistentAddDialogComponent, RequestData>,
               private fb: UntypedFormBuilder,
-              private translate: TranslateService) {
+              private translate: TranslateService,
+              private destroyRef: DestroyRef) {
     super(store, router, dialogRef);
 
     this.persistentFormGroup = this.fb.group(
@@ -62,7 +64,9 @@ export class PersistentAddDialogComponent extends DialogComponent<PersistentAddD
 
   ngOnInit(): void {
     this.rpcMessageTypeText = this.translate.instant('widgets.persistent-table.message-types.false');
-    this.persistentFormGroup.get('oneWayElseTwoWay').valueChanges.subscribe(
+    this.persistentFormGroup.get('oneWayElseTwoWay').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => {
         this.rpcMessageTypeText = this.translate.instant(`widgets.persistent-table.message-types.${this.persistentFormGroup.get('oneWayElseTwoWay').value}`);
       }

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.ts

@@ -14,13 +14,14 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
+import { Component, DestroyRef, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
 import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
 import { WidgetFont } from '@home/components/widget/lib/settings/common/widget-font.component';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface LabelWidgetLabel {
   pattern: string;
@@ -61,7 +62,8 @@ export class LabelWidgetLabelComponent extends PageComponent implements OnInit,
 
   constructor(protected store: Store<AppState>,
               private translate: TranslateService,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -73,7 +75,9 @@ export class LabelWidgetLabelComponent extends PageComponent implements OnInit,
       backgroundColor: [null, []],
       font: [null, []]
     });
-    this.labelWidgetLabelFormGroup.valueChanges.subscribe(() => {
+    this.labelWidgetLabelFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -35,6 +35,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { WidgetService } from '@core/http/widget.service';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { IAliasController } from 'src/app/core/api/widget-api.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export function flotDataKeyDefaultSettings(chartType: ChartType): TbFlotKeySettings {
   const settings: TbFlotKeySettings = {
@@ -128,7 +129,8 @@ export class FlotKeySettingsComponent extends PageComponent implements OnInit, C
   constructor(protected store: Store<AppState>,
               private translate: TranslateService,
               private widgetService: WidgetService,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -189,23 +191,33 @@ export class FlotKeySettingsComponent extends PageComponent implements OnInit, C
 
     });
 
-    this.flotKeySettingsFormGroup.get('showLines').valueChanges.subscribe(() => {
+    this.flotKeySettingsFormGroup.get('showLines').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators(false);
     });
 
-    this.flotKeySettingsFormGroup.get('fillLines').valueChanges.subscribe(() => {
+    this.flotKeySettingsFormGroup.get('fillLines').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators(false);
     });
 
-    this.flotKeySettingsFormGroup.get('showPoints').valueChanges.subscribe(() => {
+    this.flotKeySettingsFormGroup.get('showPoints').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators(false);
     });
 
-    this.flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').valueChanges.subscribe(() => {
+    this.flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators(false);
     });
 
-    this.flotKeySettingsFormGroup.valueChanges.subscribe(() => {
+    this.flotKeySettingsFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.ts

@@ -15,7 +15,16 @@
 ///
 
 import { ValueSourceProperty } from '@home/components/widget/lib/settings/common/value-source.component';
-import { Component, EventEmitter, forwardRef, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  DestroyRef,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation
+} from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -28,6 +37,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { IAliasController } from '@core/api/widget-api.models';
 import { TbFlotKeyThreshold } from '@home/components/widget/lib/flot-widget.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-flot-threshold',
@@ -60,7 +70,8 @@ export class FlotThresholdComponent extends PageComponent implements OnInit, Con
   public thresholdFormGroup: UntypedFormGroup;
 
   constructor(protected store: Store<AppState>,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -70,7 +81,9 @@ export class FlotThresholdComponent extends PageComponent implements OnInit, Con
       lineWidth: [null, [Validators.min(0)]],
       color: [null, []]
     });
-    this.thresholdFormGroup.valueChanges.subscribe(() => {
+    this.thresholdFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -41,6 +41,7 @@ import {
 } from '@home/components/widget/lib/settings/chart/label-data-key.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { defaultLegendConfig, widgetType } from '@shared/models/widget.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export const flotDefaultSettings = (chartType: ChartType): Partial<TbFlotSettings> => {
   const settings: Partial<TbFlotSettings> = {
@@ -140,7 +141,8 @@ export class FlotWidgetSettingsComponent extends PageComponent implements OnInit
   constructor(protected store: Store<AppState>,
               private translate: TranslateService,
               private widgetService: WidgetService,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -238,34 +240,50 @@ export class FlotWidgetSettingsComponent extends PageComponent implements OnInit
       this.flotSettingsFormGroup.addControl('dataKeysListForLabels', this.fb.control(this.fb.array([]), []));
     }
 
-    this.flotSettingsFormGroup.get('showTooltip').valueChanges.subscribe(() => {
+    this.flotSettingsFormGroup.get('showTooltip').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators(true);
     });
 
-    this.flotSettingsFormGroup.get('xaxis.showLabels').valueChanges.subscribe(() => {
+    this.flotSettingsFormGroup.get('xaxis.showLabels').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators(true);
     });
 
-    this.flotSettingsFormGroup.get('yaxis.showLabels').valueChanges.subscribe(() => {
+    this.flotSettingsFormGroup.get('yaxis.showLabels').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators(true);
     });
 
     if (this.chartType === 'graph' || this.chartType === 'bar') {
-      this.flotSettingsFormGroup.get('showLegend').valueChanges.subscribe(() => {
+      this.flotSettingsFormGroup.get('showLegend').valueChanges.pipe(
+        takeUntilDestroyed(this.destroyRef)
+      ).subscribe(() => {
         this.updateValidators(true);
       });
-      this.flotSettingsFormGroup.get('comparisonEnabled').valueChanges.subscribe(() => {
+      this.flotSettingsFormGroup.get('comparisonEnabled').valueChanges.pipe(
+        takeUntilDestroyed(this.destroyRef)
+      ).subscribe(() => {
         this.updateValidators(true);
       });
-      this.flotSettingsFormGroup.get('timeForComparison').valueChanges.subscribe(() => {
+      this.flotSettingsFormGroup.get('timeForComparison').valueChanges.pipe(
+        takeUntilDestroyed(this.destroyRef)
+      ).subscribe(() => {
         this.updateValidators(true);
       });
-      this.flotSettingsFormGroup.get('customLegendEnabled').valueChanges.subscribe(() => {
+      this.flotSettingsFormGroup.get('customLegendEnabled').valueChanges.pipe(
+        takeUntilDestroyed(this.destroyRef)
+      ).subscribe(() => {
         this.updateValidators(true);
       });
     }
 
-    this.flotSettingsFormGroup.valueChanges.subscribe(() => {
+    this.flotSettingsFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
+import { Component, DestroyRef, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -28,6 +28,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface LabelDataKey {
   name: string;
@@ -75,7 +76,8 @@ export class LabelDataKeyComponent extends PageComponent implements OnInit, Cont
 
   constructor(protected store: Store<AppState>,
               private translate: TranslateService,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -84,7 +86,9 @@ export class LabelDataKeyComponent extends PageComponent implements OnInit, Cont
       name: [null, [Validators.required]],
       type: [DataKeyType.attribute, [Validators.required]]
     });
-    this.labelDataKeyFormGroup.valueChanges.subscribe(() => {
+    this.labelDataKeyFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -41,6 +41,7 @@ import {
   chartShapes,
   chartShapeTranslations
 } from '@home/components/widget/lib/chart/chart.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-time-series-chart-line-settings',
@@ -90,7 +91,8 @@ export class TimeSeriesChartLineSettingsComponent implements OnInit, ControlValu
 
   constructor(protected store: Store<AppState>,
               private dataKeyConfigComponent: DataKeyConfigComponent,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -112,14 +114,18 @@ export class TimeSeriesChartLineSettingsComponent implements OnInit, ControlValu
       pointSize: [null, [Validators.min(0)]],
       fillAreaSettings: [null, []]
     });
-    this.lineSettingsFormGroup.valueChanges.subscribe(() => {
+    this.lineSettingsFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
     merge(this.lineSettingsFormGroup.get('showLine').valueChanges,
       this.lineSettingsFormGroup.get('step').valueChanges,
       this.lineSettingsFormGroup.get('showPointLabel').valueChanges,
-      this.lineSettingsFormGroup.get('enablePointLabelBackground').valueChanges)
-    .subscribe(() => {
+      this.lineSettingsFormGroup.get('enablePointLabelBackground').valueChanges
+    ).pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
@@ -35,6 +35,7 @@ import { IAliasController } from '@core/api/widget-api.models';
 import { WidgetService } from '@core/http/widget.service';
 import { AlarmSeverity, alarmSeverityTranslations } from '@shared/models/alarm.models';
 import { EntityType } from '@shared/models/entity-type.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-get-value-action-settings-panel',
@@ -103,7 +104,8 @@ export class GetValueActionSettingsPanelComponent extends PageComponent implemen
 
   constructor(private fb: UntypedFormBuilder,
               private widgetService: WidgetService,
-              protected store: Store<AppState>) {
+              protected store: Store<AppState>,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -145,7 +147,10 @@ export class GetValueActionSettingsPanelComponent extends PageComponent implemen
 
     merge(this.getValueSettingsFormGroup.get('action').valueChanges,
           this.getValueSettingsFormGroup.get('dataToValue').get('type').valueChanges,
-          this.getValueSettingsFormGroup.get('executeRpc').get('requestPersistent').valueChanges).subscribe(() => {
+          this.getValueSettingsFormGroup.get('executeRpc').get('requestPersistent').valueChanges
+    ).pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
     this.updateValidators();

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -42,6 +42,7 @@ import {
 } from '@home/components/widget/lib/settings/common/action/mobile-action-editor.models';
 import { WidgetService } from '@core/http/widget.service';
 import { TbFunction } from '@shared/models/js-function.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-mobile-action-editor',
@@ -81,7 +82,8 @@ export class MobileActionEditorComponent implements ControlValueAccessor, OnInit
   private propagateChange = (_v: any) => { };
 
   constructor(private fb: UntypedFormBuilder,
-              private widgetService: WidgetService) {
+              private widgetService: WidgetService,
+              private destroyRef: DestroyRef) {
     this.functionScopeVariables = this.widgetService.getWidgetScopeVariables();
   }
 
@@ -98,14 +100,18 @@ export class MobileActionEditorComponent implements ControlValueAccessor, OnInit
       handleEmptyResultFunction: [null],
       handleErrorFunction: [null]
     });
-    this.mobileActionFormGroup.get('type').valueChanges.subscribe((type: WidgetMobileActionType) => {
+    this.mobileActionFormGroup.get('type').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((type: WidgetMobileActionType) => {
       let action: WidgetMobileActionDescriptor = this.mobileActionFormGroup.value;
       if (this.mobileActionTypeFormGroup) {
         action = {...action, ...this.mobileActionTypeFormGroup.value};
       }
       this.updateMobileActionType(type, action);
     });
-    this.mobileActionFormGroup.valueChanges.subscribe(() => {
+    this.mobileActionFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }
@@ -250,7 +256,9 @@ export class MobileActionEditorComponent implements ControlValueAccessor, OnInit
           break;
       }
     }
-    this.mobileActionTypeFormGroup.valueChanges.subscribe(() => {
+    this.mobileActionTypeFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
@@ -33,6 +33,7 @@ import { AttributeScope, DataKeyType, telemetryTypeTranslationsShort } from '@sh
 import { IAliasController } from '@core/api/widget-api.models';
 import { WidgetService } from '@core/http/widget.service';
 import { ValueType } from '@shared/models/constants';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-set-value-action-settings-panel',
@@ -89,7 +90,8 @@ export class SetValueActionSettingsPanelComponent extends PageComponent implemen
 
   constructor(private fb: UntypedFormBuilder,
               private widgetService: WidgetService,
-              protected store: Store<AppState>) {
+              protected store: Store<AppState>,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -122,7 +124,10 @@ export class SetValueActionSettingsPanelComponent extends PageComponent implemen
 
     merge(this.setValueSettingsFormGroup.get('action').valueChanges,
       this.setValueSettingsFormGroup.get('valueToData').get('type').valueChanges,
-      this.setValueSettingsFormGroup.get('executeRpc').get('requestPersistent').valueChanges).subscribe(() => {
+      this.setValueSettingsFormGroup.get('executeRpc').get('requestPersistent').valueChanges
+    ).pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
     this.updateValidators();

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
+import { Component, DestroyRef, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -29,6 +29,7 @@ import { IAliasController } from '@core/api/widget-api.models';
 import { AdvancedColorRange } from '@shared/models/widget-settings.models';
 import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models';
 import { Datasource } from '@shared/models/widget.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-advanced-range',
@@ -66,7 +67,8 @@ export class AdvancedRangeComponent extends PageComponent implements OnInit, Con
   public advancedRangeLevelFormGroup: UntypedFormGroup;
 
   constructor(protected store: Store<AppState>,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -76,7 +78,9 @@ export class AdvancedRangeComponent extends PageComponent implements OnInit, Con
       to: [null, []],
       color: [null, [Validators.required]]
     });
-    this.advancedRangeLevelFormGroup.valueChanges.subscribe(() => {
+    this.advancedRangeLevelFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import {
   AutoDateFormatSettings, defaultAutoDateFormatSettings,
@@ -27,6 +27,7 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { DatePipe } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-auto-date-format-settings-panel',
@@ -59,7 +60,8 @@ export class AutoDateFormatSettingsPanelComponent extends PageComponent implemen
 
   constructor(private date: DatePipe,
               private fb: UntypedFormBuilder,
-              protected store: Store<AppState>) {
+              protected store: Store<AppState>,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -68,7 +70,9 @@ export class AutoDateFormatSettingsPanelComponent extends PageComponent implemen
     for (const unit of formatTimeUnits) {
       this.autoDateFormatFormGroup.addControl(unit,
         this.fb.control(this.autoDateFormatSettings[unit] || this.defaultValues[unit], [Validators.required]));
-      this.autoDateFormatFormGroup.get(unit).valueChanges.subscribe((value: string) => {
+      this.autoDateFormatFormGroup.get(unit).valueChanges.pipe(
+        takeUntilDestroyed(this.destroyRef)
+      ).subscribe((value: string) => {
         this.previewText[unit] = this.date.transform(Date.now(), value);
       });
       this.previewText[unit] = this.date.transform(Date.now(), this.autoDateFormatSettings[unit] || this.defaultValues[unit]);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.ts

@@ -14,7 +14,16 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation
+} from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import {
   backgroundStyle,
@@ -30,6 +39,7 @@ import { AppState } from '@core/core.state';
 import { Observable } from 'rxjs';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-background-settings-panel',
@@ -64,7 +74,8 @@ export class BackgroundSettingsPanelComponent extends PageComponent implements O
               private imagePipe: ImagePipe,
               private sanitizer: DomSanitizer,
               protected store: Store<AppState>,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -81,13 +92,19 @@ export class BackgroundSettingsPanelComponent extends PageComponent implements O
         })
       }
     );
-    this.backgroundSettingsFormGroup.get('type').valueChanges.subscribe(() => {
+    this.backgroundSettingsFormGroup.get('type').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       setTimeout(() => {this.popover?.updatePosition();}, 0);
     });
-    this.backgroundSettingsFormGroup.get('overlay').get('enabled').valueChanges.subscribe(() => {
+    this.backgroundSettingsFormGroup.get('overlay').get('enabled').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
-    this.backgroundSettingsFormGroup.valueChanges.subscribe(() => {
+    this.backgroundSettingsFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateBackgroundStyle();
     });
     this.updateValidators();

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import {
   WidgetButtonAppearance,
@@ -25,6 +25,7 @@ import {
 } from '@shared/components/button/widget-button.models';
 import { merge } from 'rxjs';
 import { coerceBoolean } from '@shared/decorators/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-widget-button-appearance',
@@ -72,7 +73,8 @@ export class WidgetButtonAppearanceComponent implements OnInit, ControlValueAcce
 
   private propagateChange = (_val: any) => {};
 
-  constructor(private fb: UntypedFormBuilder) {}
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {}
 
   ngOnInit(): void {
     this.appearanceFormGroup = this.fb.group({
@@ -97,12 +99,16 @@ export class WidgetButtonAppearanceComponent implements OnInit, ControlValueAcce
       customStyle.addControl(state, this.fb.control(null, []));
     }
     this.appearanceFormGroup.addControl('customStyle', customStyle);
-    this.appearanceFormGroup.valueChanges.subscribe(() => {
+    this.appearanceFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
     merge(this.appearanceFormGroup.get('showLabel').valueChanges,
-          this.appearanceFormGroup.get('showIcon').valueChanges)
-    .subscribe(() => {
+          this.appearanceFormGroup.get('showIcon').valueChanges
+    ).pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.ts

@@ -17,6 +17,7 @@
 import {
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   EventEmitter,
   Input,
   OnInit,
@@ -42,6 +43,7 @@ import {
 import { merge } from 'rxjs';
 import { deepClone } from '@core/utils';
 import { WidgetButtonComponent } from '@shared/components/button/widget-button.component';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-widget-button-custom-style-panel',
@@ -99,7 +101,8 @@ export class WidgetButtonCustomStylePanelComponent extends PageComponent impleme
 
   constructor(private fb: UntypedFormBuilder,
               protected store: Store<AppState>,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -118,11 +121,15 @@ export class WidgetButtonCustomStylePanelComponent extends PageComponent impleme
     );
     merge(this.customStyleFormGroup.get('overrideMainColor').valueChanges,
           this.customStyleFormGroup.get('overrideBackgroundColor').valueChanges,
-          this.customStyleFormGroup.get('overrideDropShadow').valueChanges)
-    .subscribe(() => {
+          this.customStyleFormGroup.get('overrideDropShadow').valueChanges
+    ).pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
-    this.customStyleFormGroup.valueChanges.subscribe(() => {
+    this.customStyleFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updatePreviewAppearance();
     });
     this.setStyle(this.customStyle);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-toggle-custom-style-panel.component.ts

@@ -17,6 +17,7 @@
 import {
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   EventEmitter,
   Input,
   OnInit,
@@ -44,6 +45,7 @@ import {
   widgetButtonToggleStates,
   widgetButtonToggleStatesTranslations
 } from '@home/components/widget/lib/button/segmented-button-widget.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-widget-button-toggle-custom-style-panel',
@@ -106,7 +108,8 @@ export class WidgetButtonToggleCustomStylePanelComponent extends PageComponent i
 
   constructor(private fb: UntypedFormBuilder,
               protected store: Store<AppState>,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -126,11 +129,15 @@ export class WidgetButtonToggleCustomStylePanelComponent extends PageComponent i
     );
     merge(this.customStyleFormGroup.get('overrideMainColor').valueChanges,
       this.customStyleFormGroup.get('overrideBackgroundColor').valueChanges,
-      this.customStyleFormGroup.get('overrideBorderColor').valueChanges)
-      .subscribe(() => {
-        this.updateValidators();
-      });
-    this.customStyleFormGroup.valueChanges.subscribe(() => {
+      this.customStyleFormGroup.get('overrideBorderColor').valueChanges
+    ).pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
+      this.updateValidators();
+    });
+    this.customStyleFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updatePreviewAppearance();
     });
     this.setStyle(this.customStyle);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -23,6 +23,7 @@ import {
   Validators
 } from '@angular/forms';
 import { chartAnimationEasings, ChartAnimationSettings } from '@home/components/widget/lib/chart/chart.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-chart-animation-settings',
@@ -51,7 +52,8 @@ export class ChartAnimationSettingsComponent implements OnInit, ControlValueAcce
 
   public animationSettingsFormGroup: UntypedFormGroup;
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -65,11 +67,14 @@ export class ChartAnimationSettingsComponent implements OnInit, ControlValueAcce
       animationEasingUpdate: [null, []],
       animationDelayUpdate: [null, [Validators.min(0)]]
     });
-    this.animationSettingsFormGroup.valueChanges.subscribe(() => {
+    this.animationSettingsFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
-    this.animationSettingsFormGroup.get('animation').valueChanges
-    .subscribe(() => {
+    this.animationSettingsFormGroup.get('animation').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
   }
@@ -97,7 +102,9 @@ export class ChartAnimationSettingsComponent implements OnInit, ControlValueAcce
       value, {emitEvent: false}
     );
     this.updateValidators();
-    this.animationSettingsFormGroup.get('animation').valueChanges.subscribe((animation) => {
+    this.animationSettingsFormGroup.get('animation').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((animation) => {
       this.settingsExpanded = animation;
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit, Optional } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit, Optional } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -37,6 +37,7 @@ import {
   pieChartLabelPositionTranslations
 } from '@home/components/widget/lib/chart/chart.models';
 import { coerceBoolean } from '@shared/decorators/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-chart-bar-settings',
@@ -77,7 +78,8 @@ export class ChartBarSettingsComponent implements OnInit, ControlValueAccessor {
 
   constructor(protected store: Store<AppState>,
               @Optional() private dataKeyConfigComponent: DataKeyConfigComponent,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -104,13 +106,17 @@ export class ChartBarSettingsComponent implements OnInit, ControlValueAccessor {
       this.barSettingsFormGroup.addControl('barWidth', this.fb.control(null,
         [Validators.min(0), Validators.max(100)]));
     }
-    this.barSettingsFormGroup.valueChanges.subscribe(() => {
+    this.barSettingsFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
     merge(this.barSettingsFormGroup.get('showBorder').valueChanges,
       this.barSettingsFormGroup.get('showLabel').valueChanges,
-      this.barSettingsFormGroup.get('enableLabelBackground').valueChanges)
-    .subscribe(() => {
+      this.barSettingsFormGroup.get('enableLabelBackground').valueChanges
+    ).pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -30,6 +30,7 @@ import {
   chartFillTypes,
   chartFillTypeTranslations
 } from '@home/components/widget/lib/chart/chart.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-chart-fill-settings',
@@ -67,7 +68,8 @@ export class ChartFillSettingsComponent implements OnInit, ControlValueAccessor
   public fillSettingsFormGroup: UntypedFormGroup;
 
   constructor(protected store: Store<AppState>,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -79,10 +81,14 @@ export class ChartFillSettingsComponent implements OnInit, ControlValueAccessor
         end: [null, [Validators.min(0), Validators.max(100)]]
       })
     });
-    this.fillSettingsFormGroup.valueChanges.subscribe(() => {
+    this.fillSettingsFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
-    this.fillSettingsFormGroup.get('type').valueChanges.subscribe(() => {
+    this.fillSettingsFormGroup.get('type').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
     for (const type of chartFillTypes) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -31,6 +31,7 @@ import {
 import { merge } from 'rxjs';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { WidgetService } from '@core/http/widget.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-time-series-chart-axis-settings',
@@ -85,7 +86,8 @@ export class TimeSeriesChartAxisSettingsComponent implements OnInit, ControlValu
   public axisSettingsFormGroup: UntypedFormGroup;
 
   constructor(private fb: UntypedFormBuilder,
-              private widgetService: WidgetService) {
+              private widgetService: WidgetService,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -121,15 +123,19 @@ export class TimeSeriesChartAxisSettingsComponent implements OnInit, ControlValu
     } else if (this.axisType === 'xAxis') {
       this.axisSettingsFormGroup.addControl('ticksFormat', this.fb.control(null, []));
     }
-    this.axisSettingsFormGroup.valueChanges.subscribe(() => {
+    this.axisSettingsFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
     merge(this.axisSettingsFormGroup.get('show').valueChanges,
           this.axisSettingsFormGroup.get('showTickLabels').valueChanges,
           this.axisSettingsFormGroup.get('showTicks').valueChanges,
           this.axisSettingsFormGroup.get('showLine').valueChanges,
-          this.axisSettingsFormGroup.get('showSplitLines').valueChanges)
-    .subscribe(() => {
+          this.axisSettingsFormGroup.get('showSplitLines').valueChanges
+    ).pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
   }
@@ -157,7 +163,9 @@ export class TimeSeriesChartAxisSettingsComponent implements OnInit, ControlValu
       value, {emitEvent: false}
     );
     this.updateValidators();
-    this.axisSettingsFormGroup.get('show').valueChanges.subscribe((show) => {
+    this.axisSettingsFormGroup.get('show').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((show) => {
       this.settingsExpanded = show;
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-grid-settings.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -24,6 +24,7 @@ import {
 } from '@angular/forms';
 import { TimeSeriesChartGridSettings } from '@home/components/widget/lib/chart/time-series-chart.models';
 import { WidgetService } from '@core/http/widget.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-time-series-chart-grid-settings',
@@ -51,7 +52,8 @@ export class TimeSeriesChartGridSettingsComponent implements OnInit, ControlValu
   public gridSettingsFormGroup: UntypedFormGroup;
 
   constructor(private fb: UntypedFormBuilder,
-              private widgetService: WidgetService,) {
+              private widgetService: WidgetService,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -61,11 +63,14 @@ export class TimeSeriesChartGridSettingsComponent implements OnInit, ControlValu
       borderWidth: [null, [Validators.min(0)]],
       borderColor: [null, []],
     });
-    this.gridSettingsFormGroup.valueChanges.subscribe(() => {
+    this.gridSettingsFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
-    this.gridSettingsFormGroup.get('show').valueChanges
-    .subscribe(() => {
+    this.gridSettingsFormGroup.get('show').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
   }
@@ -93,7 +98,9 @@ export class TimeSeriesChartGridSettingsComponent implements OnInit, ControlValu
       value, {emitEvent: false}
     );
     this.updateValidators();
-    this.gridSettingsFormGroup.get('show').valueChanges.subscribe((show) => {
+    this.gridSettingsFormGroup.get('show').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((show) => {
       this.settingsExpanded = show;
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.ts

@@ -17,6 +17,7 @@
 import {
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   EventEmitter,
   forwardRef,
   Input,
@@ -37,6 +38,7 @@ import {
   timeSeriesStateSourceTypes,
   timeSeriesStateSourceTypeTranslations
 } from '@home/components/widget/lib/chart/time-series-chart.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-time-series-chart-state-row',
@@ -72,7 +74,8 @@ export class TimeSeriesChartStateRowComponent implements ControlValueAccessor, O
   private propagateChange = (_val: any) => {};
 
   constructor(private fb: UntypedFormBuilder,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
@@ -84,10 +87,14 @@ export class TimeSeriesChartStateRowComponent implements ControlValueAccessor, O
       sourceRangeFrom: [null, []],
       sourceRangeTo: [null, []]
     });
-    this.stateFormGroup.valueChanges.subscribe(
+    this.stateFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => this.updateModel()
     );
-    this.stateFormGroup.get('sourceType').valueChanges.subscribe(() => {
+    this.stateFormGroup.get('sourceType').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -32,6 +32,7 @@ import {
   timeSeriesChartStateValid,
   timeSeriesChartStateValidator
 } from '@home/components/widget/lib/chart/time-series-chart.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-time-series-chart-states-panel',
@@ -60,14 +61,17 @@ export class TimeSeriesChartStatesPanelComponent implements ControlValueAccessor
 
   private propagateChange = (_val: any) => {};
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
     this.statesFormGroup = this.fb.group({
       states: [this.fb.array([]), []]
     });
-    this.statesFormGroup.valueChanges.subscribe(
+    this.statesFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => {
         let states: TimeSeriesChartStateSettings[] = this.statesFormGroup.get('states').value;
         if (states) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-row.component.ts

@@ -17,6 +17,7 @@
 import {
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   EventEmitter,
   forwardRef,
   Input,
@@ -52,6 +53,7 @@ import {
   ValueSourceType,
   ValueSourceTypeTranslation
 } from '@shared/models/widget-settings.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-time-series-chart-threshold-row',
@@ -121,7 +123,8 @@ export class TimeSeriesChartThresholdRowComponent implements ControlValueAccesso
 
   constructor(private fb: UntypedFormBuilder,
               private thresholdsPanel: TimeSeriesChartThresholdsPanelComponent,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
@@ -137,16 +140,24 @@ export class TimeSeriesChartThresholdRowComponent implements ControlValueAccesso
     this.latestKeyFormControl = this.fb.control(null, [Validators.required]);
     this.entityKeyFormControl = this.fb.control(null, [Validators.required]);
     this.thresholdSettingsFormControl = this.fb.control(null);
-    this.thresholdFormGroup.valueChanges.subscribe(
+    this.thresholdFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => this.updateModel()
     );
-    this.latestKeyFormControl.valueChanges.subscribe(
+    this.latestKeyFormControl.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => this.updateModel()
     );
-    this.entityKeyFormControl.valueChanges.subscribe(
+    this.entityKeyFormControl.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => this.updateModel()
     );
-    this.thresholdSettingsFormControl.valueChanges.subscribe((thresholdSettings: Partial<TimeSeriesChartThreshold>) => {
+    this.thresholdSettingsFormControl.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((thresholdSettings: Partial<TimeSeriesChartThreshold>) => {
       this.modelValue = {...this.modelValue, ...thresholdSettings};
       this.thresholdFormGroup.patchValue(
         {
@@ -158,7 +169,9 @@ export class TimeSeriesChartThresholdRowComponent implements ControlValueAccesso
         {emitEvent: false});
       this.propagateChange(this.modelValue);
     });
-    this.thresholdFormGroup.get('type').valueChanges.subscribe(() => {
+    this.thresholdFormGroup.get('type').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import {
@@ -33,6 +33,7 @@ import {
   chartShapes,
   chartShapeTranslations
 } from '@home/components/widget/lib/chart/chart.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-time-series-chart-threshold-settings-panel',
@@ -81,7 +82,8 @@ export class TimeSeriesChartThresholdSettingsPanelComponent implements OnInit {
 
   thresholdSettingsFormGroup: UntypedFormGroup;
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -108,7 +110,10 @@ export class TimeSeriesChartThresholdSettingsPanelComponent implements OnInit {
     merge(this.thresholdSettingsFormGroup.get('showLabel').valueChanges,
           this.thresholdSettingsFormGroup.get('enableLabelBackground').valueChanges,
           this.thresholdSettingsFormGroup.get('startSymbol').valueChanges,
-          this.thresholdSettingsFormGroup.get('endSymbol').valueChanges).subscribe(() => {
+          this.thresholdSettingsFormGroup.get('endSymbol').valueChanges
+    ).pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
     this.updateValidators();

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -40,6 +40,7 @@ import { DataKey, Datasource, WidgetConfig } from '@shared/models/widget.models'
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { ValueSourceType } from '@shared/models/widget-settings.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-time-series-chart-thresholds-panel',
@@ -87,14 +88,17 @@ export class TimeSeriesChartThresholdsPanelComponent implements ControlValueAcce
 
   private propagateChange = (_val: any) => {};
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
     this.thresholdsFormGroup = this.fb.group({
       thresholds: [this.fb.array([]), []]
     });
-    this.thresholdsFormGroup.valueChanges.subscribe(
+    this.thresholdsFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => {
         let thresholds: TimeSeriesChartThreshold[] = this.thresholdsFormGroup.get('thresholds').value;
         if (thresholds) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.ts

@@ -14,7 +14,16 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, forwardRef, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  DestroyRef,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation
+} from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -37,6 +46,7 @@ import {
 import { mergeDeep } from '@core/utils';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { coerceBoolean } from '@shared/decorators/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-time-series-chart-y-axes-panel',
@@ -76,14 +86,17 @@ export class TimeSeriesChartYAxesPanelComponent implements ControlValueAccessor,
 
   private propagateChange = (_val: any) => {};
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
     this.yAxesFormGroup = this.fb.group({
       axes: [this.fb.array([]), []]
     });
-    this.yAxesFormGroup.valueChanges.subscribe(
+    this.yAxesFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => {
         let axes: TimeSeriesChartYAxisSettings[] = this.yAxesFormGroup.get('axes').value;
         for (let i = 0; i < axes.length; i++) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.ts

@@ -17,6 +17,7 @@
 import {
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   EventEmitter,
   forwardRef,
   Input,
@@ -40,6 +41,7 @@ import {
 } from '@home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings-panel.component';
 import { deepClone } from '@core/utils';
 import { TranslateService } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-time-series-chart-y-axis-row',
@@ -81,7 +83,8 @@ export class TimeSeriesChartYAxisRowComponent implements ControlValueAccessor, O
               private popoverService: TbPopoverService,
               private renderer: Renderer2,
               private viewContainerRef: ViewContainerRef,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
@@ -94,10 +97,14 @@ export class TimeSeriesChartYAxisRowComponent implements ControlValueAccessor, O
       max: [null, []],
       show: [null, []]
     });
-    this.axisFormGroup.valueChanges.subscribe(
+    this.axisFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => this.updateModel()
     );
-    this.axisFormGroup.get('show').valueChanges.subscribe(() => {
+    this.axisFormGroup.get('show').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -30,6 +30,7 @@ import {
 } from '@home/components/widget/lib/chart/time-series-chart.models';
 import { merge } from 'rxjs';
 import { coerceBoolean } from '@shared/decorators/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-time-series-no-aggregation-bar-width-settings',
@@ -64,7 +65,8 @@ export class TimeSeriesNoAggregationBarWidthSettingsComponent implements OnInit,
 
   public barWidthSettingsFormGroup: UntypedFormGroup;
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -81,13 +83,17 @@ export class TimeSeriesNoAggregationBarWidthSettingsComponent implements OnInit,
         absoluteWidth: [null, [Validators.required, Validators.min(100)]]
       })
     });
-    this.barWidthSettingsFormGroup.valueChanges.subscribe(() => {
+    this.barWidthSettingsFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
     merge(this.barWidthSettingsFormGroup.get('strategy').valueChanges,
       this.barWidthSettingsFormGroup.get('groupWidth.relative').valueChanges,
-      this.barWidthSettingsFormGroup.get('barWidth.relative').valueChanges)
-    .subscribe(() => {
+      this.barWidthSettingsFormGroup.get('barWidth.relative').valueChanges
+    ).pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import {
   ColorSettings,
@@ -34,6 +34,7 @@ import { IAliasController } from '@core/api/widget-api.models';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models';
 import { Datasource } from '@shared/models/widget.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-color-settings-panel',
@@ -91,7 +92,8 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
 
   constructor(private fb: UntypedFormBuilder,
               private widgetService: WidgetService,
-              protected store: Store<AppState>) {
+              protected store: Store<AppState>,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -105,7 +107,9 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
         colorFunction: [this.colorSettings?.colorFunction, []]
       }
     );
-    this.colorSettingsFormGroup.get('type').valueChanges.subscribe(() => {
+    this.colorSettingsFormGroup.get('type').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       setTimeout(() => {this.popover?.updatePosition();}, 0);
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.ts

@@ -32,12 +32,13 @@ import {
   CountWidgetSettings, entityCountCardLayoutImages
 } from '@home/components/widget/lib/count/count-widget.models';
 import {PageComponent} from '@shared/components/page.component';
-import {Component, forwardRef, Input, OnInit} from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import {
   valueCardLayoutImages,
   valueCardLayoutTranslations
 } from '@home/components/widget/lib/cards/value-card-widget.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-count-widget-settings',
@@ -70,7 +71,8 @@ export class CountWidgetSettingsComponent extends PageComponent implements OnIni
   countWidgetConfigForm: UntypedFormGroup;
 
   constructor(protected store: Store<AppState>,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -104,7 +106,9 @@ export class CountWidgetSettingsComponent extends PageComponent implements OnIni
       chevronSizeUnit: [null, []],
       chevronColor: [null, []],
     });
-    this.countWidgetConfigForm.valueChanges.subscribe(() => {
+    this.countWidgetConfigForm.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
     for (const trigger of ['showLabel', 'showIcon', 'showIconBackground', 'showChevron']) {
@@ -113,7 +117,9 @@ export class CountWidgetSettingsComponent extends PageComponent implements OnIni
       for (const part of path) {
         control = this.countWidgetConfigForm.get(part);
       }
-      control.valueChanges.subscribe(() => {
+      control.valueChanges.pipe(
+        takeUntilDestroyed(this.destroyRef)
+      ).subscribe(() => {
         this.updateValidators();
       });
     }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, HostBinding, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, HostBinding, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALIDATORS,
@@ -28,6 +28,7 @@ import {
 import { cssUnit, resolveCssSize } from '@shared/models/widget-settings.models';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { isDefinedAndNotNull } from '@core/utils';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-css-size-input',
@@ -82,14 +83,17 @@ export class CssSizeInputComponent implements OnInit, ControlValueAccessor, Vali
 
   private propagateChange = null;
 
-  constructor(private fb: UntypedFormBuilder) {}
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {}
 
   ngOnInit(): void {
     this.cssSizeFormGroup = this.fb.group({
       size: [null, this.required ? [Validators.required, Validators.min(0)] : [Validators.min(0)]],
       unit: [null, []]
     });
-    this.cssSizeFormGroup.valueChanges.subscribe((value: {size: number; unit: cssUnit}) => {
+    this.cssSizeFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((value: {size: number; unit: cssUnit}) => {
       this.updateModel(value);
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-unit-select.component.ts

@@ -14,10 +14,11 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormControl } from '@angular/forms';
 import { cssUnit, cssUnits } from '@shared/models/widget-settings.models';
 import { coerceBoolean } from '@shared/decorators/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-css-unit-select',
@@ -51,11 +52,13 @@ export class CssUnitSelectComponent implements OnInit, ControlValueAccessor {
 
   private propagateChange = null;
 
-  constructor() {}
+  constructor(private destroyRef: DestroyRef) {}
 
   ngOnInit(): void {
     this.cssUnitFormControl = new UntypedFormControl();
-    this.cssUnitFormControl.valueChanges.subscribe((value: cssUnit) => {
+    this.cssUnitFormControl.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((value: cssUnit) => {
       this.updateModel(value);
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.ts

@@ -14,7 +14,16 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit, Renderer2, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  DestroyRef,
+  forwardRef,
+  Input,
+  OnInit,
+  Renderer2,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormControl } from '@angular/forms';
 import {
   AutoDateFormatSettings,
@@ -36,6 +45,7 @@ import { coerceBoolean } from '@shared/decorators/coercion';
 import {
   AutoDateFormatSettingsPanelComponent
 } from '@home/components/widget/lib/settings/common/auto-date-format-settings-panel.component';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-date-format-select',
@@ -81,14 +91,17 @@ export class DateFormatSelectComponent implements OnInit, ControlValueAccessor {
               private date: DatePipe,
               private popoverService: TbPopoverService,
               private renderer: Renderer2,
-              private viewContainerRef: ViewContainerRef) {}
+              private viewContainerRef: ViewContainerRef,
+              private destroyRef: DestroyRef) {}
 
   ngOnInit(): void {
     const targetDateFormats = this.includeAuto ? dateFormatsWithAuto : dateFormats;
     this.dateFormatList = this.excludeLastUpdateAgo ?
       targetDateFormats.filter(format => !format.lastUpdateAgo) : dateFormats;
     this.dateFormatFormControl = new UntypedFormControl();
-    this.dateFormatFormControl.valueChanges.subscribe((value: DateFormatSettings) => {
+    this.dateFormatFormControl.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((value: DateFormatSettings) => {
       this.updateModel(value);
       if (value?.custom) {
         setTimeout(() => {

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { DateFormatSettings } from '@shared/models/widget-settings.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
@@ -22,6 +22,7 @@ import { UntypedFormControl, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { DatePipe } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-date-format-settings-panel',
@@ -46,13 +47,16 @@ export class DateFormatSettingsPanelComponent extends PageComponent implements O
   previewText = '';
 
   constructor(private date: DatePipe,
-              protected store: Store<AppState>) {
+              protected store: Store<AppState>,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
   ngOnInit(): void {
     this.dateFormatFormControl = new UntypedFormControl(this.dateFormat.format, [Validators.required]);
-    this.dateFormatFormControl.valueChanges.subscribe((value: string) => {
+    this.dateFormatFormControl.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((value: string) => {
       this.previewText = this.date.transform(Date.now(), value);
     });
     this.previewText = this.date.transform(Date.now(), this.dateFormat.format);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/entity-alias-input.component.ts

@@ -16,6 +16,7 @@
 
 import {
   Component,
+  DestroyRef,
   ElementRef,
   forwardRef,
   HostBinding,
@@ -35,6 +36,7 @@ import { coerceBoolean } from '@shared/decorators/coercion';
 import { IAliasController } from '@core/api/widget-api.models';
 import { map, mergeMap } from 'rxjs/operators';
 import { Observable, of } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-entity-alias-input',
@@ -76,12 +78,15 @@ export class EntityAliasInputComponent implements ControlValueAccessor, OnInit {
 
   private propagateChange = (_val: any) => {};
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit() {
     this.entityAliasFormControl = this.fb.control(null, this.required ? [Validators.required] : []);
-    this.entityAliasFormControl.valueChanges.subscribe(
+    this.entityAliasFormControl.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => this.updateModel()
     );
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.ts

@@ -16,6 +16,7 @@
 
 import {
   Component,
+  DestroyRef,
   ElementRef,
   EventEmitter,
   Input,
@@ -42,6 +43,7 @@ import { AppState } from '@core/core.state';
 import { Observable } from 'rxjs';
 import { map, startWith, tap } from 'rxjs/operators';
 import { coerceBoolean } from '@shared/decorators/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-font-settings-panel',
@@ -101,7 +103,8 @@ export class FontSettingsPanelComponent extends PageComponent implements OnInit
   previewStyle: ComponentStyle = {};
 
   constructor(private fb: UntypedFormBuilder,
-              protected store: Store<AppState>) {
+              protected store: Store<AppState>,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -118,7 +121,9 @@ export class FontSettingsPanelComponent extends PageComponent implements OnInit
       }
     );
     this.updatePreviewStyle(this.font);
-    this.fontFormGroup.valueChanges.subscribe((font: Font) => {
+    this.fontFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe((font: Font) => {
       if (this.fontFormGroup.valid) {
         this.updatePreviewStyle(font);
         setTimeout(() => {this.popover?.updatePosition();}, 0);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.ts

@@ -14,13 +14,14 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { merge } from 'rxjs';
 import {
   StatusWidgetLayout,
   StatusWidgetStateSettings
 } from '@home/components/widget/lib/indicator/status-widget.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-status-widget-state-settings',
@@ -50,7 +51,8 @@ export class StatusWidgetStateSettingsComponent implements OnInit, OnChanges, Co
 
   public stateSettingsFormGroup: UntypedFormGroup;
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -71,12 +73,16 @@ export class StatusWidgetStateSettingsComponent implements OnInit, OnChanges, Co
       secondaryColorDisabled: [null, []],
       backgroundDisabled: [null, []]
     });
-    this.stateSettingsFormGroup.valueChanges.subscribe(() => {
+    this.stateSettingsFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
     merge(this.stateSettingsFormGroup.get('showLabel').valueChanges,
-      this.stateSettingsFormGroup.get('showStatus').valueChanges)
-    .subscribe(() => {
+      this.stateSettingsFormGroup.get('showStatus').valueChanges
+    ).pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.ts

@@ -14,7 +14,17 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  forwardRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges
+} from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALIDATORS,
@@ -49,6 +59,7 @@ import { merge, Observable, of, Subscription } from 'rxjs';
 import { WidgetActionCallbacks } from '@home/components/widget/action/manage-widget-actions.component.models';
 import { ImageService } from '@core/http/image.service';
 import { map } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-scada-symbol-object-settings',
@@ -67,7 +78,7 @@ import { map } from 'rxjs/operators';
     }
   ]
 })
-export class ScadaSymbolObjectSettingsComponent implements OnInit, OnChanges, ControlValueAccessor, Validator {
+export class ScadaSymbolObjectSettingsComponent implements OnInit, OnChanges, ControlValueAccessor, Validator, OnDestroy {
 
   ScadaSymbolBehaviorType = ScadaSymbolBehaviorType;
 
@@ -113,7 +124,8 @@ export class ScadaSymbolObjectSettingsComponent implements OnInit, OnChanges, Co
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder,
               private imageService: ImageService,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private destroyRef: DestroyRef) {
   }
 
   ngOnInit(): void {
@@ -121,7 +133,9 @@ export class ScadaSymbolObjectSettingsComponent implements OnInit, OnChanges, Co
       behavior: this.fb.group({}),
       properties: this.fb.group({})
     });
-    this.scadaSymbolObjectSettingsFormGroup.valueChanges.subscribe(() => {
+    this.scadaSymbolObjectSettingsFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
     this.loadMetadata();
@@ -138,6 +152,13 @@ export class ScadaSymbolObjectSettingsComponent implements OnInit, OnChanges, Co
     }
   }
 
+  ngOnDestroy() {
+    if (this.validatorSubscription) {
+      this.validatorSubscription.unsubscribe();
+      this.validatorSubscription = null;
+    }
+  }
+
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source-data-key.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -36,6 +36,7 @@ import {
   ValueSourceTypes,
   ValueSourceTypeTranslation
 } from '@shared/models/widget-settings.models';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-value-source-data-key',
@@ -81,7 +82,8 @@ export class ValueSourceDataKeyComponent extends PageComponent implements OnInit
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -93,16 +95,24 @@ export class ValueSourceDataKeyComponent extends PageComponent implements OnInit
     });
     this.latestKeyFormControl = this.fb.control(null, [Validators.required]);
     this.entityKeyFormControl = this.fb.control(null, [Validators.required]);
-    this.valueSourceFormGroup.valueChanges.subscribe(
+    this.valueSourceFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => this.updateModel()
     );
-    this.latestKeyFormControl.valueChanges.subscribe(
+    this.latestKeyFormControl.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => this.updateModel()
     );
-    this.entityKeyFormControl.valueChanges.subscribe(
+    this.entityKeyFormControl.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(
       () => this.updateModel()
     );
-    this.valueSourceFormGroup.get('type').valueChanges.subscribe(() => {
+    this.valueSourceFormGroup.get('type').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators();
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, DestroyRef, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
@@ -25,6 +25,7 @@ import { catchError, map, mergeMap, publishReplay, refCount, tap } from 'rxjs/op
 import { DataKey } from '@shared/models/widget.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { EntityService } from '@core/http/entity.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export declare type ValueSource = 'predefinedValue' | 'entityAttribute';
 
@@ -84,7 +85,8 @@ export class ValueSourceComponent extends PageComponent implements OnInit, Contr
 
   constructor(protected store: Store<AppState>,
               private entityService: EntityService,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -95,10 +97,14 @@ export class ValueSourceComponent extends PageComponent implements OnInit, Contr
       attribute: [null, []],
       value: [null, []]
     });
-    this.valueSourceFormGroup.valueChanges.subscribe(() => {
+    this.valueSourceFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
-    this.valueSourceFormGroup.get('valueSource').valueChanges.subscribe(() => {
+    this.valueSourceFormGroup.get('valueSource').valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateValidators(true);
     });
     this.updateValidators(false);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.ts

@@ -14,12 +14,13 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, HostBinding, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, HostBinding, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface WidgetFont {
   family: string;
@@ -63,7 +64,8 @@ export class WidgetFontComponent extends PageComponent implements OnInit, Contro
 
   constructor(protected store: Store<AppState>,
               private translate: TranslateService,
-              private fb: UntypedFormBuilder) {
+              private fb: UntypedFormBuilder,
+              private destroyRef: DestroyRef) {
     super(store);
   }
 
@@ -78,7 +80,9 @@ export class WidgetFontComponent extends PageComponent implements OnInit, Contro
     if (this.hasShadowColor) {
       this.widgetFontFormGroup.addControl('shadowColor', this.fb.control(null, []));
     }
-    this.widgetFontFormGroup.valueChanges.subscribe(() => {
+    this.widgetFontFormGroup.valueChanges.pipe(
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
       this.updateModel();
     });
   }