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
- ComboBox Component
- ComboBox Remote Binding
- ComboBox Templates
- Template Driven Forms Integration
- Reactive Forms Integration
- Single Select ComboBox
Our community is active and always welcoming to new ideas.