Tree | Neural Native

Import

component.ts

import { NeuTreeComponent } from '@neural-ui/native/tree';

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Inside the project

Expand folders and choose real file names. A small file summary changes with the selected document while the tree retains its structure.

View and copy the complete example

basic.component.ts

import { Component, signal, computed } from '@angular/core';
import { NeuTreeComponent } from '@neural-ui/native/tree';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuTreeNode } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuTreeComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Inside the project</text><text class="product-caption">Browse the files that shape your workspace</text></view>
    <view class="product-surface"><neu-tree label="Project files" [nodes]="files" [(expanded)]="expanded" [(value)]="selectedFile" [leafOnly]="true" /></view>
    <view class="product-surface"><text class="product-heading">File preview</text><text class="product-caption">{{ selectedFile() }}</text><text>{{ preview() }}</text></view></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly files: readonly NeuTreeNode[] = [
    { id: 'src', label: 'src', children: [
      { id: 'components', label: 'components', children: [{ id: 'src/components/input.ts', label: 'input.ts' }, { id: 'src/components/button.ts', label: 'button.ts' }] },
      { id: 'src/app.ts', label: 'app.ts' },
      { id: 'src/theme.css', label: 'theme.css' },
    ] },
    { id: 'README.md', label: 'README.md' },
  ];
  readonly expanded = signal<readonly string[]>(['src', 'components']);
  readonly selectedFile = signal('src/components/input.ts');
  readonly preview = computed(() => this.selectedFile().endsWith('.css') ? 'Shared colors and spacing for the workspace.' : this.selectedFile().endsWith('.md') ? 'Project setup, contribution guide and useful links.' : 'A standalone Angular component for the mobile experience.');
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Tree · android · native capture — **Android**Native screenshot

Tree · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
label	string	'Tree'	Input	Human-readable name for the control, action or group.
nodes	readonly NeuTreeNode[]	[]	Input	Hierarchical nodes with optional children. Keep IDs unique across the whole tree.
disabled	boolean	false	Input	Disables user interaction. Values can still be supplied by the application.
readonly	boolean	false	Input	Prevents user editing or selection while retaining the current value.
leafOnly	boolean	false	Input	Restricts selectable values to leaf nodes; parent nodes still organize the hierarchy.
expandLabel	string	'Expand'	Input	Text or accessible name used for expand. It does not perform the action by itself.
emptyLabel	string	'No items'	Input	Text or accessible name used for empty state. It does not perform the action by itself.

Models

Name	Type	Default	Binding	Description
expanded	readonly string[]	[]	Model · two-way	IDs of currently expanded sections or nodes. Bind a writable signal with [(expanded)].
value	string	''	Model · two-way	Current edited value or selected ID(s), using the declared type. Bind a writable signal with [(value)].

Outputs

Name	Payload	When it emits
expandedChange	readonly string[]	Emits the updated expanded value. [(expanded)] binds this output together with its model input.
valueChange	string	Emits the updated value value. [(value)] binds this output together with its model input.
selected	string	Emits the selected item ID.
touch	void	Reports user interaction to the surrounding form or application.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

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

// Fields inside your component class
readonly expanded = signal<readonly string[]>([]);
readonly value = signal<string>('');

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

NeuOption

NeuOption.ts

import type { NeuOption } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuOption {
    readonly id: string;
    readonly label: string;
    readonly description?: string;
    readonly disabled?: boolean;
}

Field	Type	Requirement	Meaning
id	string	Required	Stable, unique identifier used for tracking and selection.
label	string	Required	Human-readable item name.
description	string	Optional	Optional supporting text; rendering depends on the control.
disabled	boolean	Optional	Prevents activating or selecting this item.

NeuTreeNode

NeuTreeNode.ts

import type { NeuTreeNode } from '@neural-ui/native';
import type { NeuOption } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuTreeNode extends NeuOption {
    readonly children?: readonly NeuTreeNode[];
}

Field	Type	Requirement	Meaning
children	readonly NeuTreeNode[]	Optional	Recursive child nodes; omit for a leaf.
id	string	Required	Stable, unique identifier used for tracking and selection.
label	string	Required	Human-readable item name.
description	string	Optional	Optional supporting text; rendering depends on the control.
disabled	boolean	Optional	Prevents activating or selecting this item.