Getting Started with the Angular Query Builder

Learn how to create and configure the Syncfusion Angular Query Builder component using the Angular CLI toolchain and Query Builder package. This video also explains how to apply rules on the component’s initial rendering, and how to use the component to filter DataGrid records.

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 Data Grid and Charts to view the filtered data. It outputs structured JSON filters that can be easily parsed to create SQL queries. You can also use it to create conditions and group them using AND/OR logic.

The column definitions are used as the datasource schema in the Query Builder. This plays a vital role in rendering column values. The query builder allows users to perform various operations, such as creating or deleting conditions and groups, based on the defined columns in the data source. The field property of the columns is necessary to map the data source values in the query builder columns.

Integrating the Angular DataGrid and Data Manager components with Query Builder simplifies communication with a data source and returns the desired result based on the provided filters. To render the DataGrid component, use the Syncfusion EJ2 Angular Grids package. Add controls like Checkbox and Dropdown List to customize the Angular Query Builder using templates. The Angular Query Builder supports a summary view that outputs the filter query in SQL format.

Download an example from GitHub:
https://github.com/SyncfusionExamples/getting-started-with-the-angular-querybuilder-component

Refer to the following documentation on the Syncfusion Angular Query Builder component:
https://ej2.syncfusion.com/angular/documentation/query-builder/getting-started

Check out this interactive online example of the Angular Query Builder component:
https://ej2.syncfusion.com/angular/demos/#/material/query-builder/default

Refer to the following documentation on the Syncfusion Angular DataGrid component:
https://ej2.syncfusion.com/angular/documentation/grid/getting-started

Watch this video to get started with the Angular DataGrid component: https://www.youtube.com/watch?v=lk83TlHQ95c

TRIAL LICENSE KEY
----------
If you need a trial license key, start an Angular trial from your Syncfusion account and then obtain a trial license key from the downloads page: https://www.syncfusion.com/account/manage-trials/start-trials

Check if you are eligible for a free license for all Essential Studio products on our Community License page: https://www.syncfusion.com/products/communitylicense

BOOKMARK DETAILS
--------------
[00:00] Introduction
[00:22] Create an Angular application
[01:28] Add Query Builder
[04:39] Apply rules on initial loading
[05:45] Filter Grid records

ANGULAR QUERY BUILDER
------------------
Product overview: https://www.syncfusion.com/angular-components/angular-query-builder Documentation: https://ej2.syncfusion.com/angular/documentation/query-builder/getting-started
Online examples: https://ej2.syncfusion.com/angular/demos/#/material/query-builder/default
Download free trial: https://www.syncfusion.com/downloads/angular/confirm
npmjs package: https://www.npmjs.com/package/@syncfusion/ej2-angular-querybuilder

SUBSCRIBE
----------
Syncfusion on YouTube: https://www.youtube.com/user/syncfusioninc
Sign up to receive email updates: https://www.syncfusion.com/account/email-preference

SOCIAL COMMUNITIES
-------------
Facebook: https://www.facebook.com/Syncfusion/
Twitter: https://twitter.com/Syncfusion
LinkedIn: https://www.linkedin.com/company/syncfusion
Instagram: https://www.instagram.com/syncfusionofficial/

#angular #querybuilder #query