The tree-item component represents a child item of the tree component or another tree item.
Element
igc-tree-item
Slots
default — Renders nested tree-item component.
label — Renders the tree item container.
indicator — Renders the expand indicator container.
loading — Renders the tree item loading indicator container.
indentation — Renders the container (by default the space) before the tree item.
CSS Parts
wrapper — The wrapper for the tree item.
selected — Indicates selected state. Applies to `wrapper`.
focused — Indicates focused state. Applies to `wrapper`.
active — Indicates an active state. Applies to `wrapper`.
indicator — The expand indicator of the tree item.
label — The tree item content.
text — The tree item displayed text.
select — The checkbox of the tree item when selection is enabled.

Constructors

Section titled "Constructors"

IgcTreeItemComponent 

new IgcTreeItemComponent(): IgcTreeItemComponent

Defined in src/components/tree/tree-item.ts:222

Returns IgcTreeItemComponent

Properties

Section titled "Properties"

active

Section titled "active"

Marks the item as the tree's active item.

 
active: boolean = false

Defined in src/components/tree/tree-item.ts:122

disabled

Section titled "disabled"

Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions.

 
disabled: boolean = false

Defined in src/components/tree/tree-item.ts:129

expanded

Section titled "expanded"

The tree item expansion state.

 
expanded: boolean = false

Defined in src/components/tree/tree-item.ts:115

label

Section titled "label"

The tree item label.

 
label: string = ''

Defined in src/components/tree/tree-item.ts:108

level

Section titled "level"

The depth of the item, relative to the root.

 
level: number = 0

Defined in src/components/tree/tree-item.ts:97

loading

Section titled "loading"

To be used for load-on-demand scenarios in order to specify whether the item is loading data.

 
loading: boolean = false

Defined in src/components/tree/tree-item.ts:143

parent

Section titled "parent"

The parent item of the current tree item (if any)

 
parent: IgcTreeItemComponent | null = null

Defined in src/components/tree/tree-item.ts:76

selected

Section titled "selected"

The tree item selection state.

 
selected: boolean = false

Defined in src/components/tree/tree-item.ts:136

Optional tree

Section titled "tree"

A reference to the tree the item is a part of.

 
tree: IgcTreeComponent

Defined in src/components/tree/tree-item.ts:74

value

Section titled "value"

The value entry that the tree item is visualizing. Required for searching through items.

 
value: any = undefined

Defined in src/components/tree/tree-item.ts:151

styles

Section titled "styles"

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

``

 
styles: CSSResult[]

Defined in src/components/tree/tree-item.ts:53

tagName

Section titled "tagName" 
tagName: "igc-tree-item" = 'igc-tree-item'

Defined in src/components/tree/tree-item.ts:52

Accessors

Section titled "Accessors"

path

Section titled "path"

The full path to the tree item, starting from the top-most ancestor.

 
get path(): IgcTreeItemComponent[]

Defined in src/components/tree/tree-item.ts:286

Returns IgcTreeItemComponent[]

Methods

Section titled "Methods"

collapse

Section titled "collapse"

Collapses the tree item.

 
collapse(): void

Defined in src/components/tree/tree-item.ts:504

Returns void

connectedCallback

Section titled "connectedCallback"

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.

``

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

 
connectedCallback(): void

Defined in src/components/tree/tree-item.ts:232

Returns void

disconnectedCallback

Section titled "disconnectedCallback"

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.

``

An element may be re-connected after being disconnected.

 
disconnectedCallback(): void

Defined in src/components/tree/tree-item.ts:252

Returns void

expand

Section titled "expand"

Expands the tree item.

 
expand(): void

Defined in src/components/tree/tree-item.ts:499

Returns void

getChildren

Section titled "getChildren"

Returns a collection of child items. If the parameter value is true returns all tree item's direct children, otherwise - only the direct children.

 
getChildren(options: object): IgcTreeItemComponent[]

Defined in src/components/tree/tree-item.ts:425

Parameters

  • options: object

Returns IgcTreeItemComponent[]

toggle

Section titled "toggle"

Toggles tree item expansion state.

 
toggle(): void

Defined in src/components/tree/tree-item.ts:494

Returns void

register

Section titled "register" 
register(): void

Defined in src/components/tree/tree-item.ts:56

Returns void