diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-css.raw b/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-css.raw
index 56620aee51..a8c69855c7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-css.raw
+++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-css.raw
@@ -1,21 +1,9 @@
-/*================================================================================*/
-/*=======================  New TB 3.0 / Angular 8 Example  =======================*/
-/*================================================================================*/
-/*
-.edit-entity-form mat-form-field {
-    padding-right: 10px;
-}
-*/
 /*=======================================================================*/
 /*==========  There are two examples: for edit and add entity  ==========*/
 /*=======================================================================*/
 /*========================  Edit entity example  ========================*/
 /*=======================================================================*/
 /*
-.edit-entity-form md-input-container {
-    padding-right: 10px;
-}
-
 .edit-entity-form .boolean-value-input {
     padding-left: 5px;
 }
@@ -41,6 +29,10 @@
     white-space: nowrap;
 }
 
+.relations-list .mat-form-field-infix {
+    width: auto !important;
+}
+
 .relations-list .body {
     padding-right: 5px;
     padding-bottom: 15px;
@@ -56,26 +48,14 @@
     padding-left: 5px;
 }
 
-.relations-list .body md-autocomplete-wrap md-input-container {
-    height: 30px;
-}
-
 .relations-list .body .md-button {
     margin: 0;
 }
-
-.relations-list.old-relations tb-entity-select tb-entity-autocomplete button {
-    display: none;
-}
 */
 /*========================================================================*/
 /*=========================  Add entity example  =========================*/
 /*========================================================================*/
 /*
-.add-entity-form md-input-container {
-    padding-right: 10px;
-}
-
 .add-entity-form .boolean-value-input {
     padding-left: 5px;
 }
@@ -101,6 +81,10 @@
     white-space: nowrap;
 }
 
+.relations-list .mat-form-field-infix {
+    width: auto !important;
+}
+
 .relations-list .body {
     padding-right: 5px;
     padding-bottom: 15px;
@@ -116,10 +100,6 @@
     padding-left: 5px;
 }
 
-.relations-list .body md-autocomplete-wrap md-input-container {
-    height: 30px;
-}
-
 .relations-list .body .md-button {
     margin: 0;
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-html.raw b/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-html.raw
index 73d771b9c6..11cda7cdbc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-html.raw
+++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-html.raw
@@ -1,349 +1,355 @@
 <!--=======================================================================-->
-<!--===================  New TB 3.0 / Angular 8 Example   =================-->
-<!--=======================================================================-->
-<!--<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"-->
-<!--      class="edit-entity-form"-->
-<!--      (ngSubmit)="save()" style="width: 600px;">-->
-<!--  <mat-toolbar fxLayout="row" color="primary">-->
-<!--    <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>-->
-<!--    <span fxFlex></span>-->
-<!--    <button mat-button mat-icon-button-->
-<!--            (click)="cancel()"-->
-<!--            type="button">-->
-<!--      <mat-icon class="material-icons">close</mat-icon>-->
-<!--    </button>-->
-<!--  </mat-toolbar>-->
-<!--  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
-<!--  </mat-progress-bar>-->
-<!--  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
-<!--  <div mat-dialog-content>-->
-<!--      <div class="mat-padding" fxLayout="column">-->
-<!--          <mat-form-field class="mat-block">-->
-<!--                <mat-label>Entity name</mat-label>-->
-<!--                <input matInput formControlName="entityName" required>-->
-<!--                <mat-error *ngIf="editEntityFormGroup.get('entityName').hasError('required')">-->
-<!--                    Entity name required-->
-<!--                </mat-error>-->
-<!--           </mat-form-field>-->
-<!--      </div>  -->
-<!--  </div>-->
-<!--  <div mat-dialog-actions fxLayout="row">-->
-<!--    <span fxFlex></span>-->
-<!--    <button mat-button mat-raised-button color="primary"-->
-<!--            type="submit"-->
-<!--            [disabled]="(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty">-->
-<!--      {{ 'action.save' | translate }}-->
-<!--    </button>-->
-<!--    <button mat-button color="primary"-->
-<!--            style="margin-right: 20px;"-->
-<!--            type="button"-->
-<!--            [disabled]="(isLoading$ | async)"-->
-<!--            (click)="cancel()" cdkFocusInitial>-->
-<!--      {{ 'action.cancel' | translate }}-->
-<!--    </button>-->
-<!--  </div>-->
-<!--</form>-->
-<!--=======================================================================-->
 <!--=====  There are two example templates: for edit and add entity   =====-->
 <!--=======================================================================-->
 <!--========================  Edit entity example  ========================-->
 <!--=======================================================================-->
 <!-- -->
-<!--<md-dialog aria-label="Edit entity">-->
-<!--    <form name="editEntityForm" class="edit-entity-form" ng-submit="vm.save()">-->
-<!--        <md-toolbar>-->
-<!--            <div class="md-toolbar-tools">-->
-<!--                <h2>Edit {{vm.entityType.toLowerCase()}} {{vm.entityName}}</h2>-->
-<!--                <span flex></span>-->
-<!--                <md-button class="md-icon-button" ng-click="vm.cancel()">-->
-<!--                    <ng-md-icon icon="close" aria-label="Close"></ng-md-icon>-->
-<!--                </md-button>-->
+<!--<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"-->
+<!--      (ngSubmit)="save()"  class="edit-entity-form">-->
+<!--    <mat-toolbar fxLayout="row" color="primary">-->
+<!--        <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>-->
+<!--        <span fxFlex></span>-->
+<!--        <button mat-icon-button (click)="cancel()" type="button">-->
+<!--            <mat-icon class="material-icons">close</mat-icon>-->
+<!--        </button>-->
+<!--    </mat-toolbar>-->
+<!--    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
+<!--    </mat-progress-bar>-->
+<!--    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
+<!--    <div mat-dialog-content fxLayout="column">-->
+<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-label>Entity Name</mat-label>-->
+<!--                <input matInput formControlName="entityName" required readonly="">-->
+<!--            </mat-form-field>-->
+<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-label>Entity Label</mat-label>-->
+<!--                <input matInput formControlName="entityLabel">-->
+<!--            </mat-form-field>-->
+<!--        </div>-->
+<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-label>Entity Type</mat-label>-->
+<!--                <input matInput formControlName="entityType" readonly>-->
+<!--            </mat-form-field>-->
+<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-label>Type</mat-label>-->
+<!--                <input matInput formControlName="type" readonly>-->
+<!--            </mat-form-field>-->
+<!--        </div>-->
+<!--        <div formGroupName="attributes" fxLayout="column">-->
+<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Latitude</mat-label>-->
+<!--                    <input type="number" step="any" matInput formControlName="latitude">-->
+<!--                </mat-form-field>-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Longitude</mat-label>-->
+<!--                    <input type="number" step="any" matInput formControlName="longitude">-->
+<!--                </mat-form-field>-->
 <!--            </div>-->
-<!--        </md-toolbar>-->
-<!--        <md-dialog-content>-->
-<!--            <div class="md-dialog-content">-->
-<!--                <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Entity Name</label>-->
-<!--                        <input ng-model="vm.entityName" readonly>-->
-<!--                    </md-input-container>-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Entity Type</label>-->
-<!--                        <input ng-model="vm.entityType" readonly>-->
-<!--                    </md-input-container>-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Type</label>-->
-<!--                        <input ng-model="vm.type" readonly>-->
-<!--                    </md-input-container>-->
-<!--                </div>-->
-<!--                <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Latitude</label>-->
-<!--                        <input name="latitude" type="number" step="any" ng-model="vm.attributes.latitude">-->
-<!--                    </md-input-container>-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Longitude</label>-->
-<!--                        <input name="longitude" type="number" step="any" ng-model="vm.attributes.longitude">-->
-<!--                    </md-input-container>-->
-<!--                </div>-->
-<!--                 <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Address</label>-->
-<!--                        <input ng-model="vm.attributes.address">-->
-<!--                    </md-input-container>-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Owner</label>-->
-<!--                        <input ng-model="vm.attributes.owner">-->
-<!--                    </md-input-container>-->
-<!--                </div>-->
-<!--                <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Integer Value</label>-->
-<!--                        <input name="integerNumber" type="number" step="1" ng-pattern="/^-?[0-9]+$/" ng-model="vm.attributes.number">-->
-<!--                        <div ng-messages="editEntityForm.integerNumber.$error">-->
-<!--                            <div ng-message="pattern">Invalid integer value.</div>-->
-<!--                        </div>-->
-<!--                    </md-input-container>-->
-<!--                    <div class="boolean-value-input" layout="column" layout-align="center start" flex>-->
-<!--                        <label class="checkbox-label">Boolean Value</label>-->
-<!--                        <md-checkbox ng-model="vm.attributes.booleanValue" style="margin-bottom: 40px;">-->
-<!--                            {{ (vm.attributes.booleanValue ? "value.true" : "value.false") | translate }}-->
-<!--                        </md-checkbox>-->
-<!--                    </div>-->
+<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Address</mat-label>-->
+<!--                    <input matInput formControlName="address">-->
+<!--                </mat-form-field>-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Owner</mat-label>-->
+<!--                    <input matInput formControlName="owner">-->
+<!--                </mat-form-field>-->
+<!--            </div>-->
+<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Integer Value</mat-label>-->
+<!--                    <input type="number" step="1" matInput formControlName="number">-->
+<!--                    <mat-error *ngIf="editEntityFormGroup.get('attributes').get('number').hasError('pattern')">-->
+<!--                        Invalid integer value.-->
+<!--                    </mat-error>-->
+<!--                </mat-form-field>-->
+<!--                <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
+<!--                    <label class="checkbox-label">Boolean Value</label>-->
+<!--                    <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
+<!--                        {{ (editEntityFormGroup.get('attributes').get('booleanValue').value ? "value.true" : "value.false") | translate }}-->
+<!--                    </mat-checkbox>-->
 <!--                </div>-->
-<!--                <div class="relations-list old-relations">-->
-<!--                    <div class="md-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
-<!--                    <div class="body" ng-show="vm.relations.length">-->
-<!--                        <div class="row" layout="row" layout-align="start center" ng-repeat="relation in vm.relations track by $index">-->
-<!--                            <div class="md-whiteframe-1dp" flex layout="row" style="padding-left: 5px; margin-bottom: 3px;">-->
-<!--                                <div flex layout="column">-->
-<!--                                    <div layout="row">-->
-<!--                                        <md-input-container class="md-block" style="min-width: 100px;">-->
-<!--                                            <label>Direction</label>-->
-<!--                                            <md-select ng-disabled="true" required ng-model="relation.direction">-->
-<!--                                                <md-option ng-repeat="direction in vm.entitySearchDirection" ng-value="direction">-->
-<!--                                                    {{ ("relation.search-direction." + direction) | translate}}-->
-<!--                                                </md-option>-->
-<!--                                            </md-select>-->
-<!--                                        </md-input-container>-->
-<!--                                        <tb-relation-type-autocomplete ng-disabled="true" flex class="md-block"-->
-<!--                                           the-form="editEntityForm"-->
-<!--                                           ng-model="relation.relationType"-->
-<!--                                           tb-required="true">-->
-<!--                                        </tb-relation-type-autocomplete>-->
-<!--                                    </div>-->
-<!--                                    <div layout="row">-->
-<!--                                        <tb-entity-select flex class="md-block"-->
-<!--                                            the-form="editEntityForm"-->
-<!--                                            ng-disabled="true"-->
-<!--                                            tb-required="true"-->
-<!--                                            ng-model="relation.relatedEntity">-->
-<!--                                        </tb-entity-select>-->
-<!--                                    </div>-->
-<!--                                </div>-->
-<!--                                <div layout="column" layout-align="center center">-->
-<!--                                    <md-button class="md-icon-button md-primary" style="width: 40px; min-width: 40px;"-->
-<!--                                               ng-click="vm.removeOldRelation($index,relation)" aria-label="Remove">-->
-<!--                                        <md-tooltip md-direction="top">Remove relation</md-tooltip>-->
-<!--                                        <md-icon aria-label="Remove" class="material-icons">-->
-<!--                                            close-->
-<!--                                        </md-icon>-->
-<!--                                    </md-button>-->
-<!--                                </div>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--        <div class="relations-list old-relations">-->
+<!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
+<!--            <div class="body" [fxShow]="oldRelations().length">-->
+<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations" -->
+<!--                     *ngFor="let relation of oldRelations().controls; let i = index;">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div fxFlex fxLayout="column">-->
+<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
+<!--                                    <mat-label>Direction</mat-label>-->
+<!--                                    <mat-select formControlName="direction" name="direction">-->
+<!--                                        <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">-->
+<!--                                            {{ ("relation.search-direction." + direction.value) | translate}}-->
+<!--                                        </mat-option>-->
+<!--                                    </mat-select>-->
+<!--                                    <mat-error *ngIf="relation.get('direction').hasError('required')">-->
+<!--                                        Relation direction is required.-->
+<!--                                    </mat-error>-->
+<!--                                </mat-form-field>-->
+<!--                                <tb-relation-type-autocomplete-->
+<!--                                        fxFlex class="mat-block"-->
+<!--                                        formControlName="relationType"-->
+<!--                                        required="true">-->
+<!--                                </tb-relation-type-autocomplete>-->
 <!--                            </div>-->
+<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                                <tb-entity-select-->
+<!--                                        fxFlex class="mat-block"-->
+<!--                                        required="true"-->
+<!--                                        formControlName="relatedEntity">-->
+<!--                                </tb-entity-select>-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                            <button mat-icon-button color="primary"-->
+<!--                                    aria-label="Remove"-->
+<!--                                    type="button"-->
+<!--                                    (click)="removeOldRelation(i)"-->
+<!--                                    matTooltip="Remove relation"-->
+<!--                                    matTooltipPosition="above">-->
+<!--                                <mat-icon>close</mat-icon>-->
+<!--                            </button>-->
 <!--                        </div>-->
 <!--                    </div>-->
 <!--                </div>-->
-<!--                <div class="relations-list">-->
-<!--                    <div class="md-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>-->
-<!--                    <div class="body" ng-show="vm.newRelations.length">-->
-<!--                        <div class="row" layout="row" layout-align="start center" ng-repeat="relation in vm.newRelations track by $index">-->
-<!--                            <div class="md-whiteframe-1dp" flex layout="row" style="padding-left: 5px; margin-bottom: 3px;">-->
-<!--                                <div flex layout="column">-->
-<!--                                    <div layout="row">-->
-<!--                                        <md-input-container class="md-block" style="min-width: 100px;">-->
-<!--                                            <label>Direction</label>-->
-<!--                                            <md-select name="direction" required ng-model="relation.direction">-->
-<!--                                                <md-option ng-repeat="direction in vm.entitySearchDirection" ng-value="direction">-->
-<!--                                                    {{ ("relation.search-direction." + direction) | translate}}-->
-<!--                                                </md-option>-->
-<!--                                            </md-select>-->
-<!--                                            <div ng-messages="editEntityForm.direction.$error">-->
-<!--                                                <div ng-message="required">Relation direction is required.</div>-->
-<!--                                            </div>-->
-<!--                                        </md-input-container>-->
-<!--                                        <tb-relation-type-autocomplete flex class="md-block"-->
-<!--                                           the-form="editEntityForm"-->
-<!--                                           ng-model="relation.relationType"-->
-<!--                                           tb-required="true">-->
-<!--                                        </tb-relation-type-autocomplete>-->
-<!--                                    </div>-->
-<!--                                    <div layout="row">-->
-<!--                                        <tb-entity-select flex class="md-block"-->
-<!--                                            the-form="editEntityForm"-->
-<!--                                            tb-required="true"-->
-<!--                                            ng-model="relation.relatedEntity">-->
-<!--                                        </tb-entity-select>-->
-<!--                                    </div>-->
-<!--                                </div>-->
-<!--                                <div layout="column" layout-align="center center">-->
-<!--                                    <md-button class="md-icon-button md-primary" style="width: 40px; min-width: 40px;"-->
-<!--                                               ng-click="vm.removeRelation($index)" aria-label="Remove">-->
-<!--                                        <md-tooltip md-direction="top">Remove relation</md-tooltip>-->
-<!--                                        <md-icon aria-label="Remove" class="material-icons">-->
-<!--                                            close-->
-<!--                                        </md-icon>-->
-<!--                                    </md-button>-->
-<!--                                </div>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--        <div class="relations-list">-->
+<!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>-->
+<!--            <div class="body" [fxShow]="relations().length">-->
+<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div fxFlex fxLayout="column">-->
+<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
+<!--                                    <mat-label>Direction</mat-label>-->
+<!--                                    <mat-select formControlName="direction" name="direction">-->
+<!--                                        <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">-->
+<!--                                            {{ ("relation.search-direction." + direction.value) | translate}}-->
+<!--                                        </mat-option>-->
+<!--                                    </mat-select>-->
+<!--                                    <mat-error *ngIf="relation.get('direction').hasError('required')">-->
+<!--                                        Relation direction is required.-->
+<!--                                    </mat-error>-->
+<!--                                </mat-form-field>-->
+<!--                                <tb-relation-type-autocomplete-->
+<!--                                        fxFlex class="mat-block"-->
+<!--                                        formControlName="relationType"-->
+<!--                                        [required]="true">-->
+<!--                                </tb-relation-type-autocomplete>-->
+<!--                            </div>-->
+<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                                <tb-entity-select-->
+<!--                                        fxFlex class="mat-block"-->
+<!--                                        [required]="true"-->
+<!--                                        formControlName="relatedEntity">-->
+<!--                                </tb-entity-select>-->
 <!--                            </div>-->
 <!--                        </div>-->
+<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                            <button mat-icon-button color="primary"-->
+<!--                                    aria-label="Remove"-->
+<!--                                    type="button"-->
+<!--                                    (click)="removeRelation(i)"-->
+<!--                                    matTooltip="Remove relation"-->
+<!--                                    matTooltipPosition="above">-->
+<!--                                <mat-icon>close</mat-icon>-->
+<!--                            </button>-->
+<!--                        </div>-->
 <!--                    </div>-->
-<!--                   <div>-->
-<!--                       <md-button class="md-primary md-raised" ng-click="vm.addRelation()" aria-label="Add">-->
-<!--                           <md-tooltip md-direction="top">Add Relation</md-tooltip>-->
-<!--                           Add-->
-<!--                       </md-button>-->
-<!--                   </div> -->
 <!--                </div>-->
 <!--            </div>-->
-<!--        </md-dialog-content>-->
-<!--        <md-dialog-actions>-->
-<!--            <md-button type="submit" ng-disabled="editEntityForm.$invalid || !editEntityForm.$dirty" class="md-raised md-primary">Save</md-button>-->
-<!--            <md-button ng-click="vm.cancel()" class="md-primary">Cancel</md-button>-->
-<!--        </md-dialog-actions>-->
-<!--    </form>-->
-<!--</md-dialog>-->
+<!--            <div>-->
+<!--                <button mat-raised-button color="primary"-->
+<!--                        type="button"-->
+<!--                        (click)="addRelation()"-->
+<!--                        matTooltip="Add Relation"-->
+<!--                        matTooltipPosition="above">-->
+<!--                    Add-->
+<!--                </button>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--    </div>-->
+<!--    <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">-->
+<!--        <button mat-button mat-raised-button color="primary"-->
+<!--                type="submit"-->
+<!--                [disabled]="(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty">-->
+<!--            Save-->
+<!--        </button>-->
+<!--        <button mat-button color="primary"-->
+<!--                style="margin-right: 20px;"-->
+<!--                type="button"-->
+<!--                [disabled]="(isLoading$ | async)"-->
+<!--                (click)="cancel()" cdkFocusInitial>-->
+<!--            Cancel-->
+<!--        </button>-->
+<!--    </div>-->
+<!--</form>-->
 <!---->
 <!--========================================================================-->
 <!--=========================  Add entity example  =========================-->
 <!--========================================================================-->
 <!---->
-<!--<md-dialog aria-label="Add entity">-->
-<!--    <form name="addEntityForm" class="add-entity-form" ng-submit="vm.save()">-->
-<!--        <md-toolbar>-->
-<!--            <div class="md-toolbar-tools">-->
-<!--                <h2>Add entity</h2>-->
-<!--                <span flex></span>-->
-<!--                <md-button class="md-icon-button" ng-click="vm.cancel()">-->
-<!--                    <ng-md-icon icon="close" aria-label="Close"></ng-md-icon>-->
-<!--                </md-button>-->
+<!--<form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"-->
+<!--      (ngSubmit)="save()" class="add-entity-form">-->
+<!--    <mat-toolbar fxLayout="row" color="primary">-->
+<!--        <h2>Add entity</h2>-->
+<!--        <span fxFlex></span>-->
+<!--        <button mat-icon-button (click)="cancel()" type="button">-->
+<!--            <mat-icon class="material-icons">close</mat-icon>-->
+<!--        </button>-->
+<!--    </mat-toolbar>-->
+<!--    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
+<!--    </mat-progress-bar>-->
+<!--    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
+<!--    <div mat-dialog-content fxLayout="column">-->
+<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-label>Entity Name</mat-label>-->
+<!--                <input matInput formControlName="entityName" required>-->
+<!--                <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">-->
+<!--                    Entity name is required.-->
+<!--                </mat-error>-->
+<!--            </mat-form-field>-->
+<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-label>Entity Label</mat-label>-->
+<!--                <input matInput formControlName="entityLabel" >-->
+<!--            </mat-form-field>-->
+<!--        </div>-->
+<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--            <tb-entity-type-select-->
+<!--                    class="mat-block"-->
+<!--                    formControlName="entityType"-->
+<!--                    [showLabel]="true"-->
+<!--                    [allowedEntityTypes]="allowedEntityTypes"-->
+<!--            ></tb-entity-type-select>-->
+<!--            <tb-entity-subtype-autocomplete-->
+<!--                    fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"-->
+<!--                    class="mat-block"-->
+<!--                    formControlName="type"-->
+<!--                    [required]="true"-->
+<!--                    [entityType]="'ASSET'"-->
+<!--            ></tb-entity-subtype-autocomplete>-->
+<!--            <tb-entity-subtype-autocomplete-->
+<!--                    fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"-->
+<!--                    class="mat-block"-->
+<!--                    formControlName="type"-->
+<!--                    [required]="true"-->
+<!--                    [entityType]="'DEVICE'"-->
+<!--            ></tb-entity-subtype-autocomplete>-->
+<!--        </div>-->
+<!--        <div formGroupName="attributes" fxLayout="column">-->
+<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Latitude</mat-label>-->
+<!--                    <input type="number" step="any" matInput formControlName="latitude">-->
+<!--                </mat-form-field>-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Longitude</mat-label>-->
+<!--                    <input type="number" step="any" matInput formControlName="longitude">-->
+<!--                </mat-form-field>-->
 <!--            </div>-->
-<!--        </md-toolbar>-->
-<!--        <md-dialog-content>-->
-<!--            <div class="md-dialog-content">-->
-<!--                <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Entity Name</label>-->
-<!--                        <input ng-model="vm.entityName" name=entityName required>-->
-<!--                        <div ng-messages="addEntityForm.entityName.$error">-->
-<!--                            <div ng-message="required">Entity name is required.</div>-->
-<!--                        </div>-->
-<!--                    </md-input-container>-->
-<!--                    <tb-entity-type-select class="md-block" style="min-width: 100px; width: 100px;"-->
-<!--                       the-form="addEntityForm"-->
-<!--                       tb-required="true"-->
-<!--                       allowed-entity-types="vm.allowedEntityTypes"-->
-<!--                       ng-model="vm.entityType">-->
-<!--                    </tb-entity-type-select>-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Entity Subtype</label>-->
-<!--                        <input ng-model="vm.type" name=type required>-->
-<!--                        <div ng-messages="addEntityForm.type.$error">-->
-<!--                            <div ng-message="required">Entity subtype is required.</div>-->
-<!--                        </div>-->
-<!--                    </md-input-container>-->
-<!--                </div>-->
-<!--                <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Latitude</label>-->
-<!--                        <input name="latitude" type="number" step="any" ng-model="vm.attributes.latitude">-->
-<!--                    </md-input-container>-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Longitude</label>-->
-<!--                        <input name="longitude" type="number" step="any" ng-model="vm.attributes.longitude">-->
-<!--                    </md-input-container>-->
-<!--                </div>-->
-<!--                 <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Address</label>-->
-<!--                        <input ng-model="vm.attributes.address">-->
-<!--                    </md-input-container>-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Owner</label>-->
-<!--                        <input ng-model="vm.attributes.owner">-->
-<!--                    </md-input-container>-->
-<!--                </div>-->
-<!--                <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Integer Value</label>-->
-<!--                        <input name="integerNumber" type="number" step="1" ng-pattern="/^-?[0-9]+$/" ng-model="vm.attributes.number">-->
-<!--                        <div ng-messages="addEntityForm.integerNumber.$error">-->
-<!--                            <div ng-message="pattern">Invalid integer value.</div>-->
-<!--                        </div>-->
-<!--                    </md-input-container>-->
-<!--                    <div class="boolean-value-input" layout="column" layout-align="center start" flex>-->
-<!--                        <label class="checkbox-label">Boolean Value</label>-->
-<!--                        <md-checkbox ng-model="vm.attributes.booleanValue" style="margin-bottom: 40px;">-->
-<!--                            {{ (vm.attributes.booleanValue ? "value.true" : "value.false") | translate }}-->
-<!--                        </md-checkbox>-->
-<!--                    </div>-->
+<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Address</mat-label>-->
+<!--                    <input matInput formControlName="address">-->
+<!--                </mat-form-field>-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Owner</mat-label>-->
+<!--                    <input matInput formControlName="owner">-->
+<!--                </mat-form-field>-->
+<!--            </div>-->
+<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Integer Value</mat-label>-->
+<!--                    <input type="number" step="1" matInput formControlName="number">-->
+<!--                    <mat-error *ngIf="addEntityFormGroup.get('attributes').get('number').hasError('pattern')">-->
+<!--                        Invalid integer value.-->
+<!--                    </mat-error>-->
+<!--                </mat-form-field>-->
+<!--                <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
+<!--                    <label class="checkbox-label">Boolean Value</label>-->
+<!--                    <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
+<!--                        {{ (addEntityFormGroup.get('attributes').get('booleanValue').value ? "value.true" : "value.false") | translate }}-->
+<!--                    </mat-checkbox>-->
 <!--                </div>-->
-<!--                <div class="relations-list">-->
-<!--                    <div class="md-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
-<!--                    <div class="body" ng-show="vm.relations.length">-->
-<!--                        <div class="row" layout="row" layout-align="start center" ng-repeat="relation in vm.relations track by $index">-->
-<!--                            <div class="md-whiteframe-1dp" flex layout="row" style="padding-left: 5px;">-->
-<!--                                <div flex layout="column">-->
-<!--                                    <div layout="row">-->
-<!--                                        <md-input-container class="md-block" style="min-width: 100px;">-->
-<!--                                            <label>Direction</label>-->
-<!--                                            <md-select name="direction" required ng-model="relation.direction">-->
-<!--                                                <md-option ng-repeat="direction in vm.entitySearchDirection" ng-value="direction">-->
-<!--                                                    {{ ("relation.search-direction." + direction) | translate}}-->
-<!--                                                </md-option>-->
-<!--                                            </md-select>-->
-<!--                                            <div ng-messages="addEntityForm.direction.$error">-->
-<!--                                                <div ng-message="required">Relation direction is required.</div>-->
-<!--                                            </div>-->
-<!--                                        </md-input-container>-->
-<!--                                        <tb-relation-type-autocomplete flex class="md-block"-->
-<!--                                           the-form="addEntityForm"-->
-<!--                                           ng-model="relation.relationType"-->
-<!--                                           tb-required="true">-->
-<!--                                        </tb-relation-type-autocomplete>-->
-<!--                                    </div>-->
-<!--                                    <div layout="row">-->
-<!--                                        <tb-entity-select flex class="md-block"-->
-<!--                                            the-form="addEntityForm"-->
-<!--                                            tb-required="true"-->
-<!--                                            ng-model="relation.relatedEntity">-->
-<!--                                        </tb-entity-select>-->
-<!--                                    </div>-->
-<!--                                </div>-->
-<!--                                <div layout="column" layout-align="center center">-->
-<!--                                    <md-button class="md-icon-button md-primary" style="width: 40px; min-width: 40px;"-->
-<!--                                               ng-click="vm.removeRelation($index)" aria-label="Remove">-->
-<!--                                        <md-tooltip md-direction="top">Remove relation</md-tooltip>-->
-<!--                                        <md-icon aria-label="Remove" class="material-icons">-->
-<!--                                            close-->
-<!--                                        </md-icon>-->
-<!--                                    </md-button>-->
-<!--                                </div>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--        <div class="relations-list">-->
+<!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
+<!--            <div class="body" [fxShow]="relations().length">-->
+<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div fxFlex fxLayout="column">-->
+<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
+<!--                                    <mat-label>Direction</mat-label>-->
+<!--                                    <mat-select formControlName="direction" name="direction">-->
+<!--                                        <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">-->
+<!--                                            {{ ("relation.search-direction." + direction.value) | translate}}-->
+<!--                                        </mat-option>-->
+<!--                                    </mat-select>-->
+<!--                                    <mat-error *ngIf="relation.get('direction').hasError('required')">-->
+<!--                                        Relation direction is required.-->
+<!--                                    </mat-error>-->
+<!--                                </mat-form-field>-->
+<!--                                <tb-relation-type-autocomplete-->
+<!--                                        fxFlex class="mat-block"-->
+<!--                                        formControlName="relationType"-->
+<!--                                        [required]="true">-->
+<!--                                </tb-relation-type-autocomplete>-->
 <!--                            </div>-->
+<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                                <tb-entity-select-->
+<!--                                        fxFlex class="mat-block"-->
+<!--                                        [required]="true"-->
+<!--                                        formControlName="relatedEntity">-->
+<!--                                </tb-entity-select>-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                            <button mat-icon-button color="primary"-->
+<!--                                    aria-label="Remove"-->
+<!--                                    type="button"-->
+<!--                                    (click)="removeRelation(i)"-->
+<!--                                    matTooltip="Remove relation"-->
+<!--                                    matTooltipPosition="above">-->
+<!--                                <mat-icon>close</mat-icon>-->
+<!--                            </button>-->
 <!--                        </div>-->
 <!--                    </div>-->
-<!--                   <div>-->
-<!--                       <md-button class="md-primary md-raised" ng-click="vm.addRelation()" aria-label="Add">-->
-<!--                           <md-tooltip md-direction="top">Add Relation</md-tooltip>-->
-<!--                           Add-->
-<!--                       </md-button>-->
-<!--                   </div> -->
 <!--                </div>-->
 <!--            </div>-->
-<!--        </md-dialog-content>-->
-<!--        <md-dialog-actions>-->
-<!--            <md-button type="submit" ng-disabled="addEntityForm.$invalid || !addEntityForm.$dirty" class="md-raised md-primary">Create</md-button>-->
-<!--            <md-button ng-click="vm.cancel()" class="md-primary">Cancel</md-button>-->
-<!--        </md-dialog-actions>-->
-<!--    </form>-->
-<!--</md-dialog>-->
+<!--            <div>-->
+<!--                <button mat-raised-button color="primary"-->
+<!--                        type="button"-->
+<!--                        (click)="addRelation()"-->
+<!--                        matTooltip="Add Relation"-->
+<!--                        matTooltipPosition="above">-->
+<!--                    Add-->
+<!--                </button>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--    </div>-->
+<!--    <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">-->
+<!--        <button mat-button mat-raised-button color="primary"-->
+<!--                type="submit"-->
+<!--                [disabled]="(isLoading$ | async) || addEntityForm.invalid || !addEntityForm.dirty">-->
+<!--            Create-->
+<!--        </button>-->
+<!--        <button mat-button color="primary"-->
+<!--                style="margin-right: 20px;"-->
+<!--                type="button"-->
+<!--                [disabled]="(isLoading$ | async)"-->
+<!--                (click)="cancel()" cdkFocusInitial>-->
+<!--            Cancel-->
+<!--        </button>-->
+<!--    </div>-->
+<!--</form>-->
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-js.raw b/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-js.raw
index 02a97e7d6e..83986b4812 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-js.raw
+++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-js.raw
@@ -1,83 +1,34 @@
-/*================================================================================*/
-/*=======================  New TB 3.0 / Angular 8 Example  =======================*/
-/*================================================================================*/
-//
-//let $injector = widgetContext.$scope.$injector;
-//let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
-//
-//deviceService.getDevice(entityId.id).subscribe(function(device) {
-//   console.log(device);
-//});
-//
-//
-//let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
-//
-//customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe(
-//    function(res) {
-//        console.log(res);
-//    }
-//);
-//
-//function EditEntityDialogController(instance) {
-//    let vm = instance;
-//    vm.entityId = entityId;
-//    vm.entityName = entityName;
-//    vm.entityType = entityId.entityType;
-//
-//    vm.editEntityFormGroup = vm.fb.group({
-//      entityName: [vm.entityName, [vm.validators.required]]
-//    });
-//
-//    vm.cancel = function() {
-//        vm.dialogRef.close(null);
-//    };
-//
-//    vm.save = function() {
-//        const newVal = vm.editEntityFormGroup.value;
-//        vm.dialogRef.close(newVal);
-//    };
-//}
-//
 /*=======================================================================*/
 /*=====  There are three examples: for delete, edit and add entity  =====*/
 /*=======================================================================*/
 /*=======================  Delete entity example  =======================*/
 /*=======================================================================*/
 //
