angular-select-dropdown
Version:
A highly customizable and flexible dropdown select component for Angular applications. Ideal for creating dynamic select menus with search, filtering.
90 lines (89 loc) • 3.87 kB
TypeScript
import { ChangeDetectorRef, EventEmitter, OnDestroy } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { AngularSelectDropdown } from '../models';
import * as i0 from "@angular/core";
interface SelectedItem {
value: any;
name: string;
}
export declare class AngularSelectDropdownComponent<T> implements ControlValueAccessor, OnDestroy {
private cdRef;
/**
* Handler function to extract the label for each item.
* @param item The item from the list.
* @returns The label (name or value) of the item.
*/
labelHandler: (item: T) => any;
/**
* Defines the key used to sort the dropdown items.
* @param sortKeyName The key used to sort the items, default is 'value'.
* @default 'value'
*/
sortKeyName: string;
/**
* List of items to populate the dropdown.
* This setter updates the internal store of items and triggers an update.
* @param items The array of items to be displayed in the dropdown.
*/
set items(items: T[]);
/**
* Determines whether the dropdown allows clearing the selection.
* @param isClearable If true, the dropdown will show a clear button.
* @default false
*/
isClearable: boolean;
/**
* Determines whether the dropdown is disabled.
* @param disabled If true, the dropdown is disabled and cannot be interacted with.
* @default false
*/
disabled: boolean;
/**
* Determines whether the dropdown menu should close when the selected item is cleared.
* @param closeMenuOnClear If true, the dropdown will close when the selection is cleared.
* @default true
*/
closeMenuOnClear: boolean;
/**
* Placeholder text displayed when no item is selected.
* @param placeholder The placeholder text.
* @default ''
*/
placeholder: string;
/**
* Message displayed when no items match the search query.
* @param notFoundMessage The message to display when no items are found.
* @default 'Nothing found'
*/
notFoundMessage: string;
/**
* Event emitted when an item is selected.
* @param selectItem The selected item is emitted as an event.
*/
selectItem: EventEmitter<T>;
hostClasses: string;
private _items;
get items(): T[];
data: (number | string) | (number | string)[];
isDropdownOpen: boolean;
itemsStore: AngularSelectDropdown[];
selectedItem: SelectedItem;
constructor(cdRef: ChangeDetectorRef);
ngOnDestroy(): void;
private onTouched;
private onChange;
registerOnChange(onChange: (value: number | string | null) => void): void;
registerOnTouched(onTouched: () => void): void;
writeValue(obj: number | string): void;
private updateData;
private updateItems;
private updateSelectedItem;
trackByValue(index: number, item: AngularSelectDropdown): any;
closeDropdownMenu(): void;
onClickRemove(event: MouseEvent): void;
onSelectItem(item: AngularSelectDropdown): void;
onSelectClick(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<AngularSelectDropdownComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<AngularSelectDropdownComponent<any>, "angular-select-dropdown", never, { "labelHandler": { "alias": "labelHandler"; "required": false; }; "sortKeyName": { "alias": "sortKeyName"; "required": false; }; "items": { "alias": "items"; "required": false; }; "isClearable": { "alias": "isClearable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "closeMenuOnClear": { "alias": "closeMenuOnClear"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "notFoundMessage": { "alias": "notFoundMessage"; "required": false; }; }, { "selectItem": "selectItem"; }, never, never, false, never>;
}
export {};