Filter Builder

Filter Builder lets users create structured filtering rules by choosing a field, operation, and value. It can group conditions with logical operators such as and and or, then emits the filter tree as FilterBuilderGroup[] through valueChanged.

Use it for advanced filters, saved views, report builders, admin datasets, CRM or ERP records, audit logs, catalogs, and segmentation workflows where a simple search field is not enough. The app is responsible for translating the emitted filter tree into an API query, SQL or DSL condition, DataView datasource params, or local filtering logic.

The NgStarter Angular Filter Builder component lets you let users construct a structured tree of filtering rules from fields, operations, and values. Use for advanced filters, saved views, report builders, admin datasets, CRM or ERP records, audit logs, catalogs, product filtering, and segmentation workflows where a simple search field is not enough. It includes examples for Basic filter builder.

Basic filter builder

Define available fields with fieldDefs, then use valueChanged to receive the structured filter tree and apply it in your own data layer.

Value:

[
  {
    "logicalOperator": "or",
    "value": [
      {
        "logicalOperator": "and",
        "value": [
          {
            "value": [
              "price",
              "isBetween",
              [
                2000,
                4000
              ]
            ]
          }
        ]
      }
    ]
  }
]

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates

Filter Builder

Basic filter builder

Source code, templates, and commercial support

Build the surrounding workflow