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

Implements

  • DoCheck
  • OnInit
  • IDropDownList
  • IDropDownBase
  • OnInit
  • OnDestroy
  • AfterViewInit

Constructors

constructor

Properties

allowItemsFocus

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>

height

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>

maxHeight

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>

onClosed

onClosed: EventEmitter<void> = new EventEmitter<void>()

Emitted after the dropdown is closed

<igx-drop-down (onClosed)='handleClosed()'></igx-drop-down>

onClosing

onClosing: EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs> = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>()

Emitted before the dropdown is closed

<igx-drop-down (onClosing)='handleClosing()'></igx-drop-down>

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = new EventEmitter<IDensityChangedEventArgs>()

onOpened

onOpened: EventEmitter<void> = new EventEmitter<void>()

Emitted after the dropdown is opened

<igx-drop-down (onOpened)='handleOpened()'></igx-drop-down>

onOpening

onOpening: EventEmitter<CancelableEventArgs & IBaseEventArgs> = new EventEmitter<CancelableEventArgs & IBaseEventArgs>()

Emitted before the dropdown is opened

<igx-drop-down (onOpening)='handleOpening()'></igx-drop-down>

onSelection

onSelection: EventEmitter<ISelectionEventArgs> = new EventEmitter<ISelectionEventArgs>()

Emitted when item selection is changing, before the selection completes

<igx-drop-down (onSelection)='handleSelection()'></igx-drop-down>

width

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

collapsed

  • get collapsed(): boolean

displayDensity

element

  • get element(): any

headers

id

  • get id(): string
  • set id(value: string): void

items

listId

  • get listId(): string

selectedItem

Methods

close

  • close(): void

navigateItem

  • navigateItem(index: number): void

ngAfterViewInit

  • ngAfterViewInit(): void

ngDoCheck

  • ngDoCheck(): void

onItemActionKey

open

setSelectedItem

  • setSelectedItem(index: number): void

toggle