Model binding in Angular Query builder component

3 Jan 20254 minutes to read

Model binding allows to bind properties for the components used in field, operator, and value columns. To implement model binding, assign fieldModel, operatorModel, and valueModel properties in QueryBuilder.

app.component.ts

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder'
import { DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { CheckBoxModule, RadioButtonModule} from '@syncfusion/ej2-angular-buttons'
import { TextBoxModule, NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons'
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars'



import { Component, ViewChild, OnInit } from '@angular/core';
import { QueryBuilderComponent } from '@syncfusion/ej2-angular-querybuilder';
import {  RuleModel } from '@syncfusion/ej2-querybuilder';

@Component({
imports: [
    
	  QueryBuilderModule,
    CheckBoxModule,
    DropDownListModule,
    DropDownButtonModule,
    DatePickerModule,
    TextBoxModule,
    NumericTextBoxModule,
    MultiSelectModule,
    RadioButtonModule
  ],


standalone: true,
  selector: 'app-root',
  templateUrl: `template-driven.html`
})
export class AppComponent implements OnInit {
  @ViewChild('querybuilder') qryBldrObj: QueryBuilderComponent | undefined;
  public importRules?: RuleModel;
  ngOnInit(): void {
    this.importRules = {
      'condition': 'and',
      'rules': [{
        'label': 'Employee ID',
        'field': 'EmployeeID',
        'type': 'number',
        'operator': 'equal',
        'value': 1001
    }]
    };
  }
}

template-driven.html

<ejs-querybuilder id="querybuilder" #querybuilder width="100%" [rule] = "importRules" enableNotCondition = true [fieldModel] = "{allowFiltering : true, popupHeight:'400px'}" [operatorModel] = "{allowFiltering : true, popupHeight:'500px' }" [valueModel] = "{numericTextBoxModel: 
    {
        cssClass: 'e-custom'
    },multiSelectModel: {
        cssClass: 'e-custom'
    },datePickerModel: {
        cssClass: 'e-custom'
    },
    textBoxModel: {
        cssClass: 'e-custom'
    },
    radioButtonModel: {
        cssClass: 'e-custom'
    }}">
        <e-columns>
            <e-column field="EmployeeID" label="EmployeeID" type="number"></e-column>
            <e-column field="FirstName" label="FirstName" type="string"></e-column>
            <e-column field="LastName" label="LastName" type="string"></e-column>
            <e-column field="Age" label="Age" type="number"></e-column>
            <e-column field="City" label="City" type="string"></e-column>
            <e-column field="Country" label="Country" type="string"></e-column>
        </e-columns>
    </ejs-querybuilder>

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));