@ng-select/ng-select

@ng-select/ng-select

Version 21.5.2
Published 6 days ago
509 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>;

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

constructor

constructor();

property appendTo

readonly appendTo: _angular_core.InputSignal<string>;

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 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 ɵ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 };
        appendTo: { alias: 'appendTo'; 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;
        };
        outsideClickEvent: {
            alias: 'outsideClickEvent';
            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 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 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
) => ItemsRangeResult;

method getScrollTo

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

method setDimensions

setDimensions: (itemHeight: number, panelHeight: 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 {}

constructor

constructor();

property escape

escape: _angular_core.InputSignal<boolean>;

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

constructor

constructor();

property disabled

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

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

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

property addTag

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

property addTagText

readonly addTagText: _angular_core.InputSignal<string>;

property appearance

readonly appearance: _angular_core.ModelSignal<string>;

property appendTo

readonly appendTo: _angular_core.InputSignal<string>;

property ariaLabel

readonly ariaLabel: _angular_core.InputSignal<string>;

property ariaLabelDropdown

readonly ariaLabelDropdown: _angular_core.InputSignal<string>;

property bindLabel

readonly bindLabel: _angular_core.ModelSignal<string>;

property bindValue

readonly bindValue: _angular_core.ModelSignal<string>;

property blurEvent

readonly blurEvent: _angular_core.OutputEmitterRef<any>;

property bufferAmount

readonly bufferAmount: _angular_core.InputSignalWithTransform<number, unknown>;

property changeEvent

readonly changeEvent: _angular_core.OutputEmitterRef<any>;

property classes

readonly classes: string;

property clearable

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

property clearAllText

readonly clearAllText: _angular_core.InputSignal<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>;

property clearItem

clearItem: (item: any) => void;

property clearKeepsDisabledOptions

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

property clearOnBackspace

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

property clearSearchOnAdd

readonly clearSearchOnAdd: _angular_core.InputSignal<any>;

property clearSearchOnAddValue

readonly clearSearchOnAddValue: _angular_core.Signal<any>;

property closeEvent

readonly closeEvent: _angular_core.OutputEmitterRef<void>;

property closeOnSelect

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

property compareWith

readonly compareWith: _angular_core.InputSignalWithTransform<
    CompareWithFn,
    CompareWithFn
>;

property config

readonly config: NgSelectConfig;

property currentPanelPosition

readonly currentPanelPosition: DropdownPosition;

property deselectOnClick

readonly deselectOnClick: _angular_core.InputSignal<boolean>;

property deselectOnClickValue

readonly deselectOnClickValue: _angular_core.Signal<boolean>;

property disabled

readonly disabled: _angular_core.Signal<boolean>;

property dropdownId

readonly dropdownId: string;

property dropdownPanel

readonly dropdownPanel: _angular_core.Signal<any>;

property dropdownPosition

readonly dropdownPosition: _angular_core.InputSignal<DropdownPosition>;

property editableSearchTerm

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

property element

readonly element: HTMLElement;

property escapeHTML

escapeHTML: boolean;

property filtered

readonly filtered: boolean;

property fixedPlaceholder

readonly fixedPlaceholder: _angular_core.InputSignal<boolean>;

property focused

readonly focused: boolean;

property focusEvent

readonly focusEvent: _angular_core.OutputEmitterRef<any>;

property footerTemplate

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

property groupBy

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

property groupValue

readonly groupValue: _angular_core.InputSignal<GroupValueFn>;

property hasValue

readonly hasValue: boolean;

property headerTemplate

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

property hideSelected

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

property inputAttrs

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

property isOpen

readonly isOpen: _angular_core.ModelSignal<boolean>;

property items

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

property itemsList

itemsList: ItemsList;

property keyDownFn

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

property labelForId

readonly labelForId: _angular_core.InputSignal<any>;

property labelTemplate

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

property loading

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

property loadingSpinnerTemplate

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

property loadingText

readonly loadingText: _angular_core.InputSignal<string>;

property loadingTextTemplate

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

property markFirst

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

property maxSelectedItems

readonly maxSelectedItems: _angular_core.InputSignalWithTransform<
    number,
    unknown
>;

property minTermLength

readonly minTermLength: _angular_core.InputSignalWithTransform<number, unknown>;

property multiLabelTemplate

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

property multiple

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

property ngClass

readonly ngClass: _angular_core.InputSignal<any>;

property ngOptions

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

property notFoundTemplate

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

property notFoundText

readonly notFoundText: _angular_core.InputSignal<string>;

property openEvent

readonly openEvent: _angular_core.OutputEmitterRef<void>;

property openOnEnter

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

property optgroupTemplate

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

property optionTemplate

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

property outsideClickEvent

readonly outsideClickEvent: _angular_core.InputSignal<'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 };
        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 };
        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 };
        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 placeholder

readonly placeholder: _angular_core.InputSignal<string>;

property placeholderTemplate

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

property preventToggleOnRightClick

readonly preventToggleOnRightClick: _angular_core.InputSignal<boolean>;

property readonly

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

property removeEvent

readonly removeEvent: _angular_core.OutputEmitterRef<any>;

property scroll

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

property scrollToEnd

readonly scrollToEnd: _angular_core.OutputEmitterRef<any>;

property searchable

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

property searchEvent

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

property searchFn

readonly searchFn: _angular_core.InputSignal<any>;

property searchInput

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

property searchTerm

readonly searchTerm: string;

property searchWhileComposing

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

property selectableGroup

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

property selectableGroupAsModel

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

property selectedItems

readonly selectedItems: NgOption[];

property selectedValues

readonly selectedValues: any[];

property selectOnTab

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

property showAddTag

readonly showAddTag: boolean;

property tabFocusOnClear

tabFocusOnClear: _angular_core.WritableSignal<boolean>;

property tabFocusOnClearButton

readonly tabFocusOnClearButton: _angular_core.InputSignal<boolean>;

property tabIndex

readonly tabIndex: _angular_core.InputSignalWithTransform<number, unknown>;

property tagTemplate

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

property trackByFn

readonly trackByFn: _angular_core.InputSignal<any>;

property trackByOption

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

property typeahead

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

property typeToSearchTemplate

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

property typeToSearchText

readonly typeToSearchText: _angular_core.InputSignal<string>;

property viewPortItems

viewPortItems: NgOption[];

property virtualScroll

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

method blur

blur: () => void;

method clearModel

clearModel: () => void;

method close

close: () => void;

method detectChanges

detectChanges: () => void;

method filter

filter: (term: string) => void;

method focus

focus: () => void;

method focusOnClear

focusOnClear: () => void;

method handleArrowClick

handleArrowClick: () => void;

method handleClearClick

handleClearClick: (_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 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;

method registerOnChange

registerOnChange: (fn: any) => void;

method registerOnTouched

registerOnTouched: (fn: any) => void;

method select

select: (item: NgOption) => void;

method selectTag

selectTag: () => void;

method setDisabledState

setDisabledState: (state: boolean) => void;

method showClear

showClear: () => boolean;

method showNoItemsFound

showNoItemsFound: () => boolean;

method showTypeToSearch

showTypeToSearch: () => boolean;

method toggle

toggle: () => void;

method toggleItem

toggleItem: (item: NgOption) => void;

method unselect

unselect: (item: NgOption) => void;

method writeValue

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

class NgSelectConfig

class NgSelectConfig {}

property addTagText

addTagText: string;

property appearance

appearance: string;

property appendTo

appendTo: string;

property ariaLabelDropdown

ariaLabelDropdown: string;

property bindLabel

bindLabel: string;

property bindValue

bindValue: string;

property clearAllText

clearAllText: string;

property clearSearchOnAdd

clearSearchOnAdd: boolean;

property deselectOnClick

deselectOnClick: boolean;

property disableVirtualScroll

disableVirtualScroll: boolean;

property fixedPlaceholder

fixedPlaceholder: boolean;

property loadingText

loadingText: string;

property notFoundText

notFoundText: string;

property openOnEnter

openOnEnter: boolean;

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;

property tabFocusOnClear

tabFocusOnClear: boolean;

property typeToSearchText

typeToSearchText: string;

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

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@ng-select/ng-select.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@ng-select/ng-select)

HTML

<a href="https://www.jsdocs.io/package/@ng-select/ng-select"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 6 days ago.
Package analyzed in 3099 ms.
Missing or incorrect documentation? Open an issue for this package.