fix(query-builder): refactor expression tree change emission for consistency - 21.1.x

projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts

@@ -670,7 +670,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
 
             this._editedExpression = null;
             if (!this.parentExpression) {
-                this.expressionTreeChange.emit(this._expressionTree);
+                this.emitExpressionTreeChange();
             }
 
             this.rootGroup = null;
@@ -699,7 +699,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
 
             if (this._expressionTree && !this.parentExpression) {
                 this._expressionTree.returnFields = value.length === this.fields.length ? ['*'] : value;
-                this.expressionTreeChange.emit(this._expressionTree);
+                this.emitExpressionTreeChange();
             }
         }
     }
@@ -892,7 +892,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
 
         this._expressionTree = this.createExpressionTreeFromGroupItem(this.rootGroup, this.selectedEntity?.name, this.selectedReturnFields);
         if (!this.parentExpression) {
-            this.expressionTreeChange.emit(this._expressionTree);
+            this.emitExpressionTreeChange();
         }
     }
 
@@ -933,7 +933,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         }
 
         if (!this.parentExpression && !skipEmit) {
-            this.expressionTreeChange.emit(this._expressionTree);
+            this.emitExpressionTreeChange();
         }
     }
 
@@ -1523,7 +1523,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         }
 
         if (!this.parentExpression) {
-            this.expressionTreeChange.emit(this._expressionTree);
+            this.emitExpressionTreeChange();
         }
     }
 
@@ -1714,12 +1714,16 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         }, this._focusDelay);
     }
 
+    private emitExpressionTreeChange(): void {
+        this.expressionTreeChange.emit(this._expressionTree);
+    }
+
     private init() {
         this.cancelOperandAdd();
         this.cancelOperandEdit();
 
         // Ignore values of certain properties for the comparison
-        const propsToIgnore = ['parent', 'hovered', 'ignoreCase', 'inEditMode', 'inAddMode'];
+        const propsToIgnore = ['parent', 'hovered', 'ignoreCase', 'inEditMode', 'inAddMode', 'externalObject'];
         const propsReplacer = function replacer(key, value) {
             if (propsToIgnore.indexOf(key) >= 0) {
                 return undefined;

projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts

@@ -327,14 +327,30 @@ export class IgxQueryBuilderComponent implements OnDestroy {
         this.queryTree.setAddButtonFocus();
     }
 
+    private serializeExpressionTreeCallback(key: string, val: any) {
+        if (key === 'externalObject') {
+            return undefined;
+        }
+
+        return val;
+    }
+
+    private getSerializableExpressionTree(tree: IExpressionTree): IExpressionTree {
+        if (!tree) {
+            return tree;
+        }
+
+        return JSON.parse(JSON.stringify(tree, this.serializeExpressionTreeCallback));
+    }
+
     protected onExpressionTreeChange(tree: IExpressionTree) {
         if (tree && this.entities && tree !== this._expressionTree) {
             this._expressionTree = recreateTree(tree, this.entities);
         } else {
             this._expressionTree = tree;
         }
         if (this._shouldEmitTreeChange) {
-            this.expressionTreeChange.emit(tree);
+            this.expressionTreeChange.emit(this.getSerializableExpressionTree(this._expressionTree));
         }
     }
 
@@ -389,4 +405,3 @@ export class IgxQueryBuilderComponent implements OnDestroy {
         });
     }
 }
-