Class IgxDropDownComponent

Ignite UI for Angular DropDown - Documentation

The Ignite UI for Angular Drop Down displays a scrollable list of items which may be visually grouped and supports selection of a single item. Clicking or tapping an item selects it and closes the Drop Down

Example:

<igx-drop-down>
<igx-drop-down-item *ngFor="let item of items" disabled={{item.disabled}} isHeader={{item.header}}>
{{ item.value }}
</igx-drop-down-item>
</igx-drop-down>

Hierarchy

Hierarchy (view full)

Implements

  • IDropDownBase
  • OnChanges
  • AfterViewInit
  • OnDestroy

Constructors

Properties

allowItemsFocus: boolean = false

Gets/sets whether items take focus. Disabled by default. When enabled, drop down items gain tab index and are focused when active - this includes activating the selected item when opening the drop down and moving with keyboard navigation.

Note: Keep that focus shift in mind when using the igxDropDownItemNavigation directive and ensure it's placed either on each focusable item or a common ancestor to allow it to handle keyboard events.

// get
let dropDownAllowsItemFocus = this.dropdown.allowItemsFocus;
<!--set-->
<igx-drop-down [allowItemsFocus]='true'></igx-drop-down>
closed: EventEmitter<IBaseEventArgs> = ...

Emitted after the dropdown is closed

<igx-drop-down (closed)='handleClosed($event)'></igx-drop-down>
closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

Emitted before the dropdown is closed

<igx-drop-down (closing)='handleClosing($event)'></igx-drop-down>
document: any
height: string

Gets/Sets the height of the drop down

// get
let myDropDownCurrentHeight = this.dropdown.height;
<!--set-->
<igx-drop-down [height]='400px'></igx-drop-down>
labelledBy: string

Sets aria-labelledby attribute value.

<igx-drop-down [labelledby]="labelId"></igx-drop-down>
maxHeight: any = null

Gets/Sets the drop down's container max height.

// get
let maxHeight = this.dropdown.maxHeight;
<!--set-->
<igx-drop-down [maxHeight]='200px'></igx-drop-down>
opened: EventEmitter<IBaseEventArgs> = ...

Emitted after the dropdown is opened

<igx-drop-down (opened)='handleOpened($event)'></igx-drop-down>
opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

Emitted before the dropdown is opened

<igx-drop-down (opening)='handleOpening($event)'></igx-drop-down>
selectionChanging: EventEmitter<ISelectionEventArgs> = ...

Emitted when item selection is changing, before the selection completes

<igx-drop-down (selectionChanging)='handleSelection()'></igx-drop-down>
width: string

Gets/Sets the width of the drop down

// get
let myDropDownCurrentWidth = this.dropdown.width;
<!--set-->
<igx-drop-down [width]='160px'></igx-drop-down>

Accessors

Methods

  • Navigates to the item on the specified index If the data in the drop-down is virtualized, pass the index of the item in the virtualized data.

    Parameters

    • index: number

    Returns void

  • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

    Returns void