Web Components ComboBox Templates

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

ComboBox Templates Example

import { defineComponents, registerIconFromText, IgcComboComponent, ComboItemTemplate } from "igniteui-webcomponents";
import { html } from "lit-html";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

interface City {
    id: string;
    name: string;
    country: string;
}

const cities: City[] = [
    { name: "London", id: "UK01", country: "UK" },
    { name: "Manchester", id: "UK02", country: "UK" },
    { name: "Birmingham", id: "UK03", country: "UK" },
    { name: "Glasgow", id: "UK04", country: "UK" },
    { name: "Liverpool", id: "UK05", country: "UK" },
    { name: "New York", id: "US01", country: "USA" },
    { name: "Miami", id: "US02", country: "USA" },
    { name: "Philadelphia", id: "US03", country: "USA" },
    { name: "Chicago", id: "US04", country: "USA" },
    { name: "Springfield", id: "US05", country: "USA" },
    { name: "Los Angeles", id: "US06", country: "USA" },
    { name: "Houston", id: "US07", country: "USA" },
    { name: "Phoenix", id: "US08", country: "USA" },
    { name: "San Diego", id: "US09", country: "USA" },
    { name: "Dallas", id: "US010", country: "USA" },
    { name: "Sofia", id: "BG01", country: "Bulgaria" },
    { name: "Plovdiv", id: "BG02", country: "Bulgaria" },
    { name: "Varna", id: "BG03", country: "Bulgaria" },
    { name: "Burgas", id: "BG04", country: "Bulgaria" },
    { name: "Rome", id: "IT01", country: "Italy" },
    { name: "Milan", id: "IT02", country: "Italy" },
    { name: "Naples", id: "IT03", country: "Italy" },
    { name: "Turin", id: "IT04", country: "Italy" },
    { name: "Palermo", id: "IT05", country: "Italy" },
    { name: "Florence", id: "IT06", country: "Italy" }
];

const toggleIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>';
const clearIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';

defineComponents(IgcComboComponent);

export class ComboTemplates {
    private combo: IgcComboComponent<City>;
    protected itemTemplate: ComboItemTemplate<City> = ({ item }) => {
        return html` <span><b>${item.name}</b> [${item.id}]</span>`;
    };
    protected groupHeaderTemplate: ComboItemTemplate<City> = ({ item }) => {
        return html`<span>Country of ${item.country}</span>`;
    };

    constructor() {
        registerIconFromText("clear", clearIcon);
        registerIconFromText("down", toggleIcon);

        this.combo = document.getElementById("combo") as IgcComboComponent<City>;
        this.combo.data = cities;
        this.combo.itemTemplate = this.itemTemplate;
        this.combo.groupHeaderTemplate = this.groupHeaderTemplate;
    }
}

new ComboTemplates();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Combo Templates</title>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    <link href="https://static.infragistics.com/xplatform/css/samples/custom-legend.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-combo
          id="combo"
          value-key="id"
          display-key="name"
          group-key="country"
        >
          <header slot="header">
            Header content goes here
          </header>
          <igc-icon name="clear" slot="clear-icon"></igc-icon>
          <igc-icon name="down" slot="toggle-icon"></igc-icon>
          <span slot="empty">¯\_(ツ)_/¯</span>
          <footer slot="footer">
            Footer content goes here
          </footer>
        </igc-combo>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
igc-combo::part(header),
igc-combo::part(footer) {
    padding: 12px 8px;
    text-align: center;
}

igc-combo::part(empty) {
    font-size: 16px;
}css

Like this sample? Get access to our complete Ignite UI for Web Components 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.

import { ComboItemTemplate } from 'igniteui-webcomponents';

const itemTemplate: ComboItemTemplate<City> = ({ item }) => {
  return html`
      <span><b>${item.name}</b> [${item.id}]</span>
  `;
};

combo.itemTempate = itemTemplate;
ts

Group Header Template

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

import { ComboItemTemplate } from 'igniteui-webcomponents';

const groupHeaderTemplate: ComboItemTemplate<City> = ({ item }) => {
  return html`<div>Country of ${item.country}</div>`;
};

combo.groupHeaderTemplate = groupHeaderTemplate;
ts

Slots

Other than custom templates, the Ignite UI for Web Components 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:

<igc-combo>
  <div slot="header">Custom header content</div>
</igc-combo>
html

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

<igc-combo>
  <div slot="footer">Custom footer content</div>
</igc-combo>
html

Empty List Slot

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

<igc-combo>
  <div slot="empty">¯\_(ツ)_/¯</div>
</igc-combo>
html

Toggle Icon Slot

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

<igc-combo>
  <igc-icon name="down" slot="toggle-icon"></igc-icon>
</igc-combo>
html

Clear Icon Slot

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

<igc-combo>
  <igc-icon name="clear" slot="clear-icon"></igc-icon>
</igc-combo>
html

API Reference

IgcComboComponent