-//var $injector = widgetContext.$scope.$injector;
-//var $mdDialog = $injector.get('$mdDialog'),
-//    $document = $injector.get('$document'),
-//    types = $injector.get('types'),
-//    assetService = $injector.get('assetService'),
-//    deviceService = $injector.get('deviceService')
-//    $rootScope = $injector.get('$rootScope'),
-//    $q = $injector.get('$q');
+//let $injector = widgetContext.$scope.$injector;
+//let dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));
+//let assetService = $injector.get(widgetContext.servicesMap.get('assetService'));
+//let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
 //
 //openDeleteEntityDialog();
 //
 //function openDeleteEntityDialog() {
-//    var title = 'Delete ' + entityId.entityType
-//        .toLowerCase() + ' ' +
-//        entityName;
-//    var content = 'Are you sure you want to delete the ' +
-//        entityId.entityType.toLowerCase() + ' ' +
-//        entityName + '?';
-//    var confirm = $mdDialog.confirm()
-//        .targetEvent($event)
-//        .title(title)
-//        .htmlContent(content)
-//        .ariaLabel(title)
-//        .cancel('Cancel')
-//        .ok('Delete');
-//    $mdDialog.show(confirm).then(function() {
-//        deleteEntity();
-//    })
+//    let title = 'Delete ' + entityId.entityType.toLowerCase() + ' ' +
+//                 entityName;
+//    let content = 'Are you sure you want to delete the ' +
+//                  entityId.entityType.toLowerCase() + ' ' + entityName + '?';
+//    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(
+//        function(result) {
+//            if (result) {
+//                deleteEntity();
+//            }
+//        }
+//    );
 //}
 //
 //function deleteEntity() {
