ngx-filters

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 ...
    }
  }

NgxFilterConfigs for components:

Property	Default Component	extended From
conditionSelectorComponent	ConditionsSelectorComponent	NgxConditionSelectorFilter
dateComponent	DateComponent	NgxDateFilter
numberBoxComponent	NumberBoxComponent	NgxNumberFilterComponent
textBoxComponent	TextBoxComponent	NgxTextBoxFilter
selectBoxComponent	SelectBoxComponent	NgxSelectBoxFilter
multiSelectBoxComponent	MultiSelectBoxComponent	NgxMultiSelectFilter
trueFalseComponent	TrueFalseComponent	NgxTrueFalseFilter

NgxFilterConfigs translator property

• translate names of conditions and other label to local language