Combo Features

Combo control exposes several features including data and value binding, custom values, filtering, grouping, etc.

Demo

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

Usage

To get started with the Ignite UI for Angular Combo import the IgxComboModule in the app.module.ts file. For the following sample the igx-switch component is used and in addition we will need the IgxSwitchModule also:

// app.module.ts

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

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

The demo uses igx-switch component to toggle igx-combo properties' values. Note that grouping is enabled/disabled by setting groupKey to corresponding data source entity or setting it to empty string.

<div class="combo-container">
    <igx-combo #combo [data]="lData" [displayKey]="'field'" [valueKey]="'field'"
        [allowCustomValues]="customValues"
        [filterable]="filterable"
        [disabled]="disabled">
    </igx-combo>
</div>
<div class="switch-container">
    <igx-switch [(ngModel)]="filterable">Enable Filtering</igx-switch><br />
    <igx-switch [(ngModel)]="customValues">Allow Custom Values</igx-switch><br />
    <igx-switch (change)="enableGroups($event)">Enable Grouping</igx-switch><br />
    <igx-switch [(ngModel)]="disabled">Disabled</igx-switch>
</div>
    @ViewChild("combo", { read: IgxComboComponent }) public combo: IgxComboComponent;

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

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

Data Binding

Basic usage of igx-combo bound to a local data source, defining valueKey and displayKey:

<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 be used instead.

Follow this topic for more details about binding igx-combo with remote data.

Value Binding

For two-way data-binding, the ngModel can be used like shown below:

<igx-combo #combo [data]="data" [(ngModel)]="values"></igx-combo>
export class MyExampleComponent {
    ...
    public data: ExampleType[] = ...;
    ...
    public values: ExampleType[] = ...;
}

Custom Overlay Settings

The Combo allows users to change the way the list of items is shown. This can be done by defining custom OverlaySettings and passing them to the Combo's overlaySettings Input:

// custom.component.ts
export class CustomOverlayCombo {
    ...
    public customSettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy({ openAnimation: scaleInCenter, closeAnimation: scaleOutCenter }),
        modal: true,
        closeOnOutsideClick: true,
    };
}
<!-- custom.component.html -->
<igx-combo [data]="items" [overlaySettings]="customSettings"></igx-combo>

For example, with the above settings, the Combo's list will display centered, using GlobalPositionStrategy:

Filtering

By default filtering in the combo is enabled. It can be disabled using the following code:

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

Custom Values

If the custom values are enabled, the missing item could be added using the UI of the combo.

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

Disabled

You can disable combo using the following code:

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

Grouping

Defining a combo's groupKey option will group the items, according to the provided key.

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

API

Additional Resources

Our community is active and always welcoming to new ideas.