We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

syncfusion trusted companies


The Angular Query Builder is a rich and responsive UI for filtering large amounts of data by creating or editing conditions that can be combined with data visualization controls like DataGrid and Charts to view the filtered data. It outputs structured JSON filters that can be easily parsed to create SQL queries. It allows you to create conditions and group them using AND/OR logic.

Why choose Syncfusion Angular Query Builder?

Angular Query Builder data binding

Seamless data binding

Bind data seamlessly with various local and remote data sources such as JSON, OData, WCF, and RESTful web services with the help of a data manager.

Angular Query Builder exporting

Importing and exporting

You can import or export filter from or to the Query Builder in structured formats like JSON and SQL.

Angular Query Builder responsiveness

Adapts to any resolution

Query Builder has a highly responsive layout and an optimized design for desktops, touchscreens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows OS.

Angular Query Builder template designs

Create your own template designs

You can add checkboxes, sliders, and dropdown lists to the Query Builder using three different templates options.

Angular Query Builder themes

Attractive, customizable themes

Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the online Theme Studio tool to customize themes easily.

Angular Query Builder globalization

Globalization and localization

Enables users from different locales to use the component by formatting strings to suit preferences.

Angular Query Builder Code Example

Easily get started with Angular Query Builder using a few simple lines of HTML and TS code, as demonstrated below. Also explore our Angular Query Builder Example that shows you how to render and configure the Query Builder Component in Angular.

    <ejs-querybuilder width="70%" [rule]="importRules">
          <e-column field="EmployeeID" label="Employee ID" type="number"></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>
import { Component, OnInit} from '@angular/core';
import { RuleModel } from '@syncfusion/ej2-querybuilder';
import { QueryBuilderComponent } from '@syncfusion/ej2-angular-querybuilder';

    selector: 'control-content',
    templateUrl: 'default.html'

export class AppComponent implements OnInit {
    public importRules: RuleModel;
    public values: string[] = ['Mr.', 'Mrs.'];

    ngOnInit(): void {
        this.importRules = {
            'condition': 'and',
            'rules': [{
                'label': 'EmployeeID',
                'field': 'EmployeeID',
                'type': 'number',
                'operator': 'equal',
                'value': 1
                'label': 'Title',
                'field': 'Title',
                'type': 'string',
                'operator': 'equal',
                'value': 'Sales Manager'

Data Manager Integration in Angular Query Builder

Integration with Data Manager

Integrating the Data Manager component with Query Builder simplifies communication with a data source and returns the desired result based on the provided filters.

UI customization with templates

Add controls like Checkbox, Slider, and Dropdown List to to customize the Angular Query Builder using templates.

Querybuilder with Header template.

Header template

Users can define their own widgets to customize the elements such as and/or/not connectors and add rules/groups buttons using header template.

Querybuilder with column template.

Rule template

Users can define their own widgets to customize the entire column elements such as fields, operators, and values using rule template.

Querybuilder with Value template.

Value template

Users can define their own widgets to customize the elements for values using values template.

Model binding

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

Querybuilder model binding.

Angular Query Builder Summary View

Summary View

The Angular Query Builder supports a summary view that outputs the filter query in SQL format.

Import and export

Supports importing and exporting Query Builder filter to and from structured JSON and SQL formats.

Angular Query Builder Import and Export

Angular Querybuilder complex data binding

Complex data binding

Complex data binding allows users to create subfields within the main fields. This can be useful for representing hierarchical or multilevel data in a more organized and structured way. To create subfields, users can either specify the complex data in nested columns or specify a complex data source and separator.

Column binding

The column definitions are used as the data source schema in the Query Builder UI. This plays a vital role in rendering column values. The query builder operations, such as create or delete conditions and create or delete groups, are based on column definitions.

Column binding in Angular Query Builder

Filtering in Angular Query Builder


Users can create a filter by adding or deleting conditions or groups. Users can get a created filter as SQL query, JSON, and data manager predicates.

Appearance customization

Change the look and feel of the Angular Query Builder UI by customizing its default appearance and style using HTML or CSS.

Angular Query Builder Appearance customization

Web accessibility

  • Fully supports WAI-ARIA accessibility to work with screen readers and assistive devices.
  • Follows WAI-ARIA best practices for implementing keyboard interaction.
  • Follows WCAG 2.0 standards in design of the UI element visuals such as foreground color, background color, line spacing, text, and images.
  • Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

Angular version compatibility

With continuous improvement in Angular versions, the Angular Query Builder is kept up to date to make it compatible with the latest version.

Angular version compatibility.

Other supported frameworks

Query Builder is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Query Builder platforms from the links below,

Supported browsers

The Angular Query Builder works well with all modern web browsers such as Chrome, Firefox, Microsoft Edge, Safari, and Opera.

Supported browsers


Frequently Asked Questions

  • Easy to integrate with data visualization components like Grid, Charts, and more.
  • Best UI experience to create filters in the form of JSON and SQL query.
  • Supports a summary view that outputs the filter query in SQL format.
  • Supports importing and exporting Query Builder data to and from structured JSON and SQL formats.
  • Fully customizable to include other components like Checkbox, Slider, and Dropdown List using templates.
  • One of the best Angular Query Builder in the market that offers feature-rich UI to interact with the software.
  • Simple configuration and API.
  • Supports all modern browsers.
  • Mobile-touch friendly and responsive.
  • Expansive learning resources such as demos and documentation to learn quickly and get started with Angular Query Builder.

You can find our Angular Query Builder demo which demonstrates how to render and configure the Query Builder.

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

A good place to start would be our comprehensive getting started documentation.

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

Rated by users across the globe

Transform your applications today by downloading our free evaluation version Download Free Trial


Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile