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

Note

To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the installation topic.

Usage

To get started with the Ignite UI for Angular Drop Down, let's first import the IgxDropDownModule in the app.module.ts file:

// app.module.ts

...
import { IgxDropDownModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxDropDownModule],
    ...
})
export class AppModule {}

Let's create a simple dropdown that provides several option items to choose from. To achieve this, we use the igx-drop-down component as well as igxToggleAction to open/close the dropdown.

Having all set up, let's show all the options in the IgxDropDownComponent component. The dropdown contains several options as dropdown items.

<!-- dropdown.component.html -->

<div class="sample-wrapper drop-down-wrapper">
    <button igxButton="raised" (click)="toggleDropDown($event)" [igxDropDownItemNavigation]="dropdown1">Options</button>
    <igx-drop-down #dropdown1>
        <igx-drop-down-item *ngFor="let item of items">
            {{ item.field }}
        </igx-drop-down-item>
    </igx-drop-down>
</div>
// dropdown.component.ts

...
    @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;

    public items: any[] = [];

    private _positionSettings = {
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Bottom
    };
    private _overlaySettings = {
      closeOnOutsideClick: true,
      modal: false,
      positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
      scrollStrategy: new CloseScrollStrategy()
    };

    public ngOnInit() {
        for (let i = 1; i < 4; i ++) {
            const item = { field: "Option " + i };
            this.items.push(item);
        }
    }

    public toggleDropDown(eventArgs) {
        this._overlaySettings.positionStrategy.settings.target = eventArgs.target;
        this.igxDropDown.toggle(this._overlaySettings);
    }

If the sample is configured properly, a dropdown with several options should be displayed.

Predefined selected item

Let's say we want to have a predefined selected item. One way to do this, is by handling igx-drop-down onOpening event of IgxDropDownComponent.

<!-- dropdown.component.html -->

<div class="sample-wrapper drop-down-wrapper">
    <button igxButton="raised" (click)="toggleDropDown($event)" [igxDropDownItemNavigation]="dropdown2">Options</button>
    <igx-drop-down #dropdown2 (onOpening)="onOpening($event)">
        <igx-drop-down-item *ngFor="let item of items">
            {{ item.field }}
        </igx-drop-down-item>
    </igx-drop-down>
</div>
// dropdown.component.ts

