import { KbqSelectModule } from '@koobiq/components/select';

Selector: kbq-select-loading, [kbq-select-loading]

Exported as: kbqSelectLoading

Selector: kbq-option

Properties
Name Description
arrow: boolean
availablePositions: { [key: string]: ConnectionPositionPair; }
closingActionsSubscription: Subscription
color: string
container: HTMLElement
content: string | TemplateRef
context: any
customClass: string
destroyRef: DestroyRef
detach: () => void
direction: Directionality
disabled: boolean
elementRef: ElementRef
enterDelay: number
focusMonitor: FocusMonitor
forDisabledComponent: InputSignal>> Input for controlling the disabled state of a component. The input expects a component containing `disabledSignal` property, which is a writable signal emitting boolean values.
hideWithTimeout: boolean Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger. Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger to tooltip.
hostView: ViewContainerRef
hovered: BehaviorSubject Stream that emits when the popupTrigger is hovered.
ignoreTooltipPointerEvents: InputSignal Determines whether pointer events should be ignored on tooltips. When set to `true`, tooltip elements will not receive pointer events, allowing interactions to pass through to underlying elements. Defaults to `true`.
instance: any
isOpen: boolean
isOverflown: boolean
leaveDelay: number
listeners: Map
modifier: TooltipModifier
mouseEvent: MouseEvent
ngZone: NgZone
offset: number
onPositionChange: ($event: ConnectedOverlayPositionChange) => void
originSelector: string
overlay: Overlay
overlayConfig: OverlayConfig
overlayRef: OverlayRef
parentPopup: KbqParentPopup
placement: "top" | "topLeft" | "topRight" | "right" | "rightTop" | "rightBottom" | "left" | "leftTop" | "leftBottom" | "bottom" | "bottomLeft" | "bottomRight"
placementChange: EventEmitter
placementPriority: string | string[]
portal: ComponentPortal
preventClose: boolean prevents closure by any event
relativeToPointer: boolean Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority.
scheduler: AsyncScheduler
scrollDispatcher: ScrollDispatcher
scrollStrategy: () => ScrollStrategy
scrollable: CdkScrollable
stickToWindow: "top" | "right" | "left" | "bottom"
strategy: FlexibleConnectedPositionStrategy
textElement: HTMLElement
tooltipPlacement: "top" | "topLeft" | "topRight" | "right" | "rightTop" | "rightBottom" | "left" | "leftTop" | "leftBottom" | "bottom" | "bottomLeft" | "bottomRight"
tooltipPlacementPriority: string | string[]
tooltipVisible: boolean
trigger: string
triggerName: string
visible: boolean
visibleChange: EventEmitter
Methods
applyRelativeToPointer
clearListeners
closingActions
createOverlay
Create the overlay config and position strategy
focus
getAdjustedPositions
Returns a list of positions that are aligned with the element's dimensions and offsets.
getMouseLeaveListener
getOverlayHandleComponentType
getPrioritizedPositions
getPriorityPlacementStrategy
hide
initListeners
keydownHandler
onBlur
onFocus
onMouseEnter
onMouseLeave
resetOrigin
show
showForElement
method allows to show the tooltip relative to the element Use this approach when it is not possible to define a trigger in the template. For example: const tooltip = new KbqTooltipTrigger(); tooltip.showForElement(element);
showForMouseEvent
method allows to show the tooltip relative to the given mouse event.
touchendHandler
updateClassMap
updateData
updatePlacement
updatePlacementPriority
updatePosition
Updates the position of the current popover.
updateVisible

This component renders the error for a Select component. The error message can be displayed in two visual variants: a default centered layout (when [paging] is falsy) or a variant with left‑aligned text suitable for pagination controls (when [paging] is truthy).

Selector: kbq-select-error, [kbq-select-error]

Exported as: kbqSelectError
Properties
Name Description
@Input()
paging: InputSignalWithTransform
Indicates whether styles for pagination controls should be used.

Marks an element as the error text container for a *KbqSelect* component.

Selector: [kbq-select-error-text]

Exported as: kbqSelectErrorText

Component that represents the empty state of a select dropdown.

Selector: kbq-select-no-options, [kbq-select-no-options]

Exported as: kbqSelectNoOptions

Selector: kbq-select