-//    deleteEntityPromise(entityId).then(
+//    deleteEntityObservable(entityId).subscribe(
 //        function success() {
-//            updateAliasData();
+//            widgetContext.updateAliases();
 //        },
 //        function fail() {
 //            showErrorDialog();
@@ -85,228 +36,243 @@
 //    );
 //}
 //
-//function deleteEntityPromise(entityId) {
-//    if (entityId.entityType == types.entityType.asset) {
+//function deleteEntityObservable(entityId) {
+//    if (entityId.entityType == "ASSET") {
 //        return assetService.deleteAsset(entityId.id);
-//    } else if (entityId.entityType == types.entityType.device) {
+//    } else if (entityId.entityType == "DEVICE") {
 //        return deviceService.deleteDevice(entityId.id);
 //    }
 //}
 //
-//function updateAliasData() {
-//    var aliasIds = [];
-//    for (var id in widgetContext.aliasController.resolvedAliases) {
-//        aliasIds.push(id);
-//    }
-//    var tasks = [];
-//    aliasIds.forEach(function(aliasId) {
-//        widgetContext.aliasController.setAliasUnresolved(aliasId);
-//        tasks.push(widgetContext.aliasController.getAliasInfo(aliasId));
-//    });
-//    $q.all(tasks).then(function() {
-//        $rootScope.$broadcast('entityAliasesChanged', aliasIds);
-//    });
-//}
-//
 //function showErrorDialog() {
