@ng-select/ng-select

@ng-select/ng-select

Version 12.0.4
Published 21 days ago
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

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 {}

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.

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

[![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 21 days ago.
Package analyzed in 6042 ms.
Missing or incorrect documentation? Open an issue for this package.