ngx-filters/README.md

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.

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

<a target="_blank" href="https://stackblitz.com/edit/ngx-filters?file=src/app/app.component.ts">See demo in
stackblitz</a>

<a target="_blank" href="https://stackblitz.com/edit/ngx-mat-filters?file=src/app/app.component.ts">See angular material
filter demo in stackblitz</a>

# Installation Guide

Add NgxFiltersModule into your Module

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

<b>Default global configs for root:
</b>

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

# Sample

<b>How to show filters in chip list: </b>

      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:

<table >
<thead>
  <th>Property</th>
  <th>Default Component</th>
  <th>extended From</th>
</thead>
<tbody>
  <tr>
  <td>conditionSelectorComponent</td>
  <td>ConditionsSelectorComponent</td>
  <td>NgxConditionSelectorFilter</td>
  </tr>

  <tr>
    <td>dateComponent</td>
    <td>DateComponent</td>
    <td>NgxDateFilter</td>
  </tr>


  <tr>
  <td>numberBoxComponent</td>
  <td>NumberBoxComponent</td>
  <td>
    NgxNumberFilterComponent
  </td>
  </tr>

  <tr>
  <td>textBoxComponent</td>
  <td>TextBoxComponent</td>
  <td>NgxTextBoxFilter</td>
  </tr>

  <tr>
  <td>selectBoxComponent</td>
  <td>SelectBoxComponent</td>
  <td>NgxSelectBoxFilter</td>
  </tr>

  <tr>
  <td>multiSelectBoxComponent</td>
  <td>MultiSelectBoxComponent</td>
  <td>NgxMultiSelectFilter</td>
  </tr>

  <tr>
  <td>trueFalseComponent</td>
  <td>TrueFalseComponent</td>
  <td>NgxTrueFalseFilter</td>
  </tr>



</tbody>
</table>

# NgxFilterConfigs translator property

* translate names of conditions and other label to local language