{"_id":"@eliot-ragueneau/ngx-query-builder","_rev":"7-a307ff5c958c08d0011bbba68c4cc7fc","name":"@eliot-ragueneau/ngx-query-builder","dist-tags":{"latest":"20.0.2"},"versions":{"19.0.0":{"name":"@eliot-ragueneau/ngx-query-builder","version":"19.0.0","license":"MIT","_id":"@eliot-ragueneau/ngx-query-builder@19.0.0","maintainers":[{"name":"eliot-ragueneau","email":"eragueneau@ebi.ac.uk"}],"homepage":"https://github.com/EliotRagueneau/ngx-query-builder","bugs":{"url":"https://github.com/EliotRagueneau/ngx-query-builder/issues"},"dist":{"shasum":"cf76cbfe05b7604b22b6e352ef08a6c016536338","tarball":"https://registry.npmjs.org/@eliot-ragueneau/ngx-query-builder/-/ngx-query-builder-19.0.0.tgz","fileCount":21,"integrity":"sha512-I7OlABR0fxCy6DMMFSgiXDS7O3xeV/dkCpDtvlc+CjoDxtWcFp/7BzbCvg+E/2LoLrJ7IDzG8YfMIBlyHqb7eA==","signatures":[{"sig":"MEYCIQDQrlmBXSHCpcQl2GIW8tGwVDT4ZWISk9UwAA1Ff1SI5gIhAPNBLD5FRZ7PYGEU1ARbWCx/Agm+y9uaxJh74AfefeaO","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":211558},"module":"fesm2022/eliot-ragueneau-ngx-query-builder.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/eliot-ragueneau-ngx-query-builder.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"5906df034463310534ed2d61194ba62ae6d6d632","typings":"index.d.ts","_npmUser":{"name":"eliot-ragueneau","actor":{"name":"eliot-ragueneau","type":"user","email":"eragueneau@ebi.ac.uk"},"email":"eragueneau@ebi.ac.uk"},"repository":{"url":"git+https://github.com/EliotRagueneau/ngx-query-builder.git","type":"git"},"_npmVersion":"10.8.1","description":"[](https://badge.fury.io/js/@eliot-ragueneau%2Fngx-query-builder) [](https://i","directories":{},"sideEffects":false,"_nodeVersion":"20.16.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^19.0.0","@angular/common":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-query-builder_19.0.0_1751303620764_0.1117896252138133","host":"s3://npm-registry-packages-npm-production"}},"20.0.0":{"name":"@eliot-ragueneau/ngx-query-builder","version":"20.0.0","license":"MIT","_id":"@eliot-ragueneau/ngx-query-builder@20.0.0","maintainers":[{"name":"eliot-ragueneau","email":"eragueneau@ebi.ac.uk"}],"homepage":"https://github.com/EliotRagueneau/ngx-query-builder","bugs":{"url":"https://github.com/EliotRagueneau/ngx-query-builder/issues"},"dist":{"shasum":"fcef8cbdca7d83e699580a5fc8968207bd9f6779","tarball":"https://registry.npmjs.org/@eliot-ragueneau/ngx-query-builder/-/ngx-query-builder-20.0.0.tgz","fileCount":5,"integrity":"sha512-b7VIK7yFmqwZt8I7gbteI3BQ7T11tVbuYmLkNb+O/eCGdkEThbpFIJLR6GDCCbxK/9rBy19D6CeCdcTEOg6sbg==","signatures":[{"sig":"MEUCICpkLsVlYnI6dkigCX20vMHBe1kV172IxBUXhMtJBQGaAiEA8tqaP+sDxPdBMoRT/VX83T9UOcX5tzNCjawhsaW/9yo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":265172},"module":"fesm2022/eliot-ragueneau-ngx-query-builder.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/eliot-ragueneau-ngx-query-builder.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"ae17d2b861fbfcda2a81925b86206f8105fd6e2e","typings":"index.d.ts","_npmUser":{"name":"eliot-ragueneau","actor":{"name":"eliot-ragueneau","type":"user","email":"eragueneau@ebi.ac.uk"},"email":"eragueneau@ebi.ac.uk"},"repository":{"url":"git+https://github.com/EliotRagueneau/ngx-query-builder.git","type":"git"},"_npmVersion":"10.9.2","description":"[](https://badge.fury.io/js/@eliot-ragueneau%2Fngx-query-builder) [](https://i","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.0.0","@angular/common":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-query-builder_20.0.0_1751379541372_0.8667244678454997","host":"s3://npm-registry-packages-npm-production"}},"19.0.1":{"name":"@eliot-ragueneau/ngx-query-builder","version":"19.0.1","license":"MIT","_id":"@eliot-ragueneau/ngx-query-builder@19.0.1","maintainers":[{"name":"eliot-ragueneau","email":"eragueneau@ebi.ac.uk"}],"homepage":"https://github.com/EliotRagueneau/ngx-query-builder","bugs":{"url":"https://github.com/EliotRagueneau/ngx-query-builder/issues"},"dist":{"shasum":"a00b7a8fc7473f0e6f5c1a1e963b92acc19f984d","tarball":"https://registry.npmjs.org/@eliot-ragueneau/ngx-query-builder/-/ngx-query-builder-19.0.1.tgz","fileCount":23,"integrity":"sha512-9PodosN3QweD0buS371wVW2zbXKMk6dtyjqcPceubxBq8kkhur+pf2kC+mpRwUS4Gizo9z6b3hz6AsfOGmd9mQ==","signatures":[{"sig":"MEUCIB+TFv/QfihChYwc4V8Rbh29TwvInUWnzrniMAAJpKkSAiEAjSwFEUrn9B+WGZQAp9kaLlcVeo9gJlrVMS9hAhsViXI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":272031},"module":"fesm2022/eliot-ragueneau-ngx-query-builder.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/eliot-ragueneau-ngx-query-builder.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"73d05eeb100a83c68c8cba16563e4fddba86d727","typings":"index.d.ts","_npmUser":{"name":"eliot-ragueneau","actor":{"name":"eliot-ragueneau","type":"user","email":"eragueneau@ebi.ac.uk"},"email":"eragueneau@ebi.ac.uk"},"repository":{"url":"git+https://github.com/EliotRagueneau/ngx-query-builder.git","type":"git"},"_npmVersion":"10.9.2","description":"[](https://badge.fury.io/js/@eliot-ragueneau%2Fngx-query-builder) [](https://i","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^19.0.0","@angular/common":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-query-builder_19.0.1_1751379885261_0.9881421849827325","host":"s3://npm-registry-packages-npm-production"}},"19.0.2":{"name":"@eliot-ragueneau/ngx-query-builder","version":"19.0.2","license":"MIT","_id":"@eliot-ragueneau/ngx-query-builder@19.0.2","maintainers":[{"name":"eliot-ragueneau","email":"eragueneau@ebi.ac.uk"}],"homepage":"https://github.com/EliotRagueneau/ngx-query-builder","bugs":{"url":"https://github.com/EliotRagueneau/ngx-query-builder/issues"},"dist":{"shasum":"8b3d79107943711c14800db43bf0d7cf1a521492","tarball":"https://registry.npmjs.org/@eliot-ragueneau/ngx-query-builder/-/ngx-query-builder-19.0.2.tgz","fileCount":23,"integrity":"sha512-UfC2B7vYkPQo3EdsxR/bpF48i4shrjJVkUXPt+ZFiEWZhhkaNAiFuDbYnX4mMux1cds4wDJqLi9cmqKw/6HAqw==","signatures":[{"sig":"MEUCIFJv7N4p6szhlOZfZveS+k+/38VuBwsDrs5EYi4u4HZeAiEAlzyIPO852P/GBnI4xyFFcq1nFbXbE5CpAToyk+4wETA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":272495},"module":"fesm2022/eliot-ragueneau-ngx-query-builder.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/eliot-ragueneau-ngx-query-builder.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"15187f1081583b4355cb4b3552d8fdd25ee2a680","typings":"index.d.ts","_npmUser":{"name":"eliot-ragueneau","actor":{"name":"eliot-ragueneau","type":"user","email":"eragueneau@ebi.ac.uk"},"email":"eragueneau@ebi.ac.uk"},"repository":{"url":"git+https://github.com/EliotRagueneau/ngx-query-builder.git","type":"git"},"_npmVersion":"10.8.1","description":"[](https://badge.fury.io/js/@eliot-ragueneau%2Fngx-query-builder) [](https://i","directories":{},"sideEffects":false,"_nodeVersion":"20.16.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^19.0.0","@angular/common":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-query-builder_19.0.2_1751382032373_0.1739151944552857","host":"s3://npm-registry-packages-npm-production"}},"20.0.1":{"name":"@eliot-ragueneau/ngx-query-builder","version":"20.0.1","license":"MIT","_id":"@eliot-ragueneau/ngx-query-builder@20.0.1","maintainers":[{"name":"eliot-ragueneau","email":"eragueneau@ebi.ac.uk"}],"homepage":"https://github.com/EliotRagueneau/ngx-query-builder","bugs":{"url":"https://github.com/EliotRagueneau/ngx-query-builder/issues"},"dist":{"shasum":"ce808eedc11367005fb869671ea01571c87ad335","tarball":"https://registry.npmjs.org/@eliot-ragueneau/ngx-query-builder/-/ngx-query-builder-20.0.1.tgz","fileCount":5,"integrity":"sha512-exMJWnYPGyMsbJTdh/N0OS7eln+hTg1EckD0d5NADQwqT1QNo2Pu0JU/2i0G9t4pkhiOQPafnrGc73G7Rb0MPQ==","signatures":[{"sig":"MEYCIQCUaLaXUpJop//p9mjEc1bZjwkYVwptHNJw5Spc4KHWZgIhAKDzlgRJH6TAntrpnEfkZRoTsMiQvSBN5uCTOLdCyMqP","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":265679},"module":"fesm2022/eliot-ragueneau-ngx-query-builder.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/eliot-ragueneau-ngx-query-builder.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"ffe58a04801da9540a1d80212f1dcf0e03ff6669","typings":"index.d.ts","_npmUser":{"name":"eliot-ragueneau","actor":{"name":"eliot-ragueneau","type":"user","email":"eragueneau@ebi.ac.uk"},"email":"eragueneau@ebi.ac.uk"},"repository":{"url":"git+https://github.com/EliotRagueneau/ngx-query-builder.git","type":"git"},"_npmVersion":"10.9.2","description":"[](https://badge.fury.io/js/@eliot-ragueneau%2Fngx-query-builder) [](https://i","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.0.0","@angular/common":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-query-builder_20.0.1_1751382464809_0.611386435475239","host":"s3://npm-registry-packages-npm-production"}},"19.0.3":{"name":"@eliot-ragueneau/ngx-query-builder","version":"19.0.3","license":"MIT","_id":"@eliot-ragueneau/ngx-query-builder@19.0.3","maintainers":[{"name":"eliot-ragueneau","email":"eragueneau@ebi.ac.uk"}],"homepage":"https://github.com/EliotRagueneau/ngx-query-builder","bugs":{"url":"https://github.com/EliotRagueneau/ngx-query-builder/issues"},"dist":{"shasum":"806ad1ce1a42c6344212ed9e9c72ca1b57e9112c","tarball":"https://registry.npmjs.org/@eliot-ragueneau/ngx-query-builder/-/ngx-query-builder-19.0.3.tgz","fileCount":23,"integrity":"sha512-Ybib+xjNNkcvEdcQDSwSQxK3Fcx03iFTbOsAdcFmzh2Qw8BK48CjWMKaT63pvuqaNsU5VDTsviBNG7m0nPeTyA==","signatures":[{"sig":"MEQCIHcwFAlR1ltI6D+0tICxEShHbBUxwVrBCmSwSuAvBL8LAiB2hIkITRGHrxMCr+SMs2y+VTm+RiRY7yt14vyiPYBxVA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":272511},"module":"fesm2022/eliot-ragueneau-ngx-query-builder.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/eliot-ragueneau-ngx-query-builder.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"d6015c8f2a71f85affeafbb66ff4cdada43f8235","typings":"index.d.ts","_npmUser":{"name":"eliot-ragueneau","actor":{"name":"eliot-ragueneau","type":"user","email":"eragueneau@ebi.ac.uk"},"email":"eragueneau@ebi.ac.uk"},"repository":{"url":"git+https://github.com/EliotRagueneau/ngx-query-builder.git","type":"git"},"_npmVersion":"10.9.2","description":"[](https://badge.fury.io/js/@eliot-ragueneau%2Fngx-query-builder) [](https://i","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^19.0.0","@angular/common":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-query-builder_19.0.3_1751383541562_0.48389664154267464","host":"s3://npm-registry-packages-npm-production"}},"20.0.2":{"name":"@eliot-ragueneau/ngx-query-builder","version":"20.0.2","repository":{"type":"git","url":"git+https://github.com/EliotRagueneau/ngx-query-builder.git"},"license":"MIT","bugs":{"url":"https://github.com/EliotRagueneau/ngx-query-builder/issues"},"homepage":"https://github.com/EliotRagueneau/ngx-query-builder","peerDependencies":{"@angular/common":"^20.0.0","@angular/core":"^20.0.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/eliot-ragueneau-ngx-query-builder.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/eliot-ragueneau-ngx-query-builder.mjs"}},"_id":"@eliot-ragueneau/ngx-query-builder@20.0.2","gitHead":"7f7420228e5595a3bbb17715b587dbf4545edf1a","description":"[](https://badge.fury.io/js/@eliot-ragueneau%2Fngx-query-builder) [](https://i","_nodeVersion":"22.17.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-jvDkeCM3jQ4UtkM+6T21zy5IAZCAXoBhKX0UVoWbyfiLzv/TqLJ5ai8TDo/8kS6dzIMDuaJe4/TuZwG/aFQi3A==","shasum":"48ef3344c762bf51e4826e64a8ff65436f672e0e","tarball":"https://registry.npmjs.org/@eliot-ragueneau/ngx-query-builder/-/ngx-query-builder-20.0.2.tgz","fileCount":5,"unpackedSize":265695,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCorW2akUOOIF0t6oLCOVvtFbzUSIMU1YwlHN0ck+ZGzQIgdUI6XygihFUB1yR4iZB3e08lZs0zhwxkZ1ECIFgGyJ4="}]},"_npmUser":{"name":"eliot-ragueneau","email":"eragueneau@ebi.ac.uk","actor":{"name":"eliot-ragueneau","email":"eragueneau@ebi.ac.uk","type":"user"}},"directories":{},"maintainers":[{"name":"eliot-ragueneau","email":"eragueneau@ebi.ac.uk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-query-builder_20.0.2_1751383689126_0.04778721628645077"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-30T17:13:40.645Z","modified":"2025-07-01T15:28:09.503Z","19.0.0":"2025-06-30T17:13:40.998Z","20.0.0":"2025-07-01T14:19:01.592Z","19.0.1":"2025-07-01T14:24:45.459Z","19.0.2":"2025-07-01T15:00:32.563Z","20.0.1":"2025-07-01T15:07:44.974Z","19.0.3":"2025-07-01T15:25:41.754Z","20.0.2":"2025-07-01T15:28:09.318Z"},"bugs":{"url":"https://github.com/EliotRagueneau/ngx-query-builder/issues"},"license":"MIT","homepage":"https://github.com/EliotRagueneau/ngx-query-builder","repository":{"type":"git","url":"git+https://github.com/EliotRagueneau/ngx-query-builder.git"},"description":"[](https://badge.fury.io/js/@eliot-ragueneau%2Fngx-query-builder) [](https://i","maintainers":[{"name":"eliot-ragueneau","email":"eragueneau@ebi.ac.uk"}],"readme":"# ngx-query-builder\n\n[](https://badge.fury.io/js/@eliot-ragueneau%2Fngx-query-builder)\n[](https://img.shields.io/npm/dm/@eliot-ragueneau%2Fngx-query-builder.svg)\n[](https://img.shields.io/npm/dt/@eliot-ragueneau%2Fngx-query-builder.svg)\n[](https://gitpod.io/#https://github.com/EliotRagueneau/ngx-query-builder)\n\nA 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.\n\n***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.***\n\n# Getting Started\n\n## Install\n\n- Angular 20, use 20.X.X\n- Angular 19, use 19.X.X\n\n`npm install @eliot-ragueneau/ngx-query-builder`\n\n---\n\n- Angular 9, use 0.6.0\n- Angular 8, use 0.5.1\n- Angular 6-7, use 0.4.2\n- Angular 4-5, use 0.3.2\n\n`npm install angular2-query-builder`\n\nSee https://github.com/zebzhao/Angular-QueryBuilder for more details on the usage of the old version.\n\n# Examples\n\n## Basic Usage\n\n##### `app.module.ts`\n\n```javascript\nimport {QueryBuilderModule} from \"@eliot-ragueneau/ngx-query-builder\";\nimport {AppComponent} from \"./app.component\"\n\n@NgModule({\n imports: [...,\n QueryBuilderModule,\n IonicModule.forRoot(AppComponent) // (Optional) for IonicFramework 2+\n]})\nexport class AppModule {\n}\n```\n\n##### `app.component.html`\n\n```html\n...\n\n...\n```\n\n##### `app.component.ts`\n\n```javascript\nimport {QueryBuilderConfig} from '@eliot-ragueneau/ngx-query-builder';\n\nexport class AppComponent {\n query = {\n condition: 'and',\n rules: [\n {field: 'age', operator: '<=', value: 'Bob'},\n {field: 'gender', operator: '>=', value: 'm'}\n ]\n };\n\n config: QueryBuilderConfig = {\n fields: {\n age: {name: 'Age', type: 'number'},\n gender: {\n name: 'Gender',\n type: 'category',\n options: [\n {name: 'Male', value: 'm'},\n {name: 'Female', value: 'f'}\n ]\n }\n }\n }\n}\n```\n\n## Custom Input Components\n\n##### `app.component.html`\n\n```html\n\n\n \n \n \n\n```\n\n##### `app.component.ts`\n\n```javascript\nquery = {\n condition: 'and',\n rules: [\n {field: 'birthday', operator: '=', value: new Date()}\n ]\n};\n\nconfig: QueryBuilderConfig = {\n fields: {\n birthday: {\n name: 'Birthday',\n type: 'date',\n operators: ['=', '<=', '>'],\n defaultValue: () => new Date()\n }\n }\n}\n```\n\n## Property Bindings Quick Reference\n\n#### `ngx-query-builder`\n\n| Name | Type | Required | Default | Description |\n|:-----------------------------------|:-------------------------------------------------------------------------------------------------------|:---------|:--------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `allowRuleset` | `boolean` | Optional | `true` | Displays the `+ Ruleset` button if `true`. |\n| `allowCollapse` | `boolean` | Optional | `false` | Enables collapsible rule sets if `true`. |\n| `classNames` | [`QueryBuilderClassNames`](/projects/ngx-query-builder/src/lib/models/query-builder.interfaces.ts#L48) | Optional | | CSS class names for different child elements in `query-builder` component. |\n| `config` | [`QueryBuilderConfig`](/projects/ngx-query-builder/src/lib/models/query-builder.interfaces.ts#L85) | Required | | Configuration object for the main component. |\n| `data` | [`Ruleset`](/projects/ngx-query-builder/src/lib/models/query-builder.interfaces.ts) | Optional | { condition: 'and', rules: [] } | (Use `ngModel` or `value` instead.) |\n| `emptyMessage` | `string` | Optional | | Message to display for an empty Ruleset if empty rulesets are not allowed. |\n| `ngModel` | [`Ruleset`](/projects/ngx-query-builder/src/lib/models/query-builder.interfaces.ts) | Optional | { condition: 'and', rules: [] } | Object that stores the state of the component. Supports 2-way binding. |\n| `operatorMap` | `{ [key: string]: string[] }` | Optional | | Used to map field types to list of operators. |\n| `persistValueOnFieldChange` | `boolean` | Optional | `false` | If `true`, when a field changes to another of the same type, and the type is one of: string, number, time, date, or boolean, persist the previous value. This option is ignored if config.calculateFieldChangeValue is provided. |\n| `config.calculateFieldChangeValue` | `(currentField: Field, nextField: Field, currentValue: any) => any` | Optional | | Used to calculate the new value when a rule's field changes. |\n| `value` | [`Ruleset`](/projects/ngx-query-builder/src/lib/models/query-builder.interfaces.ts) | Optional | { condition: 'and', rules: [] } | Object that stores the state of the component. |\n\n## Structural Directives\n\nUse these directives to replace different parts of query builder with custom components.\n\n#### `queryArrowIcon`\n\nDirective to replace the expand arrow used in collapse/accordion mode of the query builder.\n\n| Context Name | Type | Description |\n|:-------------------|:----------------|:------------------------------------------------------------|\n| `$implicit` | `RuleSet` | Current rule set object which contain a list of child rules |\n| `getDisabledState` | `() => boolean` | Retrieves or determines the disabled state of the component |\n\n#### `querySwitchGroup`\n\nUseful 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.\n\n| Context Name | Type | Description |\n|:-------------------|:----------------|:------------------------------------------------------------|\n| `$implicit` | `RuleSet` | Current rule set object which contain a list of child rules |\n| `onChange` | `() => void` | Callback to handle changes to the switch group component |\n| `getDisabledState` | `() => boolean` | Retrieves or determines the disabled state of the component |\n\n#### `queryButtonGroup`\n\nFor replacing the default button group for Add, Add Ruleset, Remove Ruleset buttons.\n\n| Context Name | Type | Description |\n|:-------------------|:----------------|:------------------------------------------------------------|\n| `$implicit` | `RuleSet` | Current rule set object which contain a list of child rules |\n| `parentValue` | `RuleSet` | For parent node's data if exists |\n| `addRule` | `() => void` | Function to handle adding a new rule |\n| `addRuleSet` | `() => void` | Function to handle adding a new rule set |\n| `removeRuleSet` | `() => void` | Function to handle removing the current rule set |\n| `getDisabledState` | `() => boolean` | Retrieves or determines the disabled state of the component |\n\n#### `queryRulesetAddRuleButton`\n\nFor replacing the default button for Add Rule.\n\n| Context Name | Type | Description |\n|:-------------------|:----------------|:------------------------------------------------------------|\n| `$implicit` | `RuleSet` | Current rule set object which contain a list of child rules |\n| `addRule` | `() => void` | Function to handle adding a new rule |\n| `getDisabledState` | `() => boolean` | Retrieves or determines the disabled state of the component |\n\n#### `queryRulesetAddRulesetButton`\n\nFor replacing the default button for Add Ruleset.\n\n| Context Name | Type | Description |\n|:-------------------|:----------------|:------------------------------------------------------------|\n| `$implicit` | `RuleSet` | Current rule set object which contain a list of child rules |\n| `addRuleSet` | `() => void` | Function to handle adding a new rule set |\n| `getDisabledState` | `() => boolean` | Retrieves or determines the disabled state of the component |\n\n#### `queryRulesetRemoveButton`\n\nFor replacing the default button for Remove Ruleset.\n\n| Context Name | Type | Description |\n|:-------------------|:----------------|:------------------------------------------------------------|\n| `$implicit` | `RuleSet` | Current rule set object which contain a list of child rules |\n| `removeRuleSet` | `() => void` | Function to handle removing the current rule set |\n| `getDisabledState` | `() => boolean` | Retrieves or determines the disabled state of the component |\n\n#### `queryEntity`\n\nUsed to replace entity selection component.\n\n| Context Name | Type | Description |\n|:-------------------|:--------------------------------------------|:------------------------------------------------------------------|\n| `$implicit` | `Rule` | Current rule object which contains the field, value, and operator |\n| `entities` | `Entity[]` | List of entities for the component, specified by `config` |\n| `onChange` | `(entityValue: string, rule: Rule) => void` | Callback to handle changes to the entity component |\n| `getDisabledState` | `() => boolean` | Retrieves or determines the disabled state of the component |\n\n#### `queryField`\n\nUsed this directive to replace the query field selection component.\n\n| Context Name | Type | Description |\n|:-------------------|:-------------------------------------------|:------------------------------------------------------------------|\n| `$implicit` | `Rule` | Current rule object which contains the field, value, and operator |\n| `getFields` | `(entityName: string) => void` | Get the list of fields corresponding to an entity |\n| `fields` | `Field[]` | List of fields for the component, specified by `config` |\n| `onChange` | `(fieldValue: string, rule: Rule) => void` | Callback to handle changes to the field component |\n| `getDisabledState` | `() => boolean` | Retrieves or determines the disabled state of the component |\n\n#### `queryOperator`\n\nUsed to replace the query operator selection component.\n\n| Context Name | Type | Description |\n|:-------------------|:----------------|:------------------------------------------------------------------|\n| `$implicit` | `Rule` | Current rule object which contains the field, value, and operator |\n| `operators` | `string[]` | List of operators for the field, returned by `getOperators` |\n| `onChange` | `() => void` | Callback to handle changes to the operator component |\n| `getDisabledState` | `() => boolean` | Retrieves or determines the disabled state of the component |\n\n#### `queryInput`\n\nUsed to replace the input component. Specify the type/queryInputType to match specific field types to input template.\n\n| Context Name | Type | Description |\n|:-------------------|:----------------|:------------------------------------------------------------------|\n| `$implicit` | `Rule` | Current rule object which contains the field, value, and operator |\n| `field` | `Field` | Current field object which contains the field's value and name |\n| `options` | `Option[]` | List of options for the field, returned by `getOptions` |\n| `onChange` | `() => void` | Callback to handle changes to the input component |\n| `getDisabledState` | `() => boolean` | Retrieves or determines the disabled state of the component |\n\n#### `queryRuleRemoveButton`\n\nDirective to replace the default remove single rule button component.\n\n| Context Name | Type | Description |\n|:-------------------|:-----------------------|:------------------------------------------------------------------|\n| `$implicit` | `Rule` | Current rule object which contains the field, value, and operator |\n| `removeRule` | `(rule: Rule) => void` | Function to handle removing a rule |\n| `getDisabledState` | `() => boolean` | Retrieves or determines the disabled state of the component |\n\n#### `queryEmptyWarning`\n\nCan be used to customize the default empty warning message, alternatively can specify the `emptyMessage` property binding.\n\n| Context Name | Type | Description |\n|:-------------------|:----------------|:------------------------------------------------------------|\n| `$implicit` | `RuleSet` | Current rule set object which contain a list of child rules |\n| `message` | `string` | Value passed to `emptyMessage` |\n| `getDisabledState` | `() => boolean` | Retrieves or determines the disabled state of the component |\n\n## Dependencies\n\n- Angular 18+\n\n# Development\n\n## dev\n\n* `pnpm watch`\n* `pnpm start`\n* vist http://localhost:4200 to see the demo\n\n### demo preview\n\n\n\n\n### Code structure\n\n- BaseQueryBuilder (Logic container - hidden)\n - QueryBuilderComponent (Root component - **exported**)\n - InnerQueryBuilderComponent (Recursive component - hidden)\n\n## build\n\n* `pnpm build`\n\n## publish\n\n```bash\ncd dist/ngx-query-builder\nnpm publish --access public\n```\n\n## For use in other local projects\n\n```bash\ncd dist/ngx-query-builder\nnpm link\n\ncd /path/to/other/project\nnpm link ngx-query-builder\n```\n\nThat's it.\n","readmeFilename":"README.md"}