ui-ext-select

Generation

ng g @ngx-kit/collection:ui-ext-select [name]

Demo

PreviewSources

Simple items:

1

Items with itemView:

January

Items with itemView and inputView:

Jan

Built-in filtering:

January

Built-in filtering (with null model):

Provide filtering function (exclude for example):

January

Search (pass to [searchFn] a function that will return array of items):

January

Async search (pass to [searchFn] a function that will return Observable):

January

Async search (items array updated with selected item from search):
Model:
Items: []

Multiple:

Multiple (with filter):

Multiple (with async search):

Options

Show items on focus (use tab to test):

January

Search on focus:

January

Search debounce:

January

Placeholder:

Pick an item…

Disabled:

January

API

[class] UiExtSelectDemoModule

@NgModule

[class] UiExtSelectModule

@NgModule

Exports:[ UiExtSelectComponent, ]

[class] UiExtSelectComponent

@Component

Selector:'ui-ext-select'

Members

SignatureDescription
@Input() items: KitSelectItem<M>[] = []

List of items to pick.

@Input() filter: KitSelectFilter<M>

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

@Input() searchFn: KitSelectSearchFn<M>

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

@Input() multiple: boolean

Enables multiple select.

@Input() options: Partial<KitSelectOptions> = {}

Additional configuration.

@Input() placeholder: string

Placeholder displayed when model is empty.

@Output() itemsChange = new EventEmitter<KitSelectItem<M>[]>()

Emits when items array changed by item selection.

hasErrors: boolean
icons = uiExtSelectIcons
registerOnChange(fn: any)
registerOnTouched(fn: any)
setDisabledState(isDisabled: boolean): void
writeValue(rawValue: M | M[]): void
mousedown(event: any)
removeItem(event: any, model?: M)
select(model: M)
focusInput()
isActive(model: M)
isChecked(model: M)