ngx-query-builder

A modernized Angular 4+ query builder based on jQuery QueryBuilder. Support for heavy customization with Angular components and provides a flexible way to handle custom data types.

Forked from (https://github.com/zebzhao/Angular-QueryBuilder) as the original project has stopped updating and does not support the latest Angular versions, so I will continue to maintain it and support the latest versions of Angular.

Getting Started

Install

• Angular 20, use 20.X.X
• Angular 19, use 19.X.X

npm install @eliot-ragueneau/ngx-query-builder

• Angular 9, use 0.6.0
• Angular 8, use 0.5.1
• Angular 6-7, use 0.4.2
• Angular 4-5, use 0.3.2

npm install angular2-query-builder

See https://github.com/zebzhao/Angular-QueryBuilder for more details on the usage of the old version.

Examples

Basic Usage

app.module.ts

import {QueryBuilderModule} from "@eliot-ragueneau/ngx-query-builder";
import {AppComponent} from "./app.component"

@NgModule({
  imports: [...,
  QueryBuilderModule,
  IonicModule.forRoot(AppComponent) // (Optional) for IonicFramework 2+
]})
export class AppModule {
}

app.component.html

...
<ngx-query-builder [(ngModel)]='query' [config]='config'></ngx-query-builder>
...

app.component.ts

import {QueryBuilderConfig} from '@eliot-ragueneau/ngx-query-builder';

export class AppComponent {
  query = {
    condition: 'and',
    rules: [
      {field: 'age', operator: '<=', value: 'Bob'},
      {field: 'gender', operator: '>=', value: 'm'}
    ]
  };

  config: QueryBuilderConfig = {
    fields: {
      age: {name: 'Age', type: 'number'},
      gender: {
        name: 'Gender',
        type: 'category',
        options: [
          {name: 'Male', value: 'm'},
          {name: 'Female', value: 'f'}
        ]
      }
    }
  }
}

Custom Input Components

app.component.html

<ngx-query-builder [(ngModel)]='query' [config]='config'>
  <ng-container *queryInput="let rule; type: 'date'">
    <custom-datepicker [(ngModel)]="rule.value"></custom-datepicker>
  </ng-container>
</ngx-query-builder>

app.component.ts

query = {
  condition: 'and',
  rules: [
    {field: 'birthday', operator: '=', value: new Date()}
  ]
};

config: QueryBuilderConfig = {
  fields: {
    birthday: {
      name: 'Birthday',
      type: 'date',
      operators: ['=', '<=', '>'],
      defaultValue: () => new Date()
    }
  }
}

Property Bindings Quick Reference

ngx-query-builder

Structural Directives

Use these directives to replace different parts of query builder with custom components.

queryArrowIcon

Directive to replace the expand arrow used in collapse/accordion mode of the query builder.

querySwitchGroup

Useful for replacing the switch controls, for example the AND/OR conditions. More custom conditions can be specified by using this directive to override the default component.

queryButtonGroup

For replacing the default button group for Add, Add Ruleset, Remove Ruleset buttons.

queryRulesetAddRuleButton

For replacing the default button for Add Rule.

queryRulesetAddRulesetButton

For replacing the default button for Add Ruleset.

queryRulesetRemoveButton

For replacing the default button for Remove Ruleset.

queryEntity

Used to replace entity selection component.

queryField

Used this directive to replace the query field selection component.

queryOperator

Used to replace the query operator selection component.

queryInput

Used to replace the input component. Specify the type/queryInputType to match specific field types to input template.

queryRuleRemoveButton

Directive to replace the default remove single rule button component.

queryEmptyWarning

Can be used to customize the default empty warning message, alternatively can specify the emptyMessage property binding.

Dependencies

• Angular 18+

Development

dev

• pnpm watch
• pnpm start
• vist http://localhost:4200 to see the demo

demo preview

Code structure

• BaseQueryBuilder (Logic container - hidden)
  • QueryBuilderComponent (Root component - exported)
  • InnerQueryBuilderComponent (Recursive component - hidden)

build

• pnpm build

publish

cd dist/ngx-query-builder
npm publish --access public

For use in other local projects

cd dist/ngx-query-builder
npm link

cd /path/to/other/project
npm link ngx-query-builder

That's it.