chrome:seo.title.page

chrome:demo.preview

src

demo-preview:cdk-tree.app

demo-preview:cdk-tree.app-ts

demo-preview:cdk-tree.styles-css

demo-preview:cdk-tree.readme-mddemo-preview:cdk-tree.docs

Expanded: src, app
Selected: —
Checked: —

demo-preview:hints.category.navigation:

↑ ↓

demo-preview:hints.category.focus:

Focus

demo-preview:hints.category.shortcuts:

→ ←

Enter / Space

demo-preview:projection.slots-label:

ng-content

import { Component } from '@angular/core';

import { XTree, XTreeNode } from '@xngui/components/tree';

@Component({

selector: 'app-example',

imports: [XTree, XTreeNode],

templateUrl: './tree.component.html',

})

export class ExampleComponent {}

chrome:demo.events.empty

chrome:demo.api.title

chrome:demo.api.col.property

chrome:demo.api.col.type

chrome:demo.api.col.default

chrome:demo.api.col.description

size

XSize

—

Visual size tier — falls back to XConfigService when unset.

density

XDensity

—

Spacing offsets — falls back to XConfigService when unset.

selectionMode

XSelectionMode | 'none'

'none'

Selection behavior for node activation — `none` disables selection.

checkable

boolean

false

Shows checkboxes on nodes and enables `checked` model.

disabled

boolean

false

Prevents expansion, selection, and checkbox toggles.

ariaLabel

string

—

Accessible name for the `role="tree"` region — falls back to the `tree.ariaLabel` i18n key.

expandLabel

string

—

Tooltip (`title`) on the decorative expand chevron — falls back to the `tree.expand` i18n key.

collapseLabel

string

—

Tooltip (`title`) on the decorative collapse chevron — falls back to the `tree.collapse` i18n key.

generated:catalog.entry.tree.title

chrome:demo.preview

chrome:demo.events.title

chrome:demo.api.title

x-tree

chrome:demo.section

chrome:demo.preview

chrome:demo.events.title

chrome:demo.api.title