Skip to content

combo-features.md

Latest commit

 

History

History
165 lines (117 loc) · 5.47 KB

combo-features.md

File metadata and controls

165 lines (117 loc) · 5.47 KB
Raw
title Combo Features
description Combo control exposes several of features including data and value binding, custom values, filtering, grouping, etc.
keywords Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Combo components, Angular Features, Angular Combo Features, Angular Combo Data Binding, Angular Combo Value Binding, Angular Combo Data Filtering, Angular Combo Grouping, Angular Combo Custom Values
_language kr

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

  • IgxComboComponent API Reference and Themes Reference.

Additional Resources

Our community is active and always welcoming to new ideas.