import { KbqAutocompleteModule } from '@koobiq/components/autocomplete';Directive applied to an element to make it usable as a connection point for an autocomplete panel.
Selector: [kbqAutocompleteOrigin]
Exported as: kbqAutocompleteOrigin| Name | Description |
|---|---|
| elementRef: ElementRef |
Footer that is rendered below the autocomplete options panel.
Selector: [kbqAutocompleteFooter], kbq-autocomplete-footer
Selector: kbq-autocomplete
Exported as: kbqAutocomplete| Name | Description |
|---|---|
@Input() autoActiveFirstOption: boolean
|
Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the `KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS` token. |
@Input('class')
classList: string
|
Takes classes set on the host kbq-autocomplete element and applies them to the panel inside the overlay container to allow for easy styling. |
@Input() displayWith: (value: any) => string
|
Function that maps an option's control value to its display value in the trigger. |
@Input() openOnFocus: boolean
|
|
@Input() panelWidth: string | number
|
Specify the width of the autocomplete panel. Can be any CSS sizing value, otherwise it will match the width of its host. |
@Output('closed')
closed: EventEmitter |
Event that is emitted when the autocomplete panel is closed. |
@Output('opened')
opened: EventEmitter |
Event that is emitted when the autocomplete panel is opened. |
@Output('optionSelected')
optionSelected: EventEmitter |
Event that is emitted whenever an option from the list is selected. |
| id: string | Unique ID to be used by autocomplete trigger's "aria-owns" property. |
| isOpen: boolean | |
| keyManager: ActiveDescendantKeyManager |
Manages active item in option list based on key events. |
| optionGroups: QueryList |
|
| options: QueryList |
|
| panel: ElementRef |
|
| showPanel: boolean | Whether the autocomplete panel should be visible, depending on option length. |
| template: TemplateRef |
Selector: input[kbqAutocomplete], textarea[kbqAutocomplete]
Exported as: kbqAutocompleteTrigger| Name | Description |
|---|---|
@Input('kbqAutocomplete')
autocomplete: KbqAutocomplete
|
The autocomplete panel to be attached to this trigger. |
@Input('kbqAutocompleteDisabled')
autocompleteDisabled: boolean
|
Whether the autocomplete is disabled. When disabled, the element will act as a regular input and the user won't be able to open the panel. |
@Input('kbqAutocompleteConnectedTo')
connectedTo: KbqAutocompleteOrigin
|
Reference relative to which to position the autocomplete panel. Defaults to the autocomplete trigger element. |
@Input('kbqAutocompleteOnBlur')
onInputBlur: (event: FocusEvent) => boolean
|
Event handler for input blur events. Determines whether the blur event is triggered outside the specific target |
| activeOption: KbqOption | The currently active option, coerced to MatOption type. |
| document: Document | |
| onChange: (value: any) => void | `View -> model callback called when value changes` |
| onTouched: () => void | `View -> model callback called when autocomplete has been touched` |
| optionSelections: Observable |
|
| panelClosingActions: Observable |
A stream of actions that should close the autocomplete panel, including when an option is selected, on blur, and when TAB is pressed. |
| panelOpen: boolean |
| Name | Description |
|---|---|
| option: KbqOption | |
| source: KbqAutocomplete |
Default `kbq-autocomplete` options that can be overridden.
| Name | Description |
|---|---|
| autoActiveFirstOption: boolean | Whether the first option should be highlighted when an autocomplete panel is opened. |
const KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): KbqAutocompleteDefaultOptions;
const KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
| Parameters | Description |
|---|---|
| overlay: Overlay |
Injection token to be used to override the default options for `kbq-autocomplete`.
const KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS: InjectionToken<KbqAutocompleteDefaultOptions>;
The total height of the autocomplete panel.
const AUTOCOMPLETE_PANEL_HEIGHT: number;
Injection token that determines the scroll handling while the autocomplete panel is open.
const KBQ_AUTOCOMPLETE_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
const KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER: { provide: InjectionToken<() => ScrollStrategy>; deps: (typeof Overlay)[]; useFactory: (overlay: Overlay) => () => ScrollStrategy; };