@ng-select/ng-select

@ng-select/ng-select

Version 24.2.1
Published 9 days ago
637 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 select, multiselect and autocomplete with Signal Forms, Reactive Forms and Template-driven Forms support

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;

Creates the default selection model used by ng-select.
3.0.0

function mergeClassValues

mergeClassValues: (
    ...values: readonly (ClassValue | null | undefined)[]
) => string;

Normalizes and merges supported class value formats into a unique class string.
Parameter values
Class values to normalize and merge.
Returns
A space-separated list of unique class names.
24.0.5

function provideNgSelect

provideNgSelect: () => {
    provide: import('@angular/core').InjectionToken<SelectionModelFactory>;
    useValue: typeof DefaultSelectionModelFactory;
}[];

Provides the default ng-select selection-model dependency.
15.2.0

function readConsumerHostClasses

readConsumerHostClasses: (element: HTMLElement) => string;

Reads consumer-provided classes from the ng-select host while excluding internal Angular and component state classes.
Parameter element
The ng-select host element.
Returns
A space-separated list of consumer-provided classes.
24.0.5

Classes

class ConsoleService

class ConsoleService {}

Reports developer-facing warnings through the configured console.
3.0.0

property ɵfac

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

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<any>;

method warn

warn: (message: string) => void;

Writes a developer-facing warning to the console.
Parameter message
The message.
3.0.0

class DefaultSelectionModel

class DefaultSelectionModel implements SelectionModel {}

Implements the default single, multiple, and grouped option selection behavior.
3.0.0

property value

readonly value: NgOption[];

Gets the currently selected options.
Returns
The value.
3.0.0

method clear

clear: (keepDisabled: boolean) => void;

Clears the current selection.
Parameter keepDisabled
Whether disabled options should remain selected.
3.0.0

method select

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

Selects an option according to the active selection mode.
Parameter item
The option to process.
Parameter multiple
Whether multiple selection is enabled.
Parameter groupAsModel
Whether a selectable group is represented by its group value.
3.0.0

method unselect

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

Removes an option from the current selection.
Parameter item
The option to process.
Parameter multiple
Whether multiple selection is enabled.
3.0.0

class ItemsList

class ItemsList {}

Manages source, filtered, grouped, marked, and selected options for an ng-select instance.
3.0.0

constructor

constructor(_ngSelect: NgSelectComponent, _selectionModel: SelectionModel);

Creates an instance of ItemsList.
Parameter _ngSelect
The ng select.
Parameter _selectionModel
The selection model.
3.0.0

property filteredItems

readonly filteredItems: NgOption[];

Gets the filtered items.
Returns
The filtered items.
3.0.0

property items

readonly items: NgOption[];

Gets the items.
Returns
The items.
3.0.0

property lastSelectedItem

readonly lastSelectedItem: NgOption;

Gets the last selected item.
Returns
The last selected item.
3.0.0

property markedIndex

readonly markedIndex: number;

Gets the marked index.
Returns
The marked index.
3.0.0

property markedItem

readonly markedItem: NgOption;

Gets the marked item.
Returns
The marked item.
3.0.0

property maxItemsSelected

readonly maxItemsSelected: boolean;

Determines whether the configured selection limit has been reached.
Returns
Whether max items selected.
3.0.0

property noItemsToSelect

readonly noItemsToSelect: boolean;

Determines whether every available option is already selected.
Returns
Whether no items to select.
3.0.0

property selectedItems

readonly selectedItems: NgOption[];

Gets the selected items.
Returns
The selected items.
3.0.0

method addItem

addItem: (item: any) => NgOption;

Maps and appends a new option to the list.
Parameter item
The option to process.
3.0.0

method clearSelected

clearSelected: (keepDisabled: boolean) => void;

Clears selected options while optionally retaining disabled selections.
Parameter keepDisabled
The keep disabled.
3.0.0

method filter

filter: (term: string) => void;

Filters the available options using the current search configuration.
Parameter term
The term.
3.0.0

method findByLabel

findByLabel: (term: string) => NgOption;

Finds an option using a case-insensitive label comparison.
Parameter term
The term.
3.0.0

method findItem

findItem: (value: any) => NgOption;

Finds the option matching a model value.
Parameter value
The value to process.
Returns
The matching option, when one exists.
3.0.0

method mapItem

mapItem: (item: any, index: number) => NgOption;

Maps a source value to the internal option representation.
Parameter item
The option to process.
Parameter index
The index.
Returns
The mapped internal option.
3.0.0

method mapSelectedItems

mapSelectedItems: () => void;

Remaps selected values after the source collection changes.
3.0.0

method markItem

markItem: (item: NgOption) => void;

Marks a specific option for keyboard interaction.
Parameter item
The option to process.
3.0.0

method markNextItem

markNextItem: () => void;

Marks the next enabled option.
3.0.0

method markPreviousItem

markPreviousItem: () => void;

Marks the previous enabled option.
3.0.0

method markSelectedOrDefault

markSelectedOrDefault: (markDefault?: boolean) => void;

Marks the selected option or the configured default option.
Parameter markDefault
The mark default.
3.0.0

method resetFilteredItems

resetFilteredItems: () => void;

Restores the unfiltered option collection.
3.0.0

method resolveNested

resolveNested: (option: any, key: string) => any;

Resolves a dot-separated property path from an option value.
Parameter option
The option to process.
Parameter key
The key.
Returns
The resolved nested value.
3.0.0

method select

select: (item: NgOption) => void;

Selects an option according to the active selection mode.
Parameter item
The option to process.
3.0.0

method setItems

setItems: (items: readonly any[]) => void;

