What’s New in Angular Query Builder: 2024 Volume 2
Tags: angular, whatsnew, ui, web
Published: 2024-07-11 16:56:21

---
title: What’s New in Angular Query Builder: 2024 Volume 2
published: true
date: 2024-07-09 13:14:45 UTC
tags: angular, whatsnew, ui, web
canonical_url: https://www.syncfusion.com/blogs/post/angular-query-builder-2024-volume-2
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h2ok2p0n3x90gqayf4n.png
---
**TL;DR:** In the 2024 Volume 2 release, the Syncfusion Angular Query Builder includes drag-and-drop functionality for easier query creation and independent connectors for more complex queries.

Syncfusion [Angular Query Builder](https://www.syncfusion.com/angular-components/angular-query-builder "Angular Query Builder") is a graphical user interface component to build queries. Its rich feature set includes data binding, templates, and importing and exporting queries from and to JSON, MongoDB Query, and SQL formats. It can generate predicates that are used as conditions in Data Manager. It can also auto-populate a data source and map it to appropriate fields from an array of JavaScript objects.

In this blog, we’ll explore the new features introduced in the Angular Query Builder for the [2024 volume 2](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download "Essential Studio 2024 Volume 2") release.

## Drag and drop support

This feature lets users create, modify, and manage rules or queries visually and intuitively by dragging and dropping conditions and groups within a graphical user interface (GUI).

This method simplifies the process for users, especially those who may not be proficient in writing complex queries manually, making data interaction more accessible. The [allowDragAndDrop](https://ej2.syncfusion.com/angular/documentation/api/query-builder#allowdraganddrop "allowDragAndDrop property of Angular Query Builder") property controls the drag and drop behavior, rendering a draggable icon in front of the condition or group element. By dragging that element, users can efficiently build and adjust their queries.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Drag-and-drop-feature-in-Angular-Query-Builder.gif" alt="Drag and drop feature in Angular Query Builder" style="width:100%">

  <figcaption>Drag and drop feature in Angular Query Builder</figcaption>

</figure>

**Note:** For more details, refer to the [drag-and-drop feature in the Angular Query Builder demo](https://ej2.syncfusion.com/angular/demos/#/fluent2/query-builder/drag-drop "Drag-and-drop feature in the Angular Query Builder demo").

## Independent connectors

The Angular Query Builder is a powerful tool for creating complex database queries. However, by default, it only allows users to connect queries with a single connector within the same group. This limitation frustrates users who need to connect queries with different connectors, such as combining conditions with both AND and OR (e.g., ( **X = ‘A’ AND Y = ‘B’ OR Z = ‘C’** )).

We have introduced the support for connecting queries with different connectors to overcome this limitation.  This involves specifying the condition property of the rule model object.

- For objects without the **rules** property (referred to as rules), this property connects the conditions with different connectors.
- For objects with the **rules** property (referred to as groups), the condition property connects the groups with different connectors.
- Notably, the root-level group is not considered since conditions and groups are connected within that root-level group.

The [enableSeparateConnector](https://ej2.syncfusion.com/angular/documentation/api/query-builder#enableseparateconnector "enableSeparateConnector property of Angular Query Builder") property controls this independent connector behavior. When enabled, it renders connectors between rules and groups, allowing users to connect them with different connectors. This enhancement significantly expands the flexibility and functionality of the Query Builder, enabling users to construct more intricate and precise queries.

By supporting multiple connectors, users can seamlessly integrate complex logical conditions, enhancing their ability to query and analyze data effectively.

The rule model can be updated to include the condition for each rule by adding a condition property to each rule object. This property will specify the connector.

Refer to the following code example.

```js
let importRules: RuleModel = {
   condition: "",
   rules: [
       { label: "First Name", field: "FirstName", type: "string", operator: "startswith", value: "Andre", condition: "or" },
       { label: "Last Name", field: "LastName", type: "string", operator: "in", value: ['Davolio', 'Buchanan'], condition: "and" },
       { label: "Age", field: "Age", type: "number", operator: "greaterthan", value: 29, condition: "or" },
       {
            condition: "", rules: [
                { label: "Is Developer", field: "IsDeveloper", type: "boolean", operator: "equal", value: true, condition: "and" },
                { label: "Primary Framework", field: "PrimaryFramework", type: "string", operator: "equal", value: "React" }
            ]
       },
       { label: "Hire Date", field: "HireDate", type: "date", operator: "greaterthan", value: "06/19/2024" }
   ]
};
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Independent-connectors-in-Angular-Query-Builder.png" alt="Independent connectors in Angular Query Builder" style="width:100%">

  <figcaption>Independent connectors in Angular Query Builder</figcaption>

</figure>

The output query will be like the following one.

```js
FirstName LIKE ('Andre%') OR Age > 29 AND (IsDeveloper = true AND PrimaryFramework = 'React') OR HireDate > '06/19/2024'
```

**Note:** For more details, refer to the [independent connectors in the Angular Query Builder demo](https://ej2.syncfusion.com/angular/demos/#/fluent2/query-builder/separate-connector "Independent connectors in the Angular Query Builder demo").

## Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to the new features of our [Angular Query Builder](https://www.syncfusion.com/angular-components/angular-query-builder "Angular Query Builder") component. If you would like to give it a try, please download the latest available version of Essential Studio, [2024 Volume 2](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download "Essential Studio 2024 Volume 2"). With this component, you can experience wonderful query building and handling.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Introducing the New Angular TextArea Component](https://www.syncfusion.com/blogs/post/new-angular-textarea-component "Blog: Introducing the New Angular TextArea Component")
- [Optimize Blog Management with Angular Gantt Chart](https://www.syncfusion.com/blogs/post/blog-management-angular-gantt-chart "Blog: Optimize Blog Management with Angular Gantt Chart")
- [Explore Advanced PDF Exporting in Angular Pivot Table](https://www.syncfusion.com/blogs/post/pdf-exporting-angular-pivot-table "Blog: Explore Advanced PDF Exporting in Angular Pivot Table")
- [What’s New in Angular 18?](https://www.syncfusion.com/blogs/post/whats-new-in-angular-18 "Blog: What’s New in Angular 18?")