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