CngxFilterRow
projects/forms/filter-builder/filter-builder-row.component.ts
Import#
import { CngxFilterRow } from '@cngx/forms/filter-builder'
Description#
Standalone single-row filter surface. Owns one
FilterExpression | null via [(value)] and renders the
field-picker / operator-picker / value-editor / remove-button stack
with no presenter or host-token wiring.
Use for ad-hoc top-of-table or side-panel filters where a full
<cngx-filter-builder> tree is overkill. Not the right primitive
for column-header filters with a fixed field per column - that UX
(clear-value semantics, no field picker, predicate writes directly
into CngxFilter) needs a dedicated artifact.
Empty [(value)] with >1 field renders just the field-picker; the
expression seeds when the user picks. Exactly one field auto-seeds
on first render and skips the picker. Embedded recursive usage lives
in CngxFilterExpressionRow and does not interop with
CNGX_FILTER_BUILDER_HOST.
Metadata#
Relationships
Index#
Properties
Methods
Outputs
Inputs#
Field list the row offers in its picker. Single-entry arrays trigger the auto-seed branch and skip the picker entirely (one option = no choice).
Optional consumer-supplied template registry, e.g. from a parent
<cngx-filter-builder> so the standalone row reuses the host's
removeButton / valueEditor overrides.
nullTwo-way bound expression. null shows the empty-state field-picker.
nullOutputs#
Two-way bound expression. null shows the empty-state field-picker.
Instance Properties#
Methods#
handleFieldChange(next: string | undefined)string | undefinedhandleOperatorChange(next: string | undefined)string | undefinedliteral typeCngxFilterBuilderValueEditorContext | nullDefault visuals for CngxFilterBuilderRow - the row wrapper inside
CngxFilterBuilder. The host cngx-filter-row stays
display: contents and delegates its layout to the parent's
.cngx-filter-builder__expression flex row, redeclared here so the
file is self-contained when consumed standalone.
State modifiers
.cngx-filter-builder__expression--empty- opacity fade for the empty-row variant, sourced from--cngx-filter-builder-empty-row-opacity(owned here)
Slots
cngx-filter-row- host,display: contents.cngx-filter-builder__expression- inner flex row, gap + wrap, aligned center
Inheritance
--cngx-filter-builder-empty-row-opacity is structural (no
foundation delegate). --cngx-filter-builder-gap is owned by the
parent filter-builder.component.css and consumed here through the
var() fallback chain only.
State / Empty
<number>0.85Opacity multiplier applied to the empty row variant — fades the placeholder slot without removing it from the layout.