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)

IgxDropDownBaseDirective
- IgxDropDownComponent
  - IgxSelectComponent

Implements

IDropDownBase
OnChanges
AfterViewInit
OnDestroy

Constructors

constructor

new IgxDropDownComponent(elementRef, cdr, selection, _displayDensityOptions): IgxDropDownComponent
Overrides IgxDropDownBaseDirective.constructor
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:231
Parameters
- elementRef: ElementRef<any>
- cdr: ChangeDetectorRef
- selection: IgxSelectionAPIService
- _displayDensityOptions: IDisplayDensityOptions
Returns IgxDropDownComponent

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>

densityChanged

densityChanged: EventEmitter<IDensityChangedEventArgs> = ...

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

get collapsed(): boolean
Implementation of IDropDownBase.collapsed
Overrides IgxDropDownBaseDirective.collapsed
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:213
Gets if the dropdown is collapsed
```
let isCollapsed = this.dropdown.collapsed;
```
Returns boolean

displayDensity

get displayDensity(): DisplayDensity
Implementation of IDropDownBase.displayDensity
Inherited from IgxDropDownBaseDirective.displayDensity
- Defined in projects/igniteui-angular/src/lib/core/density.ts:85
Returns the theme of the component. The default theme is comfortable. Available options are comfortable, cosy, compact.
```
let componentTheme = this.component.displayDensity;
```
Deprecated
since version 16.1.0. Please use the --ig-size CSS custom property.

See
Update Guide

Returns DisplayDensity
set displayDensity(val): void
Implementation of IDropDownBase.displayDensity
Inherited from IgxDropDownBaseDirective.displayDensity
- Defined in projects/igniteui-angular/src/lib/core/density.ts:96
Sets the theme of the component.

Parameters
- val: DisplayDensity
Returns void

element

get element(): any
Implementation of IDropDownBase.element
Inherited from IgxDropDownBaseDirective.element
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts:151
Get dropdown html element
```
let myDropDownElement = this.dropdown.element;
```
Returns any

focusedItem

set focusedItem(value): void
Implementation of IDropDownBase.focusedItem
Overrides IgxDropDownBaseDirective.focusedItem
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:159
Parameters
- value: IgxDropDownItemBaseDirective
Returns void

headers

get headers(): IgxDropDownItemBaseDirective[]
Implementation of IDropDownBase.headers
Inherited from IgxDropDownBaseDirective.headers
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts:131
Get all header items
```
let myDropDownHeaderItems = this.dropdown.headers;
```
Returns IgxDropDownItemBaseDirective[]

id

get id(): string
Implementation of IDropDownBase.id
Overrides IgxDropDownBaseDirective.id
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:175
Returns string
set id(value): void
Implementation of IDropDownBase.id
Overrides IgxDropDownBaseDirective.id
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:178
Parameters
- value: string
Returns void

items

get items(): IgxDropDownItemBaseDirective[]
Implementation of IDropDownBase.items
Inherited from IgxDropDownBaseDirective.items
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts:111
Get all non-header items
```
let myDropDownItems = this.dropdown.items;
```
Returns IgxDropDownItemBaseDirective[]

listId

get listId(): string
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:187
Id of the internal listbox of the drop down

Returns string

selectedItem

get selectedItem(): IgxDropDownItemBaseDirective
Implementation of IDropDownBase.selectedItem
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:198
Get currently selected item
```
let currentItem = this.dropdown.selectedItem;
```
Returns IgxDropDownItemBaseDirective

Methods

clearSelection

clearSelection(): void
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:558
Clears the selection of the dropdown
```
this.dropdown.clearSelection();
```
Returns void

close

close(event?): void
Implementation of IDropDownBase.close
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:258
Closes the dropdown
```
this.dropdown.close();
```
Parameters
- Optional event: Event
Returns void

getComponentSizeStyles

getComponentSizeStyles(): "var(--ig-size, var(--ig-size-small))" | "var(--ig-size, var(--ig-size-medium))" | "var(--ig-size, var(--ig-size-large))"
Implementation of IDropDownBase.getComponentSizeStyles
Inherited from IgxDropDownBaseDirective.getComponentSizeStyles
- Defined in projects/igniteui-angular/src/lib/core/density.ts:197
Sets the --component-size CSS variable based on the value of Display Density

Returns "var(--ig-size, var(--ig-size-small))" | "var(--ig-size, var(--ig-size-medium))" | "var(--ig-size, var(--ig-size-large))"

navigateItem

navigateItem(index): void
Implementation of IDropDownBase.navigateItem
Overrides IgxDropDownBaseDirective.navigateItem
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:304
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

ngAfterViewInit(): void
Implementation of AfterViewInit.ngAfterViewInit
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:446
Returns void

onItemActionKey

onItemActionKey(key, event?): void
Implementation of IDropDownBase.onItemActionKey
Overrides IgxDropDownBaseDirective.onItemActionKey
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:453
Keydown Handler

Parameters
- key: DropDownActionKey
- Optional event: Event
Returns void

open

open(overlaySettings?): void
Implementation of IDropDownBase.open
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:246
Opens the dropdown
```
this.dropdown.open();
```
Parameters
- Optional overlaySettings: OverlaySettings
Returns void

setSelectedItem

setSelectedItem(index): void
Implementation of IDropDownBase.setSelectedItem
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:282
Select an item by index

Parameters
- index: number
  of the item to select; If the drop down uses *igxFor, pass the index in data
Returns void

toggle

toggle(overlaySettings?): void
Implementation of IDropDownBase.toggle
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:269
Toggles the dropdown
```
this.dropdown.toggle();
```
Parameters
- Optional overlaySettings: OverlaySettings
Returns void

Class IgxDropDownComponent

Hierarchy

Hierarchy (view full)

Implements

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

elementRef: ElementRef<any>

cdr: ChangeDetectorRef

selection: IgxSelectionAPIService

_displayDensityOptions: IDisplayDensityOptions

Returns IgxDropDownComponent

Properties

allowItemsFocus

closed

closing

densityChanged

height

labelledBy

maxHeight

opened

opening

selectionChanging

width

Accessors

collapsed

Returns boolean

displayDensity

Deprecated

See

Returns DisplayDensity

Parameters

val: DisplayDensity

Returns void

element

Returns any

focusedItem

Parameters

value: IgxDropDownItemBaseDirective

Returns void

headers

Returns IgxDropDownItemBaseDirective[]

id

Returns string

Parameters

value: string

Returns void

items

Returns IgxDropDownItemBaseDirective[]

listId

Returns string

selectedItem

Returns IgxDropDownItemBaseDirective

Methods

clearSelection

Returns void

close

Parameters

Optional event: Event

Returns void

getComponentSizeStyles

Returns "var(--ig-size, var(--ig-size-small))" | "var(--ig-size, var(--ig-size-medium))" | "var(--ig-size, var(--ig-size-large))"

navigateItem

Parameters

index: number

Returns void

ngAfterViewInit

Returns void

onItemActionKey

Parameters

key: DropDownActionKey

Optional event: Event

Returns void

open

Parameters

Optional overlaySettings: OverlaySettings