Tree | Neural Native

Importación

component.ts

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

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Dentro del proyecto

Despliega carpetas y elige archivos. Su resumen cambia al seleccionar un documento y el árbol conserva la estructura.

Ver y copiar el ejemplo completo

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">Dentro del proyecto</text><text class="product-caption">Explora los archivos que dan forma al espacio</text></view>
    <view class="product-surface"><neu-tree emptyLabel="No hay elementos" expandLabel="Expandir" label="Archivos del proyecto" [nodes]="files" [(expanded)]="expanded" [(value)]="selectedFile" [leafOnly]="true" /></view>
    <view class="product-surface"><text class="product-heading">Vista previa del archivo</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') ? 'Colores y espaciado compartidos del espacio.' : this.selectedFile().endsWith('.md') ? 'Configuración, guía de contribución y enlaces útiles.' : 'Un componente Angular standalone para la experiencia móvil.');
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Tree · android · native capture — **Android**Captura nativa

Tree · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	'Tree'	Input	Nombre legible del control, acción o grupo.
nodes	readonly NeuTreeNode[]	[]	Input	Nodos jerárquicos con hijos opcionales. Mantén IDs únicos en todo el árbol.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.
readonly	boolean	false	Input	Impide editar o seleccionar desde el control y conserva el valor actual.
leafOnly	boolean	false	Input	Restringe los valores seleccionables a nodos hoja; los padres siguen organizando la jerarquía.
expandLabel	string	'Expand'	Input	Texto o nombre accesible utilizado para expandir. No ejecuta la acción por sí solo.
emptyLabel	string	'No items'	Input	Texto o nombre accesible utilizado para estado vacío. No ejecuta la acción por sí solo.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
expanded	readonly string[]	[]	Model · bidireccional	IDs de las secciones o nodos expandidos actualmente. Enlaza una signal escribible mediante [(expanded)].
value	string	''	Model · bidireccional	Valor editado o ID(s) seleccionado(s), según el tipo declarado. Enlaza una signal escribible mediante [(value)].

Outputs

Nombre	Payload	Cuándo se emite
expandedChange	readonly string[]	Emite el valor actualizado de expanded. [(expanded)] enlaza este output junto con su input model.
valueChange	string	Emite el valor actualizado de value. [(value)] enlaza este output junto con su input model.
selected	string	Emite el ID del elemento seleccionado.
touch	void	Comunica la interacción del usuario al formulario o aplicación que lo contiene.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts

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

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

Tipos e interfaces de datos

Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.

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

Campo	Tipo	Requisito	Significado
id	string	Obligatorio	Identificador estable y único para seguimiento y selección.
label	string	Obligatorio	Nombre legible del elemento.
description	string	Opcional	Texto de apoyo opcional; su presentación depende del control.
disabled	boolean	Opcional	Impide activar o seleccionar este elemento.

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[];
}

Campo	Tipo	Requisito	Significado
children	readonly NeuTreeNode[]	Opcional	Nodos hijos recursivos; omítelo en un nodo hoja.
id	string	Obligatorio	Identificador estable y único para seguimiento y selección.
label	string	Obligatorio	Nombre legible del elemento.
description	string	Opcional	Texto de apoyo opcional; su presentación depende del control.
disabled	boolean	Opcional	Impide activar o seleccionar este elemento.