"between" operator for numbers

[adanlessossi]

First of all thank you for this great library.
I am using it to build a rule application and the requirements are to implement an operator for 2 numbers. e.g. : "value between number1 and number2"
How could i do this using angular-query-builder?
Any help/feedback will be greatly appreciated.
Thank you in advance.

[vanilsonbr]

Hi. I know it's a little bit too late now and idk if you haven't implemented that yet, but that operation can be done with some custom code.

So suppose you have a config like this one:

config: QueryBuilderConfig = {
    fields: {
      age: {name: 'Age', type: 'number', operators: [">", ">=", "<", "<=", "=", "!=", "InBetween"] }
    }
}

And your query is this one:

query = {
    condition: 'and',
    rules: [
      {field: 'age', operator: 'InBetween', value: 28},
    ]
  };

Note that I'm adding "InBetween" as an operation so that you can select it in the operation dropdown.
The next step is to detect that the operation "InBetween" is selected for the Rule and load different html for it:

<ng-container *queryInput="let rule; type: 'number'">
    <ng-container *ngIf="rule.operator === 'InBetween'">
        <input [(ngModel)]="rule.value[0]" type="number" /> to 
        <input [(ngModel)]="rule.value[1]" type="number" />
    </ng-container>
    <ng-container *ngIf="rule.operator !== 'InBetween'">
        <input [(ngModel)]="rule.value" type="number" />
    </ng-container>
</ng-container>

It will display two number inputs when the operation is "InBetween"

Note here that for the operation "InBetween" i'm assuming the rule.value is an array of two numbers. Otherwise it is a number.
For query-builder to handle that situation, you have to prepare rule.value properly when the operation is changed. You can do it like so:

<ng-container *queryOperator="let rule; let operators=operators;">
    <select [(ngModel)]="rule.operator" (ngModelChange)="ruleOperationChanged(rule)" >
        <option *ngFor="let operator of operators" [value]="operator">{{operator}}</option>
    </select>
</ng-container>

// on component.ts, treat value properly when operators is custom
ruleOperationChanged(rule: Rule) {
    if(rule.operator === "InBetween)
        rule.value = [];
    else
        rule.value = null; 
}

Hope it helps!

[georgetrad]

Thank you for this solution but I wanted to point out to a syntax error on this snippet.

<ng-container *queryInput="let rule; type='number'">
    <ng-container *ngIf="rule.operator === 'InBetween'">
        <input [(ngModel)]="rule.value[0]" type="number" /> to 
        <input [(ngModel)]="rule.value[1]" type="number" />
    </ng-container>
    <ng-container *ngIf="rule.operator !== 'InBetween'">
        <input [(ngModel)]="rule.value" type="number" />
    </ng-container>
</ng-container>

The first line needs to be fixed to use a : instead of the = for the type attribute.

<ng-container *queryInput="let rule; type:'number'">

[vanilsonbr]

Fixed it! Thanks for the reply.

[govthamreddy]

Hi,
Do you have a stackblitz link for the above code?