import { KbqSelectModule } from '@koobiq/components/select';Selector: kbq-select-loading, [kbq-select-loading]
Exported as: kbqSelectLoadingSelector: kbq-option
| 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 |
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| 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: kbqSelectErrorTextComponent that represents the empty state of a select dropdown.
Selector: kbq-select-no-options, [kbq-select-no-options]
Exported as: kbqSelectNoOptionsSelector: kbq-select
Exported as: kbqSelect| 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 |
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 |
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. |
Change event object that is emitted when the select value has changed.
| 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;