autofocus

autofocusList

caseSensitiveIcon

data

disableFiltering

OptionaldisplayKey

groupHeaderTemplate

OptionalgroupKey

groupSorting

itemTemplate

label

open

outlined

placeholder

placeholderSearch

singleSelect

OptionalvalueKey

Static ReadonlytagName

filteringOptions

• get filteringOptions(): FilteringOptions<T>

• An object that configures the filtering of the combo.

  Attr

  filtering-options

  Returns FilteringOptions<T>

selection

• get selection(): T[]

• Returns the current selection as an array of objects as provided in the data source.

  Returns T[]

value

• get value(): ComboValue<T>[]

• Returns the current selection as a list of comma separated values, represented by the value key, when provided.

  Returns ComboValue<T>[]

• set value(items): void

• Sets the value (selected items). The passed value must be a valid JSON array. If the data source is an array of complex objects, the valueKey attribute must be set. Note that when displayKey is not explicitly set, it will fall back to the value of valueKey.

  Attr

  value

  Example

  <igc-combo
   .data=${[
     {
       id: 'BG01',
       name: 'Sofia'
     },
     {
       id: 'BG02',
       name: 'Plovdiv'
     }
   ]}
   display-key='name'
   value-key='id'
   value='["BG01", "BG02"]'>
   </igc-combo>
  Copy

  Parameters

  • items: ComboValue<T>[]

  Returns void

blur

• blur(): void

• Removes focus from the component.

  Returns void

deselect

• deselect(items?): void

• Deselects option(s) in the list by either reference or valueKey. If not argument is provided all items will be deselected.

  Example

  const combo<IgcComboComponent<T>> = document.querySelector('igc-combo');
  
  // Deselect one item at a time by reference when valueKey is not specified.
  combo.deselect(combo.data[0]);
  
  // Deselect multiple items at a time by reference when valueKey is not specified.
  combo.deselect([combo.data[0], combo.data[1]]);
  
  // Deselect one item at a time when valueKey is specified.
  combo.deselect('BG01');
  
  // Deselect multiple items at a time when valueKey is specified.
  combo.deselect(['BG01', 'BG02']);
  Copy

  Parameters

  • items: Item<T> | Item<T>[]

    One or more items to be deselected. Multiple items should be passed as an array. When valueKey is specified, the corresponding value should be used in place of the item reference.

  Returns void

focus

• focus(options?): void

• Sets focus on the component.

  Parameters

  • options: FocusOptions

  Returns void

hide

• hide(): Promise<boolean>

• Hides the list of options.

  Returns Promise<boolean>

select

• select(items?): void

• Selects option(s) in the list by either reference or valueKey. If not argument is provided all items will be selected.

  Example

  const combo<IgcComboComponent<T>> = document.querySelector('igc-combo');
  
  // Select one item at a time by reference when valueKey is not specified.
  combo.select(combo.data[0]);
  
  // Select multiple items at a time by reference when valueKey is not specified.
  combo.select([combo.data[0], combo.data[1]]);
  
  // Select one item at a time when valueKey is specified.
  combo.select('BG01');
  
  // Select multiple items at a time when valueKey is specified.
  combo.select(['BG01', 'BG02']);
  Copy

  Parameters

  • items: Item<T> | Item<T>[]

    One or more items to be selected. Multiple items should be passed as an array. When valueKey is specified, the corresponding value should be used in place of the item reference.

  Returns void

show

• show(): Promise<boolean>

• Shows the list of options.

  Returns Promise<boolean>

toggle

• toggle(): Promise<boolean>

• Toggles the list of options.

  Returns Promise<boolean>

connectedCallback

• connectedCallback(): void

• Invoked when the component is added to the document's DOM.

  In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

  connectedCallback() {
    super.connectedCallback();
    addEventListener('keydown', this._handleKeydown);
  }
  Copy

  Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

  Returns void