Select

    The IgxSelectComponent allows you to select a single item from a drop-down list by using the mouse or the keyboard to quickly navigate through them. By using igx-select you can also iterate selection through all items based on the input of a specific character or multiple characters.

    Simple Select Demo

    Warning

    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 getting started topic.

    Usage

    To get started with igx-select you first need to import the IgxSelectModule:

    // app.module.ts
    
    ...
    import { IgxSelectModule } from 'igniteui-angular';
    
    @NgModule({
        ...
        imports: [..., IgxSelectModule],
        ...
    })
    export class AppModule {}
    

    In your class you need to have a collection of the items that you want to display when the drop-down opens:

    public items: string[] = ["Orange", "Apple", "Banana", "Mango"];
    

    Then in your template you need to bind it with said items like so:

    <igx-select>
        <igx-select-item *ngFor="let item of items" [value]="item">
            {{item}}
        </igx-select-item>
    </igx-select>
    

    Notice that we use an IgxSelectItemComponent to display the items that igx-select operates on. The IgxSelectItemComponent extends the IgxDropDownItemComponent with additional functionality that is specific to the igx-select-item.

    Features

    IgxSelect Actions

    Open

    Focusing with the keyboard on igx-select will not cause it to open. With focus set on igx-select you can use Space, Enter or ALT + Up/Down Arrow keys to open it.

    • igx-select will also open if you left click with your mouse on it or if you left click on the drop-down button.

    Close

    When the igx-drop-down is opened, you can close it by doing one of the following:

    • select an item from the drop-down list
    • press ALT + UP/Down Arrow keys
    • press any of Enter, Space, Esc or Tab keys
    • It is also possible to close the drop-down by left-clicking with the mouse on the drop-down button or if you left-click outside of the drop-down list (input blur).

    Keyboard Navigation

    igx-select has intuitive keyboard navigation that makes it easy to select items without having to touch the mouse.

    • When the drop-down list is opened you can navigate through the items using the Up/Down Arrow keys, as long as there are items left in the direction you are trying to navigate to. Furthermore, pressing Home or End will navigate to the first and last items in the list.
    • When the drop-down list is opened you can iteratively navigate through all items that begin with a certain character, by pressing the corresponding key, this is case insensitive and will cause the focus to spin between all matches.
    • When the drop-down list is opened you can navigate to a specific item by rapidly typing in the first few characters of the item you wish to go to.
      • Note that the speed at which you type in matters.
    • When the drop-down list is opened, you can navigate through the items using the Home and End keys.
    • When the drop-down list is opened, navigation with Up/Down Arrow keys starts from the selected item, if any. Otherwise, it starts from the first item in the list.
    • When the drop-down list is closed you can cycle between its items using the Up/Down Arrow keys.
    • When the drop-down list is closed you can also navigate through all items that begin with a specific character, it works the same as if it was opened.
    • When the drop-down list is closed you can also navigate to a specific item by rapidly typing in its first few characters. The behaviour is the same as when the drop-down is opened.
    • When the drop-down is closed character key navigation is also case insensitive.
    • When the drop-down is closed character key navigation does not change selection when pressing characters that have no matching item(s).

    Item Selection

    An item from the drop-down list can be selected by:

    • Left mouse click.
    • Enter key when the respective item is focused.
    • Space key when the respective item is focused.
    • Setting the value property in the code.
    • Setting the item's selected property.
    • The first enabled item in the drop-down list is focused if there is no selected item.
    • The input box is populated with the selected item's value.
    • The input box's text is updated when the selected item changes.
    • The input box is not populated with the text of an item that is focused but not selected.
    • No text is appended to the input box when no item is selected and value is not set or does not match any item.
    • Selection is cleared when setting the value property to a non-existing item.
    • Disabled items are not selectable.
    • Selection is removed if the selected option gets deleted.
    • When there are items with duplicated values, the first one gets selected.
    Note

    igx-select supports single selection of items only.

    Event emitting

    Since igx-select extends igx-drop-down, it also makes good use of its events which include:

    Opened event

    • Emitted when the drop-down is fully opened.

    You can make use of the opened event like so:

    <igx-select (opened)="handleOpened($event)">
        <igx-select-item [value]="Apple">Apple</igx-select-item>
    </igx-select>
    

    Opening/Closing events

    • Emitted on:
      • input click
      • select expand/collapse button click (app scenario)
    • Triggered on key interaction

    The opening and closing events are fired before the animation finishes playing, i.e. before the drop-down is fully opened or closed. They can also be canceled by setting the cancel property to true in the event handler function.

    <igx-select (opening)="handleOpening($event)" (closing)="handleClosing($event)">
        <igx-select-item [value]="Apple">Apple</igx-select-item>
    </igx-select>
    

    Selection event

    • Emitted when the item selection is changing (when you attempt to select a new item). It is emitted before the selection completes, i.e. before the new item is selected.
    • Emitted when an item is selected by a mouse click.
    • Emitted when an item is selected by Enter, Space keys.
    • Emitted when setting the value property.
    • Emitted when setting an item's selected property.
    <igx-select (selectionChanging)="handleSelection($event)">
        <igx-select-item [value]="Apple">Apple</igx-select-item>
        <igx-select-item [value]="Pear">Pear</igx-select-item>
    </igx-select>
    

    Closed event

    • Emitted on clicking outside of the component, when the drop-down is fully closed.

    You can make use of the closed event like so:

    <igx-select (closed)="handleClosed($event)">
        <igx-select-item [value]="Apple">Apple</igx-select-item>
    </igx-select>
    

    You put all your handler functions inside of your class:

    export class MyClass {
        /* --- */
        private handleOpening(event: CancelableEventArgs): void {
            // do something
        }
        /* --- */
        private handleSelection(event: ISelectionEventArgs): void {
            // do something
        }
        /* --- */
        private handleClosed(event: any): any {
            // do something
            // return something
        }
        /* --- */
        private handleClosing(event: CancelableEventArgs): void {
            // cancel the closing event
            event.cancel = true;
        }
        /* --- */
    }
    
    • Please note that the above examples are for demonstration purposes only and are not meant to abide by any code standards.

    Positioning Strategy

    igx-select has its own positioning strategy called the SelectPositioningStrategy. It extends the ConnectedPositioningStrategy and allows igx-select to position its drop-down list in different ways, relative to the input field. This means that the drop-down will always position itself so that the text in the input is matched by the selected item's text.

    In the following example we are defining custom overlay settings using the SelectPositioningStrategy so you first have to import it alongside the OverlaySettings:

    import { SelectPositioningStrategy, OverlaySettings } from 'igniteui-angular';
    

    From there you have to initialize an OverlaySettings object and pass in the SelectPositioningStrategy. And finally in the positioning strategy's constructor you pass in a ViewChild that references the IgxSelectComponent from your template.

    All of it looks like this:

    @ViewChild(IgxSelectComponent)
    public igxSelect: IgxSelectComponent;
    
    public customOverlaySettings: OverlaySettings = {
        positionStrategy: new SelectPositioningStrategy(
            this.igxSelect
        ),
        scrollStrategy: new AbsoluteScrollStrategy()
    };
    

    As you can see there is also a scrollStrategy property that is present in the customOverlaySettings object. This ensures that the scrolling functionality of the drop-down works as expected. The scroll will appear every time the total height of all items in the list exceeds the drop-down's height.

    Another thing worth mentioning is that igx-select uses the SelectPositioningStrategy by default.

    You can pass a variety of positioning strategies to the positionStrategy property, you can find them here.

    Select With Groups

    Thanks to the fact that igx-select extends igx-drop-down it also has a built-in support for groups.

    In order to make use of this functionality you need to change the data that will be passed to igx-select, which in this case should look something like this:

    public items: any[] = [
        { type: "Fruits", fruits: [ "Apple", "Orange", "Banana" ] },
        { type: "Vegetables", vegetables: [ "Cucumber", "Potato", "Pepper" ] }
    ];
    

    You would notice that now we pass in objects that have certain properties, such as type and fruits. This is because the IgxSelectItemComponent has functionality that allows it to receive specific styling inside the drop-down list. This functionality comes inherited from the IgxDropDownItemComponent.

    Then in your template file you can iterate over these objects and access their properties accordingly:

    <igx-select>
        <igx-select-item-group *ngFor="let item of items" [label]="item.type">
            <igx-select-item *ngFor="let fruit of item.fruits" 
            [value]="fruit">
                {{fruit}}
            </igx-select-item>
    
            <igx-select-item *ngFor="let vegetable of item.vegetables" 
            [value]="vegetable">
                {{vegetable}}
            </igx-select-item>
        </igx-select-item-group>
    </igx-select>
    

    Select In A Form

    igx-select can also be put inside of a form element and in order to do that, you first have to create the template for your control and add the items that it will be displaying:

    <igx-select [(ngModel)]="selected">
        <igx-select-item value="Orange">Orange</igx-select-item>
        <igx-select-item value="Apple">Apple</igx-select-item>
        <igx-select-item value="Banana">Banana</igx-select-item>
    </igx-select>
    

    Another way to do it would be to simply pass in a collection of the items that we want to display to the ngForOf directive:

    <igx-select [(ngModel)]="selected">
        <igx-select-item *ngFor="let item of items" [value]="item">
            {{item}}
        </igx-select-item>
    </igx-select>
    

    Since we are using two-way binding, your class should look something like this:

    export class MyClass {
      public selected: string = "Apple";
    }
    

    You may also notice that in the above sample we have a prefix on the input field, this is because igx-select supports both prefixes and suffixes. You can read more about them here.

    • The items' list default exapansion panel arrow uses IgxSuffix and it can be changed by the user.
    • If more than one IgxSuffix is used, the expansion arrow will be displayed always last.

    Select With Custom Overlay Settings

    With igx-select you are not bound to use any of the OverlaySettings that we provide, instead you may create settings of your own and pass them to it.

    To do this you first define your template like so:

    <igx-select [overlaySettings]="customOverlaySettings">
        <igx-select-item *ngFor="let item of items">
            {{item}}
        </igx-select-item>
    </igx-select>
    
    • Where the overlaySettings property is bound to your custom settings.

    Inside of your class you would have something along the lines of:

    export class MyClass implements OnInit {
        @ViewChild(IgxSelectComponent)
        public igxSelect: IgxSelectComponent;
        public items: string[] = ["Orange", "Apple", "Banana", "Mango", "Tomato"];
        public customOverlaySettings: OverlaySettings;
    
        public ngOnInit(): void {
            const positionSettings: PositionSettings = {
                closeAnimation: scaleOutBottom,
                horizontalDirection: HorizontalAlignment.Right,
                horizontalStartPoint: HorizontalAlignment.Left,
                openAnimation: scaleInTop,
                target: this.igxSelect.inputGroup.element.nativeElement,
                verticalDirection: VerticalAlignment.Bottom,
                verticalStartPoint: VerticalAlignment.Bottom
            };
            this.customOverlaySettings = {
                positionStrategy: new ConnectedPositioningStrategy(
                    positionSettings
                ),
                scrollStrategy: new AbsoluteScrollStrategy()
            };
        }
    }
    

    You can see that we create a PositionSettings object that is directly passed to our ConnectedPositioningStrategy, it is not required to do it, but since we want to define a custom positioning, we use them to override the strategy's default settings.

    • You can set all settings inside of the ngOnInit hook and this will automatically affect your template upon the component's generation.

    Note that you can also pass in a customized OverlaySettings object to the igx-select's open function.

    With your tempalte looking like this:

    <igx-select>
        <igx-select-item *ngFor="let item of items">
            {{item}}
        </igx-select-item>
    </igx-select>
    
    <button (click)="onClick($event)"></button>
    

    Your class should look something like this:

    export class MyClass implements OnInit {
        /* -- */
        private otherCustomOverlaySettings: OverlaySettings = {
            positionStrategy: new GlobalPositionStrategy(),
            scrollStrategy: new AbsoluteScrollStrategy()
        }
        onClick(event: MouseEvent): void {
            this.igxSelect.open(this.otherCustomOverlaySettings)
        }
        /* -- */
    }
    
    • We should mention that if you pass the custom settings both as an argument in the open function as well as into the template, igx-select will use the ones provided in the open function. However, if you bind the settings to an internal event, such as opening or opened then igx-select will use the settings that are provided in the template.

    API Reference

    IgxSelectComponent
    IgxSelectItemComponent
    IgxDropDownComponent
    IgxDropDownItemComponent
    OverlaySettings
    ConnectedPositioningStrategy
    GlobalPositionStrategy
    AbsoluteScrollStrategy
    PositionSettings

    Additional Resources

    NgModel
    ViewChild
    ngForOf

    Our community is active and always welcoming to new ideas.