Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

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 Summary)

Implements

  • IDropDownBase
  • OnChanges
  • AfterViewInit
  • OnDestroy

Constructors

Properties

Accessors

Methods

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>

closed

closed: EventEmitter<IBaseEventArgs> = ...

Emitted after the dropdown is closed

<igx-drop-down (closed)='handleClosed($event)'></igx-drop-down>

closing

closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

Emitted before the dropdown is closed

<igx-drop-down (closing)='handleClosing($event)'></igx-drop-down>

document

document: any

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>

labelledBy

labelledBy: string

Sets aria-labelledby attribute value.

<igx-drop-down [labelledby]="labelId"></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>

opened

opened: EventEmitter<IBaseEventArgs> = ...

Emitted after the dropdown is opened

<igx-drop-down (opened)='handleOpened($event)'></igx-drop-down>

opening

opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

Emitted before the dropdown is opened

<igx-drop-down (opening)='handleOpening($event)'></igx-drop-down>

selectionChanging

selectionChanging: EventEmitter<ISelectionEventArgs> = ...

Emitted when item selection is changing, before the selection completes

<igx-drop-down (selectionChanging)='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

element

headers

id

  • get id(): string

  • Gets/Sets the drop down's id

    // get
    let myDropDownCurrentId = this.dropdown.id;

    <!--set-->
    <igx-drop-down [id]='newDropDownId'></igx-drop-down>

    Returns string

  • set id(value: string): void

  • Gets/Sets the drop down's id

    // get
    let myDropDownCurrentId = this.dropdown.id;

    <!--set-->
    <igx-drop-down [id]='newDropDownId'></igx-drop-down>

    Parameters

    • value: string

    Returns void

items

listId

selectedItem

Methods

clearSelection

close

navigateItem

  • navigateItem(index: number): void

  • 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

ngAfterViewInit

ngOnInit

  • ngOnInit(): 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

onItemActionKey

open

setSelectedItem

toggle