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

@@ -1719,7 +1719,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         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 stripExternalObject(tree: IExpressionTree): void {
+        for (const operand of tree?.filteringOperands ?? []) {
+            if ('operator' in operand) {
+                this.stripExternalObject(operand);
+                continue;
+            }
+
+            delete (operand.condition as any)?.externalObject;
+
+            if (operand.searchTree) {
+                this.stripExternalObject(operand.searchTree);
+            }
+        }
+    }
+
     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.stripExternalObject(this._expressionTree);
+            this.expressionTreeChange.emit(this._expressionTree);
         }
     }
 
@@ -389,4 +405,3 @@ export class IgxQueryBuilderComponent implements OnDestroy {
         });
     }
 }
-

src/app/query-builder/query-builder.sample.ts

@@ -191,7 +191,15 @@ export class QueryBuilderComponent implements OnInit {
             // this.expressionTree = tree;
             // this.onChange();
         }
-        return tree ? JSON.stringify(tree, null, 2) : 'Please add an expression!';
+        return tree ? JSON.stringify(tree, this.serializeExpressionTreeCallback, 2) : 'Please add an expression!';
+    }
+
+    // JSON.stringify serializes Set as {}, so convert Set-based searchVal to array to preserve values in the printed output.
+    private serializeExpressionTreeCallback(key: string, val: any) {
+        if (key === 'searchVal' && val instanceof Set) {
+            return Array.from(val);
+        }
+        return val;
     }
 
     public canCommitExpressionTree() {