@ng-select/ng-select

@ng-select/ng-select

Version 24.0.4
Published 1 day ago
668 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>;

DI token for SelectionModel implementation. You can provide custom implementation changing selection behaviour.

Functions

function DefaultSelectionModelFactory

DefaultSelectionModelFactory: () => DefaultSelectionModel;

Classes

class ConsoleService

class ConsoleService {}

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<ConsoleService, never>;

property ɵprov

static ɵprov: _angular_core.ɵɵInjectableDeclaration<ConsoleService>;

method warn

warn: (message: string) => void;

class DefaultSelectionModel

class DefaultSelectionModel implements SelectionModel {}

property value

readonly value: NgOption[];

method clear

clear: (keepDisabled: boolean) => void;

method select

select: (item: NgOption, multiple: boolean, groupAsModel: boolean) => void;

method unselect

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

class NgClearButtonTemplateDirective

class NgClearButtonTemplateDirective {}

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgClearButtonTemplateDirective,
    '[ng-clearbutton-tmp]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<
    NgClearButtonTemplateDirective,
    never
>;

property template

readonly template: TemplateRef<any>;

class NgDropdownPanelComponent

class NgDropdownPanelComponent implements OnInit, OnChanges {}

property ariaLabelDropdown

readonly ariaLabelDropdown: _angular_core.InputSignal<string>;

property bufferAmount

readonly bufferAmount: _angular_core.InputSignal<number>;

property currentPosition

readonly currentPosition: DropdownPosition;

property filterValue

readonly filterValue: _angular_core.InputSignal<string>;

property footerTemplate

readonly footerTemplate: _angular_core.InputSignal<TemplateRef<any>>;

property headerTemplate

readonly headerTemplate: _angular_core.InputSignal<TemplateRef<any>>;

property items

readonly items: _angular_core.InputSignal<NgOption[]>;

property listboxId

readonly listboxId: _angular_core.InputSignal<string>;

property markedItem

readonly markedItem: _angular_core.InputSignal<NgOption>;

property outsideClick

readonly outsideClick: _angular_core.OutputEmitterRef<void>;

property outsideClickEvent

readonly outsideClickEvent: _angular_core.InputSignal<'click' | 'mousedown'>;

Which DOM event to listen to for outside click detection

property overlayRef

readonly overlayRef: _angular_core.InputSignal<OverlayRef>;

Overlay hosting this panel. Used to request repositioning when the rendered content changes.

property ɵcmp

static ɵcmp: _angular_core.ɵɵComponentDeclaration<
    NgDropdownPanelComponent,
    'ng-dropdown-panel',
    never,
    {
        items: { alias: 'items'; required: false; isSignal: true };
        showAddTag: { alias: 'showAddTag'; required: false; isSignal: true };
        markedItem: { alias: 'markedItem'; required: false; isSignal: true };
        position: { alias: 'position'; required: false; isSignal: true };
        bufferAmount: { alias: 'bufferAmount'; required: false; isSignal: true };
        virtualScroll: {
            alias: 'virtualScroll';
            required: false;
            isSignal: true;
        };
        headerTemplate: {
            alias: 'headerTemplate';
            required: false;
            isSignal: true;
        };
        footerTemplate: {
            alias: 'footerTemplate';
            required: false;
            isSignal: true;
        };
        filterValue: { alias: 'filterValue'; required: false; isSignal: true };
        ariaLabelDropdown: {
            alias: 'ariaLabelDropdown';
            required: false;
            isSignal: true;
        };
        listboxId: { alias: 'listboxId'; required: false; isSignal: true };
        outsideClickEvent: {
            alias: 'outsideClickEvent';
            required: false;
            isSignal: true;
        };
        popover: { alias: 'popover'; required: false; isSignal: true };
        overlayRef: { alias: 'overlayRef'; required: false; isSignal: true };
        selectElement: {
            alias: 'selectElement';
            required: false;
            isSignal: true;
        };
    },
    {
        update: 'update';
        scroll: 'scroll';
        scrollToEnd: 'scrollToEnd';
        outsideClick: 'outsideClick';
    },
    never,
    ['*'],
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDropdownPanelComponent, never>;

property popover

readonly popover: _angular_core.InputSignalWithTransform<boolean, unknown>;

Deprecated
Has no effect: the CDK overlay renders in the native Popover API top layer automatically in supporting browsers. Will be removed in a future major version.

property position

readonly position: _angular_core.InputSignal<DropdownPosition>;

property scroll

readonly scroll: _angular_core.OutputEmitterRef<{ start: number; end: number }>;

property scrollToEnd

readonly scrollToEnd: _angular_core.OutputEmitterRef<void>;

property selectElement

readonly selectElement: _angular_core.InputSignal<HTMLElement>;

Host ng-select element. The panel's DOM lives in the overlay, so the host cannot be derived from the DOM tree.

property showAddTag

readonly showAddTag: _angular_core.InputSignalWithTransform<boolean, unknown>;

property update

readonly update: _angular_core.OutputEmitterRef<any[]>;

property virtualScroll

readonly virtualScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;

method adjustPosition

adjustPosition: () => void;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnInit

ngOnInit: () => void;

method scrollTo

scrollTo: (option: NgOption, startFromOption?: boolean) => void;

method scrollToTag

scrollToTag: () => void;

class NgDropdownPanelService

class NgDropdownPanelService {}

property dimensions

readonly dimensions: PanelDimensions;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDropdownPanelService, never>;

property ɵprov

static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgDropdownPanelService>;

method calculateItems

calculateItems: (
    scrollPos: number,
    itemsLength: number,
    buffer: number,
    items?: readonly VirtualScrollItem[]
) => ItemsRangeResult;

method getItemHeight

getItemHeight: (item: VirtualScrollItem | null | undefined) => number;

method getItemOffset

getItemOffset: (items: readonly VirtualScrollItem[], index: number) => number;

method getScrollHeight

getScrollHeight: (items: readonly VirtualScrollItem[]) => number;

method getScrollTo

getScrollTo: (itemTop: number, itemHeight: number, lastScroll: number) => number;

method setDimensions

setDimensions: (
    itemHeight: number,
    panelHeight: number,
    groupHeight?: number
) => void;

class NgFooterTemplateDirective

class NgFooterTemplateDirective {}

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgFooterTemplateDirective,
    '[ng-footer-tmp]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<
    NgFooterTemplateDirective,
    never
>;

property template

readonly template: TemplateRef<any>;

class NgHeaderTemplateDirective

class NgHeaderTemplateDirective {}

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgHeaderTemplateDirective,
    '[ng-header-tmp]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<
    NgHeaderTemplateDirective,
    never
>;

property template

readonly template: TemplateRef<any>;

class NgItemLabelDirective

class NgItemLabelDirective {}

Deprecated
Default labels are plain text via interpolation. Prefer {{ label }} or custom templates (ng-label-tmp / ng-option-tmp) for rich markup. Kept for public API compatibility; always writes textContent (the escape input is ignored).

constructor

constructor();

property escape

escape: _angular_core.InputSignal<boolean>;

Deprecated
Ignored — labels are always written as text.

property ngItemLabel

