Skip to main content
cngx-src documentation

CngxFilterRow

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/forms/filter-builder/filter-builder-row.component.ts

GitHub

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.

The row brain (pickers, editor resolution, carry-over policy, labels, write handlers) comes from CNGX_FILTER_ROW_CONTROLLER_FACTORY; this component is the skin plus a local-model() write sink.

https://cngxjs.github.io/cngx/examples/#/forms/filter-builder/filter-row-standalone/single-row-with-value

Related#

Metadata#

Selector
cngx-filter-row
Change detection
ChangeDetectionStrategy.OnPush
Encapsulation
ViewEncapsulation.None
Template URL
./filter-builder-row.component.html
Style URLs
./filter-builder-row.component.css
Imports
NgTemplateOutletCngxFilterValueEditorHostCngxInputCngxSelectCngxToggle

Relationships

Depends on5

NgTemplateOutletdependency
CngxFilterValueEditorHostAttribute directive
CngxInputDirective
CngxSelectStandalone component
CngxToggleStandalone component

Index#

Properties

ariaLabelconfigeditoreditorsfieldOptionsglyphsisIncompleteisNativeEditoroperatorOptionsoperatorsremoveButtonContextremoveButtonTemplatevalueEditorContextvalueEditorTemplate

Methods

handleBooleanValueChangehandleDateValueInputhandleFieldChangehandleNumberValueInputhandleOperatorChangehandleRemovehandleStringValueInput

Inputs

fieldstemplatesvalue

Outputs

value

Derived State

nodeshowEmptyFieldPicker

Inputs#

fields#readonly FilterFieldDef[]
input()Required

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).

templates#CngxFilterBuilderTemplateRegistry | null
input()

Optional consumer-supplied template registry, e.g. from a parent <cngx-filter-builder> so the standalone row reuses the host's removeButton / valueEditor overrides.

default null
value#FilterExpression | null
model()

Two-way bound expression. null shows the empty-state field-picker.

default null

Outputs#

value#FilterExpression | null
model()

Two-way bound expression. null shows the empty-state field-picker.

Instance Properties#

ariaLabel#unknown
ProtectedReadonly
this.row.ariaLabel
config#unknown
ProtectedReadonly
injectFilterBuilderConfig()
editor#unknown
ProtectedReadonly
this.row.editor
editors#unknown
ProtectedReadonly
injectFilterEditors()
fieldOptions#unknown
ProtectedReadonly
this.row.fieldOptions
glyphs#unknown
ProtectedReadonly
CNGX_FILTER_BUILDER_GLYPHS
isIncomplete#unknown
ProtectedReadonly
this.row.isIncomplete
isNativeEditor#unknown
ProtectedReadonly
isNativeEditor
operatorOptions#unknown
ProtectedReadonly
this.row.operatorOptions
operators#unknown
ProtectedReadonly
this.row.operators
removeButtonContext#unknown
ProtectedReadonly
this.row.removeButtonContext
removeButtonTemplate#unknown
ProtectedReadonly
this.row.removeButtonTemplate
valueEditorContext#unknown
ProtectedReadonly
this.row.valueEditorContext
valueEditorTemplate#unknown
ProtectedReadonly
this.row.valueEditorTemplate

Methods#

handleBooleanValueChange#void
Protected
handleBooleanValueChange(next: boolean)
@paramnextboolean
handleDateValueInput#void
Protected
handleDateValueInput(event: Event)
@parameventEvent
handleFieldChange#void
Protected
handleFieldChange(next: string | undefined)
@paramnextstring | undefined
handleNumberValueInput#void
Protected
handleNumberValueInput(event: Event)
@parameventEvent
handleOperatorChange#void
Protected
handleOperatorChange(next: string | undefined)
@paramnextstring | undefined
handleRemove#void
Protected
handleStringValueInput#void
Protected
handleStringValueInput(event: Event)
@parameventEvent

Default 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; the raster basis tokens (--cngx-filter-builder-field-basis / -operator-basis / -value-basis) are owned by filter-builder-expression-row.component.css - all consumed here through the var() fallback chain only. The compact remove button floors both axes to --cngx-target-min (accessible name via aria-label).

State / Empty

--cngx-filter-builder-empty-row-opacity#<number>
Default value 0.85

Opacity multiplier applied to the empty row variant - fades the placeholder slot without removing it from the layout.

Enter to selectArrow Down Arrow Up to navigateEsc to close