@ng-select/ng-select

@ng-select/ng-select

Version 10.0.3
Published 1 month ago
1.17 MB
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

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: 'ngItemLabel'; escape: 'escape' },
    {},
    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: 'value'; disabled: 'disabled' },
    {},
    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 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 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: 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: 'bindLabel';
        bindValue: 'bindValue';
        markFirst: 'markFirst';
        placeholder: 'placeholder';
        notFoundText: 'notFoundText';
        typeToSearchText: 'typeToSearchText';
        addTagText: 'addTagText';
        loadingText: 'loadingText';
        clearAllText: 'clearAllText';
        appearance: 'appearance';
        dropdownPosition: 'dropdownPosition';
        appendTo: 'appendTo';
        loading: 'loading';
        closeOnSelect: 'closeOnSelect';
        hideSelected: 'hideSelected';
        selectOnTab: 'selectOnTab';
        openOnEnter: 'openOnEnter';
        maxSelectedItems: 'maxSelectedItems';
        groupBy: 'groupBy';
        groupValue: 'groupValue';
        bufferAmount: 'bufferAmount';
        virtualScroll: 'virtualScroll';
        selectableGroup: 'selectableGroup';
        selectableGroupAsModel: 'selectableGroupAsModel';
        searchFn: 'searchFn';
        trackByFn: 'trackByFn';
        clearOnBackspace: 'clearOnBackspace';
        labelForId: 'labelForId';
        inputAttrs: 'inputAttrs';
        tabIndex: 'tabIndex';
        readonly: 'readonly';
        searchWhileComposing: 'searchWhileComposing';
        minTermLength: 'minTermLength';
        editableSearchTerm: 'editableSearchTerm';
        keyDownFn: 'keyDownFn';
        typeahead: 'typeahead';
        multiple: 'multiple';
        addTag: 'addTag';
        searchable: 'searchable';
        clearable: 'clearable';
        isOpen: 'isOpen';
        items: 'items';
        compareWith: 'compareWith';
        clearSearchOnAdd: 'clearSearchOnAdd';
    },
    {
        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 handleArrowClick

handleArrowClick: () => void;

method handleClearClick

handleClearClick: () => void;

method handleKeyCode

handleKeyCode: ($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 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 {}

property value

value: NgOption[];

method clear

clear: (keepDisabled: boolean) => any;

method select

select: (
    item: NgOption,
    multiple: boolean,
    selectableGroupAsModel: boolean
) => any;

method unselect

unselect: (item: NgOption, multiple: boolean) => any;

Type Aliases

type DropdownPosition

type DropdownPosition = 'top' | 'right' | 'bottom' | 'left' | 'auto';

Package Files (8)

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

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

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](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 1 month ago.
Package analyzed in 3750 ms.
Missing or incorrect documentation? Open an issue for this package.