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>
Sets aria-labelledby attribute value.
<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;
Get dropdown html element
let myDropDownElement = this.dropdown.element;
Get all header items
let myDropDownHeaderItems = this.dropdown.headers;
Gets/Sets the drop down's id
// get
let myDropDownCurrentId = this.dropdown.id;
<!--set-->
<igx-drop-down [id]='newDropDownId'></igx-drop-down>
Gets/Sets the drop down's id
// get
let myDropDownCurrentId = this.dropdown.id;
<!--set-->
<igx-drop-down [id]='newDropDownId'></igx-drop-down>
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;
Clears the selection of the dropdown
this.dropdown.clearSelection();
Closes the dropdown
this.dropdown.close();
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.
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.
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.
Keydown Handler
Select an item by index
of the item to select; If the drop down uses *igxFor, pass the index in data
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: