Blazor ComboBox Templates

    The Ignite UI for Blazor ComboBox component allows defining custom templates for different areas such as items, group headers, empty list, and icons.

    ComboBox Templates Example

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

    Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

    Template Types

    Item Template

    The itemTemplate is a custom template that if defined should be used when rendering items in the list of options.

    To template your items in a Blazor app, you need to define a template in a separate JavaScript file. Let's create a new file under the wwwroot directory called templates.js.

    In this file we can declare a new item template like so:

    Make sure to include the templates.js file in the index.html under wwwroot.

    Then in our application we can refer to the template we declared via the ItemTemplateScript property.

    <IgbCombo ItemTemplateScript="ComboItemTemplate"></IgbCombo>
    razor

    Group Header Template

    The groupHeaderTemplate is a custom template that if defined should be used when rendering group headers in the list of options.

    Then in our application we can refer to the template we declared via the GroupHeaderTemplateScript property.

    <IgbCombo GroupHeaderTemplateScript="ComboGroupHeaderTemplate"></IgbCombo>
    razor

    Slots

    Other than custom templates, the Ignite UI for Blazor ComboBox component exposes several slots that allow users to pass custom content to different combo parts.

    Header Slot

    To render a custom header above the list of options pass content to the header slot:

    <IgbCombo> 
        <header slot="header">
            Header content goes here
        </header>
    </IgbCombo>
    razor

    To render a custom footer below the list of options pass content to the footer slot:

    <IgbCombo> 
        <footer slot="footer">
            Footer content goes here
        </footer>
    </IgbCombo>
    razor

    Empty List Slot

    To render a custom content when the filtering operation returns no result, use the empty slot:

    <IgbCombo> 
        <div slot="empty">¯\_(ツ)_/¯</div>
    </IgbCombo>
    razor

    Toggle Icon Slot

    The toggle icon in the combo input can also be modified via the toggle-icon slot:

    <IgbCombo> 
        <IgbIcon name="down" slot="toggle-icon"></IgbIcon>
    </IgbCombo>
    razor

    Clear Icon Slot

    The clear icon can be changed via the clear-icon slot:

    <IgbCombo> 
        <IgbIcon name="clear" slot="clear-icon"></IgbIcon>
    </IgbCombo>
    razor

    Additional Resources