feat(query-builder): search value template improvements

Author: igdmdimitrov

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.html

@@ -246,7 +246,12 @@ <h6 class="igx-filter-empty__title">
                 </igx-select-item>
             </igx-select>
 
-            <ng-container *ngTemplateOutlet="searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate">
+            <ng-container 
+                *ngTemplateOutlet="
+                    searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;
+                    context: { $implicit: _editedExpression.expression.searchVal, field: selectedField, condition: selectedCondition }
+                "
+            >
             </ng-container>
 
             <ng-template #defaultSearchValueTemplate>

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

@@ -173,6 +173,9 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     @Input()
     public entities: EntityType[];
 
+    @Input()
+    public searchValueTemplate: TemplateRef<IgxQueryBuilderSearchValueTemplateDirective> = null;
+
     @Input()
     public get parentExpression(): ExpressionOperandItem {
         return this._parentExpression;
@@ -314,12 +317,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     @ContentChild(IgxQueryBuilderHeaderComponent)
     public headerContent: IgxQueryBuilderHeaderComponent;
 
-    @ContentChild(IgxQueryBuilderSearchValueTemplateDirective, { read: TemplateRef })
-    public searchValueTemplate: TemplateRef<IgxQueryBuilderSearchValueTemplateDirective> = null;
-
-    // @ViewChildren(IgxQueryBuilderSearchValueTemplateDirective)
-    // public searchValueTemplateDirectives: QueryList<IgxQueryBuilderSearchValueTemplateDirective>;
-
     @ViewChild('editingInputsContainer', { read: ElementRef })
     protected set editingInputsContainer(value: ElementRef) {
         if ((value && !this._editingInputsContainer) ||
@@ -725,7 +722,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         if (this._editedExpression) {
             this._editedExpression.expression.field = this.selectedField.field;
             this._editedExpression.expression.condition = this.selectedField.filters.condition(this.selectedCondition);
-            this._editedExpression.expression.searchVal = DataUtil.parseValue(this.selectedField.dataType, this.searchValue);
+            this._editedExpression.expression.searchVal = DataUtil.parseValue(this.selectedField.dataType, this.searchValue); //
             this._editedExpression.fieldLabel = this.selectedField.label
                 ? this.selectedField.label
                 : this.selectedField.header

projects/igniteui-angular/src/lib/query-builder/query-builder.component.html

@@ -12,11 +12,6 @@
     [locale]="this.locale"
     [resourceStrings]="this.resourceStrings"
     (expressionTreeChange)="onExpressionTreeChange($event)"
-    >
-    <ng-container *ngIf="searchValueTemplate">
-        <ng-template igxQueryBuilderSearchValue>
-            <ng-container *ngTemplateOutlet="searchValueTemplate"></ng-container>
-        </ng-template>
-    </ng-container>
+    [searchValueTemplate]="searchValueTemplate">
 </igx-query-builder-tree>
 

projects/igniteui-angular/src/lib/query-builder/query-builder.directives.ts

@@ -1,4 +1,4 @@
-import { Directive, Input, TemplateRef } from '@angular/core';
+import { Directive, TemplateRef } from '@angular/core';
 
 /**
  * Defines the custom template that will be used for the search value input of condition in edit mode
@@ -9,8 +9,8 @@ import { Directive, Input, TemplateRef } from '@angular/core';
  *
  * @example
  * <igx-query-builder>
- *      <ng-template igxQueryBuilderSearchValue>
- *          <span>Custom Search Value</span>
+ *      <ng-template igxQueryBuilderSearchValue let-searchValue let-field="field" let-condition="condition">
+ *          <span>{{field.field}} {{condition}} {{searchValue}}</span>
  *      </ng-template>
  *  </igx-query-builder>
  */
@@ -19,8 +19,5 @@ import { Directive, Input, TemplateRef } from '@angular/core';
     standalone: true
 })
 export class IgxQueryBuilderSearchValueTemplateDirective {
-    @Input()
-    public searchValue: any;
-
     constructor(public template: TemplateRef<any>) { }
 }

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

@@ -10,8 +10,8 @@
             <!-- Custom header -->
             <!-- <igx-query-builder-header [title]="'Builder'" [showLegend]="false"><span>Custom Title</span></igx-query-builder-header> -->
 
-            <!-- <ng-template #searchValueTemplate igxQueryBuilderSearchValue let-searchValue="searchValue">
-                <button igxButton="contained" igxRipple (click)="setSearchValue()">Set Search Value</button>
+            <!-- <ng-template #searchValueTemplate igxQueryBuilderSearchValue let-searchValue let-field="field" let-condition="condition">
+                <button igxButton="contained" igxRipple (click)="logParams(field, condition, searchValue)">LOG</button>
             </ng-template> -->
         </igx-query-builder>
 

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

@@ -148,8 +148,10 @@ export class QueryBuilderComponent implements OnInit {
         this.queryBuilder.locale = locale;
     }
 
-    public setSearchValue() {
-        this.searchValueTemplate.searchValue = 'value from template';
+    public logParams(field: any, condition: any, searchValue: any) {
+        console.log(field);
+        console.log(condition);
+        console.log(searchValue);
     }
 
     public printExpressionTree(tree: IExpressionTree) {