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.
import { Component, ViewChild, OnInit } from '@angular/core';
import { QueryBuilderComponent } from '@syncfusion/ej2-angular-querybuilder';
import { RuleModel } from '@syncfusion/ej2-querybuilder';
@Component({
selector: 'app-root',
templateUrl: `app/template-driven.html`
})
export class AppComponent implements OnInit {
@ViewChild('querybuilder') qryBldrObj: QueryBuilderComponent;
public importRules: RuleModel;
ngOnInit(): void {
this.importRules = {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1001
}]
};
}
}<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>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 { AppComponent } from './app.component'
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
QueryBuilderModule,
CheckBoxModule,
DropDownListModule,
DropDownButtonModule,
DatePickerModule,
TextBoxModule,
NumericTextBoxModule,
MultiSelectModule,
RadioButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);