QB sample requesting data from an endpoint

src/app/interactions/interactions-routes-data.ts

@@ -50,5 +50,6 @@ export const interactionsRoutesData = {
     'icons-sample': { displayName: 'Icons sample', parentName: 'Drag and Drop' },
     'query-builder-sample-1': { displayName: 'Query Builder Sample 1', parentName: 'Query Builder' },
     'query-builder-style': { displayName: 'Query Builder Style Sample', parentName: 'Query Builder' },
-    'query-builder-template-sample': { displayName: 'Query Builder Template Sample', parentName: 'Query Builder' }
+    'query-builder-template-sample': { displayName: 'Query Builder Template Sample', parentName: 'Query Builder' },
+    'query-builder-request-sample': { displayName: 'Query Builder Request Sample', parentName: 'Query Builder' }
 };

src/app/interactions/interactions.routes.ts

@@ -23,6 +23,7 @@ import { OverlayStylingComponent } from './overlay/overlay-styling/overlay-styli
 import { QueryBuilderSample1Component } from './query-builder/query-builder-sample-1/query-builder-sample-1.component';
 import { QueryBuilderStyleComponent } from './query-builder/query-builder-style/query-builder-style.component';
 import { QueryBuilderTemplateSampleComponent } from './query-builder/query-builder-template-sample/query-builder-template-sample.component';
+import { QueryBuilderRequestSampleComponent } from './query-builder/query-builder-request-sample/query-builder-request-sample.component';
 import { RippleSample2Component } from './ripple/ripple-sample-2/ripple-sample-2.component';
 import { RippleSample3Component } from './ripple/ripple-sample-3/ripple-sample-3.component';
 import { RippleSample4Component } from './ripple/ripple-sample-4/ripple-sample-4.component';
@@ -304,5 +305,10 @@ export const InteractionsRoutes: Routes = [
         component: QueryBuilderTemplateSampleComponent,
         data: interactionsRoutesData['query-builder-template-sample'],
         path: 'query-builder-template-sample'
+    },
+    {
+        component: QueryBuilderRequestSampleComponent,
+        data: interactionsRoutesData['query-builder-request-sample'],
+        path: 'query-builder-request-sample'
     }
 ];

src/app/interactions/query-builder/query-builder-request-sample/query-builder-request-sample.component.html

@@ -0,0 +1,11 @@
+<div class="wrapper">
+    <igx-query-builder #queryBuilder
+        [entities]="entities"
+        [(expressionTree)]="expressionTree"
+        (expressionTreeChange)="onChange()">
+    </igx-query-builder>
+
+    <div class="output-area">
+        <igx-grid #grid [data]="data" [autoGenerate]="true"></igx-grid>
+    </div>
+</div>

src/app/interactions/query-builder/query-builder-request-sample/query-builder-request-sample.component.scss

@@ -0,0 +1,11 @@
+.wrapper{
+    margin: 10px;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.output-area{
+    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.75);
+    border-radius: 4px;
+    margin: 0 20px 20px 20px;
+}

src/app/interactions/query-builder/query-builder-request-sample/query-builder-request-sample.component.ts

@@ -0,0 +1,76 @@
+import { HttpClient } from '@angular/common/http';
+import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxColumnComponent, IgxGridComponent, IgxQueryBuilderComponent } from 'igniteui-angular';
+
+const API_ENDPOINT = 'https://data-northwind.indigo.design';
+
+@Component({
+    selector: 'query-builder-request-sample',
+    styleUrls: ['./query-builder-request-sample.component.scss'],
+    templateUrl: 'query-builder-request-sample.component.html',
+    imports: [IgxQueryBuilderComponent, IgxGridComponent, IgxColumnComponent]
+})
+export class QueryBuilderRequestSampleComponent implements OnInit {
+    @ViewChild('grid', { static: true })
+    public grid: IgxGridComponent;
+
+    public entities: any[];
+    public customersFields: any[];
+    public ordersFields: any[];
+    public expressionTree: IExpressionTree;
+    public data: any[] = [];
+
+    constructor(private http: HttpClient, private cdr: ChangeDetectorRef) {}
+
+    public ngOnInit(): void {
+        this.customersFields = [
+            { field: "customerId", dataType: "string" },
+            { field: "companyName", dataType: "string" },
+            { field: "contactName", dataType: "string" },
+            { field: "contactTitle", dataType: "string" }
+        ];
+
+        this.ordersFields = [
+            { field: "orderId", dataType: "number" },
+            { field: "customerId", dataType: "string" },
+            { field: "employeeId", dataType: "number" },
+            { field: "shipperId", dataType: "number" },
+            { field: "orderDate", dataType: "date" },
+            { field: "requiredDate", dataType: "date" },
+            { field: "shipVia", dataType: "number" },
+            { field: "freight", dataType: "number" },
+            { field: "shipName", dataType: "string" },
+            { field: "completed", dataType: "boolean" }
+        ];
+
+        this.entities = [
+            {
+                name: "Customers",
+                fields: this.customersFields
+            },
+            {
+                name: "Orders",
+                fields: this.ordersFields
+            }
+        ];
+
+        const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['orderId', 'customerId', 'employeeId', 'shipperId', 'orderDate', 'requiredDate', 'shipVia', 'freight', 'shipName', 'completed']);
+        this.expressionTree = tree;
+
+        this.onChange();
+    }
+
+    public onChange() {
+        this.grid.isLoading = true;
+        this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, this.expressionTree).subscribe(data =>{
+            this.data = Object.values(data)[0];
+            this.grid.isLoading = false;
+        });
+        this.cdr.detectChanges();
+        this.calculateColsInView();
+    }
+
+    private calculateColsInView() {
+        this.grid.columns.forEach(column => column.hidden = !this.expressionTree.returnFields.includes(column.field));
+    }
+}