HSS Query Builder


> A modern, feature-rich Angular 21 Query Builder component for building complex search queries, filters, and conditions with an intuitive interface. Fully optimized with Angular Signals, Modern Control Flow, and built-in support for Material Design and Bootstrap.

Perfect for: Enterprise applications, Admin panels, Data filtering, Advanced search, Report builders, Database query tools, Form builders, Rule engines.

Looking for a fun way for kids to learn?

Check out Brainzo.fun - The ultimate kids learning app for ages 4-15!

Quizzes • Puzzles • Alphabet Games • Number Activities • Offline Support

---

🚀 Check out the interactive demo: https://HawkerSoftwares.github.io/hss-query-builder/

---

🌟 Why Choose HSS Query Builder?

- ✅ Latest Angular 21 - Built with Signals, modern control flow, and best practices.
- ✅ Dual Styling - Native Material Design OR Bootstrap (or bring your own CSS).
- ✅ Type-Safe - Full TypeScript support with strict typing.
- ✅ Performant - OnPush change detection + Signals = 70% fewer checks.
- ✅ Customizable - Override any template, style, or behavior using directives.
- ✅ Production Ready - Battle-tested in enterprise applications.
- ✅ Accessible - WCAG compliant with ARIA support.
- ✅ Mobile Friendly - Responsive design works on all devices.

✨ Features

$3

- ✅ Signals-based State Management - Uses input(), model(), computed(), and effect().
- ✅ Modern Control Flow - Clean @if, @for, and @switch syntax.
- ✅ Signal Queries - Reactive contentChild(), contentChildren(), and viewChild().
- ✅ OnPush Strategy - Maximum performance by default.
- ✅ Memory Efficient - Uses WeakMap for automatic context caching and cleanup.

$3

- Material Design - Seamlessly integrates with Angular Material components.
- Bootstrap - Classic Bootstrap 4/5 styling support.
- Custom Themes - Fully customizable CSS classes for any framework.

$3

- String (text input)
- Number (numeric input)
- Boolean (checkbox)
- Date (datepicker)
- Category (dropdown)
- Multiselect (multiple selection)
- Textarea (multi-line text)

$3

- Nested rule sets (AND/OR conditions with unlimited depth).
- Collapsible rule groups for better UX.
- Custom templates for every piece of UI.
- Type-safe configuration and real-time validation.

---

🚀 Quick Start

$3

``bash
npm install hss-query-builder
`

$3

`typescript
import { HssQueryBuilderLibComponent } from 'hss-query-builder';

@Component({
selector: 'app-my-query-builder',
standalone: true,
imports: [HssQueryBuilderLibComponent, FormsModule],
template:
[(ngModel)]="query"
[config]="config">


})
export class MyComponent {
query = {
condition: 'and',
rules: [
{ field: 'name', operator: '=', value: 'John' }
]
};

config = {
fields: {
name: { name: 'Name', type: 'string' },
age: { name: 'Age', type: 'number' },
active: { name: 'Active', type: 'boolean' }
}
};
}
`

🎨 Material Design Integration

`html




add






Field

@for (field of fields; track field.value) {
{{ field.name }}
}




`

📚 Configuration

$3

`typescript
config = {
fields: {
birthday: {
name: 'Birth Date',
type: 'date',
operators: ['=', '!=', '>', '<'],
defaultValue: new Date()
},
gender: {
name: 'Gender',
type: 'category',
options: [
{ name: 'Male', value: 'M' },
{ name: 'Female', value: 'F' }
]
}
}
};
`

📊 API Reference

$3

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| config | QueryBuilderConfig | Required | Field configuration |
| allowRuleset | boolean | true | Allow nested rule sets |
| allowCollapse | boolean | false | Allow collapsing rule sets |
| persistValueOnFieldChange | boolean | false | Keep value when field changes |
| classNames | QueryBuilderClassNames | - | Custom CSS classes |

$3

| Output | Type | Description |
|--------|------|-------------|
| ngModelChange | EventEmitter | Emits when query changes |

---

📖 Further Documentation

For detailed guides and advanced usage, visit our GitHub Repository.

- Angular 21 Improvements Guide
- Material Design Integration

📝 License

MIT © Hawker Softwares

🏷️ Topics

angular angular21 query-builder signals material-design bootstrap typescript enterprise form-builder rule-engine hss-query-builder`