JsonLogicEditor
Install and Imports
Step 1 Install :
ngx-bootstrap
| ngx-bootstrap | Angular | Bootstrap CSS |
|---|---|---|
| 8.0.0 | 12.x.x - 13.x.x | 5.x.x or 4.x.x or 3.x.x |
| 7.1.0 | 11.x.x - 12.x.x | 5.x.x or 4.x.x or 3.x.x |
| 7.0.0 | 11.x.x - 12.x.x | 3.x.x or 4.x.x |
| 6.0.0 | 9.x.x - 10.x.x | 3.x.x or 4.x.x |
| 5.6.x | 7.x.x - 9.1.0 | 3.x.x or 4.x.x |
| 5.0.0 - 5.6.0 | 7.x.x - 8.x.x | 3.x.x or 4.x.x |
| 4.x.x | 6.x.x - 7.x.x | 3.x.x or 4.x.x |
| 3.x.x | 6.x.x - 7.x.x | 3.x.x or 4.x.x |
| 2.x.x | 2.x.x - 4.x.x | 3.x.x or 4.x.x |
| 1.x.x | 2.x.x | 3.x.x or 4.x.x |
npm install ngx-bootstrap --save
Ng-Select
npm install --save @ng-select/ng-select
Step 2: Include a theme:
style.css: @import "~@ng-select/ng-select/themes/default.theme.css";Step 3: Add this bootsrap link to your index.html :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We">
<link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">Step 4: Import the JsonLogicEditorModule in App module:
import { JsonLogicEditorModule } from "projects/json-logic-editor/src/public-api";
@NgModule({
declarations: [AppComponent],
imports: [JsonLogicEditorModule,NgSelectModule, BsDatepickerModule.forRoot(),]
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}Step 5: App Module.html
<jsonlogic-expression-editor
[jsonLogic]="logic"
[functions]="functions"
[variables]="variables"
></jsonlogic-expression-editor>Component Inputs:
jsonLogic :
[jsonLogic]="{"and":[{"==":[{"cat":["Hello ","World"]},"Hello World"]}]}"
[functions] :
import { ICheckExpressionFieldLookUp } from 'json-logic-editor';
functions: ICheckExpressionFieldLookUp[];[variables] :
import { ICheckExpressionFieldLookUp } from 'json-logic-editor';
variables :ICheckExpressionFieldLookUp[];Interface
export interface ICheckExpressionFieldLookUp {
label?: string;
name?: string;
value: any;
type: string | null | undefined; // it will be null if controlerType is "function" And it will not be null if controlerType is "variable" or "value"
controlType?: string; // it will be "function" ,"variable", "value" only
returnType?: string; // it will be null if the controllerType is "variable" or "value" and it will not be null if controlerType is "function"
padding?: number;
parameters?: ICheckExpressionFieldLookUp[];
}Example
functions:ICheckExpressionFieldLookUp[];
variables:ICheckExpressionFieldLookUp[];
@ViewChild('jsonEditor') jsonEditor : JsonlogicExpressionEditorComponent ;
logic='';
this.functions = [
{
name: "substring",
controlType: "function",
type: null,
returnType: "string",
parameters: [
{
name: "string",
type: "string",
controlType: null,
returnType: null,
parameters: null,
},
{
name: "number",
type: "number",
returnType: null,
controlType: null,
parameters: null,
},
{
name: "length?",
type: "number",
returnType: null,
controlType: null,
parameters: null,
},
],
},
{
name: "floor",
returnType: "number",
controlType: "function",
type: null,
parameters: [
{
name: "number",
type: "number",
controlType: null,
parameters: null,
returnType: null,
},
],
},
{
name: "cat",
returnType: "string",
controlType: "function",
type: null,
parameters: [
{
name: "string1",
type: "string",
controlType: null,
parameters: null,
returnType: null,
},
{
name: "string2",
type: "string",
controlType: null,
parameters: null,
returnType: null,
},
],
},
];
this.variables = [
{
label: "variable1",
name: "variable1",
value: "variable1",
type: "string",
controlType: "variable",
returnType: null,
padding: 0,
parameters: null,
},
{
label: "variable2",
name: "variable2",
value: "variable2",
type: "string",
controlType: "variable",
returnType: null,
padding: 0,
parameters: null,
},
{
label: "variable3",
name: "variable3",
value: "variable3",
type: "string",
controlType: "variable",
returnType: null,
padding: 0,
parameters: null,
},
];
getJsonLogic()
{
console.log( this.jsonEditor.getJsonLogic());
}Further help
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.