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.