skills.rest
dereekb
dereekbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

dbx-filter

Manage reactive filter state in Angular apps using RxJS observables.

13|Updated Jan 7, 2022
Search Tags:#angular#state-management#presets#reactive#rxjs#filter-map
One-click install
npx skills add https://github.com/dereekb/dbx-components --skill dbx-filter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dbx-filter
Source: https://github.com/dereekb/dbx-components/tree/main/.agent/skills/dereekb-dbx-filter
Command: npx skills add https://github.com/dereekb/dbx-components --skill dbx-filter

SYSTEM DOCUMENTATION & REQUIREMENTS

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' }));

Frequently Asked Questions about dbx-filter

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I share reactive filter state across Angular components?▼

To share reactive filter state across Angular components, use a centralized FilterMap that holds multiple filter keys and exposes RxJS observables, allowing synchronized filtering across complex interfaces.

Does this reactive filter system support default values and presets?▼

This reactive filter system supports default values via addDefaultFilterObs and includes preset support, allowing quick filter configurations and partial presets for centralized state management.

How do I connect UI components to a centralized FilterMap in Angular?▼

You connect UI components to a centralized FilterMap in Angular using connector directives and FilterSource utilities, linking components to observe and update synchronized filter observables.

Can I observe specific filter keys using RxJS observables in Angular?▼

You can observe specific filter keys using RxJS observables in Angular by calling filterForKey on the FilterMap, exposing type-safe filter definitions for synchronized component updates.

What is the best way to manage complex filter state in Angular without prop drilling?▼

The best way to manage complex filter state in Angular without prop drilling is using a reactive FilterMap with RxJS observables, providing centralized filter state directly to components via connector directives.

Related Skills

Explore More Software Engineering Skills→
dereekbdereekb
13

dbx-value-pipes

Provides Angular template pipes for formatting, truncation, and observable conversion.

Community
Intermediate
IgniteUIIgniteUI
47

igniteui-angular-components

Provide UI components for Angular applications with reactive forms support.

Official
Intermediate
dereekbdereekb
13

dbx-core

Provide foundational Angular utilities for routing, storage, context, and authentication.

Community
Intermediate
shalevaminshalevamin

angular-architect

Generate Angular 17+ standalone components with NgRx state management and routing.

Community
Advanced