[class] KitSelectService


Service for handling state of extended selector. Should be provided on a component.


  • collection:ext-select - demo


disabled = false

Is control disabled.

get itemsDisplay()

Is options should be displayed.

set itemsDisplay(itemsDisplay: boolean)
get itemsDisplayChanges()

Observable with itemsDisplay.

get options()

List of options to display.

get optionsChanges()

Observable with options.

get viewChanges()

Observable that emits when view should be updated.

get items()
set items(items: KitSelectItem<M>[])

Set list of items to pick.

get itemsChanges()

Emits when items array changed by item selection.

set searchFn(searchFn: KitSelectSearchFn<M> | undefined)

Search function will be used instead of filter. The function should return list of items to pick.

After pick, in addition to ngModel update, picked item will be merged into [items] array, updated array will be emitted via (itemsChange) output. So you can use two-way binding here: <... [(items)]="selectItems">.

Fits to async search or autocomplete.

Enables autocomplete mode.

get isAutocomplete()

True if items received from searchFn instead of items.

get model()
set model(model: M | M[] | undefined)

Set current value of the control.

get modelChanges()

Observable with model.

get inputView(): KitSelectInputView<M> | KitSelectInputView<M>[] | undefined

View displayed in input section.

get inputViews(): KitSelectInputView<M>[]

View displayed in input section. Always returns an array. For non-multiple select use the first item: inputViews[0].

get inputViewChanges()

Observable with inputView.

get itemsView()

Prepared view of items list.

get itemsViewChanges()

Observable with itemsView.

get filter()
set filter(f: KitSelectFilter<M> | undefined)

Set filter to search through the current list of [items].

get filterChanges()

Observable with filter.

get input()
set input(input: string)

Set value entered by user.

get inputChanges()

Observable with input.

get searchable()

Indicate that select should has input for filtering or search.

get loading()

Is request pending now.

get loadingChanges()

Observable with loading.

get multiple()

Is select works in multiple mode.

set multiple(multiple: boolean | undefined)

Enables multiple select.

get isClearable()

Check model is clearable.

get active()

Highlighted item's model.

set active(active: M | undefined)

Set current active option.

get activeChanges()

Observable with active.

get focused()

Is control focused now.

get focusedChanges()

Observable with focused.

registerSelectRef(selectRem: ElementRef)

Register ElementRef of select element.

overrideOptions(options: Partial<KitSelectOptions>)

Additional configuration. If some values are not defined, will be used default value.

updateOptions(options: Partial<KitSelectOptions>)

Update options. If some values are not defined, will be used current value.

registerOnChange(fn: any)

Register value accessor hook.

registerOnTouched(fn: any)

Register value accessor hook.

userInput(input: string)

Call when input changes by user.

mousedown(event?: any)

Call when user click on component.


Call when user focus component.


Call when user leave the component.

select(model: M | undefined)

Call when user pick an item.

remove(model?: M)

Remove item from model. Needed for multiple mode.

Call without param to reset model to undefined (or empty array if multiple).

writeValue(model: M | M[])

Value accessor hook.

moveActive(modifier: number)

Move active cursor.


Initialize automatic change detection run.

[interface] KitSelectItem


model(): M
itemView(): V
inputView(): I

[interface] KitSelectItemView


model(): M
view(): any
filter(): string

[interface] KitSelectInputView


model(): M
view(): any

[interface] KitSelectOptions


showItemsOnFocus(): boolean
searchDebounce(): number
searchOnFocus(): boolean
clearable(): boolean