CngxDgaFilter

Directivev0.1.0WCAG AA

projects/ui/data-grid-accordion/data-grid-filter.directive.ts

Import#

import { CngxDgaFilter } from '@cngx/ui/data-grid-accordion'

Description#

Turns a projected <input> into the filter box for the CngxDataGridAccordion it lives in: it two-way-binds the group's filterTerm with no wiring. On each keystroke it writes the value into grid.filterTerm after a debounce (owned here - CngxFilter has none), so the consumer's computed() re-derives the visible rows only once typing settles. An external term change (a programmatic clear) reflects back into the box, but never while it is focused - that would fight the caret.

The debounce lives in this slot, not in the group, because it is an input-UX concern; a consumer driving the term programmatically writes grid.filterTerm directly with no debounce. The default aria-label is English (a consumer overrides via cngxDgaFilterLabel).

<cngx-data-grid-accordion>
  <cngx-dga-header>
    <input cngxDgaFilter cngxDgaFilterLabel="Filter invoices" />
  </cngx-dga-header>
  <!-- rows rendered by the consumer's @for over its filtered array -->
</cngx-data-grid-accordion>

https://cngxjs.github.io/cngx/examples/#/ui/data-grid-accordion/bound-sort-filter https://cngxjs.github.io/cngx/examples/#/ui/data-grid-accordion/sortable-ledger

Metadata#

Selector: input[cngxDgaFilter]
Export as: cngxDgaFilter

Host#

Class: cngx-dga-filter
Static attributes: rolesearchbox
[attr.aria-label]ariaLabel()
Listeners: input → handleInput

Relationships

Used by1

componentCngxDgaFilterFieldA ready-made filter row for a {@link CngxDataGridAccordion}: a full-width `grid-column: 1 / -1` band with a visible `…

Index#

Inputs#

ariaLabel#

input()

Accessible name for the filter box. English default; override for other locales.

default 'Filter rows', { alias: 'cngxDgaFilterLabel' }

debounce#

input()

Debounce in ms between the last keystroke and writing grid.filterTerm.

default 200, { alias: 'cngxDgaFilterDebounce' }

Methods#

handleInput#void

Protected

handleInput(event: Event)

@parameventEvent

HostBindings#

Binding	Expression
`[attr.aria-label]`	`ariaLabel()`

HostListeners#

Event	Handler
`(input)`	`input()`