NEURALNG
DATABETA

Tree

An immutable, Signal-first hierarchy with controlled expansion, three selection models, filtering, lazy branches and virtualized visible rows.

WAI-ARIA treeLazy and virtualHeadless ready

GET STARTED

Import

Import the canonical standalone component and immutable data contracts from the granular entry point.

app.ts TypeScript 
import { NeuralTree, type NeuralTreeNode, type NeuralTreeKey } from '@neural-ng/core/tree';

@Component({ imports: [NeuralTree] })

Controlled hierarchy

Stable keys preserve expansion and focus while application data remains immutable.

Ready.
  • src
    • app
      • app.ts
      • app.html
    • styles.css
  • libs
    • neural-ng
    • neural-icons

Selection models

Single, modifier-aware multiple and propagated checkbox selection share one immutable key-set contract.

Multiple · app-ts

  • src
    • app
      • app.ts
      • app.html
    • styles.css
  • libs
    • neural-ng
    • neural-icons

Checkbox · 0 selected

  • src
    • app
      • app.ts
      • app.html
    • styles.css
  • libs
    • neural-ng
    • neural-icons

Nested filtering and typed templates

Strict mode tests descendants; lenient mode keeps the complete subtree after a parent match. Nested paths never mutate source nodes.

Lazy, loading, empty and retry

leaf: false declares an unloaded branch. Loading requests are guarded per key and failed branches expose an explicit retry path.

Empty

No nodes yet

Retry · 0

  • Offline agent

Virtual range foundation

Fixed row size, viewport height and overscan compute a flat visible range compatible with the shared VirtualScroller contract.

virtual.html HTML 
<neural-tree virtualScroll [virtualItemSize]="40" [virtualScrollHeight]="240" [virtualOverscan]="4" [value]="largeTree" />

Unstyled and typed slots

ARIA, hierarchy, keyboard navigation and lazy behavior remain; Tailwind owns every visible choice.

  • src
    • app
      • app.ts
      • app.html
    • styles.css
  • libs
    • neural-ng
    • neural-icons