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.
npm install angular2-query-builder
Play with the demo here.
import { QueryBuilderModule } from "angular2-query-builder";
import { AppComponent } from "./app.component"
@NgModule(imports: [
...,
QueryBuilderModule,
IonicModule.forRoot(AppComponent) // (Optional) for IonicFramework 2+
])
export class AppModule { }
...
<query-builder [(ngModel)]='query' [config]='config'></query-builder>
...
import { QueryBuilderConfig } from 'angular2-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'}
]
}
}
}
}
<query-builder [(ngModel)]='query' [config]='config'>
<ng-container *queryInput="let rule; type: 'date'">
<custom-datepicker [(ngModel)]="rule.value"></custom-datepicker>
</ng-container>
</query-builder>
query = {
condition: 'and',
rules: [
{field: 'birthday', operator: '=', value: new Date()}
]
};
config: QueryBuilderConfig = {
fields: {
birthday: {name: 'Birthday', type: 'date', operators: ['=', '<=', '>']
defaultValue: (() => return new Date())
},
}
}
<query-builder [(ngModel)]='query' [config]='config' [classNames]='classNames'></query-builder>
classNames: QueryBuilderClassNames = {
removeIcon: 'fa fa-minus',
addIcon: 'fa fa-plus',
button: 'btn',
buttonGroup: 'btn-group',
rightAlign: 'order-12 ml-auto',
switchRow: 'd-flex px-2',
switchGroup: 'd-flex align-items-center',
switchRadio: 'custom-control-input',
switchLabel: 'custom-control-label',
switchControl: 'custom-control custom-radio custom-control-inline',
row: 'row p-2 m-1',
rule: 'border',
ruleSet: 'border',
invalidRuleSet: 'alert alert-danger',
operatorControl: 'form-control',
operatorControlSize: 'col-auto px-0',
fieldControl: 'form-control',
fieldControlSize: 'col-auto',
inputControl: 'form-control',
inputControlSize: 'col-auto'
}
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.
<query-builder [(ngModel)]='query' [config]='config'>
<ng-container *queryButtonGroup="let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet">
<button mat-button (click)="addRule()">+ Rule</button>
<button mat-button (click)="addRuleSet()">+ Ruleset</button>
<button mat-button (click)="removeRuleSet()">- Ruleset</button>
</ng-container>
<ng-container *queryRemoveButton="let rule; let removeRule=removeRule">
<button mat-icon-button color="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-button value="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>
See documentation for more details on interfaces and properties.
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.) |
|
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. |
Use these directives to replace different parts of query builder with custom components.
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 |
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 |
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 |
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 |
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 |
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 |
Context Name | Type | Description |
---|---|---|
$implicit |
Rule |
Current rule object which contains the field, value, and operator |
removeRule |
(rule: Rule) => void |
Function to handle removing a rule |
- Angular 4+
That's it.
See the angular-library-seed project for details on how to build and run tests.