Model binding in Angular Query builder component

26 Feb 20264 minutes to read

Model binding enables two-way data binding between the Query Builder and custom components used in the field, operator, and value columns. Implement model binding by configuring the fieldModel, operatorModel, and valueModel properties.

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));