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. The bridge calls filterRef.addPredicate(filterKey, predicateFn) EXACTLY ONCE during mount (in afterNextRender, because input.required() cannot be read from the constructor body). predicateFn is a closure that reads this.selectedValues() and this.optionValueFn() 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.

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. DestroyRef.onDestroy calls removePredicate only when registration actually happened (registered flag) - guards against the case where the component is destroyed before afterNextRender fires. The destroy callback reads filterRef and filterKey lazily so a consumer that re-binds these between mount and unmount cleans the latest binding (per reference_signal_architecture memory-hygiene rule).

<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