Skip to main content
cngx-src documentation

CngxFilterBuilderPresenter

DirectivePrimaryv0.1.0WCAG AA

projects/forms/filter-builder/filter-builder-presenter.directive.ts

Import#

import { CngxFilterBuilderPresenter } from '@cngx/forms/filter-builder'

Description#

Brain of <cngx-filter-builder>. Hosts the state factory bound to a model<FilterGroup> for [(value)] two-way binding, and provides CNGX_FILTER_BUILDER_HOST via useExisting so the recursive context atoms read one source of truth. Implements CngxFormFieldControl (id / empty / disabled / focused / errorState / focus); the disabled / focused / errorState scalars derive from the ambient CngxFormFieldPresenter when the opt-in CngxFilterBuilderFormFieldControl directive is applied.

https://cngxjs.github.io/cngx/examples/#/forms/filter-builder/basic-two-way-binding-json-inspection https://cngxjs.github.io/cngx/examples/#/forms/filter-builder/seeded-tree-and-or-composition

Metadata#

Providers#

CNGX_FILTER_BUILDER_HOST
useExisting CngxFilterBuilderPresenter

Relationships

Index#

Inputs#

model()
default EMPTY_ROOT

Outputs#

model()

Instance Properties#

announcement#Signal
Readonly
this.announcer.announcement
empty#Signal
Readonly

CngxFormFieldControl empty - true while the tree carries no expressions.

this.core.isEmpty
fieldMap#unknown
Readonly
this.core.fieldMap
focused#Signal
Readonly
this.focusedState.asReadonly()
id#Signal
signal()Readonly

CngxFormFieldControl id - stable per-instance, generated once.

signal(nextUid('cngx-filter-builder-')).asReadonly()
isEmpty#unknown
Readonly
this.core.isEmpty
lastMutation#unknown
Readonly
this.core.lastMutation
tree#unknown
Readonly
this.core.tree

Methods#

addExpression#void
addExpression(path: unknown, expression: FilterExpression)
@parampathunknown
@paramexpressionFilterExpression
addGroup#void
addGroup(path: unknown, group: FilterGroup)

Adds group under the group at path. No-op beyond maxNestingDepth: a group appended at path sits at depth path.length + 1 (root is depth 0), and the config cap applies to programmatic writes exactly like to the add-group UI.

@parampathunknown
@paramgroupFilterGroup
applyFieldChange#void
applyFieldChange(path: unknown, plan: CngxFilterRowFieldChangePlan)
@parampathunknown
focus#void
focus(options?: FocusOptions)

Focus the first incomplete expression's first focusable descendant; falls back to the host element when no expression is incomplete. The row↔presenter correlation runs through the data-cngx-filter-path attribute each rendered row carries.

@paramoptions?FocusOptions
getFieldDef(fieldKey: string)
@paramfieldKeystring
getNodeAtPath#FilterNode | null
getNodeAtPath(path: unknown)
@parampathunknown
removeNode#void
removeNode(path: unknown)

Removes the node at path. When the removal unmounts the DOM that currently holds focus (the row's remove button, an editor input), focus is restored after the next render: to the sibling that slid into the removed index, else the previous sibling, else the parent group container - instead of dropping to <body>.

@parampathunknown
setField#void
setField(path: unknown, fieldKey: string)
@parampathunknown
@paramfieldKeystring
setLogic#void
setLogic(path: unknown, logic: FilterLogic)
@parampathunknown
@paramlogicFilterLogic
setOperator#void
setOperator(path: unknown, operator: string)
@parampathunknown
@paramoperatorstring
setValue#void
setValue(path: unknown, value: unknown)
@parampathunknown
@paramvalueunknown
toggleNegated#void
toggleNegated(path: unknown)
@parampathunknown