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.

npm install --save virtual-select-plugin

Installation

npm install ngx-virtual-select --save

Usage

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

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

<ngx-virtual-select-dvx
  [options]="options"
  [valueKey]="valueKey"
  [labelKey]="labelKey"
  (onChange)="onChange($event)"
/>

Example 1: Using ViewChild

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

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

<ngx-virtual-select-dvx
  #ngxVirtualSelect
  [options]="options"
  [valueKey]="valueKey"
  [labelKey]="labelKey"
  (onChange)="onChange($event)"
/>

Example 2: Using QuerySelector

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

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

<ngx-virtual-select-dvx
  id="ngxVirtualSelect"
  [options]="options"
  [valueKey]="valueKey"
  [labelKey]="labelKey"
  (onChange)="onChange($event)"
/>

Example 3: Using Bootstrap

<!-- Import theme css: bs3, bs4 or bs5 -->
<link rel="stylesheet" href="./node_modules/ngx-virtual-select/src/themes/bs4_bs5.theme.css" />

<!-- Add Bootstrap class -->
<ngx-virtual-select-dvx
  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