@ng-select/ng-select
- Version 12.0.4
- Published
- 846 kB
- 1 dependency
- MIT license
Install
npm i @ng-select/ng-select
yarn add @ng-select/ng-select
pnpm add @ng-select/ng-select
Overview
Angular ng-select - All in One UI Select, Multiselect and Autocomplete
Index
Variables
Classes
NgSelectComponent
- addEvent
- addTag
- addTagText
- appearance
- appendTo
- bindLabel
- bindValue
- blur()
- blurEvent
- bufferAmount
- changeEvent
- classes
- clearable
- clearAllText
- clearButton
- clearEvent
- clearItem
- clearModel()
- clearOnBackspace
- clearSearchOnAdd
- close()
- closeEvent
- closeOnSelect
- compareWith
- config
- currentPanelPosition
- deselectOnClick
- detectChanges()
- disabled
- dropdownId
- dropdownPanel
- dropdownPosition
- editableSearchTerm
- element
- escapeHTML
- filter()
- filtered
- focus()
- focused
- focusEvent
- focusOnClear()
- footerTemplate
- groupBy
- groupValue
- handleArrowClick()
- handleClearClick()
- handleKeyCode()
- handleKeyCodeClear()
- handleKeyCodeInput()
- handleKeyDown()
- handleMousedown()
- hasValue
- headerTemplate
- hideSelected
- inputAttrs
- isOpen
- items
- itemsList
- keyDownFn
- labelForId
- labelTemplate
- loading
- loadingSpinnerTemplate
- loadingText
- loadingTextTemplate
- markFirst
- maxSelectedItems
- minTermLength
- multiLabelTemplate
- multiple
- ngAfterViewInit()
- ngOnChanges()
- ngOnDestroy()
- ngOnInit()
- ngOptions
- notFoundTemplate
- notFoundText
- onCompositionEnd()
- onCompositionStart()
- onInputBlur()
- onInputFocus()
- onItemHover()
- open()
- openEvent
- openOnEnter
- optgroupTemplate
- optionTemplate
- ɵcmp
- ɵfac
- placeholder
- readonly
- registerOnChange()
- registerOnTouched()
- removeEvent
- scroll
- scrollToEnd
- searchable
- searchEvent
- searchFn
- searchInput
- searchTerm
- searchWhileComposing
- select()
- selectableGroup
- selectableGroupAsModel
- selectedItems
- selectedValues
- selectOnTab
- selectTag()
- setDisabledState()
- showAddTag
- showClear()
- showNoItemsFound()
- showTypeToSearch()
- single
- tabIndex
- tagTemplate
- toggle()
- toggleItem()
- trackByFn
- trackByOption
- typeahead
- typeToSearchTemplate
- typeToSearchText
- unselect()
- useDefaultClass
- viewPortItems
- virtualScroll
- writeValue()
Interfaces
Type Aliases
Variables
variable SELECTION_MODEL_FACTORY
const SELECTION_MODEL_FACTORY: InjectionToken<SelectionModelFactory>;
Classes
class NgFooterTemplateDirective
class NgFooterTemplateDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NgFooterTemplateDirective, '[ng-footer-tmp]', never, {}, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgFooterTemplateDirective, never>;
property template
template: TemplateRef<any>;
class NgHeaderTemplateDirective
class NgHeaderTemplateDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NgHeaderTemplateDirective, '[ng-header-tmp]', never, {}, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgHeaderTemplateDirective, never>;
property template
template: TemplateRef<any>;
class NgItemLabelDirective
class NgItemLabelDirective implements OnChanges {}
constructor
constructor(element: ElementRef<HTMLElement>);
property escape
escape: boolean;
property ngItemLabel
ngItemLabel: string;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NgItemLabelDirective, '[ngItemLabel]', never, { ngItemLabel: { alias: 'ngItemLabel'; required: false }; escape: { alias: 'escape'; required: false }; }, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgItemLabelDirective, never>;
method ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
class NgLabelTemplateDirective
class NgLabelTemplateDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NgLabelTemplateDirective, '[ng-label-tmp]', never, {}, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgLabelTemplateDirective, never>;
property template
template: TemplateRef<any>;
class NgLoadingSpinnerTemplateDirective
class NgLoadingSpinnerTemplateDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NgLoadingSpinnerTemplateDirective, '[ng-loadingspinner-tmp]', never, {}, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgLoadingSpinnerTemplateDirective, never>;
property template
template: TemplateRef<any>;
class NgLoadingTextTemplateDirective
class NgLoadingTextTemplateDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NgLoadingTextTemplateDirective, '[ng-loadingtext-tmp]', never, {}, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgLoadingTextTemplateDirective, never>;
property template
template: TemplateRef<any>;
class NgMultiLabelTemplateDirective
class NgMultiLabelTemplateDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NgMultiLabelTemplateDirective, '[ng-multi-label-tmp]', never, {}, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgMultiLabelTemplateDirective, never>;
property template
template: TemplateRef<any>;
class NgNotFoundTemplateDirective
class NgNotFoundTemplateDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NgNotFoundTemplateDirective, '[ng-notfound-tmp]', never, {}, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgNotFoundTemplateDirective, never>;
property template
template: TemplateRef<any>;
class NgOptgroupTemplateDirective
class NgOptgroupTemplateDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NgOptgroupTemplateDirective, '[ng-optgroup-tmp]', never, {}, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgOptgroupTemplateDirective, never>;
property template
template: TemplateRef<any>;
class NgOptionComponent
class NgOptionComponent implements OnChanges, AfterViewChecked, OnDestroy {}
constructor
constructor(elementRef: ElementRef<HTMLElement>);
property disabled
disabled: any;
property elementRef
elementRef: ElementRef<HTMLElement>;
property label
readonly label: string;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NgOptionComponent, 'ng-option', never, { value: { alias: 'value'; required: false }; disabled: { alias: 'disabled'; required: false }; }, {}, never, ['*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgOptionComponent, never>;
property stateChange$
readonly stateChange$: Subject<{ value: any; disabled: boolean; label?: string;}>;
property value
value: any;
method ngAfterViewChecked
ngAfterViewChecked: () => void;
method ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
method ngOnDestroy
ngOnDestroy: () => void;
class NgOptionTemplateDirective
class NgOptionTemplateDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NgOptionTemplateDirective, '[ng-option-tmp]', never, {}, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgOptionTemplateDirective, never>;
property template
template: TemplateRef<any>;
class NgSelectComponent
class NgSelectComponent implements OnDestroy, OnChanges, OnInit, AfterViewInit, ControlValueAccessor {}
constructor
constructor( classes: string, autoFocus: any, config: NgSelectConfig, newSelectionModel: SelectionModelFactory, _elementRef: ElementRef<HTMLElement>, _cd: ChangeDetectorRef, _console: ConsoleService);
property addEvent
addEvent: EventEmitter<any>;
property addTag
addTag: boolean | AddTagFn;
property addTagText
addTagText: string;
property appearance
appearance: string;
property appendTo
appendTo: string;
property bindLabel
bindLabel: string;
property bindValue
bindValue: string;
property blurEvent
blurEvent: EventEmitter<any>;
property bufferAmount
bufferAmount: number;
property changeEvent
changeEvent: EventEmitter<any>;
property classes
classes: string;
property clearable
clearable: boolean;
property clearAllText
clearAllText: string;
property clearButton
clearButton: ElementRef<HTMLSpanElement>;
property clearEvent
clearEvent: EventEmitter<any>;
property clearItem
clearItem: (item: any) => void;
property clearOnBackspace
clearOnBackspace: boolean;
property clearSearchOnAdd
clearSearchOnAdd: boolean;
property closeEvent
closeEvent: EventEmitter<any>;
property closeOnSelect
closeOnSelect: boolean;
property compareWith
compareWith: CompareWithFn;
property config
config: NgSelectConfig;
property currentPanelPosition
readonly currentPanelPosition: DropdownPosition;
property deselectOnClick
deselectOnClick: boolean;
property disabled
readonly disabled: boolean;
property dropdownId
dropdownId: string;
property dropdownPanel
dropdownPanel: NgDropdownPanelComponent;
property dropdownPosition
dropdownPosition: DropdownPosition;
property editableSearchTerm
editableSearchTerm: boolean;
property element
element: HTMLElement;
property escapeHTML
escapeHTML: boolean;
property filtered
readonly filtered: boolean;
property focused
focused: boolean;
property focusEvent
focusEvent: EventEmitter<any>;
property footerTemplate
footerTemplate: TemplateRef<any>;
property groupBy
groupBy: string | ((value: any) => any);
property groupValue
groupValue: GroupValueFn;
property hasValue
readonly hasValue: boolean;
property headerTemplate
headerTemplate: TemplateRef<any>;
property hideSelected
hideSelected: boolean;
property inputAttrs
inputAttrs: { [key: string]: string };
property isOpen
isOpen: boolean;
property items
items: readonly any[];
property itemsList
itemsList: ItemsList;
property keyDownFn
keyDownFn: (_: KeyboardEvent) => boolean;
property labelForId
labelForId: any;
property labelTemplate
labelTemplate: TemplateRef<any>;
property loading
loading: boolean;
property loadingSpinnerTemplate
loadingSpinnerTemplate: TemplateRef<any>;
property loadingText
loadingText: string;
property loadingTextTemplate
loadingTextTemplate: TemplateRef<any>;
property markFirst
markFirst: boolean;
property maxSelectedItems
maxSelectedItems: number;
property minTermLength
minTermLength: number;
property multiLabelTemplate
multiLabelTemplate: TemplateRef<any>;
property multiple
multiple: boolean;
property ngOptions
ngOptions: QueryList<NgOptionComponent>;
property notFoundTemplate
notFoundTemplate: TemplateRef<any>;
property notFoundText
notFoundText: string;
property openEvent
openEvent: EventEmitter<any>;
property openOnEnter
openOnEnter: boolean;
property optgroupTemplate
optgroupTemplate: TemplateRef<any>;
property optionTemplate
optionTemplate: TemplateRef<any>;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NgSelectComponent, 'ng-select', never, { bindLabel: { alias: 'bindLabel'; required: false }; bindValue: { alias: 'bindValue'; required: false }; markFirst: { alias: 'markFirst'; required: false }; placeholder: { alias: 'placeholder'; required: false }; notFoundText: { alias: 'notFoundText'; required: false }; typeToSearchText: { alias: 'typeToSearchText'; required: false }; addTagText: { alias: 'addTagText'; required: false }; loadingText: { alias: 'loadingText'; required: false }; clearAllText: { alias: 'clearAllText'; required: false }; appearance: { alias: 'appearance'; required: false }; dropdownPosition: { alias: 'dropdownPosition'; required: false }; appendTo: { alias: 'appendTo'; required: false }; loading: { alias: 'loading'; required: false }; closeOnSelect: { alias: 'closeOnSelect'; required: false }; hideSelected: { alias: 'hideSelected'; required: false }; selectOnTab: { alias: 'selectOnTab'; required: false }; openOnEnter: { alias: 'openOnEnter'; required: false }; maxSelectedItems: { alias: 'maxSelectedItems'; required: false }; groupBy: { alias: 'groupBy'; required: false }; groupValue: { alias: 'groupValue'; required: false }; bufferAmount: { alias: 'bufferAmount'; required: false }; virtualScroll: { alias: 'virtualScroll'; required: false }; selectableGroup: { alias: 'selectableGroup'; required: false }; selectableGroupAsModel: { alias: 'selectableGroupAsModel'; required: false; }; searchFn: { alias: 'searchFn'; required: false }; trackByFn: { alias: 'trackByFn'; required: false }; clearOnBackspace: { alias: 'clearOnBackspace'; required: false }; labelForId: { alias: 'labelForId'; required: false }; inputAttrs: { alias: 'inputAttrs'; required: false }; tabIndex: { alias: 'tabIndex'; required: false }; readonly: { alias: 'readonly'; required: false }; searchWhileComposing: { alias: 'searchWhileComposing'; required: false }; minTermLength: { alias: 'minTermLength'; required: false }; editableSearchTerm: { alias: 'editableSearchTerm'; required: false }; keyDownFn: { alias: 'keyDownFn'; required: false }; typeahead: { alias: 'typeahead'; required: false }; multiple: { alias: 'multiple'; required: false }; addTag: { alias: 'addTag'; required: false }; searchable: { alias: 'searchable'; required: false }; clearable: { alias: 'clearable'; required: false }; isOpen: { alias: 'isOpen'; required: false }; items: { alias: 'items'; required: false }; compareWith: { alias: 'compareWith'; required: false }; clearSearchOnAdd: { alias: 'clearSearchOnAdd'; required: false }; deselectOnClick: { alias: 'deselectOnClick'; required: false }; }, { blurEvent: 'blur'; focusEvent: 'focus'; changeEvent: 'change'; openEvent: 'open'; closeEvent: 'close'; searchEvent: 'search'; clearEvent: 'clear'; addEvent: 'add'; removeEvent: 'remove'; scroll: 'scroll'; scrollToEnd: 'scrollToEnd'; }, [ 'optionTemplate', 'optgroupTemplate', 'labelTemplate', 'multiLabelTemplate', 'headerTemplate', 'footerTemplate', 'notFoundTemplate', 'typeToSearchTemplate', 'loadingTextTemplate', 'tagTemplate', 'loadingSpinnerTemplate', 'ngOptions' ], never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NgSelectComponent, [ { attribute: 'class' }, { attribute: 'autofocus' }, null, null, null, null, null ]>;
property placeholder
placeholder: string;
property readonly
readonly: boolean;
property removeEvent
removeEvent: EventEmitter<any>;
property scroll
scroll: EventEmitter<{ start: number; end: number }>;
property scrollToEnd
scrollToEnd: EventEmitter<any>;
property searchable
searchable: boolean;
property searchEvent
searchEvent: EventEmitter<{ term: string; items: any[] }>;
property searchFn
searchFn: any;
property searchInput
searchInput: ElementRef<HTMLInputElement>;
property searchTerm
searchTerm: string;
property searchWhileComposing
searchWhileComposing: boolean;
property selectableGroup
selectableGroup: boolean;
property selectableGroupAsModel
selectableGroupAsModel: boolean;
property selectedItems
readonly selectedItems: NgOption[];
property selectedValues
readonly selectedValues: any[];
property selectOnTab
selectOnTab: boolean;
property showAddTag
readonly showAddTag: boolean;
property single
readonly single: boolean;
property tabIndex
tabIndex: number;
property tagTemplate
tagTemplate: TemplateRef<any>;
property trackByFn
trackByFn: any;
property trackByOption
trackByOption: (_: number, item: NgOption) => any;
property typeahead
typeahead: Subject<string>;
property typeToSearchTemplate
typeToSearchTemplate: TemplateRef<any>;
property typeToSearchText
typeToSearchText: string;
property useDefaultClass
useDefaultClass: boolean;
property viewPortItems
viewPortItems: NgOption[];
property virtualScroll
virtualScroll: boolean;
method blur
blur: () => void;
method clearModel
clearModel: () => void;
method close
close: () => void;
method detectChanges
detectChanges: () => void;
method filter
filter: (term: string) => void;
method focus
focus: () => void;
method focusOnClear
focusOnClear: () => void;
method handleArrowClick
handleArrowClick: () => void;
method handleClearClick
handleClearClick: () => void;
method handleKeyCode
handleKeyCode: ($event: KeyboardEvent) => void;
method handleKeyCodeClear
handleKeyCodeClear: ($event: KeyboardEvent) => void;
method handleKeyCodeInput
handleKeyCodeInput: ($event: KeyboardEvent) => void;
method handleKeyDown
handleKeyDown: ($event: KeyboardEvent) => void;
method handleMousedown
handleMousedown: ($event: MouseEvent) => void;
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
method onCompositionEnd
onCompositionEnd: (term: string) => void;
method onCompositionStart
onCompositionStart: () => void;
method onInputBlur
onInputBlur: ($event: any) => void;
method onInputFocus
onInputFocus: ($event: any) => void;
method onItemHover
onItemHover: (item: NgOption) => void;
method open
open: () => void;
method registerOnChange
registerOnChange: (fn: any) => void;
method registerOnTouched
registerOnTouched: (fn: any) => void;
method select
select: (item: NgOption) => void;
method selectTag
selectTag: () => void;
method setDisabledState
setDisabledState: (state: boolean) => void;
method showClear
showClear: () => boolean;
method showNoItemsFound
showNoItemsFound: () => boolean;
method showTypeToSearch
showTypeToSearch: () => boolean;
method toggle
toggle: () => void;
method toggleItem
toggleItem: (item: NgOption) => void;
method unselect
unselect: (item: NgOption) => void;
method writeValue
writeValue: (value: any | any[]) => void;
class NgSelectConfig
class NgSelectConfig {}
property addTagText
addTagText: string;
property appearance
appearance: string;
property appendTo
appendTo: string;
property bindLabel
bindLabel: string;
property bindValue
bindValue: string;
property clearAllText
clearAllText: string;
property clearSearchOnAdd
clearSearchOnAdd: boolean;
property deselectOnClick
deselectOnClick: boolean;
property disableVirtualScroll
disableVirtualScroll: boolean;
property loadingText
loadingText: string;
property notFoundText
notFoundText: string;
property openOnEnter
openOnEnter: boolean;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgSelectConfig, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<NgSelectConfig>;
property placeholder
placeholder: string;
property typeToSearchText
typeToSearchText: string;
class NgSelectModule
class NgSelectModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgSelectModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NgSelectModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NgSelectModule, [ typeof i1.NgDropdownPanelComponent, typeof i2.NgOptionComponent, typeof i3.NgSelectComponent, typeof i4.NgOptgroupTemplateDirective, typeof i4.NgOptionTemplateDirective, typeof i4.NgLabelTemplateDirective, typeof i4.NgMultiLabelTemplateDirective, typeof i4.NgHeaderTemplateDirective, typeof i4.NgFooterTemplateDirective, typeof i4.NgNotFoundTemplateDirective, typeof i4.NgTypeToSearchTemplateDirective, typeof i4.NgLoadingTextTemplateDirective, typeof i4.NgTagTemplateDirective, typeof i4.NgLoadingSpinnerTemplateDirective, typeof i4.NgItemLabelDirective ], [any], [ typeof i3.NgSelectComponent, typeof i2.NgOptionComponent, typeof i4.NgOptgroupTemplateDirective, typeof i4.NgOptionTemplateDirective, typeof i4.NgLabelTemplateDirective, typeof i4.NgMultiLabelTemplateDirective, typeof i4.NgHeaderTemplateDirective, typeof i4.NgFooterTemplateDirective, typeof i4.NgNotFoundTemplateDirective, typeof i4.NgTypeToSearchTemplateDirective, typeof i4.NgLoadingTextTemplateDirective, typeof i4.NgTagTemplateDirective, typeof i4.NgLoadingSpinnerTemplateDirective ]>;
class NgTagTemplateDirective
class NgTagTemplateDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NgTagTemplateDirective, '[ng-tag-tmp]', never, {}, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgTagTemplateDirective, never>;
property template
template: TemplateRef<any>;
class NgTypeToSearchTemplateDirective
class NgTypeToSearchTemplateDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< NgTypeToSearchTemplateDirective, '[ng-typetosearch-tmp]', never, {}, {}, never, never, false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NgTypeToSearchTemplateDirective, never>;
property template
template: TemplateRef<any>;
Interfaces
interface NgOption
interface NgOption {}
property children
children?: NgOption[];
property disabled
disabled?: boolean;
property htmlId
htmlId?: string;
property index
index?: number;
property label
label?: string;
property marked
marked?: boolean;
property parent
parent?: NgOption;
property selected
selected?: boolean;
property value
value?: string | any;
index signature
[name: string]: any;
interface SelectionModel
interface SelectionModel {}
Type Aliases
type DropdownPosition
type DropdownPosition = 'top' | 'right' | 'bottom' | 'left' | 'auto';
Package Files (8)
Dependencies (1)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (3)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@ng-select/ng-select
.
- Markdown[](https://www.jsdocs.io/package/@ng-select/ng-select)
- HTML<a href="https://www.jsdocs.io/package/@ng-select/ng-select"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 6042 ms. - Missing or incorrect documentation? Open an issue for this package.