Maps and groups a new immutable collection of source items.
Parameter items
The options to process.
3.0.0

method unmarkItem

unmarkItem: () => void;

Clears the currently marked option.
3.0.0

method unselect

unselect: (item: NgOption) => void;

Removes an option from the current selection.
Parameter item
The option to process.
3.0.0

class NgClearButtonTemplateDirective

class NgClearButtonTemplateDirective {}

Marks a template as the custom clear button template for ng-select.
14.2.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgDropdownPanelComponent

class NgDropdownPanelComponent implements OnInit, OnChanges {}

Renders, positions, and virtualizes the dropdown option panel.
3.0.0

property ariaLabelDropdown

readonly ariaLabelDropdown: any;

property bufferAmount

readonly bufferAmount: any;

property closeOnScroll

readonly closeOnScroll: any;

Close the dropdown when the page or an ancestor container scrolls.

property contentTransform

protected readonly contentTransform: any;

Offset of the rendered virtual-scroll range. Template-bound so it renders in the same pass as the range's rows (#2899).

property currentPosition

readonly currentPosition: DropdownPosition;

Gets the panel position selected by the overlay strategy.
Returns
The current position.
3.0.0

property filterValue

readonly filterValue: any;

property footerTemplate

readonly footerTemplate: any;

property headerTemplate

readonly headerTemplate: any;

property items

readonly items: any;

property listboxId

readonly listboxId: any;

property markedItem

readonly markedItem: any;

property outsideClick

readonly outsideClick: any;

property outsideClickEvent

readonly outsideClickEvent: any;

Which DOM event to listen to for outside click detection

property outsideScroll

readonly outsideScroll: any;

property overlayRef

readonly overlayRef: any;

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

property ɵcmp

static ɵcmp: i0.ɵɵ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;
        };
        closeOnScroll: {
            alias: 'closeOnScroll';
            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';
        outsideScroll: 'outsideScroll';
    },
    never,
    ['*'],
    true,
    never
>;

property ɵfac

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

property popover

readonly popover: any;

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: any;

property scroll

readonly scroll: any;

property scrollToEnd

readonly scrollToEnd: any;

property selectElement

readonly selectElement: any;

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: any;

property update

readonly update: any;

property virtualScroll

readonly virtualScroll: any;

method adjustPosition

adjustPosition: () => void;

Requests that the overlay strategy recalculate the panel position.
3.0.0

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

Responds to Angular input changes.
Parameter changes
The changed Angular inputs.
3.0.0

method ngOnInit

ngOnInit: () => void;

Initializes the instance after Angular has assigned its inputs.
3.0.0

method scrollTo

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

Scrolls until the requested option is visible.
Parameter option
The option to process.
Parameter startFromOption
The start from option.
3.0.0

method scrollToTag

scrollToTag: () => void;

Scrolls to the add-tag row.
3.0.0

class NgDropdownPanelService

class NgDropdownPanelService {}

Calculates dropdown panel dimensions, virtual-scroll ranges, and scroll offsets.
3.0.0

property dimensions

readonly dimensions: PanelDimensions;

Gets the currently measured panel dimensions.
Returns
The dimensions.
3.0.0

property ɵfac

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

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<any>;

method calculateItems

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

Calculates the virtual-scroll item range and spacer sizes.
Parameter scrollPos
The scroll pos.
Parameter itemsLength
The items length.
Parameter buffer
The buffer.
Parameter items
The options to process.
Returns
The rendered range and spacer sizes.
3.0.0

method getItemHeight

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

Returns the measured height for an option or group.
Parameter item
The option to process.
Returns
The row height in pixels.
23.9.0

method getItemOffset

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

Calculates an item’s vertical offset within the full option list.
Parameter items
The options to process.
Parameter index
The index.
Returns
The vertical offset in pixels.
23.9.0

method getScrollHeight

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

Calculates the total virtual-scroll content height.
Parameter items
The options to process.
Returns
The total scroll height in pixels.
23.9.0

method getScrollTo

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

Calculates the scroll position needed to reveal an item.
Parameter itemTop
The item top.
Parameter itemHeight
The item height.
Parameter lastScroll
The last scroll.
3.0.0

method setDimensions

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

Stores the measured item, group, and panel dimensions.
Parameter itemHeight
The item height.
Parameter panelHeight
The panel height.
Parameter groupHeight
The group height.
3.0.0

class NgFooterTemplateDirective

class NgFooterTemplateDirective {}

Marks a template as the custom footer template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgHeaderTemplateDirective

class NgHeaderTemplateDirective {}

Marks a template as the custom header template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

static ɵfac: i0.ɵɵ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).
3.0.2

constructor

constructor();

Creates an instance of NgItemLabelDirective.
3.0.2

property escape

escape: any;

Deprecated
Ignored — labels are always written as text.

property ngItemLabel

ngItemLabel: any;

property ɵdir

static ɵdir: i0.ɵɵ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: i0.ɵɵFactoryDeclaration<NgItemLabelDirective, never>;

class NgLabelTemplateDirective

class NgLabelTemplateDirective {}

Marks a template as the custom label template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgLoadingSpinnerTemplateDirective

class NgLoadingSpinnerTemplateDirective {}

Marks a template as the custom loading spinner template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgLoadingTextTemplateDirective

class NgLoadingTextTemplateDirective {}

Marks a template as the custom loading text template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgMultiLabelTemplateDirective

class NgMultiLabelTemplateDirective {}

Marks a template as the custom multi label template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgNotFoundTemplateDirective

class NgNotFoundTemplateDirective {}

Marks a template as the custom not found template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgOptgroupTemplateDirective

class NgOptgroupTemplateDirective {}

Marks a template as the custom optgroup template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

static ɵfac: i0.ɵɵ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.
3.0.0

constructor

constructor();

Creates an instance of NgOptionComponent.
3.0.0

property classes

readonly classes: any;

property disabled

readonly disabled: any;

Whether the option is disabled and cannot be selected.

property elementRef

readonly elementRef: ElementRef<any>;

property isInitialized

readonly isInitialized: any;

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

property label

readonly label: any;

property ɵcmp

static ɵcmp: i0.ɵɵ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: i0.ɵɵFactoryDeclaration<NgOptionComponent, never>;

property value

readonly value: any;

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

method ngOnInit

ngOnInit: () => void;

Initializes the instance after Angular has assigned its inputs.
21.5.2

class NgOptionTemplateDirective

class NgOptionTemplateDirective {}

Marks a template as the custom option template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgPlaceholderTemplateDirective

class NgPlaceholderTemplateDirective {}

Marks a template as the custom placeholder template for ng-select.
13.6.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgSelectComponent

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

Provides select, multiselect, autocomplete, keyboard, accessibility, and Signal, Reactive, and Template-driven Forms behavior.
3.0.0

constructor

constructor();

Creates an instance of NgSelectComponent.
3.0.0

property addEvent

readonly addEvent: any;

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

property addTag

readonly addTag: any;

property addTagText

readonly addTagText: any;

property appearance

readonly appearance: any;

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

property appendTo

readonly appendTo: any;

property ariaLabel

readonly ariaLabel: any;

property ariaLabelDropdown

readonly ariaLabelDropdown: any;

property bindLabel

readonly bindLabel: any;

Object property to use for label. Default label

property bindValue

readonly bindValue: any;

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

property blurEvent

readonly blurEvent: any;

Fired on select blur

property bufferAmount

readonly bufferAmount: any;

property changeEvent

readonly changeEvent: any;

Fired on model change. Outputs whole model

property classes

readonly classes: string;

property clearable

readonly clearable: any;

property clearAllText

readonly clearAllText: any;

property clearButton

readonly clearButton: any;

property clearButtonTemplate

readonly clearButtonTemplate: any;

property clearEvent

readonly clearEvent: any;

Fired on clear icon click

property clearItem

clearItem: (item: any) => void;

property clearKeepsDisabledOptions

readonly clearKeepsDisabledOptions: any;

property clearOnBackspace

readonly clearOnBackspace: any;

property clearSearchOnAdd

readonly clearSearchOnAdd: any;

property clearSearchOnAddValue

readonly clearSearchOnAddValue: any;

property closeEvent

readonly closeEvent: any;

Fired on select dropdown close

property closeOnScroll

readonly closeOnScroll: any;

property closeOnSelect

readonly closeOnSelect: any;

property compareWith

readonly compareWith: any;

property config

readonly config: NgSelectConfig;

property currentPanelPosition

readonly currentPanelPosition: DropdownPosition;

Gets the current panel position.
Returns
The current panel position.
3.0.0

property deselectOnClick

readonly deselectOnClick: any;

property deselectOnClickValue

readonly deselectOnClickValue: any;

property disabled

readonly disabled: any;

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: any;

property dropdownPosition

readonly dropdownPosition: any;

property dropdownVirtualScroll

readonly dropdownVirtualScroll: any;

property editableSearchTerm

readonly editableSearchTerm: any;

property element

readonly element: HTMLElement;

property filtered

readonly filtered: boolean;

Gets whether search filtering or text composition is active.
Returns
The filtered.
3.0.0

property fixedPlaceholder

readonly fixedPlaceholder: any;

property focused

readonly focused: boolean;

Gets whether the component currently owns focus.
Returns
The focused.
20.4.2

property focusEvent

readonly focusEvent: any;

Fired on select focus

property footerTemplate

readonly footerTemplate: any;

property groupBy

readonly groupBy: any;

property groupValue

readonly groupValue: any;

property hasValue

readonly hasValue: boolean;

Determines whether the component has selected values.
Returns
Whether has value.
3.0.0

property headerTemplate

readonly headerTemplate: any;

property hideSelected

readonly hideSelected: any;

property inputAttrs

readonly inputAttrs: any;

property isOpen

readonly isOpen: any;

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

property items

readonly items: any;

Items array

property itemsList

itemsList: ItemsList;

property keyDownFn

readonly keyDownFn: any;

property labelForId

readonly labelForId: any;

property labelTemplate

readonly labelTemplate: any;

property loading

readonly loading: any;

property loadingSpinnerTemplate

readonly loadingSpinnerTemplate: any;

property loadingText

readonly loadingText: any;

property loadingTextTemplate

readonly loadingTextTemplate: any;

property markFirst

readonly markFirst: any;

property maxSelectedItems

readonly maxSelectedItems: any;

property minTermLength

readonly minTermLength: any;

property multiLabelTemplate

readonly multiLabelTemplate: any;

property multiple

readonly multiple: any;

property ngClass

readonly ngClass: any;

property ngOptions

readonly ngOptions: any;

property notFoundTemplate

readonly notFoundTemplate: any;

property notFoundText

readonly notFoundText: any;

property openEvent

readonly openEvent: any;

Fired on select dropdown open

property openOnEnter

readonly openOnEnter: any;

property optgroupTemplate

readonly optgroupTemplate: any;

property optionTemplate

readonly optionTemplate: any;

property outlineNotchWidth

readonly outlineNotchWidth: any;

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

property outsideClickEvent

readonly outsideClickEvent: any;

property ɵcmp

static ɵcmp: i0.ɵɵ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;
        };
        _closeOnScroll: {
            alias: 'closeOnScroll';
            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: i0.ɵɵFactoryDeclaration<NgSelectComponent, never>;

property panelClass

readonly panelClass: any;

property panelClasses

readonly panelClasses: any;

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

property placeholder

readonly placeholder: any;

property placeholderTemplate

readonly placeholderTemplate: any;

property popover

readonly popover: any;

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: any;

property readonly

readonly readonly: any;

property removeEvent

readonly removeEvent: any;

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

property removeText

readonly removeText: any;

property scroll

readonly scroll: any;

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: any;

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

property searchable

readonly searchable: any;

property searchEvent

readonly searchEvent: any;

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

property searchFn

readonly searchFn: any;

property searchInput

readonly searchInput: any;

property searchTerm

readonly searchTerm: string;

Gets the search term.
Returns
The search term.
20.4.2

property searchWhileComposing

readonly searchWhileComposing: any;

property selectableGroup

readonly selectableGroup: any;

property selectableGroupAsModel

readonly selectableGroupAsModel: any;

property selectedItems

readonly selectedItems: NgOption[];

Gets the selected items.
Returns
The selected items.
3.0.0

property selectedValues

readonly selectedValues: any[];

Gets the selected values.
Returns
The selected values.
3.0.0

property selectOnTab

readonly selectOnTab: any;

property showAddTag

readonly showAddTag: boolean;

Determines whether the add-tag option should be displayed.
Returns
Whether show add tag.
3.0.0

property tabFocusOnClear

tabFocusOnClear: any;

property tabFocusOnClearButton

readonly tabFocusOnClearButton: any;

property tabIndex

readonly tabIndex: any;

property tagTemplate

readonly tagTemplate: any;

property trackByFn

readonly trackByFn: any;

property trackByOption

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

property typeahead

readonly typeahead: any;

property typeToSearchTemplate

readonly typeToSearchTemplate: any;

property typeToSearchText

readonly typeToSearchText: any;

property viewPortItems

viewPortItems: NgOption[];

property virtualScroll

readonly virtualScroll: any;

method blur

blur: () => void;

Blurs the select element
3.0.0

method clearModel

clearModel: () => void;

Clears the selected model values and resets the search state.
3.0.0

method close

close: () => void;

Closes the select dropdown panel
3.0.0

method detectChanges

detectChanges: () => void;

Requests an OnPush change-detection pass.
3.0.0

method filter

filter: (term: string) => void;

Filters the available options using the current search configuration.
Parameter term
The term.
3.0.0

method focus

focus: () => void;

Focuses the select element
3.0.0

method focusOnClear

focusOnClear: () => void;

Moves keyboard focus to the clear control.
11.1.2

method handleArrowClick

handleArrowClick: () => void;

Toggles the dropdown from the arrow control.
3.0.0

method handleClearClick

handleClearClick: (_event?: MouseEvent) => void;

Clears the model from a pointer interaction.
Parameter _event
The DOM event to process.
3.0.0

method handleKeyCode

handleKeyCode: ($event: KeyboardEvent) => void;

Handles navigation and selection key codes.
Parameter $event
The DOM event to process.
3.1.1

method handleKeyCodeClear

handleKeyCodeClear: ($event: KeyboardEvent) => void;

Handles keyboard interaction on the clear control.
Parameter $event
The DOM event to process.
11.1.2

method handleKeyCodeInput

handleKeyCodeInput: ($event: KeyboardEvent) => void;

Handles keyboard interaction originating from the search input.
Parameter $event
The DOM event to process.
11.1.2

method handleKeyDown

handleKeyDown: ($event: KeyboardEvent) => void;

Routes a keyboard event to the appropriate ng-select interaction handler.
Parameter $event
The DOM event to process.
3.0.0

method handleMousedown

handleMousedown: ($event: MouseEvent) => boolean;

Handles pointer interaction within the select container.
Parameter $event
The DOM event to process.
3.0.0

method handleRemoveKeydown

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

Handles keyboard removal of a selected value.
Parameter $event
The DOM event to process.
Parameter item
The option to process.
23.3.0

method ngAfterViewInit

ngAfterViewInit: () => void;

Completes initialization that depends on rendered view children.
3.0.0

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

Responds to Angular input changes.
Parameter changes
The changed Angular inputs.
3.0.0

method ngOnInit

ngOnInit: () => void;

Initializes the instance after Angular has assigned its inputs.
3.0.0

method onCompositionEnd

onCompositionEnd: (term: string) => void;

Finishes input method editor composition and applies the search term.
Parameter term
The term.
3.0.5

method onCompositionStart

onCompositionStart: () => void;

Marks the start of an input method editor composition.
3.0.5

method onInputBlur

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

Handles focus leaving the search input.
Parameter $event
The DOM event to process.
3.0.0

method onInputFocus

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

Handles focus entering the search input.
Parameter $event
The DOM event to process.
3.0.0

method onItemHover

onItemHover: (item: NgOption) => void;

Marks an option when pointer interaction hovers it.
Parameter item
The option to process.
3.0.0

method open

open: () => void;

Opens the select dropdown panel
3.0.0

method registerOnChange

registerOnChange: (fn: any) => void;

Registers the ControlValueAccessor model-change callback.
Parameter fn
The fn.
3.0.0

method registerOnTouched

registerOnTouched: (fn: any) => void;

Registers the ControlValueAccessor touched callback.
Parameter fn
The fn.
3.0.0

method select

select: (item: NgOption) => void;

Selects an option according to the active selection mode.
Parameter item
The option to process.
3.0.0

method selectTag

selectTag: () => void;

Creates and selects an option from the current search term.
3.0.0

method setDisabledState

setDisabledState: (state: boolean) => void;

Updates the disabled state supplied by Angular forms.
Parameter state
The state.
3.0.0

method showClear

showClear: () => boolean;

Determines whether the clear control should be displayed.
3.0.0

method showNoItemsFound

showNoItemsFound: () => boolean;

Determines whether the empty-results message should be displayed.
3.0.0

method showTypeToSearch

showTypeToSearch: () => boolean;

Determines whether the type-to-search prompt should be displayed.
3.0.0

method toggle

toggle: () => void;

Toggles the dropdown panel.
3.0.0

method toggleItem

toggleItem: (item: NgOption) => void;

Selects or unselects an option based on its current state.
Parameter item
The option to process.
3.0.0

method unselect

unselect: (item: NgOption) => void;

Removes an option from the current selection.
Parameter item
The option to process.
3.0.0

method writeValue

writeValue: (value: any | any[]) => void;

Writes a ControlValueAccessor model value into the component.
Parameter value
The value to process.
3.0.0

class NgSelectConfig

class NgSelectConfig {}

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

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 closeOnScroll

closeOnScroll: boolean;

Close the dropdown when the page or an ancestor container scrolls.

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: i0.ɵɵFactoryDeclaration<NgSelectConfig, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<any>;

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

Provides the compatibility NgModule wrapper for the standalone ng-select declarations.
3.0.0

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵ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 {}

Marks a template as the custom tag template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgTypeToSearchTemplateDirective

class NgTypeToSearchTemplateDirective {}

Marks a template as the custom type to search template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

Interfaces

interface ItemsRangeResult

interface ItemsRangeResult {}

Describes the rendered range and spacer sizes for virtual scrolling.
3.0.0

property end

end: number;

property scrollHeight

scrollHeight: number;

property start

start: number;

property topPadding

topPadding: number;

interface NgOption

interface NgOption {}

Defines the ng option contract used by ng-select.
3.0.0

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 PanelDimensions

interface PanelDimensions {}

Describes measured option, group, and viewport dimensions.
3.0.0

property groupHeight

groupHeight: number;

Height of a group header row. Falls back to itemHeight when unset/equal.

property itemHeight

itemHeight: number;

Height of a regular option row (non-group).

property itemsPerViewport

itemsPerViewport: number;

property panelHeight

panelHeight: number;

interface SelectionModel

interface SelectionModel {}

Defines the selection model contract used by ng-select.
3.0.0

property value

value: NgOption[];

method clear

clear: (keepDisabled: boolean) => any;

Clears the current selection.
Parameter keepDisabled
Whether disabled options should remain selected.
3.0.0

method select

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

Selects an option according to the active selection mode.
Parameter item
The option to process.
Parameter multiple
Whether multiple selection is enabled.
Parameter selectableGroupAsModel
Whether a selectable group is represented by its group value.
3.0.0

method unselect

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

Removes an option from the current selection.
Parameter item
The option to process.
Parameter multiple
Whether multiple selection is enabled.
3.0.0

interface VirtualScrollItem

interface VirtualScrollItem {}

Minimal shape needed to distinguish group headers from options.
23.9.0

property children

children?: unknown;

Enums

enum KeyCode

enum KeyCode {
    Tab = 'Tab',
    Enter = 'Enter',
    Esc = 'Escape',
    Space = ' ',
    ArrowUp = 'ArrowUp',
    ArrowDown = 'ArrowDown',
    Backspace = 'Backspace',
}

member ArrowDown

ArrowDown = 'ArrowDown'

member ArrowUp

ArrowUp = 'ArrowUp'

member Backspace

Backspace = 'Backspace'

member Enter

Enter = 'Enter'

member Esc

Esc = 'Escape'

member Space

Space = ' '

member Tab

Tab = 'Tab'

Type Aliases

type AddTagFn

type AddTagFn = (term: string) => any | Promise<any>;

type ClassValue

type ClassValue = string | string[] | Set<string> | Record<string, any>;

Represents the class value formats accepted by ng-select and Angular's NgClass directive.
24.0.5

type CompareWithFn

type CompareWithFn = (a: any, b: any) => boolean;

type DropdownPosition

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

type GroupValueFn

type GroupValueFn = (key: string | any, children: any[]) => string | any;

type SelectionModelFactory

type SelectionModelFactory = () => SelectionModel;

Namespaces

namespace ng_dropdown_panel_component_d_exports

namespace ng_dropdown_panel_component_d_exports {}

class NgDropdownPanelComponent

class NgDropdownPanelComponent implements OnInit, OnChanges {}

Renders, positions, and virtualizes the dropdown option panel.
3.0.0

property ariaLabelDropdown

readonly ariaLabelDropdown: any;

property bufferAmount

readonly bufferAmount: any;

property closeOnScroll

readonly closeOnScroll: any;

Close the dropdown when the page or an ancestor container scrolls.

property contentTransform

protected readonly contentTransform: any;

Offset of the rendered virtual-scroll range. Template-bound so it renders in the same pass as the range's rows (#2899).

property currentPosition

readonly currentPosition: DropdownPosition;

Gets the panel position selected by the overlay strategy.
Returns
The current position.
3.0.0

property filterValue

readonly filterValue: any;

property footerTemplate

readonly footerTemplate: any;

property headerTemplate

readonly headerTemplate: any;

property items

readonly items: any;

property listboxId

readonly listboxId: any;

property markedItem

readonly markedItem: any;

property outsideClick

readonly outsideClick: any;

property outsideClickEvent

readonly outsideClickEvent: any;

Which DOM event to listen to for outside click detection

property outsideScroll

readonly outsideScroll: any;

property overlayRef

readonly overlayRef: any;

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

property ɵcmp

static ɵcmp: i0.ɵɵ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;
        };
        closeOnScroll: {
            alias: 'closeOnScroll';
            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';
        outsideScroll: 'outsideScroll';
    },
    never,
    ['*'],
    true,
    never
>;

property ɵfac

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

property popover

readonly popover: any;

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: any;

property scroll

readonly scroll: any;

property scrollToEnd

readonly scrollToEnd: any;

property selectElement

readonly selectElement: any;

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: any;

property update

readonly update: any;

property virtualScroll

readonly virtualScroll: any;

method adjustPosition

adjustPosition: () => void;

Requests that the overlay strategy recalculate the panel position.
3.0.0

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

Responds to Angular input changes.
Parameter changes
The changed Angular inputs.
3.0.0

method ngOnInit

ngOnInit: () => void;

Initializes the instance after Angular has assigned its inputs.
3.0.0

method scrollTo

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

Scrolls until the requested option is visible.
Parameter option
The option to process.
Parameter startFromOption
The start from option.
3.0.0

method scrollToTag

scrollToTag: () => void;

Scrolls to the add-tag row.
3.0.0

namespace ng_option_component_d_exports

namespace ng_option_component_d_exports {}

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.
3.0.0

constructor

constructor();

Creates an instance of NgOptionComponent.
3.0.0

property classes

readonly classes: any;

property disabled

readonly disabled: any;

Whether the option is disabled and cannot be selected.

property elementRef

readonly elementRef: ElementRef<any>;

property isInitialized

readonly isInitialized: any;

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

