Ngx Filter Input

Description

ngx-filter-input is a filtering component that encapsulate inputs in a popup, and shows active filters as a chip

I don't duckin know how to explain, so here's the material guideline page that inspired this : https://material.io/components/data-tables/#anatomy

Compatibility

Not tested accross different app versions.

| angular | @angular/material | ngx-filter-input | | ------------- | ------------- | ------------- | | 8.2.0+ | 8.2.0+ | 0.0.1+ |

Installation

Add NgxFilterInputModule to your module imports :

Basic Usage

Add ngx-filter-input in your template

Define filter options

Inside ngx-filter-input tags, you can specify filtering options using the ngxFilterOption directive. The value associated to this directive acts as a key for the outputed filter value.

Define filter definitions

Inside each ngxFilterOption directive call, you can add the ngxFilterDef directive to a node, this node will be transcluded later in the filter popup.

Under the hood, the filtering popup uses a FormControl, you'll need to get it to bind the ngxFilterDef to your filtering form. To do so, the directive will be bound to a context, of which the $implicit value is the control :

Customization

Customizing option labels

By default, the displayed name of each ngxFilterOption is it's key.

You can change this by specifying a label input in the ngxFilterOption directive :

Customizing chip content

By default, the chip associated to an option will display the the option label and the value like so :

In case you have a complex value to display, such as a Date, any object, or an Array, you can override this default behavior using the ngxFilterChip directive.

Like the ngxFilterDef, this directive is contextualized. The $implicit context is the current filter value, but you can access the option as named-context.

Filter popup Internationalization

To translate the popup actions, you can provide a custom Injectable using the NGX_FILTER_INTL token :

Then, in your AppModule :

Planned Features

• Implicit filter : Display an input field along with the filter chips to function as a filter across multiple fields
• Custom popup : Allow custom implementations of the Filter Popup
• Custom input : Allow custom implementations of the Filter Input
• Custom chips : Allow deeper customization of the chips
• Better theming support
• Remove the dependency on reactive forms