Combo

The igx-combo component provides a powerful input, combining the features of the basic HTML input, select and the IgniteUI for Angular igx-drop-down components.
The combo component provides easy filtering and multiple selection of items, grouping and adding custom values to the dropdown list.
Custom templates could be provided in order to customize different areas of the components, such as items, header, footer, etc.
The igx-combo component is integrated with the Template Driven Forms and Reactive Forms.
The igx-combo exposes intuitive keyboard navigation and it is accessibility compliant.
Drop Down items are virtualized, which guarantees smooth work, even if the igx-combo is bound to data source with a lot of items.

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 installation topic.

Usage

The IgxComboComponent allows you to search and select items from the list. The combo uses the IgxDropDownComponent internally as an item container. To get started with the Ignite UI for Angular Combo, let's first import the IgxComboModule in our app.module.ts file:

// app.module.ts

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

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

Then in the template bind the igx-combo with some data and define valueKey and displayKey corresponding to entities from the localData data source:

<igx-combo [data]="lData" [valueKey]="'ProductID'" [displayKey]="'ProductName'"></igx-combo>
import { localData } from "./local-data";

export class ComboDemo implements OnInit {
    public lData: any[];

    public ngOnInit() {
        this.lData = localData;
    }
}

Note: If displayKey is omitted then valueKey entity will instead be used as item text.

Features

Combo control exposes the following features:

Keyboard Navigation

When igxCombo is closed and focused:

  • ArrowDown or Alt + ArrowDown will open the combo drop down and will move focus to the search input.

When igxCombo is opened and search input is focused:

  • ArrowUp or Alt + ArrowUp will close the combo drop down and will move focus to the closed combo.

  • ArrowDown will move focus from the search input to the first list item. If list is empty and custom values are enabled will move it to the Add new item button.

    Note: Any other key stroke will be handled by the input.

When igxCombo is opened and list item is focused:

  • ArrowDown will move to next list item. If the active item is the last one in the list and custom values are enabled then focus will be moved to the Add item button.

  • ArrowUp will move to previous list item. If the active item is the first one in the list then focus will be moved back to the search input.

  • End will move to last list item.

  • Home will move to first list item.

  • Space will select/deselect active list item.

  • Enter will confirm the already selected items and will close the list.

  • Esc will close the list.

When igxCombo is opened, allow custom values are enabled and add item button is focused:

  • Enter will add new item with valueKey and displayKey equal to the text in the search input and will select the new item.

  • ArrowUp focus will be moved back to the last list item or if list is empty will be moved to the search input.

API

Known Issues

  • Combo input that displays the selected items is not editable, however due to a browser specifics in IE and FireFox the cursor is visible
  • Backspace works in disabled combo in IE
  • Combo is not having input for sizing its height. In the future IgxInputGroup will expose an option that allows custom sizing and then IgxCombo will use the same functionality for proper styling and better consistency.

Additional Resources

Our community is active and always welcoming to new ideas.

View page on GitHub