ngItemLabel: _angular_core.InputSignal<string>;

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgItemLabelDirective,
    '[ngItemLabel]',
    never,
    {
        ngItemLabel: { alias: 'ngItemLabel'; required: false; isSignal: true };
        escape: { alias: 'escape'; required: false; isSignal: true };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgItemLabelDirective, never>;

class NgLabelTemplateDirective

class NgLabelTemplateDirective {}

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgLabelTemplateDirective,
    '[ng-label-tmp]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgLabelTemplateDirective, never>;

property template

readonly template: TemplateRef<any>;

class NgLoadingSpinnerTemplateDirective

class NgLoadingSpinnerTemplateDirective {}

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgLoadingSpinnerTemplateDirective,
    '[ng-loadingspinner-tmp]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<
    NgLoadingSpinnerTemplateDirective,
    never
>;

property template

readonly template: TemplateRef<any>;

class NgLoadingTextTemplateDirective

class NgLoadingTextTemplateDirective {}

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgLoadingTextTemplateDirective,
    '[ng-loadingtext-tmp]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<
    NgLoadingTextTemplateDirective,
    never
>;

property template

readonly template: TemplateRef<any>;

class NgMultiLabelTemplateDirective

class NgMultiLabelTemplateDirective {}

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgMultiLabelTemplateDirective,
    '[ng-multi-label-tmp]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<
    NgMultiLabelTemplateDirective,
    never
>;

property template

readonly template: TemplateRef<any>;

class NgNotFoundTemplateDirective

class NgNotFoundTemplateDirective {}

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgNotFoundTemplateDirective,
    '[ng-notfound-tmp]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<
    NgNotFoundTemplateDirective,
    never
>;

property template

readonly template: TemplateRef<any>;

class NgOptgroupTemplateDirective

class NgOptgroupTemplateDirective {}

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgOptgroupTemplateDirective,
    '[ng-optgroup-tmp]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<
    NgOptgroupTemplateDirective,
    never
>;

property template

readonly template: TemplateRef<any>;

class NgOptionComponent

class NgOptionComponent implements OnInit {}

Declares an option for ng-select declared via HTML. Use the value input to bind the option's value and the element content as its label.

constructor

constructor();

property classes

readonly classes: _angular_core.WritableSignal<string>;

property disabled

readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;

Whether the option is disabled and cannot be selected.

property elementRef

readonly elementRef: ElementRef<any>;

property isInitialized

readonly isInitialized: _angular_core.WritableSignal<boolean>;

True when this component's inputs are initialized (after first change detection).

property label

readonly label: _angular_core.WritableSignal<string>;

property ɵcmp

static ɵcmp: _angular_core.ɵɵComponentDeclaration<
    NgOptionComponent,
    'ng-option',
    never,
    {
        value: { alias: 'value'; required: false; isSignal: true };
        disabled: { alias: 'disabled'; required: false; isSignal: true };
    },
    {},
    never,
    ['*'],
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOptionComponent, never>;

property value

readonly value: _angular_core.InputSignal<any>;

Value bound to the option. The projected element content is used as the option's label.

method ngOnInit

ngOnInit: () => void;

class NgOptionTemplateDirective

class NgOptionTemplateDirective {}

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgOptionTemplateDirective,
    '[ng-option-tmp]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<
    NgOptionTemplateDirective,
    never
>;

property template

readonly template: TemplateRef<any>;

class NgPlaceholderTemplateDirective

class NgPlaceholderTemplateDirective {}

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgPlaceholderTemplateDirective,
    '[ng-placeholder-tmp]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<
    NgPlaceholderTemplateDirective,
    never
>;

property template

readonly template: TemplateRef<any>;

class NgSelectComponent

class NgSelectComponent
    implements OnChanges, OnInit, AfterViewInit, ControlValueAccessor {}

constructor

constructor();

property addEvent

readonly addEvent: _angular_core.OutputEmitterRef<any>;

Fired when item is added while [multiple]="true". Outputs added item

property addTag

readonly addTag: _angular_core.WritableSignal<boolean | AddTagFn>;

property addTagText

readonly addTagText: _angular_core.WritableSignal<string>;

property appearance

readonly appearance: _angular_core.ModelSignal<string>;

Allows to select dropdown appearance. Set to outline or fill for Material form-field styles (applies only to Material theme)

property appendTo

readonly appendTo: _angular_core.WritableSignal<string>;

property ariaLabel

readonly ariaLabel: _angular_core.WritableSignal<string>;

property ariaLabelDropdown

readonly ariaLabelDropdown: _angular_core.WritableSignal<string>;

property bindLabel

readonly bindLabel: _angular_core.ModelSignal<string>;

Object property to use for label. Default label

property bindValue

readonly bindValue: _angular_core.ModelSignal<string>;

Object property to use for selected model. By default binds to whole object.

property blurEvent

readonly blurEvent: _angular_core.OutputEmitterRef<any>;

Fired on select blur

property bufferAmount

readonly bufferAmount: _angular_core.WritableSignal<number>;

property changeEvent

readonly changeEvent: _angular_core.OutputEmitterRef<any>;

Fired on model change. Outputs whole model

property classes

readonly classes: string;

property clearable

readonly clearable: _angular_core.WritableSignal<boolean>;

property clearAllText

readonly clearAllText: _angular_core.WritableSignal<string>;

property clearButton

readonly clearButton: _angular_core.Signal<ElementRef<HTMLSpanElement>>;

property clearButtonTemplate

readonly clearButtonTemplate: _angular_core.Signal<TemplateRef<any>>;

property clearEvent

readonly clearEvent: _angular_core.OutputEmitterRef<void>;

Fired on clear icon click

property clearItem

clearItem: (item: any) => void;

property clearKeepsDisabledOptions

readonly clearKeepsDisabledOptions: _angular_core.WritableSignal<boolean>;

property clearOnBackspace

readonly clearOnBackspace: _angular_core.WritableSignal<boolean>;

property clearSearchOnAdd

readonly clearSearchOnAdd: _angular_core.WritableSignal<any>;

property clearSearchOnAddValue

readonly clearSearchOnAddValue: _angular_core.Signal<any>;

property closeEvent

readonly closeEvent: _angular_core.OutputEmitterRef<void>;

Fired on select dropdown close

property closeOnSelect

readonly closeOnSelect: _angular_core.WritableSignal<boolean>;

property compareWith

readonly compareWith: _angular_core.WritableSignal<CompareWithFn>;

property config

readonly config: NgSelectConfig;

property currentPanelPosition

readonly currentPanelPosition: DropdownPosition;

property deselectOnClick

readonly deselectOnClick: _angular_core.WritableSignal<boolean>;

property deselectOnClickValue

readonly deselectOnClickValue: _angular_core.Signal<boolean>;

property disabled

readonly disabled: _angular_core.Signal<boolean>;

property dropdownId

readonly dropdownId: string;

property dropdownOverlayRef

protected dropdownOverlayRef: any;

Overlay hosting the dropdown panel while open. Bound into the panel so it can request repositioning.

property dropdownPanel

readonly dropdownPanel: _angular_core.Signal<any>;

property dropdownPosition

readonly dropdownPosition: _angular_core.WritableSignal<DropdownPosition>;

property dropdownVirtualScroll

readonly dropdownVirtualScroll: _angular_core.Signal<boolean>;

property editableSearchTerm

readonly editableSearchTerm: _angular_core.WritableSignal<boolean>;

property element

readonly element: HTMLElement;

property filtered

readonly filtered: boolean;

property fixedPlaceholder

readonly fixedPlaceholder: _angular_core.WritableSignal<boolean>;

property focused

readonly focused: boolean;

property focusEvent

readonly focusEvent: _angular_core.OutputEmitterRef<any>;

Fired on select focus

property footerTemplate

readonly footerTemplate: _angular_core.Signal<TemplateRef<any>>;

property groupBy

readonly groupBy: _angular_core.WritableSignal<string | ((value: any) => any)>;

property groupValue

readonly groupValue: _angular_core.WritableSignal<GroupValueFn>;

property hasValue

readonly hasValue: boolean;

property headerTemplate

readonly headerTemplate: _angular_core.Signal<TemplateRef<any>>;

property hideSelected

readonly hideSelected: _angular_core.WritableSignal<boolean>;

property inputAttrs

readonly inputAttrs: _angular_core.WritableSignal<Record<string, string>>;

property isOpen

readonly isOpen: _angular_core.ModelSignal<boolean>;

Allows manual control of dropdown opening and closing. true - won't close. false - won't open.

property items

readonly items: _angular_core.ModelSignal<readonly any[]>;

Items array

property itemsList

itemsList: ItemsList;

property keyDownFn

readonly keyDownFn: _angular_core.WritableSignal<(_: KeyboardEvent) => boolean>;

property labelForId

readonly labelForId: _angular_core.WritableSignal<any>;

property labelTemplate

readonly labelTemplate: _angular_core.Signal<TemplateRef<any>>;

property loading

readonly loading: _angular_core.WritableSignal<boolean>;

property loadingSpinnerTemplate

readonly loadingSpinnerTemplate: _angular_core.Signal<TemplateRef<any>>;

property loadingText

readonly loadingText: _angular_core.WritableSignal<string>;

property loadingTextTemplate

readonly loadingTextTemplate: _angular_core.Signal<TemplateRef<any>>;

property markFirst

readonly markFirst: _angular_core.WritableSignal<boolean>;

property maxSelectedItems

readonly maxSelectedItems: _angular_core.WritableSignal<number>;

property minTermLength

readonly minTermLength: _angular_core.WritableSignal<number>;

property multiLabelTemplate

readonly multiLabelTemplate: _angular_core.Signal<TemplateRef<any>>;

property multiple

readonly multiple: _angular_core.WritableSignal<boolean>;

property ngClass

readonly ngClass: _angular_core.WritableSignal<ClassValue>;

property ngOptions

readonly ngOptions: _angular_core.Signal<readonly NgOptionComponent[]>;

property notFoundTemplate

readonly notFoundTemplate: _angular_core.Signal<TemplateRef<any>>;

property notFoundText

readonly notFoundText: _angular_core.WritableSignal<string>;

property openEvent

readonly openEvent: _angular_core.OutputEmitterRef<void>;

Fired on select dropdown open

property openOnEnter

readonly openOnEnter: _angular_core.WritableSignal<boolean>;

property optgroupTemplate

readonly optgroupTemplate: _angular_core.Signal<TemplateRef<any>>;

property optionTemplate

readonly optionTemplate: _angular_core.Signal<TemplateRef<any>>;

property outlineNotchWidth

readonly outlineNotchWidth: _angular_core.WritableSignal<number>;

Width of the notched-outline gap for the floated label in the material outline appearance

property outsideClickEvent

readonly outsideClickEvent: _angular_core.WritableSignal<'click' | 'mousedown'>;

property ɵcmp

static ɵcmp: _angular_core.ɵɵComponentDeclaration<
    NgSelectComponent,
    'ng-select',
    ['ngSelect'],
    {
        _ariaLabelDropdown: {
            alias: 'ariaLabelDropdown';
            required: false;
            isSignal: true;
        };
        _ariaLabel: { alias: 'ariaLabel'; required: false; isSignal: true };
        _markFirst: { alias: 'markFirst'; required: false; isSignal: true };
        _placeholder: { alias: 'placeholder'; required: false; isSignal: true };
        _fixedPlaceholder: {
            alias: 'fixedPlaceholder';
            required: false;
            isSignal: true;
        };
        _notFoundText: {
            alias: 'notFoundText';
            required: false;
            isSignal: true;
        };
        _typeToSearchText: {
            alias: 'typeToSearchText';
            required: false;
            isSignal: true;
        };
        _preventToggleOnRightClick: {
            alias: 'preventToggleOnRightClick';
            required: false;
            isSignal: true;
        };
        _addTagText: { alias: 'addTagText'; required: false; isSignal: true };
        _loadingText: { alias: 'loadingText'; required: false; isSignal: true };
        _clearAllText: {
            alias: 'clearAllText';
            required: false;
            isSignal: true;
        };
        _removeText: { alias: 'removeText'; required: false; isSignal: true };
        _dropdownPosition: {
            alias: 'dropdownPosition';
            required: false;
            isSignal: true;
        };
        _appendTo: { alias: 'appendTo'; required: false; isSignal: true };
        _outsideClickEvent: {
            alias: 'outsideClickEvent';
            required: false;
            isSignal: true;
        };
        _loading: { alias: 'loading'; required: false; isSignal: true };
        _closeOnSelect: {
            alias: 'closeOnSelect';
            required: false;
            isSignal: true;
        };
        _hideSelected: {
            alias: 'hideSelected';
            required: false;
            isSignal: true;
        };
        _selectOnTab: { alias: 'selectOnTab'; required: false; isSignal: true };
        _openOnEnter: { alias: 'openOnEnter'; required: false; isSignal: true };
        _maxSelectedItems: {
            alias: 'maxSelectedItems';
            required: false;
            isSignal: true;
        };
        _groupBy: { alias: 'groupBy'; required: false; isSignal: true };
        _groupValue: { alias: 'groupValue'; required: false; isSignal: true };
        _bufferAmount: {
            alias: 'bufferAmount';
            required: false;
            isSignal: true;
        };
        _virtualScroll: {
            alias: 'virtualScroll';
            required: false;
            isSignal: true;
        };
        _selectableGroup: {
            alias: 'selectableGroup';
            required: false;
            isSignal: true;
        };
        _tabFocusOnClearButton: {
            alias: 'tabFocusOnClearButton';
            required: false;
            isSignal: true;
        };
        _selectableGroupAsModel: {
            alias: 'selectableGroupAsModel';
            required: false;
            isSignal: true;
        };
        _searchFn: { alias: 'searchFn'; required: false; isSignal: true };
        _trackByFn: { alias: 'trackByFn'; required: false; isSignal: true };
        _clearOnBackspace: {
            alias: 'clearOnBackspace';
            required: false;
            isSignal: true;
        };
        _labelForId: { alias: 'labelForId'; required: false; isSignal: true };
        _inputAttrs: { alias: 'inputAttrs'; required: false; isSignal: true };
        _tabIndex: { alias: 'tabIndex'; required: false; isSignal: true };
        _readonly: { alias: 'readonly'; required: false; isSignal: true };
        _searchWhileComposing: {
            alias: 'searchWhileComposing';
            required: false;
            isSignal: true;
        };
        _minTermLength: {
            alias: 'minTermLength';
            required: false;
            isSignal: true;
        };
        _editableSearchTerm: {
            alias: 'editableSearchTerm';
            required: false;
            isSignal: true;
        };
        _ngClass: { alias: 'ngClass'; required: false; isSignal: true };
        _panelClass: { alias: 'panelClass'; required: false; isSignal: true };
        _typeahead: { alias: 'typeahead'; required: false; isSignal: true };
        _multiple: { alias: 'multiple'; required: false; isSignal: true };
        _addTag: { alias: 'addTag'; required: false; isSignal: true };
        _searchable: { alias: 'searchable'; required: false; isSignal: true };
        _clearable: { alias: 'clearable'; required: false; isSignal: true };
        _clearKeepsDisabledOptions: {
            alias: 'clearKeepsDisabledOptions';
            required: false;
            isSignal: true;
        };
        _deselectOnClick: {
            alias: 'deselectOnClick';
            required: false;
            isSignal: true;
        };
        _clearSearchOnAdd: {
            alias: 'clearSearchOnAdd';
            required: false;
            isSignal: true;
        };
        _compareWith: { alias: 'compareWith'; required: false; isSignal: true };
        _keyDownFn: { alias: 'keyDownFn'; required: false; isSignal: true };
        _popover: { alias: 'popover'; required: false; isSignal: true };
        bindLabel: { alias: 'bindLabel'; required: false; isSignal: true };
        bindValue: { alias: 'bindValue'; required: false; isSignal: true };
        appearance: { alias: 'appearance'; required: false; isSignal: true };
        isOpen: { alias: 'isOpen'; required: false; isSignal: true };
        items: { alias: 'items'; required: false; isSignal: true };
    },
    {
        bindLabel: 'bindLabelChange';
        bindValue: 'bindValueChange';
        appearance: 'appearanceChange';
        isOpen: 'isOpenChange';
        items: 'itemsChange';
        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',
        'placeholderTemplate',
        'typeToSearchTemplate',
        'loadingTextTemplate',
        'tagTemplate',
        'loadingSpinnerTemplate',
        'clearButtonTemplate',
        'ngOptions'
    ],
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgSelectComponent, never>;

property panelClass

readonly panelClass: _angular_core.WritableSignal<ClassValue>;

property panelClasses

readonly panelClasses: _angular_core.Signal<string>;

Classes forwarded to the overlay panel (mirrored host classes + panelClass).

property placeholder

readonly placeholder: _angular_core.WritableSignal<string>;

property placeholderTemplate

readonly placeholderTemplate: _angular_core.Signal<TemplateRef<any>>;

property popover

readonly popover: _angular_core.WritableSignal<boolean>;

Deprecated
Has no effect: the CDK overlay renders in the native Popover API top layer automatically in supporting browsers. Will be removed in a future major version.

property preventToggleOnRightClick

readonly preventToggleOnRightClick: _angular_core.WritableSignal<boolean>;

property readonly

readonly readonly: _angular_core.WritableSignal<boolean>;

property removeEvent

readonly removeEvent: _angular_core.OutputEmitterRef<any>;

Fired when item is removed while [multiple]="true"

property removeText

readonly removeText: _angular_core.WritableSignal<string>;

property scroll

readonly scroll: _angular_core.OutputEmitterRef<{ start: number; end: number }>;

Fired when scrolled (only when [virtualScroll]="true"). Provides the start and end index of the currently available items. Can be used for loading more items in chunks before the user has scrolled all the way to the bottom of the list.

property scrollToEnd

readonly scrollToEnd: _angular_core.OutputEmitterRef<any>;

Fired when scrolled to the end of items. Can be used for loading more items in chunks.

property searchable

readonly searchable: _angular_core.WritableSignal<boolean>;

property searchEvent

readonly searchEvent: _angular_core.OutputEmitterRef<{
    term: string;
    items: any[];
}>;

Fired while typing search term. Outputs search term with filtered items

property searchFn

readonly searchFn: _angular_core.WritableSignal<any>;

property searchInput

readonly searchInput: _angular_core.Signal<ElementRef<HTMLInputElement>>;

property searchTerm

readonly searchTerm: string;

property searchWhileComposing

readonly searchWhileComposing: _angular_core.WritableSignal<boolean>;

property selectableGroup

readonly selectableGroup: _angular_core.WritableSignal<boolean>;

property selectableGroupAsModel

readonly selectableGroupAsModel: _angular_core.WritableSignal<boolean>;

property selectedItems

readonly selectedItems: NgOption[];

property selectedValues

readonly selectedValues: any[];

property selectOnTab

readonly selectOnTab: _angular_core.WritableSignal<boolean>;

property showAddTag

readonly showAddTag: boolean;

property tabFocusOnClear

tabFocusOnClear: _angular_core.WritableSignal<boolean>;

property tabFocusOnClearButton

readonly tabFocusOnClearButton: _angular_core.WritableSignal<boolean>;

property tabIndex

readonly tabIndex: _angular_core.WritableSignal<number>;

property tagTemplate

readonly tagTemplate: _angular_core.Signal<TemplateRef<any>>;

property trackByFn

readonly trackByFn: _angular_core.WritableSignal<any>;

property trackByOption

trackByOption: (_: number, item: NgOption) => any;

property typeahead

readonly typeahead: _angular_core.WritableSignal<Subject<string>>;

property typeToSearchTemplate

readonly typeToSearchTemplate: _angular_core.Signal<TemplateRef<any>>;

property typeToSearchText

readonly typeToSearchText: _angular_core.WritableSignal<string>;

property viewPortItems

viewPortItems: NgOption[];

property virtualScroll

readonly virtualScroll: _angular_core.WritableSignal<boolean>;

method blur

blur: () => void;

Blurs the select element

method clearModel

clearModel: () => void;

method close

close: () => void;

Closes the select dropdown panel

method detectChanges

detectChanges: () => void;

method filter

filter: (term: string) => void;

method focus

focus: () => void;

Focuses the select element

method focusOnClear

focusOnClear: () => void;

method handleArrowClick

handleArrowClick: () => void;

method handleClearClick

handleClearClick: (_event?: MouseEvent) => 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) => boolean;