Exported as: kbqSelect
Properties
Name Description
@Input()
backdropClass: string
Classes to be passed to the overlay backdrop.
@Input()
compareWith: (o1: any, o2: any) => boolean
Function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection. Should return true if the values match. Defaults to strict equality comparison.
@Input()
disabled: boolean
Whether the select is disabled. When disabled, the select cannot be opened and its value cannot be changed.
@Input()
errorStateMatcher: ErrorStateMatcher
Object used to control when error messages are shown.
@Input()
hasBackdrop: boolean
Whether the overlay should have a backdrop. When true, clicking the backdrop will close the select.
@Input()
hiddenItemsText: string
Template string for hidden items text. Supports {{ number }} placeholder.
@Input()
id: string
Unique identifier for the select component. Auto-generates an ID if not provided.
@Input()
multiline: boolean
Whether to use a multiline matcher or not. Default is false. When true, allows multiple lines of text in the selected value display.
@Input()
multiple: boolean
Whether multiple options can be selected. Note: This cannot be changed dynamically after initialization.
@Input()
panelClass: string | string[] | Set | { [key: string]: any; }
Classes to be passed to the select panel. Supports the same syntax as `ngClass`.
@Input()
panelMinWidth: number
Minimum width of the panel in pixels. If minWidth is larger than window width, it will be ignored.
@Input()
panelWidth: KbqSelectPanelWidth
Width of the panel. If set to `auto`, the panel will match the trigger width. If set to null or an empty string, the panel will grow to match the longest option's text.
@Input()
placeholder: string
Placeholder text to be shown when no value is selected. Displayed in the trigger when the select is closed and no value is selected.
@Input()
required: boolean
Whether the select is required. Affects validation and display of placeholder.
@Input()
searchMinOptionsThreshold: number
Controls when the search functionality is displayed based on the number of available options. Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.
@Input()
selectAllHandler: (event: KeyboardEvent, select: KbqSelect) => void
Function for handling the Ctrl + A (select all) keyboard combination. By default, the internal handler selects all options.
@Input()
showPreselectedValues: boolean
Determines whether preselected values are displayed.
@Input()
sortComparator: (a: KbqOptionBase, b: KbqOptionBase, options: KbqOptionBase[]) => number
Function used to sort the values in a select in multiple mode. Follows the same logic as `Array.prototype.sort`.
@Input()
triggerValuesLimit: number
Specifies the maximum number of trigger values allowed. This constant limits the size of the trigger values array to ensure performance and prevent excessive memory usage. A value of `0` indicates that there is no limit.
@Input()
value: any
Value of the select control. Can be a single value or array of values for multiple selection.
@Output('beforeOpened')
beforeOpened: OutputEmitterRef
Event emitted before the select panel starts opening.
@Output('closed')
closedStream: Observable
Event emitted when the select has been closed.
@Output('openedChange')
openedChange: EventEmitter
Event emitted when the select panel has been toggled. Emits true when opened, false when closed.
@Output('opened')
openedStream: Observable
Event emitted when the select has been opened.
@Output('selectionChange')
selectionChange: EventEmitter
Event emitted when the selected value has been changed by the user.
calculateHiddenItems: () => void Calculates the number of hidden items in multiple selection mode. Updates the hiddenItems property and triggers change detection.
canShowCleaner: boolean Whether the cleaner (clear button) should be shown.
cdkVirtualForOf: CdkVirtualForOf Reference to the CDK virtual scroll directive for virtual scrolling support.
cleaner: KbqCleaner Reference to the optional cleaner element for clearing selection.
controlType: string A name for this control that can be used by `kbq-form-field`.
customMatcher: KbqSelectMatcher User-supplied matcher component for custom value matching logic.
customTagTemplateRef: TemplateRef Custom template reference for rendering tag content.
customTrigger: KbqSelectTrigger User-supplied override of the trigger element for custom rendering.
defaultErrorStateMatcher: ErrorStateMatcher
defaultOptions: Partial<{ panelWidth: KbqSelectPanelWidth; panelMinWidth: number; searchMinOptionsThreshold: number | "auto"; }>
elementRef: ElementRef
empty: boolean Whether no option is currently selected.
errorState: boolean Whether the component is in an error state.
firstFiltered: boolean Whether the first selected option is filtered (not visible in the list).
firstSelected: KbqOptionBase Returns the first selected option that is not disabled.
focused: boolean Whether the select is focused.
footer: ElementRef Reference to the optional footer element in the panel.
hiddenItems: number
isBrowser: boolean
isEmptySearchResult: boolean Whether the search returned no results.
keyManager: ActiveDescendantKeyManager Manages keyboard events for options in the panel.
multiSelection: boolean Whether multiple choice is enabled. True if multiple or multiline mode is active.
ngControl: NgControl
noOptions: boolean Whether there are no options available.
offsetY: number The y-offset of the overlay panel in relation to the trigger's top start corner. This must be adjusted to align the selected option text over the trigger text when the panel opens. Will change based on the y-position of the selected option.
onChange: (value: any) => void `View -> model callback called when value changes`
onTouched: () => void `View -> model callback called when select has been touched`
optionGroups: QueryList All of the defined groups of options.
optionSelectionChanges: Observable> Combined stream of all of the child options' change events.
options: QueryList All of the defined select options.
optionsContainer: ElementRef Reference to the container element that holds the options.
overlayDir: CdkConnectedOverlay Reference to the CDK connected overlay directive.
overlayMinWidth: string | number Minimum width of the overlay panel in pixels.
overlayOrigin: ElementRef | CdkOverlayOrigin Origin element for the overlay panel positioning.
overlayPanelClass: "kbq-select-overlay" Overlay panel class.
overlayWidth: string | number Width of the overlay panel in pixels or as a string.
panel: ElementRef Reference to the overlay panel element.
panelDoneAnimatingStream: Subject Emits when the panel element is finished transforming in.
panelOpen: boolean Whether the select panel is currently open.
parentForm: NgForm
parentFormGroup: FormGroupDirective
positions: ConnectedPosition[] This position config ensures that the top "start" corner of the overlay is aligned with the top "start" of the origin by default (overlapping the trigger completely). If the panel cannot fit below the trigger, it will fall back to a position above the trigger.
previousSelectionModelSelected: KbqOptionBase[] Previously selected options before the current selection was made.
scrollStrategy: any Strategy that will be used to handle scrolling while the select panel is open.
search: KbqSelectSearch Reference to the optional search component.
searchEmpty: KbqSelectSearchEmptyResult Reference to the optional empty search result component.
selected: KbqOptionBase | KbqOptionBase[] Returns the currently selected option(s). Single value or array for multiple selection.
selectionModel: SelectionModel Deals with the selection logic. Manages selected options and their states.
tags: QueryList Query list of tags displayed in multiple selection mode.
transformOrigin: string The value of the select panel's transform-origin property for animations.
trigger: ElementRef Trigger - is a clickable field to open select dropdown panel
triggerFontSize: number The cached font-size of the trigger element in pixels.
triggerRect: DOMRect The last measured value for the trigger's client bounding rect.
triggerValue: string Returns the display value for the trigger element.
triggerValues: KbqOptionBase[] Returns all selected options in display order.
withVirtualScroll: boolean Whether virtual scrolling is enabled for the options panel.
Methods
calculateOverlayOffsetX
clearValue
Clears the current selection.
close
Closes the overlay panel and focuses the host element.
focus
Focuses the select element.
getItemHeight
Gets the height of a single option item.
getOverlayRect
getPanelTheme
Returns the theme to be used on the panel based on parent form field color.
handleClick
Handles click events on the select. Closes the panel if click is inside the footer.
handleKeydown
Handles all keyboard events for the select. Delegates to appropriate handler based on panel state.
hiddenItemsTextFormatter
Formats the hidden items text with the number of hidden items.
isRtl
Checks if the current direction is RTL (right-to-left).
onAttached
Callback that is invoked when the overlay panel has been attached. Sets up position change subscription and closing actions.
onBlur
Calls the touched callback only if the panel is closed. Otherwise, the trigger will "blur" to the panel when it opens, causing a false positive.
onFocus
Handles focus event on the select element.
onRemoveMatcherItem
Handles removal of a matched item in the trigger.
open
Triggers the opening of the panel component. If the component is disabled or the panel is already open, the call is ignored. Otherwise, the (beforeOpened) event is emitted. When no options are available, the panel is opened after a short delay; if options exist, it opens immediately.
openPanel
Internal method to open the panel. Handles overlay positioning and sizing. Sets up the overlay dimensions based on trigger size and configured options.
resetOverlay
resetSearch
Resets the search component if present.
resolveSearchMinOptionsThreshold
setOverlayPosition
toggle
Toggles the overlay panel open or closed.
updateErrorState
Updates the error state based on the error state matcher.

