Controls whether custom values can be added to the collection
// get
let comboAllowsCustomValues = this.combo.allowCustomValues;<!--set-->
<igx-combo [allowCustomValues]='true'></igx-combo>An @Input property that set aria-labelledby attribute
<igx-combo [ariaLabelledBy]="'label1'">The custom template, if any, that should be used when rendering the combo CLEAR button
// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.clearIconTemplate = myCustomTemplate;<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboClearIcon>
<igx-icon>clear</igx-icon>
</ng-template>
</igx-combo>An @Input property that enabled/disables combo. The default is false.
<igx-combo [disabled]="'true'">The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.emptyTemplate = myCustomTemplate;<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboEmpty>
<div class="combo--empty">
There are no items to display
</div>
</ng-template>
</igx-combo>An @Input property that enabled/disables filtering in the list. The default is true.
<igx-combo [filterable]="'false'">The custom template, if any, that should be used when rendering the FOOTER for the combo items list
// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.footerTemplate = myCustomTemplate;<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboFooter>
<div class="combo__footer">
This is a custom footer
</div>
</ng-template>
</igx-combo>The custom template, if any, that should be used when rendering HEADER ITEMS for groups in the combo list
// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.headerItemTemplate = myCustomTemplate;<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboHeaderItem let-item let-key="groupKey">
<div class="custom-item--group">Group header for {{ item[key] }}</div>
</ng-template>
</igx-combo>The custom template, if any, that should be used when rendering the HEADER for the combo items list
// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.headerTemplate = myCustomTemplate;<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboHeader>
<div class="combo__header">
This is a custom header
</div>
</ng-template>
</igx-combo>Gets/gets combo id.
// get
let id = this.combo.id;<!--set-->
<igx-combo [id]='combo1'></igx-combo>The custom template, if any, that should be used when rendering ITEMS in the combo list
// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.itemTemplate = myCustomTemplate;<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboItem>
<div class="custom-item" let-item let-key="valueKey">
<div class="custom-item__name">{{ item[key] }}</div>
<div class="custom-item__cost">{{ item.cost }}</div>
</div>
</ng-template>
</igx-combo>Configures the drop down list width
// get
let myComboItemsWidth = this.combo.itemsWidth;<!--set-->
<igx-combo [itemsWidth] = '"180px"'></igx-combo>Emitted when an item is being added to the data collection
<igx-combo (onAddition)='handleAdditionEvent()'></igx-combo>Emitted after the dropdown is closed
<igx-combo (onClosed)='handleClosed()'></igx-combo>Emitted before the dropdown is closed
<igx-combo (onClosing)='handleClosing($event)'></igx-combo>Emitted when new chunk of data is loaded from the virtualization
<igx-combo (onDataPreLoad)='handleDataPreloadEvent()'></igx-combo>Emitted after the dropdown is opened
<igx-combo (onOpened)='handleOpened()'></igx-combo>Emitted before the dropdown is opened
<igx-combo onOpening='handleOpening($event)'></igx-combo>Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.)
<igx-combo (onSearchInput)='handleSearchInputEvent()'></igx-combo>Emitted when item selection is changing, before the selection completes
<igx-combo (onSelectionChange)='handleSelection()'></igx-combo>Set custom overlay settings that control how the combo's list of items is displayed. Set:
<igx-combo [overlaySettings] = "customOverlaySettings"></igx-combo> const customSettings = { positionStrategy: { settings: { target: myTarget } } };
combo.overlaySettings = customSettings;Get any custom overlay settings used by the combo:
const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings;Defines the placeholder value for the combo value field
// get
let myComboPlaceholder = this.combo.placeholder;<!--set-->
<igx-combo [placeholder]='newPlaceHolder'></igx-combo>Defines the placeholder value for the combo dropdown search field
// get
let myComboSearchPlaceholder = this.combo.searchPlaceholder;<!--set-->
<igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button
// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.toggleIconTemplate = myCustomTemplate;<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboToggleIcon let-collapsed>
<igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
</ng-template>
</igx-combo>An @Input property that sets how the combo will be styled.
The allowed values are line, box, border and search. The default is box.
<igx-combo [type]="'line'">Combo value data source property.
// get
let myComboValueKey = this.combo.valueKey;<!--set-->
<igx-combo [valueKey]='myKey'></igx-combo>Sets the style width of the element
// get
let myComboWidth = this.combo.width;<!--set-->
<igx-combo [width]='250px'></igx-combo>Gets drop down state.
let state = this.combo.collapsed;Combo data source.
<!--set-->
<igx-combo [data]='items'></igx-combo>Combo data source.
<!--set-->
<igx-combo [data]='items'></igx-combo>Returns the theme of the component.
The default theme is comfortable.
Available options are comfortable, cosy, compact.
let componentTheme = this.component.displayDensity;Sets the theme of the component.
Combo text data source property.
// get
let myComboDisplayKey = this.combo.displayKey;
// set
this.combo.displayKey = 'val';
<!--set-->
<igx-combo [displayKey]='myDisplayKey'></igx-combo>Combo text data source property.
// get
let myComboDisplayKey = this.combo.displayKey;
// set
this.combo.displayKey = 'val';
<!--set-->
<igx-combo [displayKey]='myDisplayKey'></igx-combo>The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[].
// get
let currentGroupKey = this.combo.groupKey;The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[].
<!--set-->
<igx-combo [groupKey]='newGroupKey'></igx-combo>Configures the drop down list item height
// get
let myComboItemHeight = this.combo.itemHeight;<!--set-->
<igx-combo [itemHeight]='32'></igx-combo>Configures the drop down list item height
// get
let myComboItemHeight = this.combo.itemHeight;<!--set-->
<igx-combo [itemHeight]='32'></igx-combo>Configures the drop down list height
// get
let myComboItemsMaxHeight = this.combo.itemsMaxHeight;<!--set-->
<igx-combo [itemsMaxHeight]='320'></igx-combo>Configures the drop down list height
// get
let myComboItemsMaxHeight = this.combo.itemsMaxHeight;<!--set-->
<igx-combo [itemsMaxHeight]='320'></igx-combo>Gets total count of the virtual data items, when using remote service.
// get
let count = this.combo.totalItemCount;Sets total count of the virtual data items, when using remote service.
// set
this.combo.totalItemCount(remoteService.count);Gets if control is valid, when used in a form
// get
let valid = this.combo.valid;Sets if control is valid, when used in a form
// set
this.combo.valid = IgxComboState.INVALID;The text displayed in the combo input
// get
let comboValue = this.combo.value;Defines the current state of the virtualized data. It contains startIndex and chunkSize
// get
let state = this.combo.virtualizationState;Sets the current state of the virtualized data.
// set
this.combo.virtualizationState(state);A method that closes the combo.
<button (click)="combo.close()">Close Combo</button>
<igx-combo #combo></igx-combo>Deselect all (filtered) items
if set to true, deselects all items, otherwise deselects only the filtered ones.
this.combo.deselectAllItems();Deselect defined items
items to deselected
this.combo.deselectItems(["New York", "New Jersey"]);A method that opens the combo.
<button (click)="combo.open()">Open Combo</button>
<igx-combo #combo></igx-combo>Select all (filtered) items
if set to true, selects all items, otherwise selects only the filtered ones.
this.combo.selectAllItems();Select defined items
new items to be selected
if true clear previous selected items
this.combo.selectItems(["New York", "New Jersey"]);Get current selection state
Array of selected items
let selectedItems = this.combo.selectedItems();Selects/Deselects a single item
the itemID of the specific item
If the item should be selected (true) or deselected (false)
Without specified valueKey;
this.combo.valueKey = null;
const items: { field: string, region: string}[] = data;
this.combo.setSelectedItem(items[0], true);With specified valueKey;
this.combo.valueKey = 'field';
const items: { field: string, region: string}[] = data;
this.combo.setSelectedItem('Connecticut', true);A method that opens/closes the combo.
<button (click)="combo.toggle()">Toggle Combo</button>
<igx-combo #combo></igx-combo>Triggers change detection on the combo view
The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
// Set in typescript const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; myComponent.combo.addItemTemplate = myCustomTemplate;<!-- Set in markup --> <igx-combo #combo> ... <ng-template igxComboAddItem> <button class="combo__add-button"> Click to add item </button> </ng-template> </igx-combo>