dbx-filter

What problem does it solve?

dbx-filter provides a reactive filter state management system for Angular applications, enabling components to share and manage filter state using RxJS observables, with support for multiple filter keys, default values, presets, and connector directives.

Core Features & Use Cases

• Centralized FilterMap that holds multiple filter keys and exposes observables per key.
• Filter sources and connector directives to link components and synchronize filters.
• Preset and partial preset support for quick filter configurations.
• Type-safe filter definitions and easy observability via filterForKey and default filter observables.
• Integrates with DBX Web UI components for displaying and interacting with filters.

Quick Start

Install and import the core utilities, provide FilterMap at the component level, define a filter interface and a key, then observe and update filters:

• Create a filter interface, e.g. interface MyFilter { search?: string; status?: 'active'|'archived'; }
• Use const filterMap = inject(FilterMap<MyFilter>); and this.filterMap.filterForKey('main') to observe filters.
• Set defaults with this.filterMap.addDefaultFilterObs('main', of({ status: 'active' }));