ngx-filters

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.

Usage no npm install needed!

<script type="module">
  import ngxFilters from 'https://cdn.skypack.dev/ngx-filters';
</script>

README

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