Overview
The Angular Query Builder lets developers build complex queries using an intuitive drag‑and‑drop interface with support for AND/OR logic, nested conditions, multiple comparison operators, and advanced rule configuration. It delivers structured JSON that can be converted to SQL, MongoDB, and other query formats for seamless integration with back‑end APIs, grids, or analytics dashboards.
Installation & Quick Start
Follow these three steps to integrate the Query Builder into your Angular application.
1
Install the Query Builder Package
Install the Syncfusion Angular Query Builder package by using npm.
npm install @syncfusion/ej2-angular-querybuilder --save2
Import the required CSS styles
Import the required Syncfusion CSS files to apply proper layout and theme styling.
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-querybuilder/styles/tailwind3.css';3
Initialize the Query Builder component
Configure and render the Angular Query Builder using the sample shown. Define the component in src/App.html and App.tsx. Explore the Angular Query Builder example to learn more.
<ejs-querybuilder width="70%">
<e-columns>
<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="Country" label="Country" type="string"></e-column>
<e-column field="City" label="City" type="string"></e-column>
</e-columns>
</ejs-querybuilder>import { Component } from '@angular/core';
import { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder';
@Component({
selector: 'app-root',
imports: [QueryBuilderModule],
templateUrl: './app.html'
})
export class App {
public values: string[] = ['Mr.', 'Mrs.'];
}No credit card required.
Why choose Syncfusion Angular Query Builder?
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.
Importing and exporting
You can import or export filters from or to the Query Builder in structured formats like JSON and SQL.
Drag and drop rule creation
Build complex queries visually using an intuitive drag and drop interface that allows adding, removing, and grouping conditions with ease.
AI-Assisted Development
Build advanced filtering and query experiences faster with the Agentic UI Builder and Syncfusion Agent Skills. Generate rules, conditions, and dynamic query workflows with minimal manual effort.
Clone groups effortlessly
This feature creates an exact replica of an existing group, preserving all fields, conditions, and operators. Users can speed up query building, reduce repetitive configuration, and maintain consistency across complex filters.
Globalization and localization
Enables users from different locales to use the component by formatting strings to suit cultural preferences.
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 customize the Angular Query Builder using templates.
Header template
Users can define their own widgets to customize elements such as and/or/not connectors and add rules/groups buttons using the header template.
Rule template
Users can customize all column elements such as fields, operators, and values using the rule template.
Value template
Users can customize the elements for values using the value template.
Model binding
Model binding binds properties for the components used in field, operator, and value columns. To implement model binding, assign the fieldModel, operatorModel, and valueModel properties in the Query Builder.
Summary view
The Angular Query Builder supports a summary view that outputs the filter query in SQL format.
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.
Filtering
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.
Lock groups or rules
Ensure data integrity by locking groups or rules to prevent unintended interactions. Use the lockRule and lockGroup methods for this purpose.
Clone groups or rules
Effortlessly create duplicates of rules or groups within the Query Builder with the clone support feature. This creates an exact replica next to the original using the cloneRule and cloneGroup methods.
Drag and drop
Users can reposition rules or groups within the component by just dragging and dropping them. This provides an intuitive, flexible way to construct and modify queries.
Separate connector
Users can integrate standalone connectors between rules or groups within the same group. This allows for greater flexibility, as users can connect rules or groups using different connectors, enhancing the complexity and precision of query construction.
Angular version compatibility
The Angular Query Builder is kept up to date to make it compatible with the latest version of Angular.
Other supported frameworks
The Query Builder is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links:
Supported browsers
The Angular Query Builder works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.
AI-assisted development
Build feature-rich Angular Query Builder experiences faster
Accelerate query interface development with Syncfusion AI tools that turn requirements into fully configured filtering and rule-building experiences with minimal manual setup.
Agentic UI Builder
Turn prompts into ready-to-use UI screens, layouts, and workflows with Syncfusion Angular components.
Example Prompt Create an advanced filtering interface with dynamic conditions and rule groups.
Agent Skills
Accelerate development with Syncfusion AI Agent Skills for faster implementation and integration.
Example Prompt Generate a Angular query builder with nested conditions and dynamic filtering.
AI Coding Assistant
Accelerate development with AI that generates, configures, and troubleshoots component code directly in your IDE.
Example Prompt Show how to generate SQL queries using Syncfusion Angular Query Builder.
Not sure how to create your first Angular Query Builder? Our documentation can help.
I’d love to read it nowFrequently Asked Questions
Why should you choose the Syncfusion Angular Query Builder?
Easy to integrate with data visualization components like Data Grid and Charts.
Best UI experience for creating filters in the form of JSON and SQL queries.
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.
- Simple configuration and APIs.
- Supports all modern browsers.
- Touch-friendly and responsive UI.
Expansive learning resources such as demos and documentation to let you get started quickly with Angular Query Builder.
Where can I find the Syncfusion Angular Query Builder demo?
You can find our Angular Query Builder demo, which demonstrates how to render and configure the Query Builder.
Can I download and utilize the Syncfusion Angular Query Builder for free?
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, five or fewer developers, and 10 or fewer total employees.
How do I get started with the Syncfusion Angular Query Builder?
A good place to start would be our comprehensive getting started documentation.
Trusted by the world’s leading companies
Our Customers Love Us
Transform your applications today by downloading our free evaluation version
No credit card required | 1.1M+ downloads
Syncfusion Angular Query Builder Resources
Figma Download
Recent activities in Angular Query Builder tutorials and blogs
The Angular Query Builder tutorial videos and blog posts will guide you in building your first app with this Angular components. They provide problem-solving strategies, describe features and functionalities, announce new feature releases, explain best practices, and showcase example scenarios. Explore our latest posts on our blog and tutorial video channels for Angular Query Builder updates.
140+ ANGULAR UI COMPONENTS
Standalone UI SDKs
Integrate the DataGrid, Chart, Scheduler, Gantt, Rich Text Editor, File Manager, and Diagram UI components into applications to enable rich interaction and visualization, delivering a seamless user experience.
Document Solutions
Integrate the PDF Viewer, DOCX Editor, Spreadsheet Editor, and document-processing libraries into the Angular applications to enable a smooth user experience.
