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.
Example of how you can completely customize the query component with another library like Angular Material. For the full example, please look at the source code provided in the demo.
app.component.html
<query-builder[(ngModel)]='query' [config]='config'><ng-container*queryButtonGroup="let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet"><buttonmat-button(click)="addRule()">+ Rule</button><buttonmat-button(click)="addRuleSet()">+ Ruleset</button><buttonmat-button(click)="removeRuleSet()">- Ruleset</button></ng-container><ng-container*queryRemoveButton="let rule; let removeRule=removeRule"><buttonmat-icon-buttoncolor="accent" (click)="removeRule(rule)"><mat-icon>remove</mat-icon></button></ng-container><ng-container*querySwitchGroup="let ruleset"><mat-radio-group*ngIf="ruleset" [(ngModel)]="ruleset.condition"><mat-radio-buttonvalue="and">And</mat-radio-button><mat-radio-buttonvalue="or">Or</mat-radio-button></mat-radio-group></ng-container><ng-container*queryField="let rule; let fields=fields; let changeField=changeField"><mat-form-field><mat-select[(ngModel)]="rule.field" (ngModelChange)="changeField($event, rule)"><mat-option*ngFor="let field of fields" [value]="field.value">{{field.name}}</mat-option></mat-select></mat-form-field></ng-container><ng-container*queryOperator="let rule; let operators=operators"><mat-form-field><mat-select[(ngModel)]="rule.operator"><mat-option*ngFor="let value of operators" [value]="value">{{value}}</mat-option></mat-select></mat-form-field></ng-container><!-- Override input component for 'boolean' type --><ng-container*queryInput="let rule; type: 'boolean'"><mat-checkbox[(ngModel)]="rule.value"></mat-checkbox></ng-container><!-- Override input component for 'category' type --><ng-container*queryInput="let rule; let field=field; let options=options; type: 'category'"><mat-form-field><mat-select[(ngModel)]="rule.value" [placeholder]="field.name"><mat-option*ngFor="let opt of options" [value]="opt.value">
{{ opt.name }}
</mat-option></mat-select></mat-form-field></ng-container>
...
</query-builder>
Property Bindings Quick Reference
See documentation for more details on interfaces and properties.
query-builder
Name
Type
Required
Default
Description
allowRuleset
boolean
Optional
true
Displays the + Ruleset button if true.
classNames
object
Optional
CSS class names for different child elements in query-builder component.
config
QueryBuilderConfig
Required
Configuration object for the main component.
data
Ruleset
Optional
(Use ngModel or value instead.)
emptyMessage
string
Optional
Message to display for an empty Ruleset if empty rulesets are not allowed.
ngModel
Ruleset
Optional
Object that stores the state of the component. Supports 2-way binding.
operatorMap
{ [key: string]: string[] }
Optional
Used to map field types to list of operators.
value
Ruleset
Optional
Object that stores the state of the component.
Structural Directives
Use these directives to replace different parts of query builder with custom components.
queryInput
Context Name
Type
Description
$implicit
Rule
Current rule object which contains the field, value, and operator
field
Field
Current field object which contains the field's value and name
options
Option[]
List of options for the field, returned by getOptions
onChange
() => void
Callback to handle changes to the input component
queryOperator
Context Name
Type
Description
$implicit
Rule
Current rule object which contains the field, value, and operator
operators
string[]
List of operators for the field, returned by getOperators
onChange
() => void
Callback to handle changes to the operator component
queryField
Context Name
Type
Description
$implicit
Rule
Current rule object which contains the field, value, and operator
getFields
(entityName: string) => void
Get the list of fields corresponding to an entity
fields
Field[]
List of fields for the component, specified by config
onChange
(fieldValue: string, rule: Rule) => void
Callback to handle changes to the field component
queryEntity
Context Name
Type
Description
$implicit
Rule
Current rule object which contains the field, value, and operator
entities
Entity[]
List of entities for the component, specified by config
onChange
(entityValue: string, rule: Rule) => void
Callback to handle changes to the entity component
querySwitchGroup
Context Name
Type
Description
$implicit
RuleSet
Current rule set object which contain a list of child rules
onChange
() => void
Callback to handle changes to the switch group component
queryEmptyWarning
Context Name
Type
Description
$implicit
RuleSet
Current rule set object which contain a list of child rules
queryButtonGroup
Context Name
Type
Description
$implicit
RuleSet
Current rule set object which contain a list of child rules
addRule
() => void
Function to handle adding a new rule
addRuleSet
() => void
Function to handle adding a new rule set
removeRuleSet
() => void
Function to handle removing the current rule set
queryRemoveButton
Context Name
Type
Description
$implicit
Rule
Current rule object which contains the field, value, and operator