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

IgxDropDownBaseDirective
- IgxDropDownComponent
  - IgxSelectComponent

Implements

IDropDownBase
OnChanges
AfterViewInit
OnDestroy

Constructors

constructor

new IgxDropDownComponent(elementRef: ElementRef<any>, cdr: ChangeDetectorRef, selection: IgxSelectionAPIService, _displayDensityOptions: IDisplayDensityOptions): IgxDropDownComponent
Overrides IgxDropDownBaseDirective.constructor
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:227
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>

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

Input

property that set aria-labelledby attribute

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

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...

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:209
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/displayDensity.ts:50
Returns the theme of the component. The default theme is comfortable. Available options are comfortable, cosy, compact.
```
let componentTheme = this.component.displayDensity;
```
Returns DisplayDensity
set displayDensity(val: DisplayDensity): void
Implementation of IDropDownBase.displayDensity

Inherited from IgxDropDownBaseDirective.displayDensity
- Defined in projects/igniteui-angular/src/lib/core/displayDensity.ts:59
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: IgxDropDownItemBaseDirective): void
Implementation of IDropDownBase.focusedItem

Overrides IgxDropDownBaseDirective.focusedItem
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:155
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:171
Gets/Sets the drop down's id
```
// get
let myDropDownCurrentId = this.dropdown.id;
```
```

<igx-drop-down [id]='newDropDownId'></igx-drop-down>
```
Returns string
set id(value: string): void
Implementation of IDropDownBase.id

Overrides IgxDropDownBaseDirective.id
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:174
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:183
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:194
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:553
Clears the selection of the dropdown
```
this.dropdown.clearSelection();
```
Returns void

close

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

navigateItem

navigateItem(index: number): void
Implementation of IDropDownBase.navigateItem

Overrides IgxDropDownBaseDirective.navigateItem
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:300
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:441
Returns void

ngDoCheck

ngDoCheck(): void
Implementation of IDropDownBase.ngDoCheck

Inherited from IgxDropDownBaseDirective.ngDoCheck
- Defined in projects/igniteui-angular/src/lib/core/displayDensity.ts:93
Returns void

onItemActionKey

onItemActionKey(key: DropDownActionKey, event?: Event): void
Implementation of IDropDownBase.onItemActionKey

Overrides IgxDropDownBaseDirective.onItemActionKey
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:448
Keydown Handler

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

open

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

setSelectedItem

setSelectedItem(index: number): void
Implementation of IDropDownBase.setSelectedItem
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:278
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?: OverlaySettings): void
Implementation of IDropDownBase.toggle
- Defined in projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts:265
Toggles the dropdown
```
this.dropdown.toggle();
```
Parameters
- Optional overlaySettings: OverlaySettings
Returns void

Class IgxDropDownComponent

Hierarchy

Hierarchy

Implements

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

elementRef: ElementRef<any>

cdr: ChangeDetectorRef

selection: IgxSelectionAPIService

_displayDensityOptions: IDisplayDensityOptions

Returns IgxDropDownComponent

Properties

allowItemsFocus

closed

closing

height

labelledBy

Input

maxHeight

onDensityChanged

opened

opening

selectionChanging

width

Accessors

collapsed

Returns boolean

displayDensity

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

navigateItem

Parameters

index: number

Returns void

ngAfterViewInit

Returns void

ngDoCheck

Returns void

onItemActionKey

Parameters

key: DropDownActionKey

Optional event: Event

Returns void

open

Parameters

Optional overlaySettings: OverlaySettings

Returns void