NGX Filter Group

An advanced & extensive angular library for filtering highly compatible with django-filters

Dependencies

The only dependencies are Angular and NG-ZORRO

Installation

npm install ngx-filter-group --save

FilterGroup API

Properties

| @Input() | Type | Required | Default | Description | | ------------------------ | -------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | size | string | optional | large | Filter field size| | searchDebounceTime | number (ms) | optional | 1000 | Debounce Time| | actionButtons | boolean | optional | false | Whether to show action buttons| | canCreate | boolean | optional | false | Whether to create new filters| | serverFilters | () => Observable<FilterUISchema[]> | optional | undefined | To enable dynamic filters based on json|

Events

| @Output() | Type | Event Type | Required | Description | | ---------- | ------------ | -------------------- | -------- | ------------------------------------------------------------------------------- | | search | EventEmitter | EventEmitter | optional | this will callback the search query params. |

DEMO

Try the Demo in StackBlitz

Usage

First, import the BbcFilterModule to your module:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BbcFilterModule } from "ngx-filter-group";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppComponent } from "./app";

@NgModule({
  imports: [BrowserModule, BbcFilterModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

import { Component } from "@angular/core";

@Component({
  selector: "app",
  template: `
<bbc-filter-group #filterBox searchDebounceTime="100">
    <bbc-boolean-filter
      *bbcFilterTemplate
      #filterItem
      key="active"
      label="Boolean"
    ></bbc-boolean-filter>

    <bbc-date-filter
      *bbcFilterTemplate
      #filterItem
      key="created_date"
      placeholder="created_date"
      label="Date"
    ></bbc-date-filter>

    <bbc-time-filter
      *bbcFilterTemplate
      #filterItem
      key="time"
      placeholder="time"
      label="Time"
    ></bbc-time-filter>

    <bbc-date-range-filter
      *bbcFilterTemplate
      #filterItem
      key="updated_at"
      label="Date Range"
      placeholder="updated_at"
    ></bbc-date-range-filter>

    <bbc-time-range-filter
      *bbcFilterTemplate
      #filterItem
      key="created_at_time"
      label="Time Range"
      placeholder="created_at_time"
    ></bbc-time-range-filter>

    <bbc-filter
      *bbcFilterTemplate
      #filterItem
      key="action"
      placeholder="action"
      label="Input"
    ></bbc-filter>

    <bbc-filter
      *bbcFilterTemplate
      #filterItem
      key="code"
      label="Code"
      placeholder="Search Code"
    ></bbc-filter>

    <bbc-range-filter
      *bbcFilterTemplate
      #filterItem
      key="price"
      label="Range (type=in)"
      [rangeType]="['in', 'ain']"
    ></bbc-range-filter>
  </bbc-filter-group>
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('filterBox') filterGroup!: BbcFilterGroupComponent;
  filterParams: any = null;
  ngAfterViewInit(): void {
    this.filterGroup.filterstreams$
      .pipe(
        startWith(null),
        filter((v) => v)
      )
      .subscribe((filterParams) => {
        this.filterParams = Object.fromEntries(
          Object.entries(filterParams).filter(([_, value]) => value ?? false)
        );
        console.log('filterParams', filterParams);
      });
  }
}