Change event object that is emitted when the select value has changed.

Properties
Name Description
source: KbqSelect
value: any

Select panel width type.

type KbqSelectPanelWidth = 'auto' | number | null;

Options for the `kbq-select` that can be configured using the `KBQ_SELECT_OPTIONS` injection token.

type KbqSelectOptions = Partial<{
    /**
     * Width of the panel. If set to `auto`, the panel will match the trigger width.
     * If set to null or an empty string, the panel will grow to match the longest option's text.
     */
    panelWidth: KbqSelectPanelWidth;
    /**
     * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
     */
    panelMinWidth: Exclude<KbqSelectPanelWidth, 'auto'>;
    /**
     * Whether to enable hiding search by default if options is less than minimum.
     *
     * - `'auto'` uses `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD` as min value.
     * - number - will enables search hiding and uses value as min.
     * @see KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD
     */
    searchMinOptionsThreshold: 'auto' | number;
}>;

Injection token that can be used to provide the default options for the `kbq-select`.

const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{ panelWidth: KbqSelectPanelWidth; panelMinWidth: number; searchMinOptionsThreshold: number | "auto"; }>>;

Utility provider for `KBQ_SELECT_OPTIONS`.

const kbqSelectOptionsProvider: (options: Partial<{ panelWidth: KbqSelectPanelWidth; panelMinWidth: number; searchMinOptionsThreshold: number | "auto"; }>) => Provider;

Delay in milliseconds before displaying a result when there are no options.

const delayBeforeDisplayingResultWithoutOptions: number;

Minimum time in milliseconds to display the loading state.

const minimumTimeToDisplayLoading: number;
Вопросы и предложения по документации
Если у вас есть вопросы или вы хотите внести свой вклад в написание документации, пожалуйста, создайте issue в нашем репозитории на GitHub.