CngxFilterChips

Bridge that connects a multi-select chip strip to a CngxFilter predicate via Pillar-1 derivation - no effect() write-back, no manual sync. The bridge composes <cngx-multi-chip-group> for the visible chip strip and registers a single closure-style predicate on the parent [filterRef]. Chip toggles update selectedValues; the registered closure reads selectedValues() lazily on every invocation so downstream filtered consumers recompute without the bridge ever re-registering.

Filter chips are inherently multi-select per feedback_select_family_split; a single-mode filter-chip pattern is intentionally out of scope. Consumers needing a single-select filter wire <cngx-chip-group> to a custom predicate themselves.

Sync contract - derivation, not effect. predicateFn is a closure that reads this.selectedValues() and this.optionValue() on every invocation. Because CngxFilter.predicate is itself a computed() consumed by downstream filtered lists, each item-evaluation flows through selectedValues() in the consumer's reactive context - chip toggles propagate without any effect() writing back into the filter. Registration itself is reactive: a binding effect tracks filterRef/filterKey (a rebind moves the registration), and an eviction watcher re-registers the key after filter.clear() wiped the stack, so visible chip selection and predicate stack cannot diverge. Selections whose option vanished from [options] are pruned - a removed option never keeps filtering invisibly.

Empty-selection semantics. When selectedValues() is [], the closure returns true for every item - equivalent to "no filter applied". The bridge deliberately does NOT call removePredicate on empty selection: leaving the predicate registered with a constant-true short-circuit is cheaper than re-registering on every empty/non-empty boundary, and keeps the predicate-stack stable (no predicatesChange emission churn).

Teardown. The binding effect's cleanup removes the key only while it still maps to this strip's own predicateFn (identity guard) - destroying one of two strips that share a key never detaches the live sibling's registration.

Visible caption. The required label renders as a .cngx-filter-chips__label caption above the strip so a sighted user can tell which facet a chip row belongs to. The caption is aria-hidden="true": the inner <cngx-multi-chip-group> is already named by the same string via [label], so exposing the visible node to AT would announce the facet twice. Spacing between caption and strip is the --cngx-filter-chips-gap token; the caption's own appearance is --cngx-filter-chips-label-color, --cngx-filter-chips-label-font-size and --cngx-filter-chips-label-font-weight.

<cngx-filter-chips
  label="Tags"
  [options]="tagOptions"
  optionLabel="label"
  optionValue="id"
  [filterRef]="employees"
  filterKey="tags"
/>

<ng-container cngxFilter #employees="cngxFilter">
  @for (emp of filteredEmployees(); track emp.id) {
    ...
  }
</ng-container>

https://cngxjs.github.io/cngx/examples/#/common/data/filter-chips/custom-chip-decoration-via-cngxfilterchip https://cngxjs.github.io/cngx/examples/#/common/data/filter-chips/multi-role-filter-wired-to-a-list