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>

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

Our community is active and always welcoming to new ideas.