Dynamic filtering

Filtering made a whole lot easier
Report a bug · Request a feature

Dynamic filtering 🔎

Dynamic Filtering is a package that provides classes, interfaces, components, and services for managing filters in applications. It allows developers to create and apply filters dynamically, enabling the addition, removal, and modification of filters at runtime. The package supports building complex filter logic that is useful for data querying, search functionalities, and user-defined filtering rules.

Features include:

• Classes and Interfaces: A base set of classes and interfaces for common filters supporting extension with your implementation.
• Components: UI component for managing everything filter-related.
• Services: Manage filter states, listen to changes, and programmatically add new filters.

Installing ⬇️

npm install @dynamic-filtering/core

You only need to run the command below if you want to use the (Angular) components.

npm install @dynamic-filtering/components

Usage 🕑

The app-filter-manager component is the visual component for adding, removing, and displaying your defined and to-be-defined filters (part of the components package). Using it is pretty easy. You only need to provide the initial filters (active or inactive ones) and your mapping between the filter types and your filter components:

<app-filter-manager [filters]="filters" [componentMap]="componentMap"></app-filter-manager>

Don't forget to import the component in your component file or module.

Most logic performed by the app filter manager is also accessible through its manager service (part of the core package). Using it is as easy as injecting it into your component. For example:

constructor(protected readonly filterManagerService: FilterManagerService) {}

The manager service exposes useful properties like the currently active filters and conditions. Hooking into changes to these properties is pretty easy by utilizing Observables. Listening to these changes might look something as follows:

constructor(protected readonly filterManagerService: FilterManagerService) {
        this.filterManagerService.activeConditions$
            .pipe(takeUntil(this.destroy$))
            .subscribe((conditions: Condition<unknown, Operation>[]) => {
                // Do something with the active conditions (for example make an api request)
            });
    }

Angular example:

constructor(protected readonly filterManagerService: FilterManagerService) {
        this.activeConditions = toSignal(
            this.filterManagerService.activeConditions$,
            { initialValue: [] },
        );

        effect(() => {
            const activeConditions = this.activeConditions();
            // Do something with the active conditions (for example make an api request)
        });
    }

The active conditions resulting from the filters will need to be parsed into a useful format at some point. To do this we provide a helper class that helps format your filters into HTTP params:

let httpParams = new HttpParams();
httpParams = DynamicFilterService.formatConditionsToHttpParams(
    conditions,
    httpParams,
);
httpParams = DynamicFilterService.formatSortingsToHttpParams(
    sortings,
    httpParams,
);
httpParams = DynamicFilterService.formatPaginationToHttpParams(
    pagination,
    httpParams,
);

There is also a single method that combines the three methods above into one:

let httpParams = new HttpParams();
httpParams = DynamicFilterService.formatDynamicQueryOptionToHttpParams(
    dynamicQueryOption,
    httpParams,
);

Copyright and license

Code is released under the MIT License.

Changelog

All notable changes to this project will be documented in the CHANGELOG.