Class IgcDropdownComponent

Represents a DropDown component.

igc-dropdown

igcChange - Emitted when the selected item changes.

igcOpening - Emitted just before the dropdown is open.

igcOpened - Emitted after the dropdown is open.

igcClosing - Emitter just before the dropdown is closed.

igcClosed - Emitted after closing the dropdown.

target - Renders the dropdown's target element.

  • Renders the dropdown list items.

base - The dropdown list wrapper container.

list - The dropdown list element.

Hierarchy

Hierarchy

  • EventEmitterInterface<IgcDropdownComponentEventMap, this> & IgcBaseComboBoxLikeComponent<
        this,
    >
    • IgcDropdownComponent

Other

distance: number = 0

The distance from the target element.

flip: boolean = false

Whether the component should be flipped to the opposite side of the target once it's about to overflow the visible area. When true, once enough space is detected on its preferred side, it will flip back.

keepOpenOnOutsideClick: boolean = false

Whether the component dropdown should be kept open on clicking outside of it.

keep-open-on-outside-click

keepOpenOnSelect: boolean = false

Whether the component dropdown should be kept open on selection.

keep-open-on-select

open: boolean = false

Sets the open state of the component.

placement: PopoverPlacement = 'bottom-start'

The preferred placement of the component around the target element.

sameWidth: boolean = false

Whether the dropdown's width should be the same as the target's one.

same-width

scrollStrategy: PopoverScrollStrategy = 'scroll'

Determines the behavior of the component during scrolling of the parent container.

scroll-strategy

tagName: "igc-dropdown" = 'igc-dropdown'

Returns the HTML-uppercased qualified name.

MDN Reference

  • Hides the component.

    Returns Promise<boolean>

  • Shows the component.

    Parameters

    • target: string | HTMLElement

    Returns Promise<boolean>

  • Toggles the open state of the component.

    Parameters

    • target: string | HTMLElement

    Returns Promise<boolean>

lifecycle

  • Invoked when the component is removed from the document's DOM.

    This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

    disconnectedCallback() {
    super.disconnectedCallback();
    window.removeEventListener('keydown', this._handleKeydown);
    }

    An element may be re-connected after being disconnected.

    Returns void