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>
Emitted after the dropdown is closed
<igx-drop-down (closed)='handleClosed($event)'></igx-drop-down>
Emitted before the dropdown is closed
<igx-drop-down (closing)='handleClosing($event)'></igx-drop-down>
Gets/Sets the height of the drop down
// get
let myDropDownCurrentHeight = this.dropdown.height;
<!--set-->
<igx-drop-down [height]='400px'></igx-drop-down>
An
property that set aria-labelledby attribute
<igx-drop-down [labelledby]="labelId"></igx-drop-down>
Gets/Sets the drop down's container max height.
// get
let maxHeight = this.dropdown.maxHeight;
<!--set-->
<igx-drop-down [maxHeight]='200px'></igx-drop-down>
Emitted after the dropdown is opened
<igx-drop-down (opened)='handleOpened($event)'></igx-drop-down>
Emitted before the dropdown is opened
<igx-drop-down (opening)='handleOpening($event)'></igx-drop-down>
Emitted when item selection is changing, before the selection completes
<igx-drop-down (selectionChanging)='handleSelection()'></igx-drop-down>
Gets/Sets the width of the drop down
// get
let myDropDownCurrentWidth = this.dropdown.width;
<!--set-->
<igx-drop-down [width]='160px'></igx-drop-down>
Gets if the dropdown is collapsed
let isCollapsed = this.dropdown.collapsed;
Returns the theme of the component.
The default theme is comfortable
.
Available options are comfortable
, cosy
, compact
.
let componentTheme = this.component.displayDensity;
Sets the theme of the component.
Get dropdown html element
let myDropDownElement = this.dropdown.element;
Get all header items
let myDropDownHeaderItems = this.dropdown.headers;
Get all non-header items
let myDropDownItems = this.dropdown.items;
Id of the internal listbox of the drop down
Get currently selected item
let currentItem = this.dropdown.selectedItem;
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.
Opens the dropdown
this.dropdown.open();
Toggles the dropdown
this.dropdown.toggle();
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: