NGX Rule Builder

ngx-rule-builder is a light-weight Angular Rule Builder component. It allows creating conditional rules visually using AND/OR logic, operators, and values.

Features

• Supports nested rule groups (AND, OR)
• Customizable via @Input() for columns, operators, and values
• Emits structured rule data using @Output()
• Fully styleable using Tailwind or custom classes
• Built for modern Angular (v20+ with Standalone API)

Installation

npm i ngx-rule-builder

Usage

import { Component } from '@angular/core';
import { DropdownData,ExpGroup, NgxRuleBuilder  } from 'ngx-rule-builder';

@Component({
  selector: 'app-root',
  imports: [NgxRuleBuilder],
  template: `
    <ngx-rule-builder
    [dropdownData]="dropdownData"
    [value]="value"
    (onChange)="handleOnChange($event)"
    />
  `,
})
export class App {
  dropdownData:DropdownData = [...] // Dropdown Data
  value: ExpGroup[] = [...] // Init. Value

  handleOnChange(value: ExpGroup[]) {
   // Emitted event on rule change
    console.log(`Received value from 'ngx-rule-builder'\n`, value);
  }
}

LICENSE

ngx-rule-builder is licensed under the MIT License.