method handleRemoveKeydown

handleRemoveKeydown: ($event: KeyboardEvent, item: NgOption) => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnInit

ngOnInit: () => void;

method onCompositionEnd

onCompositionEnd: (term: string) => void;

method onCompositionStart

onCompositionStart: () => void;

method onInputBlur

onInputBlur: ($event: FocusEvent) => void;

method onInputFocus

onInputFocus: ($event: FocusEvent) => void;

method onItemHover

onItemHover: (item: NgOption) => void;

method open

open: () => void;

Opens the select dropdown panel

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

Configuration provider for the NgSelect component. You can inject this service and provide application wide configuration.

property addTagText

addTagText: string;

Set custom text when using tagging.

property appearance

appearance: string;

Allows to select dropdown appearance. Set to outline or fill for Material form-field styles (applies only to Material theme).

property appendTo

appendTo: string;

Append the dropdown overlay of every select to any element using a css selector. Painting and positioning are unaffected; the target determines DOM containment (ancestor-scoped styles, focus enclosure).

property ariaLabelDropdown

ariaLabelDropdown: string;

Set custom aria-label for the dropdown options list.

property bindLabel

bindLabel: string;

Object property to use for label.

property bindValue

bindValue: string;

Object property to use for selected model. By default binds to whole object.