property label

readonly label: any;

property ɵcmp

static ɵcmp: i0.ɵɵ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: i0.ɵɵFactoryDeclaration<NgOptionComponent, never>;

property value

readonly value: any;

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

method ngOnInit

ngOnInit: () => void;

Initializes the instance after Angular has assigned its inputs.
21.5.2

namespace ng_select_component_d_exports

namespace ng_select_component_d_exports {}

variable SELECTION_MODEL_FACTORY

const SELECTION_MODEL_FACTORY: InjectionToken<SelectionModelFactory>;

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

class NgSelectComponent

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

Provides select, multiselect, autocomplete, keyboard, accessibility, and Signal, Reactive, and Template-driven Forms behavior.
3.0.0

constructor

constructor();

Creates an instance of NgSelectComponent.
3.0.0

property addEvent

readonly addEvent: any;

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

property addTag

readonly addTag: any;

property addTagText

readonly addTagText: any;

property appearance

readonly appearance: any;

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

property appendTo

readonly appendTo: any;

property ariaLabel

readonly ariaLabel: any;

property ariaLabelDropdown

readonly ariaLabelDropdown: any;

property bindLabel

readonly bindLabel: any;

Object property to use for label. Default label

property bindValue

readonly bindValue: any;

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

property blurEvent

readonly blurEvent: any;

Fired on select blur

property bufferAmount

readonly bufferAmount: any;

property changeEvent

readonly changeEvent: any;

Fired on model change. Outputs whole model

property classes

readonly classes: string;

property clearable

readonly clearable: any;

property clearAllText

readonly clearAllText: any;

property clearButton

readonly clearButton: any;

property clearButtonTemplate

readonly clearButtonTemplate: any;

property clearEvent

readonly clearEvent: any;

Fired on clear icon click

property clearItem

clearItem: (item: any) => void;

property clearKeepsDisabledOptions

readonly clearKeepsDisabledOptions: any;

property clearOnBackspace

readonly clearOnBackspace: any;

property clearSearchOnAdd

readonly clearSearchOnAdd: any;

property clearSearchOnAddValue

readonly clearSearchOnAddValue: any;

property closeEvent

readonly closeEvent: any;

Fired on select dropdown close

property closeOnScroll

readonly closeOnScroll: any;

property closeOnSelect

readonly closeOnSelect: any;

property compareWith

readonly compareWith: any;

property config

readonly config: NgSelectConfig;

property currentPanelPosition

readonly currentPanelPosition: DropdownPosition;

Gets the current panel position.
Returns
The current panel position.
3.0.0

property deselectOnClick

readonly deselectOnClick: any;

property deselectOnClickValue

readonly deselectOnClickValue: any;

property disabled

readonly disabled: any;

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: any;

property dropdownPosition

readonly dropdownPosition: any;

property dropdownVirtualScroll

readonly dropdownVirtualScroll: any;

property editableSearchTerm

readonly editableSearchTerm: any;

property element

readonly element: HTMLElement;

property filtered

readonly filtered: boolean;

Gets whether search filtering or text composition is active.
Returns
The filtered.
3.0.0

property fixedPlaceholder

readonly fixedPlaceholder: any;

property focused

readonly focused: boolean;

Gets whether the component currently owns focus.
Returns
The focused.
20.4.2

property focusEvent

readonly focusEvent: any;

Fired on select focus

property footerTemplate

readonly footerTemplate: any;

property groupBy

readonly groupBy: any;

property groupValue

readonly groupValue: any;

property hasValue

readonly hasValue: boolean;

Determines whether the component has selected values.
Returns
Whether has value.
3.0.0

property headerTemplate

readonly headerTemplate: any;

property hideSelected

readonly hideSelected: any;

property inputAttrs

readonly inputAttrs: any;

property isOpen

readonly isOpen: any;

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

property items

readonly items: any;

Items array

property itemsList

itemsList: ItemsList;

property keyDownFn

readonly keyDownFn: any;

property labelForId

readonly labelForId: any;

property labelTemplate

readonly labelTemplate: any;

property loading

readonly loading: any;

property loadingSpinnerTemplate

readonly loadingSpinnerTemplate: any;

property loadingText

