ComboBox Features

    The Ignite UI for Angular ComboBox control exposes several features including data and value binding, custom values, filtering, grouping, etc.

    Angular ComboBox Features Example

    The following demo demonstrates some of the combobox features that are enabled/disabled at runtime:

    Usage

    First Steps

    To get started with the combobox component, first you need to import the IgxComboModule in your app.module.ts file. Our sample also uses the igx-switch component to toggle combobox properties' values, so we will need the IgxSwitchModule as well:

    import { IgxComboModule, IgxSwitchModule } from 'igniteui-angular';
// import { IgxComboModule, IgxSwitchModule } from '@infragistics/igniteui-angular'; for licensed package

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

    Template Configuration

    <div class="combo-container">
    <igx-combo #combo [data]="lData" displayKey="field" valueKey="field"
        [allowCustomValues]="customValues"
        [filterable]="filterable"
        [showSearchCaseIcon]="showSearchCaseIcon"
        [disabled]="disabled">
    </igx-combo>
</div>
<div class="switch-container">
    <igx-switch [(ngModel)]="customValues">Allow Custom Values</igx-switch>
    <igx-switch (change)="enableGroups($event)">Enable Grouping</igx-switch>
    <igx-switch [(ngModel)]="disabled">Disable Combo</igx-switch>
    <igx-switch [(ngModel)]="filterable">Enable Filtering</igx-switch>
    <igx-switch *ngIf="filterable" [(ngModel)]="showSearchCaseIcon">Show Case-sensitive Icon</igx-switch>
</div>

    Component Definition

    Note that grouping is enabled/disabled by setting the groupKey property to a corresponding data source entity or setting it to an empty string.

        @ViewChild('combo', { read: IgxComboComponent }) public combo: IgxComboComponent;

    public filterable = true;
    public showSearchCaseIcon = true;
    public customValues = true;
    public disabled = false;

    public enableGroups(event) {
        this.combo.groupKey = event.checked ? 'region' : '';
    }

    Features

    Data Binding

    The following code snippet illustrates a basic usage of the igx-combo bound to a local data source. The valueKey specifies which property of the data entries will be stored for the combobox's selection and the displayKey specifies which property will be used for the combobox text:

    <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 the displayKey property is omitted then the valueKey entity will be used instead.

    Follow the ComboBox Remote Binding topic for more details about binding the combobox component with remote data.

    Custom Overlay Settings

    The combobox component allows users to change the way a list of items is shown. This can be done by defining Custom OverlaySettings and passing them to the ComboBox's OverlaySettings input:

    export class CustomOverlayCombo {
    ...
    public customSettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(
            {
                openAnimation: scaleInCenter,
                closeAnimation: scaleOutCenter
            }),
        modal: true,
        closeOnOutsideClick: true,
    };
}

    <igx-combo [data]="items" [overlaySettings]="customSettings"></igx-combo>

    If everything is set up correctly, the combobox's list will display centered, using the GlobalPositionStrategy:

    Note

    The combobox component uses the AutoPositionStrategy as a default position strategy.

    Filtering

    By default, filtering in the combobox is enabled. It can be disabled by setting the filterable property to false.

    Filtering options can be further enhanced by enabling the search case sensitivity. To display the case-sensitive icon in the search input, set the showSearchCaseIcon property to true:

    <igx-combo [filterable]="false" [showSearchCaseIcon]="true"></igx-combo>

    Custom Values

    The allowCustomValues property controls whether custom values can be added to the collection. If it is enabled, a missing item could be included using the UI of the combobox.

    <igx-combo [allowCustomValues]="true"></igx-combo>

    Search Input Focus

    The combobox's autoFocusSearch property controls if the search input should receive focus when a combobox's dropdown list is opened. By default, the property is set to true. When set to false, the focus goes to the combobox's items container. For mobile devices, this can be used to prevent the software keyboard from popping up when opening the combobox's dropdown list.

    <igx-combo [autoFocusSearch]="false"></igx-combo>

    Disable ComboBox

    You can disable a combobox using the following code:

    <igx-combo [disabled]="true"></igx-combo>

    Grouping

    Defining a combobox's groupKey option will group the items, according to the provided key:

    <igx-combo [groupKey]="'primaryKey'"></igx-combo>

    You can set whether groups should be sorted in ascending or descending order. By default the sorting order is ascending.

    <igx-combo [groupSortingDirection]="groupSortingDirection"></igx-combo>

    ...
import { SortingDirection } from 'igniteui-angular'
// import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package

export class ComboDemo {
    ...
    public groupSortingDirection: SortingDirection = SortingDirection.Asc;
}

    API Summary

    Additional components and/or directives with relative APIs that were used:

    Additional Resources

    Our community is active and always welcoming to new ideas.