property clearAllText

clearAllText: string;

Set custom text for clear all icon title.

property clearSearchOnAdd

clearSearchOnAdd: boolean;

Clears search input when item is selected.

property deselectOnClick

deselectOnClick: boolean;

Deselects a selected item when it is clicked in the dropdown.

property disableVirtualScroll

disableVirtualScroll: boolean;

Disable virtual scroll for the dropdown panel.

property fixedPlaceholder

fixedPlaceholder: boolean;

Set placeholder visible even when an item is selected.

property loadingText

loadingText: string;

Set custom text when loading items.

property notFoundText

notFoundText: string;

Set custom text when filter returns empty result.

property openOnEnter

openOnEnter: boolean;

Open dropdown using enter.

property outsideClickEvent

outsideClickEvent: 'click' | 'mousedown';

Controls which DOM event is used to detect outside clicks for closing the dropdown. Defaults to 'click'. Set to 'mousedown' to handle early outside interactions (useful when backdrops load on click and would otherwise close the dropdown).

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgSelectConfig, never>;

property ɵprov

static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgSelectConfig>;

property placeholder

placeholder: string;

Placeholder text.

property removeText

removeText: string;

Set custom text prefixed to the option label in the aria-label of the remove icon on selected values (multiple mode).

property tabFocusOnClear

