Example of Default Functionalities in Angular Query Builder Component

This sample demonstrates the default functionalities of the Query Builder component with importing and exporting the filter as JSON. Click the plus button to add a group or conditions.

{
    "condition": "and",
    "rules": [
        {
            "label": "Employee ID",
            "field": "EmployeeID",
            "operator": "equal",
            "type": "number",
            "value": 1
        },
        {
            "label": "Title",
            "field": "Title",
            "operator": "equal",
            "type": "string",
            "value": "Sales Manager"
        }
    ]
}
Description

This sample demonstrates the Query Builder component showing how to import and export a query in JSON format. The query preview can be showcased in the tab component, and the query can be imported to Query Builder using the Import button.

In mobile mode, the component is shown vertically.

More information about Query Builder can be found in this documentation section.

JSON