This repo ships with an interactive showcase app — every field type has a live, editable example (edit the code, the filter bar updates in real time). Run it locally:
npm install npm run dev
Then open http://localhost:4200.
import { SAUFilterModule } from '@some-angular-utils/filter';
public filterConfig = { order: ['search', 'status'], mobile: ['search'], form: { search: { name: 'Buscar', key: 'q', type: 'inputText', defaultValue: '' }, status: { name: 'Estado', key: 'status_id', type: 'selectSimple', dropdowns: [ { id: 1, name: 'Activo' }, { id: 2, name: 'Inactivo' } ], defaultValue: '' } } }; onFilterProcessed(event: { json: any, url: string }) { // event.url is a ready-to-use query string: "?q=foo&status_id=1" }
<sau-filter [filterConfig]="filterConfig" searchButtonText="Buscar" (onFilterProcessed)="onFilterProcessed($event)" ></sau-filter>
inputText · inputNumber · inputCheckbox (tri-state: true / false / unset) · date · dateRange (needs keyTo) · selectSimple · selectMultiple (both accept dropdowns: [{ id, name }], optionally bindSubLabel)
Add orderParamName and orderByFields: [{ field, label }] to filterConfig to get a built-in ascending/descending sort dropdown next to the search button.
Add quickFilter: { key, placeholder?, label?, debounceTime? } to filterConfig to show a separate search input at the top right. When the user stops typing (default debounceTime: 500ms) it runs the search automatically and emits onFilterProcessed — no need to press the search button. Its value is sent under key together with the rest of the filters, and it is pre-filled from the URL if that param is present.
quickFilter: { key: 'search', placeholder: 'Quick search...', debounceTime: 500 }
.sau-filter{ --sau-color-primary: rgb(147, 51, 234); --sau-color-background: rgb(255, 255, 255); }