tabFocusOnClear: boolean;

Control tab navigation behavior for the clear button.

property typeToSearchText

typeToSearchText: string;

Set custom text when using Typeahead.

class NgSelectModule

class NgSelectModule {}

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgSelectModule, never>;

property ɵinj

static ɵinj: _angular_core.ɵɵInjectorDeclaration<NgSelectModule>;

property ɵmod

static ɵmod: _angular_core.ɵɵNgModuleDeclaration<
    NgSelectModule,
    never,
    [
        typeof NgDropdownPanelComponent,
        typeof NgOptionComponent,
        typeof NgSelectComponent,
        typeof NgOptgroupTemplateDirective,
        typeof NgOptionTemplateDirective,
        typeof NgLabelTemplateDirective,
        typeof NgMultiLabelTemplateDirective,
        typeof NgHeaderTemplateDirective,
        typeof NgFooterTemplateDirective,
        typeof NgPlaceholderTemplateDirective,
        typeof NgClearButtonTemplateDirective,
        typeof NgNotFoundTemplateDirective,
        typeof NgTypeToSearchTemplateDirective,
        typeof NgLoadingTextTemplateDirective,
        typeof NgTagTemplateDirective,
        typeof NgLoadingSpinnerTemplateDirective,
        typeof NgItemLabelDirective
    ],
    [
        typeof NgSelectComponent,
        typeof NgOptionComponent,
        typeof NgOptgroupTemplateDirective,
        typeof NgOptionTemplateDirective,
        typeof NgLabelTemplateDirective,
        typeof NgMultiLabelTemplateDirective,
        typeof NgHeaderTemplateDirective,
        typeof NgFooterTemplateDirective,
        typeof NgPlaceholderTemplateDirective,
        typeof NgNotFoundTemplateDirective,
        typeof NgTypeToSearchTemplateDirective,
        typeof NgLoadingTextTemplateDirective,
        typeof NgTagTemplateDirective,
        typeof NgLoadingSpinnerTemplateDirective,
        typeof NgClearButtonTemplateDirective
    ]