...
    @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;

    public items: any[] = [];

    private _positionSettings = {
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    private _overlaySettings = {
      closeOnOutsideClick: true,
      modal: false,
      positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
      scrollStrategy: new CloseScrollStrategy()
  };

    public ngOnInit() {
        for (let i = 1; i < 4; i ++) {
            const item = { field: "Option " + i };
            this.items.push(item);
        }
    }

    public toggleDropDown(eventArgs) {
        this._overlaySettings.positionStrategy.settings.target = eventArgs.target;
        this.igxDropDown.toggle(this._overlaySettings);
    }

    public onOpening(ev) {
        this.igxDropDown.setSelectedItem(0);
    }

To provide more useful visual information, use isHeader to group items semantically or disabled to display an item as non-interactive. You can also set isSelected to a particular item to make it the selected item.

<!-- dropdown.component.html -->

<div class="sample-wrapper drop-down-wrapper">
    <button igxButton="raised" (click)="toggleDropDown($event)" [igxDropDownItemNavigation]="dropdown3">Countries</button>
    <igx-drop-down #dropdown3>
        <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header" [isSelected]="item.selected">
            {{ item.field }}
        </igx-drop-down-item>
    </igx-drop-down>
</div>
// dropdown.component.ts

...
    @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;

    public items: any[] = [
        { field: "EU", header: true },
        { field: "Germany" },
        { field: "Bulgaria", selected: true },
        { field: "UK", disabled: true },
        { field: "NA", header: true },
        { field: "Canada" },
        { field: "USA" },
        { field: "Mexico" }];

    private _positionSettings = {
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    private _overlaySettings = {
      closeOnOutsideClick: true,
      modal: false,
      positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
      scrollStrategy: new CloseScrollStrategy()
  };

    public toggleDropDown(eventArgs) {
        this._overlaySettings.positionStrategy.settings.target = eventArgs.target;
        this.igxDropDown.toggle(this._overlaySettings);
    }

If the sample is configured properly, a list of countries should be displayed as a group under EU header, UK as a non-interactive item, and Bulgaria as selected item.

You can configure the igxDropDown to behave as a menu. To do this, set the ISelectionEventArgs cancel member to true in the onSelection event handler. Thus, the selected item is not preserved on menu opening and selection is invalidated. Still, you can get the clicked item through the ISelectionEventArgs newSelection member value.

<!-- dropdown.component.html -->

<div class="drop-down-wrapper">
    <igx-navbar title="Contacts">
        <igx-icon #menu_icon (click)="toggleMenu($event)" [igxDropDownItemNavigation]="menu" tabindex="0">more_vert</igx-icon>
        <igx-drop-down #menu (onSelection)="onSelection($event)">
            <igx-drop-down-item *ngFor="let item of items" [value]="item.text">
                <div>{{ item.text }}</div>
            </igx-drop-down-item>
        </igx-drop-down>
    </igx-navbar>

    <div class="textContainer">
        <ng-container *ngIf="text">
            <label igxLabel>Clicked menu item: {{ text }}</label>
        </ng-container>
    </div>

    <div class="overlayOutlet" igxOverlayOutlet #outlet="overlay-outlet"></div>
</div>
// dropdown.component.ts

...
@ViewChild(IgxOverlayOutletDirective) public igxOverlayOutlet: IgxOverlayOutletDirective;
@ViewChild(IgxDropDownComponent) public menu: IgxDropDownComponent;

public items: any[] = [];
public text;

private positionSettings = {
    horizontalDirection: HorizontalAlignment.Left,
    horizontalStartPoint: HorizontalAlignment.Right,
    verticalStartPoint: VerticalAlignment.Bottom
};

public ngOnInit() {
    this.items = [{ text: "Add New Contact" }, { text: "Edit Contact" }, { text: "Refresh" }, { text: "Help" }];
}

public onSelection(eventArgs: ISelectionEventArgs) {
    this.text = eventArgs.newSelection.value;
    eventArgs.cancel = true;
}

public toggleMenu(eventArgs) {
    const overlaySettings: OverlaySettings = {
        closeOnOutsideClick: true,
        modal: false,
        outlet: this.igxOverlayOutlet,
        positionStrategy: new ConnectedPositioningStrategy(this.positionSettings),
        scrollStrategy: new NoOpScrollStrategy()
    };

    overlaySettings.positionStrategy.settings.target = eventArgs.target;
    this.menu.toggle(overlaySettings);
}

To enable keyboard navigation for the igxDropDown component, the igxDropDownItemNavigation directive can be applied. The directive should be applied to the active(focused) element or a parent container. This will allow the directive to handle all triggered events. By default, igxDropDown or its items don't take focus, so for example the directive can be placed on a button or input that controls the drop down. The igxDropDownItemNavigation directive value should be target component that is or extends IgxDropDownBase class.

The following sample demonstrates an input that on click opens and closes igxDropDown instance. Applying the igxDropDownItemNavigation on the input itself, will enable keyboard navigation, when using arrow up and arrow down. This relies on the default drop down behavior with allowItemsFocus disabled to allow the button input to maintain focus.

<!-- input-dropdown.component.html -->
    <igx-input-group #inputGroup class="input-group" [igxToggleAction]="dropDown">
        <input #input class="input" type="text" igxInput [igxDropDownItemNavigation]="igxDropDown"
            readonly= "true"
            placeholder="choose an option"
            [(ngModel)]="this.value"
            (keydown.ArrowDown)="openDropDown()"/>

        <igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
            <igx-icon *ngIf="igxDropDown.collapsed; else toggleUp" fontSet="material">arrow_drop_down</igx-icon>
            <ng-template #toggleUp>
                <igx-icon fontSet="material">arrow_drop_up</igx-icon>
            </ng-template>
        </igx-suffix>
    </igx-input-group>
    <span>Selected: {{this.value}}</span>
    <igx-drop-down #dropDown [width]="'160px'" (onSelection)="onSelection($event)">
        <igx-drop-down-item *ngFor="let item of items" [value]="item.field">
            {{ item.field }}
        </igx-drop-down-item>
    </igx-drop-down>
// input-dropdown.component.ts
    @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;
    @ViewChild("inputGroup", { read: IgxInputGroupComponent}) public inputGroup: IgxInputGroupComponent;
    @ViewChild("input", { read: IgxInputDirective })
    public input: IgxInputDirective;

    public items: any[] = [];
    public value: string;

    public ngOnInit() {
        for (let i = 1; i < 4; i ++) {
            const item = { field: "Option " + i };
            this.items.push(item);
        }
    }

    public onSelection(eventArgs: ISelectionEventArgs) {
        this.value = eventArgs.newSelection.value;
    }

    public openDropDown() {
        if (this.igxDropDown.collapsed) {
            this.igxDropDown.open({
                modal: false,
                positionStrategy: new ConnectedPositioningStrategy({
                    target: this.inputGroup.element.nativeElement
                })
            });
        }
    }

Applying the directive will ensure the following actions are executed as a result from the keyboard navigation:

Name Description
Enter Select item from the drop down and closes the drop down.
Space Select item from the drop down and closes the drop down.
Esc Closes the drop down.
Arrow Down Navigate to the next item in the target component.
Arrow Up Navigate to the previous item in the target component.
End Navigate to the last item in the target component.
Home Navigate to the first item in the target component.

When allowItemsFocus is enabled, drop down items gain tab index and are focused when active. The focused drop down items are the ones that trigger events, during keyboard navigation, which means that the igxDropDownItemNavigation should be applied on the individual drop down items.

<igx-input-group [igxToggleAction]="dropDown">
    <input igxInput type="text">
</igx-input-group>
<igx-drop-down #dropDown [allowItemsFocus]="true">
    <igx-drop-down-item *ngFor="let p of provinceData" [igxDropDownItemNavigation]="dropDown">
        {{ p }}
    </igx-drop-down-item>
</igx-drop-down>

API Summary

igx-drop-down component API Reference and Themes Reference.

igx-drop-down-item component API Reference.

Additional Resources

Our community is active and always welcoming to new ideas.

View page on GitHub