-//    var title = 'Error';
-//    var content = 'An error occurred while deleting the entity. Please try again.';
-//    var alert = $mdDialog.alert()
-//        .title(title)
-//        .htmlContent(content)
-//        .ariaLabel(title)
-//        .parent(angular.element($document[0].body))
-//        .targetEvent($event)
-//        .multiple(true)
-//        .clickOutsideToClose(true)
-//        .ok('CLOSE');
-//    $mdDialog.show(alert);
+//    let title = 'Error';
+//    let content = 'An error occurred while deleting the entity. Please try again.';
+//    dialogs.alert(title, content, 'CLOSE').subscribe(
+//        function(result) {}
+//    );
 //}
 //
 /*=======================================================================*/
 /*========================  Edit entity example  ========================*/
 /*=======================================================================*/
 //
-//var $injector = widgetContext.$scope.$injector;
-//var $mdDialog = $injector.get('$mdDialog'),
-//    $document = $injector.get('$document'),
-//    $q = $injector.get('$q'),
-//    types = $injector.get('types'),
-//    $rootScope = $injector.get('$rootScope'),
-//    entityService = $injector.get('entityService'),
-//    attributeService = $injector.get('attributeService'),
-//    entityRelationService = $injector.get('entityRelationService');
+//let $injector = widgetContext.$scope.$injector;
+//let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
+//let entityService = $injector.get(widgetContext.servicesMap.get('entityService'));
+//let assetService = $injector.get(widgetContext.servicesMap.get('assetService'));
+//let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
+//let attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));
+//let entityRelationService = $injector.get(widgetContext.servicesMap.get('entityRelationService'));
 //
 //openEditEntityDialog();
 //
 //function openEditEntityDialog() {
-//    $mdDialog.show({
-//        controller: ['$scope','$mdDialog', EditEntityDialogController],
-//        controllerAs: 'vm',
-//        template: htmlTemplate,
-//        locals: {
-//            entityId: entityId
-//        },
-//        parent: angular.element($document[0].body),
-//        targetEvent: $event,
-//        multiple: true,
-//        clickOutsideToClose: false
-//    });
+//    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();
 //}
 //
-//function EditEntityDialogController($scope,$mdDialog) {
-//    var vm = this;
-//    vm.entityId = entityId;
+//function EditEntityDialogController(instance) {
+//    let vm = instance;
+//
 //    vm.entityName = entityName;
 //    vm.entityType = entityId.entityType;
-//    vm.allowedEntityTypes = [types.entityType.asset, types.entityType.device];
-//    vm.allowedRelatedEntityTypes = [];
-//    vm.entitySearchDirection = types.entitySearchDirection;
+//    vm.entitySearchDirection = {
+//        from: "FROM",
+//        to: "TO"
+//    };
 //    vm.attributes = {};
-//    vm.serverAttributes = {};
-//    vm.relations = [];
-//    vm.newRelations = [];
+//    vm.oldRelationsData = [];
 //    vm.relationsToDelete = [];
+//    vm.entity = {};
+//
+//    vm.editEntityFormGroup = vm.fb.group({
+//        entityName: ['', [vm.validators.required]],
+//        entityType: [null],
+//        entityLabel: [null],
+//        type: ['', [vm.validators.required]],
+//        attributes: vm.fb.group({
+//            latitude: [null],
+//            longitude: [null],
+//            address: [null],
+//            owner: [null],
+//            number: [null, [vm.validators.pattern(/^-?[0-9]+$/)]],
+//            booleanValue: [false]
+//        }),
+//        oldRelations: vm.fb.array([]),
+//        relations: vm.fb.array([])
+//    });
+//
 //    getEntityInfo();
 //
+//    vm.cancel = function() {
+//        vm.dialogRef.close(null);
+//    };
+//
+//    vm.relations = function() {
+//        return vm.editEntityFormGroup.get('relations');
+//    };
+//
+//    vm.oldRelations = function() {
+//        return vm.editEntityFormGroup.get('oldRelations');
+//    };
+//
 //    vm.addRelation = function() {
-//        var relation = {
-//            direction: null,
-//            relationType: null,
-//            relatedEntity: null
-//        };
-//        vm.newRelations.push(relation);
-//        $scope.editEntityForm.$setDirty();
+//        vm.relations().push(vm.fb.group({
+//            relatedEntity: [null, [vm.validators.required]],
+//            relationType: [null, [vm.validators.required]],
+//            direction: [null, [vm.validators.required]]
+//        }));
 //    };
+//
+//    function addOldRelation() {
+//        vm.oldRelations().push(vm.fb.group({
+//            relatedEntity: [{value: null, disabled: true}, [vm.validators.required]],
+//            relationType: [{value: null, disabled: true}, [vm.validators.required]],
+//            direction: [{value: null, disabled: true}, [vm.validators.required]]
+//        }));
+//    }
+//
 //    vm.removeRelation = function(index) {
-//        if (index > -1) {
-//            vm.newRelations.splice(index, 1);
-//            $scope.editEntityForm.$setDirty();
-//        }
+//        vm.relations().removeAt(index);
+//        vm.relations().markAsDirty();
 //    };
-//    vm.removeOldRelation = function(index, relation) {
-//        if (index > -1) {
-//            vm.relations.splice(index, 1);
-//            vm.relationsToDelete.push(relation);
-//            $scope.editEntityForm.$setDirty();
-//        }
+//
+//    vm.removeOldRelation = function(index) {
+//        vm.oldRelations().removeAt(index);
+//        vm.relationsToDelete.push(vm.oldRelationsData[index]);
+//        vm.oldRelations().markAsDirty();
 //    };
+//
 //    vm.save = function() {
-//        saveAttributes();
-//        saveRelations();
-//        $scope.editEntityForm.$setPristine();
-//    };
-//    vm.cancel = function() {
-//        $mdDialog.hide();
+//        vm.editEntityFormGroup.markAsPristine();
+//        widgetContext.rxjs.forkJoin([
+//            saveAttributes(entityId),
+//            saveRelations(entityId),
+//            saveEntity()
+//        ]).subscribe(
+//            function () {
+//                widgetContext.updateAliases();
+//                vm.dialogRef.close(null);
+//            }
+//        );
 //    };
 //
 //    function getEntityAttributes(attributes) {
 //        for (var i = 0; i < attributes.length; i++) {
-//              vm.attributes[attributes[i].key] = attributes[i].value;
+//            vm.attributes[attributes[i].key] = attributes[i].value;
 //        }
-//        vm.serverAttributes = angular.copy(vm.attributes);
 //    }
 //
 //    function getEntityRelations(relations) {
-//        var relationsFrom = relations[0];
-//        var relationsTo = relations[1];
-//        for (var i=0; i < relationsFrom.length; i++) {
-//            var relation = {
-//                direction: types.entitySearchDirection.from,
+//        let relationsFrom = relations[0];
+//        let relationsTo = relations[1];
+//        for (let i=0; i < relationsFrom.length; i++) {
+//            let relation = {
+//                direction: 'FROM',
 //                relationType: relationsFrom[i].type,
 //                relatedEntity: relationsFrom[i].to
 //            };
-//            vm.relations.push(relation);
+//            vm.oldRelationsData.push(relation);
+//            addOldRelation();
 //        }
-//        for (var i=0; i < relationsTo.length; i++) {
-//            var relation = {
-//                direction: types.entitySearchDirection.to,
+//        for (let i=0; i < relationsTo.length; i++) {
+//            let relation = {
+//                direction: 'TO',
 //                relationType: relationsTo[i].type,
 //                relatedEntity: relationsTo[i].from
 //            };
-//            vm.relations.push(relation);
+//            vm.oldRelationsData.push(relation);
+//            addOldRelation();
 //        }
 //    }
 //
 //    function getEntityInfo() {
