Class IgcTreeComponent

The tree allows users to represent hierarchical data in a tree-view structure, maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model.

igc-tree

  • Renders the tree items inside default slot.

igcSelection - Emitted when item selection is changing, before the selection completes.

igcItemCollapsed - Emitted when tree item is collapsed.

igcItemCollapsing - Emitted when tree item is about to collapse.

igcItemExpanded - Emitted when tree item is expanded.

igcItemExpanding - Emitted when tree item is about to expand.

igcItemActivated - Emitted when the tree's active item changes.

Hierarchy

Hierarchy

  • EventEmitterInterface<IgcTreeEventMap, this> & LitElement<this>
    • IgcTreeComponent

Other

selection: "none" | "multiple" | "cascade" = 'none'

The selection state of the tree.

singleBranchExpand: boolean = false

Whether a single or multiple of a parent's child items can be expanded.

single-branch-expand

toggleNodeOnClick: boolean = false

Whether clicking over nodes will change their expanded state or not.

toggle-node-on-click

tagName: "igc-tree" = 'igc-tree'

Returns the HTML-uppercased qualified name.

MDN Reference

lifecycle

  • 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);
    }

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

    Returns void