readonly loadingText: any;

property loadingTextTemplate

readonly loadingTextTemplate: any;

property markFirst

readonly markFirst: any;

property maxSelectedItems

readonly maxSelectedItems: any;

property minTermLength

readonly minTermLength: any;

property multiLabelTemplate

readonly multiLabelTemplate: any;

property multiple

readonly multiple: any;

property ngClass

readonly ngClass: any;

property ngOptions

readonly ngOptions: any;

property notFoundTemplate

readonly notFoundTemplate: any;

property notFoundText

readonly notFoundText: any;

property openEvent

readonly openEvent: any;

Fired on select dropdown open

property openOnEnter

readonly openOnEnter: any;

property optgroupTemplate

readonly optgroupTemplate: any;

property optionTemplate

readonly optionTemplate: any;

property outlineNotchWidth

readonly outlineNotchWidth: any;

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

property outsideClickEvent

readonly outsideClickEvent: any;

property ɵcmp

static ɵcmp: i0.ɵɵ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;
        };
        _closeOnScroll: {
            alias: 'closeOnScroll';
            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: i0.ɵɵFactoryDeclaration<NgSelectComponent, never>;

property panelClass

readonly panelClass: any;

property panelClasses

readonly panelClasses: any;

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

property placeholder

readonly placeholder: any;

property placeholderTemplate

readonly placeholderTemplate: any;

property popover

readonly popover: any;

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: any;

property readonly

readonly readonly: any;

property removeEvent

readonly removeEvent: any;

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

property removeText

readonly removeText: any;

property scroll

readonly scroll: any;

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: any;

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

property searchable

readonly searchable: any;

property searchEvent

readonly searchEvent: any;

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

property searchFn

readonly searchFn: any;

property searchInput

readonly searchInput: any;

property searchTerm

readonly searchTerm: string;

Gets the search term.
Returns
The search term.
20.4.2

property searchWhileComposing

readonly searchWhileComposing: any;

property selectableGroup

readonly selectableGroup: any;

property selectableGroupAsModel

readonly selectableGroupAsModel: any;

property selectedItems

readonly selectedItems: NgOption[];

Gets the selected items.
Returns
The selected items.
3.0.0

property selectedValues

readonly selectedValues: any[];

Gets the selected values.
Returns
The selected values.
3.0.0

property selectOnTab

readonly selectOnTab: any;

property showAddTag

readonly showAddTag: boolean;

Determines whether the add-tag option should be displayed.
Returns
Whether show add tag.
3.0.0

property tabFocusOnClear

tabFocusOnClear: any;

property tabFocusOnClearButton

readonly tabFocusOnClearButton: any;

property tabIndex

readonly tabIndex: any;

property tagTemplate

readonly tagTemplate: any;

property trackByFn

readonly trackByFn: any;

property trackByOption

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

property typeahead

readonly typeahead: any;

property typeToSearchTemplate

readonly typeToSearchTemplate: any;

property typeToSearchText

readonly typeToSearchText: any;

property viewPortItems

viewPortItems: NgOption[];

property virtualScroll

readonly virtualScroll: any;

method blur

blur: () => void;

Blurs the select element
3.0.0

method clearModel

clearModel: () => void;

Clears the selected model values and resets the search state.
3.0.0

method close

close: () => void;

Closes the select dropdown panel
3.0.0

method detectChanges

detectChanges: () => void;

Requests an OnPush change-detection pass.
3.0.0

method filter

filter: (term: string) => void;

Filters the available options using the current search configuration.
Parameter term
The term.
3.0.0

method focus

focus: () => void;

Focuses the select element
3.0.0

method focusOnClear

focusOnClear: () => void;

Moves keyboard focus to the clear control.
11.1.2

method handleArrowClick

handleArrowClick: () => void;

Toggles the dropdown from the arrow control.
3.0.0

method handleClearClick

handleClearClick: (_event?: MouseEvent) => void;

Clears the model from a pointer interaction.
Parameter _event
The DOM event to process.
3.0.0

method handleKeyCode

handleKeyCode: ($event: KeyboardEvent) => void;

Handles navigation and selection key codes.
Parameter $event
The DOM event to process.
3.1.1

method handleKeyCodeClear

handleKeyCodeClear: ($event: KeyboardEvent) => void;

Handles keyboard interaction on the clear control.
Parameter $event
The DOM event to process.
11.1.2

method handleKeyCodeInput

handleKeyCodeInput: ($event: KeyboardEvent) => void;

Handles keyboard interaction originating from the search input.
Parameter $event
The DOM event to process.
11.1.2

method handleKeyDown

handleKeyDown: ($event: KeyboardEvent) => void;

Routes a keyboard event to the appropriate ng-select interaction handler.
Parameter $event
The DOM event to process.
3.0.0

method handleMousedown

handleMousedown: ($event: MouseEvent) => boolean;

Handles pointer interaction within the select container.
Parameter $event
The DOM event to process.
3.0.0

method handleRemoveKeydown

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

Handles keyboard removal of a selected value.
Parameter $event
The DOM event to process.
Parameter item
The option to process.
23.3.0

method ngAfterViewInit

ngAfterViewInit: () => void;

Completes initialization that depends on rendered view children.
3.0.0

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

Responds to Angular input changes.
Parameter changes
The changed Angular inputs.
3.0.0

method ngOnInit

ngOnInit: () => void;

Initializes the instance after Angular has assigned its inputs.
3.0.0

method onCompositionEnd

onCompositionEnd: (term: string) => void;

Finishes input method editor composition and applies the search term.
Parameter term
The term.
3.0.5

method onCompositionStart

onCompositionStart: () => void;

Marks the start of an input method editor composition.
3.0.5

method onInputBlur

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

Handles focus leaving the search input.
Parameter $event
The DOM event to process.
3.0.0

method onInputFocus

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

Handles focus entering the search input.
Parameter $event
The DOM event to process.
3.0.0

method onItemHover

onItemHover: (item: NgOption) => void;

Marks an option when pointer interaction hovers it.
Parameter item
The option to process.
3.0.0

method open

open: () => void;

Opens the select dropdown panel
3.0.0

method registerOnChange

registerOnChange: (fn: any) => void;

Registers the ControlValueAccessor model-change callback.
Parameter fn
The fn.
3.0.0

method registerOnTouched

registerOnTouched: (fn: any) => void;

Registers the ControlValueAccessor touched callback.
Parameter fn
The fn.
3.0.0

method select

select: (item: NgOption) => void;

Selects an option according to the active selection mode.
Parameter item
The option to process.
3.0.0

method selectTag

selectTag: () => void;

Creates and selects an option from the current search term.
3.0.0

method setDisabledState

setDisabledState: (state: boolean) => void;

Updates the disabled state supplied by Angular forms.
Parameter state
The state.
3.0.0

method showClear

showClear: () => boolean;

Determines whether the clear control should be displayed.
3.0.0

method showNoItemsFound

showNoItemsFound: () => boolean;

Determines whether the empty-results message should be displayed.
3.0.0

method showTypeToSearch

showTypeToSearch: () => boolean;

Determines whether the type-to-search prompt should be displayed.
3.0.0

method toggle

toggle: () => void;

Toggles the dropdown panel.
3.0.0

method toggleItem

toggleItem: (item: NgOption) => void;

Selects or unselects an option based on its current state.
Parameter item
The option to process.
3.0.0

method unselect

unselect: (item: NgOption) => void;

Removes an option from the current selection.
Parameter item
The option to process.
3.0.0

method writeValue

writeValue: (value: any | any[]) => void;

Writes a ControlValueAccessor model value into the component.
Parameter value
The value to process.
3.0.0

type AddTagFn

type AddTagFn = (term: string) => any | Promise<any>;

type CompareWithFn

type CompareWithFn = (a: any, b: any) => boolean;

type GroupValueFn

type GroupValueFn = (key: string | any, children: any[]) => string | any;

namespace ng_templates_directive_d_exports

namespace ng_templates_directive_d_exports {}

class NgClearButtonTemplateDirective

class NgClearButtonTemplateDirective {}

Marks a template as the custom clear button template for ng-select.
14.2.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgFooterTemplateDirective

class NgFooterTemplateDirective {}

Marks a template as the custom footer template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgHeaderTemplateDirective

class NgHeaderTemplateDirective {}

Marks a template as the custom header template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

static ɵfac: i0.ɵɵ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).
3.0.2

constructor

constructor();

Creates an instance of NgItemLabelDirective.
3.0.2

property escape

escape: any;

Deprecated
Ignored — labels are always written as text.

property ngItemLabel

ngItemLabel: any;

property ɵdir

static ɵdir: i0.ɵɵ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: i0.ɵɵFactoryDeclaration<NgItemLabelDirective, never>;

class NgLabelTemplateDirective

class NgLabelTemplateDirective {}

Marks a template as the custom label template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgLoadingSpinnerTemplateDirective

class NgLoadingSpinnerTemplateDirective {}

Marks a template as the custom loading spinner template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgLoadingTextTemplateDirective

class NgLoadingTextTemplateDirective {}

Marks a template as the custom loading text template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgMultiLabelTemplateDirective

class NgMultiLabelTemplateDirective {}

Marks a template as the custom multi label template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgNotFoundTemplateDirective

class NgNotFoundTemplateDirective {}

Marks a template as the custom not found template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgOptgroupTemplateDirective

class NgOptgroupTemplateDirective {}

Marks a template as the custom optgroup template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgOptionTemplateDirective

class NgOptionTemplateDirective {}

Marks a template as the custom option template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgPlaceholderTemplateDirective

class NgPlaceholderTemplateDirective {}

Marks a template as the custom placeholder template for ng-select.
13.6.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgTagTemplateDirective

class NgTagTemplateDirective {}

Marks a template as the custom tag template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

class NgTypeToSearchTemplateDirective

class NgTypeToSearchTemplateDirective {}

Marks a template as the custom type to search template for ng-select.
3.0.0

property ɵdir

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

property ɵfac

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

property template

readonly template: TemplateRef<any>;

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

@ng-select/ng-select

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable SELECTION_MODEL_FACTORY

Functions

function DefaultSelectionModelFactory

function mergeClassValues

Parameter values

Returns

function provideNgSelect

function readConsumerHostClasses

Parameter element

Returns

Classes

class ConsoleService

property ɵfac

property ɵprov

method warn

Parameter message

class DefaultSelectionModel

property value

Returns

method clear

Parameter keepDisabled

method select

Parameter item

Parameter multiple

Parameter groupAsModel

method unselect

Parameter item

Parameter multiple

class ItemsList

constructor

Parameter _ngSelect

Parameter _selectionModel

property filteredItems

Returns

property items

Returns

property lastSelectedItem

Returns

property markedIndex

Returns

property markedItem

Returns

property maxItemsSelected

Returns

property noItemsToSelect

Returns

property selectedItems

Returns

method addItem

Parameter item

method clearSelected

Parameter keepDisabled

method filter

Parameter term

method findByLabel

Parameter term

method findItem

Parameter value

Returns

method mapItem

Parameter item

Parameter index

Returns

method mapSelectedItems

method markItem

Parameter item

method markNextItem

method markPreviousItem