Ngx-filters NPM

NgxFilters

This library was generated for all type of frameworks such as Angular Material, Prime Ng, etc. Providing Filters such as Number Box, TextBox, Date, Single Select, Multi Select And True/False Filters for grids or list.

See demo in stackblitz

See angular material filter demo in stackblitz

Installation Guide

Add NgxFiltersModule into your Module

import {NgxFiltersModule} from "ngx-filters";
...
@NgModule({
  imports: [
  ...
  NgxFiltersModule.forRoot()
  ...
  ]
})

Default global configs for root:

NgxFiltersModule.forRoot({
  dateComponent: DateTimeFilterComponent,
  conditionSelectorComponent: ConditionsSelectorComponent,
  multiSelectBoxComponent: MultiSelectBoxFilterComponent,
  numberBoxComponent: NumberBoxFilterComponent,
  selectBoxComponent: SelectBoxFilterComponent,
  textBoxComponent: TextBoxFilterComponent,
  trueFalseComponent: TrueFalseFilterComponent,
  translator: new FilterTranslator()
})

Sample

How to show filters in chip list:

  import {Component, OnInit} from '@angular/core';
  import {Filter, FilterTypes, NgxApplyFilterResult} from "ngx-filters";

  @Component({
  selector: 'my-filters',
  template: '<ngx-chip-filter
            [filters]="filters"
            (apply)="onApplayFilter($event)"
            ></ngx-chip-filter>',
  })
  export class NgxChipFilterComponent  implements OnInit {
    filters: Filter[] = [
       {
        field: 'creationTime',
        type: FilterTypes.DateTime,
        value: null,
        valueTo: null,
        label: 'CreationTime',
        logicalOperator: LogicalOperator.And,
        conditionOperator: ConditionOperator.Between,
      },
      ...
    ]
    onApplayFilter(result: NgxApplyFilterResult) {
      // Do ...
    }
  }