Search results

Model Binding in Angular QueryBuilder component

15 Jun 2021 / 1 minute 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.

Source
Preview
app.component.ts
template-driven.html
app.module.ts
main.ts
Copied to clipboard
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
    }]
    };
  }
}
Copied to clipboard
<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>
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);