NgxVirtualSelect

Component to integrate Virtual Select in Angular.

Official Plugin Documentation

Credits: https://github.com/sa-si-dev

Virtual Select GitHub: https://github.com/sa-si-dev/virtual-select

Virtual Select Documentation: https://sa-si-dev.github.io/virtual-select

Prerequisites

Follow official documentation to install it.
``bash
npm install --save virtual-select-plugin
`

Installation

`bash
npm install ngx-virtual-select --save
`

Usage

`typescript
import { NgxVirtualSelectComponent } from 'ngx-virtual-select';
`

`typescript
@Component({
selector: 'app-root',
standalone: true,
imports: [NgxVirtualSelectComponent]
})
`

`html
[options]="options"
[valueKey]="valueKey"
[labelKey]="labelKey"
(onChange)="onChange($event)"
/>
`

$3

`typescript
@ViewChild('ngxVirtualSelect') vSelect!: NgxVirtualSelectComponent;

this.vSelect.ref.setValue('123', true);
this.vSelect.ref.disable();
`

`html
#ngxVirtualSelect
[options]="options"
[valueKey]="valueKey"
[labelKey]="labelKey"
(onChange)="onChange($event)"
/>
`

$3

`typescript
const vSelect = document.querySelector("#ngxVirtualSelect > .vscomp-ele") as any;

vSelect.setValue('123', true);
vSelect.disable();
`

`html
id="ngxVirtualSelect"
[options]="options"
[valueKey]="valueKey"
[labelKey]="labelKey"
(onChange)="onChange($event)"
/>
`

$3

`html




class="form-control"
[options]="options"
[valueKey]="valueKey"
[labelKey]="labelKey"
(onChange)="onChange($event)"
/>
``

Properties and Events

| Property | Type |
| --- | --- |
| dropboxWrapper | string |
| options | any[]
| valueKey | string
| labelKey | string
| descriptionKey | string
| aliasKey | string |
| disabledOptions | any[]
| multiple | boolean
| search | boolean
| searchByStartsWith | boolean
| searchGroup | boolean
| searchNormalize | boolean |
| disabled | boolean |
| required | boolean |
| autofocus | boolean
| hideClearButton | boolean
| autoSelectFirstOption | boolean
| hasOptionDescription | boolean
| disableSelectAll | boolean
| optionsCount | number |
| optionHeight | string |
| position | string |
| textDirection | string |
| selectedValue | string |
| silentInitialValueSet | boolean |
| dropboxWidth | string |
| zIndex | number |
| noOfDisplayValues | number |
| allowNewOption | boolean |
| tooltipFontSize | string |
| tooltipAlignment | string |
| tooltipMaxWidth | string |
| showSelectedOptionsFirst | boolean |
| focusSelectedOptionOnOpen | boolean |
| markSearchResults | boolean |
| name | string |
| keepAlwaysOpen | boolean |
| maxValues | number |
| minValues | number |
| additionalClasses | string |
| additionalDropboxClasses | string |
| additionalDropboxContainerClasses | string |
| additionalToggleButtonClasses | string |
| showDropboxAsPopup | boolean |
| popupDropboxBreakpoint | string |
| popupPosition | string |
| onServerSearch | Function |
| searchDelay | number |
| labelRenderer | Function |
| selectedLabelRenderer | Function |
| hideValueTooltipOnSelectAll | boolean |
| showOptionsOnlyOnSearch | boolean |
| selectAllOnlyVisible | boolean |
| alwaysShowSelectedOptionsCount | boolean |
| alwaysShowSelectedOptionsLabel | boolean |
| disableAllOptionsSelectedText | boolean |
| showValueAsTags | boolean |
| disableOptionGroupCheckbox | boolean |
| enableSecureText | boolean |
| setValueAsArray | boolean |
| emptyValue | string |
| disableValidation | boolean |
| useGroupValue | boolean |
| maxWidth | string |
| updatePositionThrottle | number |
| showDuration | number |
| hideDuration | number |
| --- | --- |
| ariaLabelledby | string |
| ariaLabelText | string |
| ariaLabelTagClearButtonText | string |
| ariaLabelSearchClearButtonText | string |
| ariaLabelClearButtonText | string |
| ariaLabelSelectAllButtonText | string |
| placeholder | string |
| noOptionsText | string |
| noSearchResultsText | string |
| selectAllText | string |
| searchFormLabel | string |
| searchPlaceholderText | string |
| optionsSelectedText | string |
| optionSelectedText | string |
| allOptionsSelectedText | string |
| clearButtonText | string |
| moreText | string |
| --- | --- |
| onChange | Function |
| onBeforeOpen | Function |
| onAfterOpen | Function |
| onBeforeClose | Function |
| onAfterClose | Function |
| onReset | Function |
| onBeforeRender | Function |
| onRender | Function |