-//        entityService.getEntity(entityId.entityType, entityId.id).then(
-//            function(entity) {
-//                vm.entity = entity;
-//                vm.type = vm.entity.type;
-//            });
-//        attributeService.getEntityAttributesValues(entityId.entityType, entityId.id, 'SERVER_SCOPE').then(
-//            function(data){
-//                if (data.length) {
-//                    getEntityAttributes(data);
+//        entityService.getEntity(entityId.entityType, entityId.id).subscribe(function (entity) {
+//            vm.entity = entity;
+//            widgetContext.rxjs.forkJoin([
+//                entityRelationService.findInfoByFrom(entityId),
+//                entityRelationService.findInfoByTo(entityId),
+//                attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE')
+//            ]).subscribe(
+//                function (data) {
+//                    getEntityRelations(data.slice(0,2));
+//                    getEntityAttributes(data[2]);
+//                    vm.editEntityFormGroup.patchValue({
+//                        entityName: vm.entity.name,
+//                        entityType: vm.entityType,
+//                        entityLabel: vm.entity.label,
+//                        type: vm.entity.type,
+//                        attributes: vm.attributes,
+//                        oldRelations: vm.oldRelationsData
+//                    }, {emitEvent: false});
 //                }
-//            });
-//        $q.all([entityRelationService.findInfoByFrom(entityId.id, entityId.entityType), entityRelationService.findInfoByTo(entityId.id, entityId.entityType)]).then(
-//            function(relations){
-//                getEntityRelations(relations);
-//            });
+//            );
+//        });
 //    }
 //
-//    function saveAttributes() {
-//        var attributesArray = [];
-//        for (var key in vm.attributes) {
-//            if (vm.attributes[key] !== vm.serverAttributes[key]) {
-//                attributesArray.push({key: key, value: vm.attributes[key]});
+//    function saveEntity() {
+//        const formValues = vm.editEntityFormGroup.value;
+//        if (vm.entity.label !== formValues.entityLabel){
+//            vm.entity.label = formValues.entityLabel;
+//            if (formValues.entityType == 'ASSET') {
+//                return assetService.saveAsset(vm.entity);
+//            } else if (formValues.entityType == 'DEVICE') {
+//                return deviceService.saveDevice(vm.entity);
+//            }
+//        } else {
+//            return widgetContext.rxjs.of([]);
+//        }
+//    }
+//
+//    function saveAttributes(entityId) {
+//        let attributes = vm.editEntityFormGroup.get('attributes').value;
+//        let attributesArray = [];
+//        for (let key in attributes) {
+//            if (attributes[key] !== vm.attributes[key]) {
+//                attributesArray.push({key: key, value: attributes[key]});
 //            }
 //        }
 //        if (attributesArray.length > 0) {
-//            attributeService.saveEntityAttributes(entityId.entityType, entityId.id, \"SERVER_SCOPE\", attributesArray);
+//            return attributeService.saveEntityAttributes(entityId, "SERVER_SCOPE", attributesArray);
+//        } else {
+//            return widgetContext.rxjs.of([]);
 //        }
 //    }
 //
-//    function saveRelations() {
-//        var tasks = [];
-//        for (var i=0; i < vm.newRelations.length; i++) {
-//            var relation = {
-//                type: vm.newRelations[i].relationType
+//    function saveRelations(entityId) {
+//        let relations = vm.editEntityFormGroup.get('relations').value;
+//        let tasks = [];
+//        for(let i=0; i < relations.length; i++) {
+//            let relation = {
+//                type: relations[i].relationType,
+//                typeGroup: 'COMMON'
 //            };
-//            if (vm.newRelations[i].direction == types.entitySearchDirection.from) {
-//                relation.to = vm.newRelations[i].relatedEntity;
+//            if (relations[i].direction == 'FROM') {
+//                relation.to = relations[i].relatedEntity;
 //                relation.from = entityId;
 //            } else {
 //                relation.to = entityId;
-//                relation.from = vm.newRelations[i].relatedEntity;
+//                relation.from = relations[i].relatedEntity;
 //            }
 //            tasks.push(entityRelationService.saveRelation(relation));
 //        }
-//        for (var i=0; i < vm.relationsToDelete.length; i++) {
-//            var relation = {
+//        for (let i=0; i < vm.relationsToDelete.length; i++) {
+//            let relation = {
 //                type: vm.relationsToDelete[i].relationType
 //            };
-//            if (vm.relationsToDelete[i].direction == types.entitySearchDirection.from) {
+//            if (vm.relationsToDelete[i].direction == 'FROM') {
 //                relation.to = vm.relationsToDelete[i].relatedEntity;
 //                relation.from = entityId;
 //            } else {
 //                relation.to = entityId;
 //                relation.from = vm.relationsToDelete[i].relatedEntity;
 //            }
-//            tasks.push(entityRelationService.deleteRelation(relation.from.id, relation.from.entityType, relation.type, relation.to.id, relation.to.entityType));
+//            tasks.push(entityRelationService.deleteRelation(relation.from, relation.type, relation.to));
 //        }
-//        $q.all(tasks).then(function(){
-//            vm.relations = vm.relations.concat(vm.newRelations);
-//            vm.newRelations = [];
-//            vm.relationsToDelete = [];
-//            updateAliasData();
-//        });
-//    }
-//
-//    function updateAliasData() {
-//        var aliasIds = [];
-//        for (var id in widgetContext.aliasController.resolvedAliases) {
-//            aliasIds.push(id);
+//        if (tasks.length > 0) {
+//            return widgetContext.rxjs.forkJoin(tasks);
+//        } else {
+//            return widgetContext.rxjs.of([]);
 //        }
-//        var tasks = [];
-//        aliasIds.forEach(function(aliasId) {
-//            widgetContext.aliasController.setAliasUnresolved(aliasId);
-//            tasks.push(widgetContext.aliasController.getAliasInfo(aliasId));
-//        });
-//        $q.all(tasks).then(function() {
-//            $rootScope.$broadcast('entityAliasesChanged', aliasIds);
-//        });
 //    }
 //}
 //
@@ -314,124 +280,132 @@
 /*=========================  Add entity example  =========================*/
 /*========================================================================*/
 //
-//var $injector = widgetContext.$scope.$injector;
-//var $mdDialog = $injector.get('$mdDialog'),
-//    $document = $injector.get('$document'),
-//    $q = $injector.get('$q'),
-//    $rootScope = $injector.get('$rootScope'),
-//    types = $injector.get('types'),
-//    assetService = $injector.get('assetService'),
-//    deviceService = $injector.get('deviceService'),
-//    attributeService = $injector.get('attributeService'),
-//    entityRelationService = $injector.get('entityRelationService');
+//let $injector = widgetContext.$scope.$injector;
+//let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
+//let assetService = $injector.get(widgetContext.servicesMap.get('assetService'));
+//let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
+//let attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));
+//let entityRelationService = $injector.get(widgetContext.servicesMap.get('entityRelationService'));
 //
 //openAddEntityDialog();
 //
 //function openAddEntityDialog() {
-//    $mdDialog.show({
-//        controller: ['$scope','$mdDialog', AddEntityDialogController],
-//        controllerAs: 'vm',
-//        template: htmlTemplate,
-//        locals: {
-//            entityId: entityId
-//        },
-//        parent: angular.element($document[0].body),
-//        targetEvent: $event,
-//        multiple: true,
-//        clickOutsideToClose: false
-//    });
+//    customDialog.customDialog(htmlTemplate, AddEntityDialogController).subscribe();
 //}
 //
