Select api
NbSelectComponent
Inputs
| Name | Type | Description |
| appearance | NbSelectAppearance | Select appearances: |
| optionsListClass | Specifies class to be set on | |
| optionsOverlayOffset | number | Determines options overlay offset (in pixels). |
| optionsPanelClass | Specifies class for the overlay panel with options | |
| placeholder | string | Renders select placeholder if nothing selected. |
| scrollStrategy | NbScrollStrategies | Determines options overlay scroll strategy. |
| shape | NbComponentShape | Select shapes: |
| size | NbComponentSize | Select size, available sizes:
|
| status | NbComponentOrCustomStatus | Select status (adds specific styles):
|
| compareWith | NbSelectCompareFunction | A function to compare option value with selected value.
By default, values are compared with strict equality ( |
| disabled | boolean | Disables the select |
| filled | boolean | Adds |
| fullWidth | boolean | If set element will fill its container |
| hero | boolean | Adds |
| multiple | boolean | Gives capability just write |
| outline | boolean | Adds |
| selected | any | Accepts selected item or array of selected items. |
Outputs
| Name | Type | Description |
| selectedChange | EventEmitter<any> | Will be emitted when selected value changes. |
Properties
| Name | Type | Description |
| customLabel | any | Custom select label, will be rendered instead of default enumeration with coma. |
| options | QueryList<NbOptionComponent> | List of |
| overlayPosition | NbPosition | Current overlay position because of we have to toggle overlayPosition in [ngClass] direction and this directive can use only string. |
| portal | NbPortalDirective | NbCard with options content. |
| queue | any | If a user assigns value before content nb-options's rendered the value will be putted in this variable. And then applied after content rendered. Only the last value will be applied. |
| selectionModel | NbOptionComponent[] | List of selected options. |
| hostWidth | number | Returns width of the select button. |
| isHidden | boolean | Determines is select hidden. |
| isOpen | boolean | Determines is select opened. |
| selectionView | any | Content rendered in the label. |
Methods
| Name | Description |
| emitSelected() | parameters: selected: returns:anyvoidPropagate selected value. |
| handleMultipleSelect() | parameters: option: returns:NbOptionComponentvoidSelect for multiple options. |
| handleOptionClick() | parameters: option: returns:NbOptionComponentvoidSelects option or clear all selected options if value is null. |
| handleSingleSelect() | parameters: option: returns:NbOptionComponentvoidSelect single option. |
| onChange() | returns: voidFunction passed through control value accessor to propagate changes. |
| reset() | returns: voidDeselect all selected options. |
| selectOption() | parameters: option: returns:NbOptionComponentvoidDetermines how to select option as multiple or single. |
| selectValue() | parameters: value: returns:anyvoidSelects value. |
| setSelection() | parameters: value: returns:anyvoidSet selected value in model. |
| trySetTouched() | returns: voidSets touched if focus moved outside of button and overlay,
ignoring the case when focus moved to options overlay. |
NbOptionGroupComponent
Methods
| Name | Description |
| asyncUpdateOptionsDisabledState() | returns: voidUpdates options disabled state after promise resolution.
This way change detection will be triggered after options state updated.
Use this method when updating options during change detection run (e.g. QueryList.changes, lifecycle hooks). |
| updateOptionsDisabledState() | returns: voidSets disabled state for each option to current group disabled state. |
Need some help or found an issue?
Ask on Stack Overflow with tag `nebular` or post an issue on GitHub.
