@masterteam/formula-builder

A powerful Formula Builder component for Angular 20+ with Tailwind CSS 4.

Features

• ✅ Visual Block Editor - Make.com-inspired formula editing experience
• ✅ 42+ Built-in Functions - Math, Logic, Aggregation, Hierarchy, Date, String
• ✅ Real-time Validation - Syntax checking with error highlighting
• ✅ Context-aware Autocomplete - Smart suggestions as you type
• ✅ Drag & Drop - Visual block manipulation with Angular CDK
• ✅ Property References - @PropertyKey, *.PropertyKey, $.Parent.PropertyKey

Installation

pnpm add @masterteam/formula-builder

Usage

import { FormulaBuilder, type FormulaBuilderValue } from '@masterteam/formula-builder';
import { FormsModule } from '@angular/forms';

@Component({
  imports: [FormsModule, FormulaBuilder],
  template: `
    <mt-formula-builder
      [(ngModel)]="formulaState"
      [levelSchemaId]="levelSchemaId"
      (validationChange)="onValidation($event)"
    />
  `
})
export class MyComponent {
  formulaState: FormulaBuilderValue = { expression: '', builder: [] };
  levelSchemaId = 6;
}

API

Inputs

| Input | Type | Description | |-------|------|-------------| | ngModel / formControl | FormulaBuilderValue | Form value { expression, builder } (builder is token JSON array) | | propertiesByPath | Record<string, { key: string; name?: string }[]> | Scoped properties (optional) | | levelSchemaId | number | Level schema ID for validation context | | templateId | number | Template ID for validation context | | placeholder | string | Placeholder text | | hideToolbar | boolean | Hide the top toolbar | | hideStatusBar | boolean | Hide the status bar |

Outputs

| Output | Type | Description | |--------|------|-------------| | validationChange | ValidationResult | Emits validation results | | tokensChange | FormulaToken[] | Emits when tokens change |

Development

pnpm build:formula-builder