-//function AddEntityDialogController($scope, $mdDialog) {
-//    var vm = this;
-//    vm.allowedEntityTypes = [types.entityType.asset, types.entityType.device];
-//    vm.allowedRelatedEntityTypes = [];
-//    vm.entitySearchDirection = types.entitySearchDirection;
-//    vm.attributes = {};
-//    vm.relations = [];
+//function AddEntityDialogController(instance) {
+//    let vm = instance;
+//
+//    vm.allowedEntityTypes = ['ASSET', 'DEVICE'];
+//    vm.entitySearchDirection = {
+//        from: "FROM",
+//        to: "TO"
+//    }
+//
+//    vm.addEntityFormGroup = vm.fb.group({
+//      entityName: ['', [vm.validators.required]],
+//      entityType: ['DEVICE'],
+//      entityLabel: [null],
+//      type: ['', [vm.validators.required]],
+//      attributes: vm.fb.group({
+//          latitude: [null],
+//          longitude: [null],
+//          address: [null],
+//          owner: [null],
+//          number: [null, [vm.validators.pattern(/^-?[0-9]+$/)]],
+//          booleanValue: [null]
+//      }),
+//      relations: vm.fb.array([])
+//    });
+//
+//    vm.cancel = function() {
+//        vm.dialogRef.close(null);
+//    };
+//
+//    vm.relations = function() {
+//        return vm.addEntityFormGroup.get('relations');
+//    };
 //
 //    vm.addRelation = function() {
-//        var relation = {
-//            direction: null,
-//            relationType: null,
-//            relatedEntity: null
-//        };
-//        vm.relations.push(relation);
+//        vm.relations().push(vm.fb.group({
+//          relatedEntity: [null, [vm.validators.required]],
+//          relationType: [null, [vm.validators.required]],
+//          direction: [null, [vm.validators.required]]
+//        }));
 //    };
+//
 //    vm.removeRelation = function(index) {
-//        if (index > -1) {
-//            vm.relations.splice(index, 1);
-//        }
+//        vm.relations().removeAt(index);
+//        vm.relations().markAsDirty();
 //    };
+//
 //    vm.save = function() {
-//        $scope.addEntityForm.$setPristine();
-//        saveEntityPromise().then(
+//        vm.addEntityFormGroup.markAsPristine();
+//        saveEntityObservable().subscribe(
 //            function (entity) {
-//                saveAttributes(entity.id);
-//                saveRelations(entity.id);
-//                $mdDialog.hide();
+//                widgetContext.rxjs.forkJoin([
+//                    saveAttributes(entity.id),
+//                    saveRelations(entity.id)
+//                ]).subscribe(
+//                    function () {
+//                        widgetContext.updateAliases();
+//                        vm.dialogRef.close(null);
+//                    }
+//                );
 //            }
 //        );
 //    };
-//    vm.cancel = function() {
-//        $mdDialog.hide();
-//    };
 //
-//
-//    function saveEntityPromise() {
-//        var entity = {
-//            name: vm.entityName,
-//            type: vm.type
+//    function saveEntityObservable() {
+//        const formValues = vm.addEntityFormGroup.value;
+//        let entity = {
+//            name: formValues.entityName,
+//            type: formValues.type,
+//            label: formValues.entityLabel
 //        };
-//        if (vm.entityType == types.entityType.asset) {
+//        if (formValues.entityType == 'ASSET') {
 //            return assetService.saveAsset(entity);
-//        } else if (vm.entityType == types.entityType.device) {
+//        } else if (formValues.entityType == 'DEVICE') {
 //            return deviceService.saveDevice(entity);
 //        }
 //    }
 //
 //    function saveAttributes(entityId) {
-//        var attributesArray = [];
-//        for (var key in vm.attributes) {
-//            attributesArray.push({key: key, value: vm.attributes[key]});
+//        let attributes = vm.addEntityFormGroup.get('attributes').value;
+//        let attributesArray = [];
+//        for (let key in attributes) {
+//            if(attributes[key] !== null) {
+//                attributesArray.push({key: key, value: attributes[key]});
+//            }
 //        }
 //        if (attributesArray.length > 0) {
-//            attributeService.saveEntityAttributes(entityId.entityType, entityId.id, \"SERVER_SCOPE\", attributesArray);
+//            return attributeService.saveEntityAttributes(entityId, "SERVER_SCOPE", attributesArray);
+//        } else {
+//            return widgetContext.rxjs.of([]);
 //        }
 //    }
 //
 //    function saveRelations(entityId) {
-//        var tasks = [];
-//        for (var i=0; i < vm.relations.length; i++) {
-//            var relation = {
-//                type: vm.relations[i].relationType
+//        let relations = vm.addEntityFormGroup.get('relations').value;
+//        let tasks = [];
+//        for(let i=0; i < relations.length; i++) {
+//            let relation = {
+//                type: relations[i].relationType,
+//                typeGroup: 'COMMON'
 //            };
-//            if (vm.relations[i].direction == types.entitySearchDirection.from) {
-//                relation.to = vm.relations[i].relatedEntity;
+//            if (relations[i].direction == 'FROM') {
+//                relation.to = relations[i].relatedEntity;
 //                relation.from = entityId;
 //            } else {
 //                relation.to = entityId;
-//                relation.from = vm.relations[i].relatedEntity;
+//                relation.from = relations[i].relatedEntity;
 //            }
 //            tasks.push(entityRelationService.saveRelation(relation));
 //        }
-//        $q.all(tasks).then(function(){
-//            updateAliasData();
-//        });
-//    }
-//
-//    function updateAliasData() {
-//        var aliasIds = [];
-//        for (var id in widgetContext.aliasController.resolvedAliases) {
-//            aliasIds.push(id);
+//        if (tasks.length > 0) {
+//            return widgetContext.rxjs.forkJoin(tasks);
+//        } else {
+//            return widgetContext.rxjs.of([]);
 //        }
-//        var tasks = [];
-//        aliasIds.forEach(function(aliasId) {
-//            widgetContext.aliasController.setAliasUnresolved(aliasId);
-//            tasks.push(widgetContext.aliasController.getAliasInfo(aliasId));
-//        });
-//        $q.all(tasks).then(function() {
-//            $rootScope.$broadcast('entityAliasesChanged', aliasIds);
-//        });
 //    }
 //}
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index f4ddeb1b0c..56712d9e3a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@@ -97,11 +97,14 @@ import { DatePipe } from '@angular/common';
 import { AttributeService } from '@core/http/attribute.service';
 import { TranslateService } from '@ngx-translate/core';
 import { HttpClient } from '@angular/common/http';
+import { EntityRelationService } from '@app/core/http/entity-relation.service';
 
 const ServicesMap = new Map<string, Type<any>>();
 ServicesMap.set('deviceService', DeviceService);
 ServicesMap.set('assetService', AssetService);
 ServicesMap.set('attributeService', AttributeService);
+ServicesMap.set('entityRelationService', EntityRelationService);
+ServicesMap.set('entityService', EntityService);
 ServicesMap.set('dialogs', DialogService);
 ServicesMap.set('customDialog', CustomDialogService);
 ServicesMap.set('date', DatePipe);
@@ -1011,7 +1014,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
               'entityName', 'additionalParams', 'entityLabel', customFunction);
             customActionFunction($event, this.widgetContext, entityId, entityName, additionalParams, entityLabel);
           } catch (e) {
-            //
+            console.error(e);
           }
         }
         break;
@@ -1036,7 +1039,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
                   'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel', customPrettyFunction);
                 customActionPrettyFunction($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel);
               } catch (e) {
-                //
+                console.error(e);
               }
             }
           },