Constructor
# new FilterComponent()
This component provides a comprehensive filtering interface that allows users to build complex search criteria using a three-step approach: select index → select condition → enter value. It supports filtering by multiple field indexes, comparison conditions, and values, displaying selected filters as removable chips. The component is responsive and includes auto-suggestions with keyboard navigation support.
Advanced filter component for creating dynamic search filters with step-by-step construction.
sequenceDiagram
participant U as User
participant F as FilterComponent
participant P as Parent Component
U->>F: Focus input field
F->>F: handleFocus() - Show available indexes
U->>F: Select index (e.g., "name")
F->>F: addFilter() - Step 1 completed
F->>F: Show available conditions
U->>F: Select condition (e.g., "Contains")
F->>F: addFilter() - Step 2 completed
F->>F: Show value input prompt
U->>F: Enter value and press Enter
F->>F: addFilter() - Step 3 completed
F->>F: Create complete filter object
F->>P: Emit filterEvent with new filter array
F->>F: Reset to step 1 for next filter
Example
```html
<ngx-decaf-filter
[indexes]="['name', 'email', 'department', 'status']"
[conditions]="['Equal', 'Contains', 'Greater Than', 'Less Than']"
[sort]="['createdAt', 'updatedAt']"
[disableSort]="false"
(filterEvent)="onFiltersChanged($event)">
</ngx-decaf-filter>
```