Operators in Angular Query Builder UI

1 Sep 20269 minutes to read

Operators define the comparison logic applied between a rule’s field and value when building query rules. The Query Builder automatically assigns default operators based on the column’s data type, and you can also customize them per column. For details on how the column type determines the value editor and the default operator set, see Columns.

Default operators

The following table lists all built-in operators, their descriptions, and the data types they support:

Operator Description Supported Types
startswith Checks whether the value begins with the specified value. String
endswith Checks whether the value ends with the specified value. String
contains Checks whether the value contains the specified value. String
equal Checks whether the value is equal to the specified value. String, Number, Date, Boolean
notequal Checks whether the value is not equal to the specified value. String, Number, Date, Boolean
greaterthan Checks whether the value is greater than the specified value. Number, Date
greaterthanorequal Checks whether the value is greater than or equal to the specified value. Number, Date
lessthan Checks whether the value is less than the specified value. Number, Date
lessthanorequal Checks whether the value is less than or equal to the specified value. Number, Date
between Checks whether the value is between two specific values. Number, Date
notbetween Checks whether the value is not between two specific values. Number, Date
in Checks whether the value is one of the specified values. String, Number
notin Checks whether the value is not one of the specified values. String, Number
isempty Checks whether the value is empty. String
isnotempty Checks whether the value is not empty. String
isnull Checks whether the value is null. String, Number, Date, Boolean
isnotnull Checks whether the value is not null. String, Number, Date, Boolean

The between and notbetween operators require the rule value to be an array of two values specifying the lower and upper bounds (for example, [10, 100] or ['2022-01-01', '2022-12-31']). The in and notin operators require the rule value to be an array of the values to match (for example, ['Davolio', 'Buchanan']).

Custom operators

Restrict or extend the available operators for a specific column using the operators property. Each operator entry requires a value (the operator key) and a key (the display label shown in the operator dropdown), and each entry follows the OperatorsModel shape. Any built-in operator key (for example, startswith, between, or equal) can be used as a value with a custom display key, and the custom operator entries fully replace the default operators for that column.

The custom operators should match the column’s data type. Selecting operators that are not valid for the column type (for example, using startswith on a number column) may cause the operator or value editor to render incorrectly.

Declare the operator entries as a component class property and bind them through the [operators] input:

public employeeOperators: { value: string; key: string }[] = [
    { value: 'equal', key: 'Equal' },
    { value: 'notequal', key: 'Not Equal' },
    { value: 'in', key: 'In' },
    { value: 'notin', key: 'Not In' }
];
<e-column field="EmployeeID" label="Employee ID" type="number" [operators]="employeeOperators"></e-column>

In the following example, the EmployeeID number column is restricted to only Equal, Not Equal, In, and Not In operators instead of showing all default number operators.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component, OnInit } from '@angular/core';
import { RuleModel } from '@syncfusion/ej2-angular-querybuilder';
import { employeeData } from './datasource';

@Component({
imports: [
        
        QueryBuilderModule,
    ],


standalone: true,
    selector: 'app-root',
    template: `<!-- To render Query Builder. -->
               <ejs-querybuilder #querybuilder width="70%" [dataSource]="data" [rule]="importRules">
                <e-columns>
                  <e-column field="EmployeeID" label="Employee ID" type="number" step="10" [operators]="employeeOperators"></e-column>
                  <e-column field="FirstName" label="First Name" type="string"></e-column>
                  <e-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" [values]="values"></e-column>
                  <e-column field="Title" label="Title" type="string"></e-column>
                  <e-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-column>
                  <e-column field="Country" label="Country" type="string"></e-column>
                  <e-column field="City" label="City" type="string"></e-column>
                </e-columns>
              </ejs-querybuilder>`
})

export class AppComponent implements OnInit {

    public data?: Object[];
    public importRules?: RuleModel;
    public employeeOperators?: Object[];
values: any;
    ngOnInit(): void {
        this.data = employeeData;
        this.importRules = {
        'condition': 'and',
        'rules': [{
            'label': 'Employee ID',
            'field': 'EmployeeID',
            'type': 'number',
            'operator': 'equal',
            'value': 1001
        },
        {
            'label': 'Hire Date',
            'field': 'HireDate',
            'type': 'date',
            'operator': 'equal',
            'value': '07/05/1991'
        }]
    };
    this.employeeOperators =  [
        { value: 'equal', key: 'Equal' },
        { value: 'notequal', key: 'Not Equal' },
        { value: 'in', key: 'In' },
        { value: 'notin', key: 'Not In' }
    ];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See also