>;

class NgTagTemplateDirective

class NgTagTemplateDirective {}

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgTagTemplateDirective,
    '[ng-tag-tmp]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgTagTemplateDirective, never>;

property template

readonly template: TemplateRef<any>;

class NgTypeToSearchTemplateDirective

class NgTypeToSearchTemplateDirective {}

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgTypeToSearchTemplateDirective,
    '[ng-typetosearch-tmp]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<
    NgTypeToSearchTemplateDirective,
    never
>;

property template

readonly template: TemplateRef<any>;

Interfaces

interface NgOption

interface NgOption {}

property children

children?: NgOption[];

property classes

classes?: string;

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 (1)

types/ng-select-ng-select.d.ts

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (4)

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 day ago.
Package analyzed in 5669 ms.
Missing or incorrect documentation? Open an issue for this package.

@ng-select/ng-select

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable SELECTION_MODEL_FACTORY

Functions

function DefaultSelectionModelFactory

Classes

class ConsoleService

property ɵfac

property ɵprov

method warn

class DefaultSelectionModel

property value

method clear

method select

method unselect

class NgClearButtonTemplateDirective

property ɵdir

property ɵfac

property template

class NgDropdownPanelComponent

property ariaLabelDropdown

property bufferAmount

property currentPosition

property filterValue

property footerTemplate

property headerTemplate

property items

property listboxId

property markedItem

property outsideClick

property outsideClickEvent

property overlayRef

property ɵcmp

property ɵfac

property popover

Deprecated

property position

property scroll

property scrollToEnd

property selectElement

property showAddTag

property update

property virtualScroll

method adjustPosition

method ngOnChanges

method ngOnInit

method scrollTo

method scrollToTag

class NgDropdownPanelService

property dimensions

property ɵfac

property ɵprov

method calculateItems

method getItemHeight

method getItemOffset

method getScrollHeight

method getScrollTo

method setDimensions

class NgFooterTemplateDirective

property ɵdir

property ɵfac

property template

class NgHeaderTemplateDirective

property ɵdir

property ɵfac

property template

class NgItemLabelDirective

Deprecated

constructor

property escape

Deprecated

property ngItemLabel