CngxListboxSearch

DirectivePrimaryv0.1.0WCAG AA

projects/common/interactive/listbox/listbox-search.directive.ts

Import#

import { CngxListboxSearch } from '@cngx/common/interactive'

Description#

Search input for a CngxListbox.

Builds on CngxSearch via hostDirectives - inherits debounce, term tracking, and clear semantics. Adds a matchFn input that listboxes read to filter their options. A listbox that has a CngxListboxSearch injected ancestor reads term and matchFn from it reactively.

https://cngxjs.github.io/cngx/examples/#/common/interactive/listbox/search/command-palette

Metadata#

Selector: input[cngxListboxSearch]
Export as: cngxListboxSearch
Host directives: CngxSearch
inputs debounceMs

Relationships

Used by4

componentCngxActionMultiSelectMulti-value combobox with inline quick-create.

componentCngxActionSelectSingle-value autocomplete with inline quick-create.

componentCngxComboboxTag-input style multi-value combobox.

componentCngxTypeaheadSingle-value async autocomplete.

Index#

Inputs#

matchFn#ListboxMatchFn

input()

Custom matcher. Defaults to case-insensitive substring match on label.

default defaultLabelMatch

Instance Properties#

hasValue#unknown

Readonly

True when term is non-empty.

this.search.hasValue

term#unknown

Readonly

Current debounced search term (proxied from CngxSearch).

this.search.term

Methods#

clear#void

Clears the input.