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[] = ...;
}

    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.