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>

Constructors

Section titled "Constructors"

IgxDropDownComponent

new IgxDropDownComponent(): IgxDropDownComponent

Returns IgxDropDownComponent

Properties

Section titled "Properties"

allowItemsFocus

Section titled "allowItemsFocus"

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>
allowItemsFocus: boolean = false

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:125

closed

Section titled "closed"

Emitted after the dropdown is closed

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

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:104

closing

Section titled "closing"

Emitted before the dropdown is closed

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

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:94

document

Section titled "document"

Inherited from: IgxDropDownBaseDirective 

document: Document

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:26

height

Section titled "height"

Inherited from: IgxDropDownBaseDirective

Gets/Sets the height of the drop down

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

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:66

labelledBy

Section titled "labelledBy"

Sets aria-labelledby attribute value.

<igx-drop-down [labelledby]="labelId"></igx-drop-down>
labelledBy: string

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:134

maxHeight

Section titled "maxHeight"

Inherited from: IgxDropDownBaseDirective

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

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

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:103

opened

Section titled "opened"

Emitted after the dropdown is opened

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

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:84

opening

Section titled "opening"

Emitted before the dropdown is opened

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

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:74

role

Section titled "role"

Gets/sets the role attribute of the drop down. Default is 'listbox'.

<igx-drop-down [role]="customRole"></igx-drop-down-item>
role: string = 'listbox'

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:144

selectionChanging

Section titled "selectionChanging"

Inherited from: IgxDropDownBaseDirective

Emitted when item selection is changing, before the selection completes

<igx-drop-down (selectionChanging)='handleSelection()'></igx-drop-down>
selectionChanging: EventEmitter<ISelectionEventArgs>

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:36

width

Section titled "width"

Inherited from: IgxDropDownBaseDirective

Gets/Sets the width of the drop down

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

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:51

id

Section titled "id" 
id: string

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:183, projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:186

Accessors

Section titled "Accessors"

collapsed

Section titled "collapsed"

Gets if the dropdown is collapsed

let isCollapsed = this.dropdown.collapsed;
get collapsed(): boolean

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:221

Returns boolean

element

Section titled "element"

Inherited from: IgxDropDownBaseDirective

Get dropdown html element

let myDropDownElement = this.dropdown.element;
get element(): any

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:158

Returns any

headers

Section titled "headers"

Inherited from: IgxDropDownBaseDirective

Get all header items

let myDropDownHeaderItems = this.dropdown.headers;
get headers(): IgxDropDownItemBaseDirective[]

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:138

Returns IgxDropDownItemBaseDirective[]

items

Section titled "items"

Inherited from: IgxDropDownBaseDirective

Get all non-header items

let myDropDownItems = this.dropdown.items;
get items(): IgxDropDownItemBaseDirective[]

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:118

Returns IgxDropDownItemBaseDirective[]

listId

Section titled "listId"

Id of the internal listbox of the drop down

get listId(): string

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:195

Returns string

selectedItem

Section titled "selectedItem"

Get currently selected item

let currentItem = this.dropdown.selectedItem;
get selectedItem(): IgxDropDownItemBaseDirective

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:206

Returns IgxDropDownItemBaseDirective

Methods

Section titled "Methods"

clearSelection

Section titled "clearSelection"

Clears the selection of the dropdown

this.dropdown.clearSelection();
clearSelection(): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:574

Returns void

close

Section titled "close"

Closes the dropdown

this.dropdown.close();
close(event: Event): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:270

Parameters

  • event: Event

Returns void

Section titled "navigateItem"

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.

navigateItem(index: number): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:316

Parameters

  • index: number

Returns void

ngAfterViewInit

Section titled "ngAfterViewInit"

A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

ngAfterViewInit(): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:458

Returns void

ngOnInit

Section titled "ngOnInit"

Inherited from: IgxDropDownBaseDirective

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.

ngOnInit(): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:196

Returns void

onItemActionKey

Section titled "onItemActionKey"

Keydown Handler

onItemActionKey(key: DropDownActionKey, event: Event): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:465

Parameters

Returns void

open

Section titled "open"

Opens the dropdown

this.dropdown.open();
open(overlaySettings: OverlaySettings): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:246

Parameters

Returns void

setSelectedItem

Section titled "setSelectedItem"

Select an item by index

setSelectedItem(index: number): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:294

Parameters

  • index: number

    of the item to select; If the drop down uses *igxFor, pass the index in data

Returns void

toggle

Section titled "toggle"

Toggles the dropdown

this.dropdown.toggle();
toggle(overlaySettings: OverlaySettings): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:281

Parameters

Returns void