ComboBox Templates
The Ignite UI for Angular ComboBox Component allows defining custom templates for different areas such as header, footer, items, empty list and adding button.
Angular ComboBox Templates Example
Usage
To get started with the ComboBox component, first you need to import the IgxComboModule
in your app.module.ts file:
import { IgxComboModule } from 'igniteui-angular';
// import { IgxComboModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxComboModule,
...
]
})
export class AppModule {}
Template Types
When defining combobox templates, you need to reference them using the following predefined reference names:
Item template
Use selector [igxComboItem]
:
<igx-combo #templateCombo [data]="lData" [valueKey]="'field'" >
<ng-template igxComboItem let-display let-key="valueKey">
<div class="item">
<span class="state">{{ display[key] }}</span>
<span class="region">{{ display.region }}</span>
</div>
</ng-template>
</igx-combo>
Header Item template
Use selector [igxComboHeaderItem]
:
<igx-combo #templateCombo [data]="lData" [groupKey]="'region'">
<ng-template igxComboHeaderItem let-display let-key="groupKey">
<div class="header-item">Region: {{ display[key] }}</div>
</ng-template>
</igx-combo>
Header template
Use selector [igxComboHeader]
:
<igx-combo>
<ng-template igxComboHeader>
<div class="header-class">State - Region</div>
</ng-template>
</igx-combo>
Footer template
Use selector [igxComboFooter]
:
<igx-combo>
<ng-template igxComboFooter>
<div class="footer-class">Infragistics 2018</div>
</ng-template>
</igx-combo>
Empty template
Use selector [igxComboEmpty]
:
<igx-combo>
<ng-template igxComboEmpty>
<span class="empty-class">No available states</span>
</ng-template>
</igx-combo>
Add template
Use selector [igxComboAddItem]
:
<igx-combo>
<ng-template igxComboAddItem>
<button igxButton="flat">
Add Location
</button>
</ng-template>
</igx-combo>
Toggle Icon Template
Use selector [igxComboToggleIcon]
:
<igx-combo>
<ng-template igxComboToggleIcon let-collapsed>
<igx-icon>{{ collapsed ? 'expand_more' : 'expand_less'}}</igx-icon>
</ng-template>
</igx-combo>
Clear Icon Template
Use selector [igxComboClearIcon]
:
<igx-combo>
<ng-template igxComboClearIcon>
<igx-icon>cancel</igx-icon>
</ng-template>
</igx-combo>
Templating ComboBox Input
When used with templates, the igxComboClearIcon
and the igxComboToggleIcon
selectors, change how the respective buttons appear in the combobox input. Passing content inside of the igx-combo
also allows templating of the combobox input similar to the way an igx-input-group
can be templated (using igx-prefix
, igx-suffix
and igxLabel
). The code snippet below illustrates how to add an appropriate label and prefix to the combobox input:
<igx-combo>
<label igxLabel>Locations</label>
<igx-prefix><igx-icon>pin_drop</igx-icon></igx-prefix>
</igx-combo>
API Summary
Additional Resources
- ComboBox Component
- ComboBox Features
- ComboBox Remote Binding
- Template Driven Forms Integration
- Reactive Forms Integration
- Single Select ComboBox
Our community is active and always welcoming to new ideas.