Cascade Select | Neural Native

Importación

component.ts

import { NeuCascadeSelectComponent } from '@neural-ui/native/cascade-select';

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.

Un espacio, estés donde estés

Avanza por región, país y oficina. Atrás permite volver de nivel y elegir una hoja muestra su tarjeta de destino.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal, computed } from '@angular/core';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuCascadeSelectComponent } from '@neural-ui/native/cascade-select';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuTreeNode } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuCardComponent, NeuBadgeComponent, NeuCascadeSelectComponent, 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">Un espacio, estés donde estés</text><text class="product-caption">Encuentra tu próxima oficina paso a paso</text></view>
    <view class="product-surface"><neu-cascade-select closeLabel="Cerrar opciones" backLabel="Volver" label="Ubicación de la oficina" placeholder="Elige una oficina" rootLabel="Regiones" [nodes]="locations" [(value)]="office" />
    <text class="product-caption">Región → País → Oficina</text></view>
    @if (officeLabel()) { <neu-card [title]="officeLabel()" description="Tu próximo espacio de equipo" variant="outlined"><neu-badge label="Oficina seleccionada" tone="success" /></neu-card> }</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 locations: readonly NeuTreeNode[] = [
    { id: 'europe', label: 'Europa', children: [
      { id: 'spain', label: 'España', children: [{ id: 'madrid', label: 'Madrid' }, { id: 'barcelona', label: 'Barcelona' }] },
      { id: 'france', label: 'Francia', children: [{ id: 'paris', label: 'Paris' }] },
    ] },
    { id: 'americas', label: 'Norteamérica', children: [
      { id: 'usa', label: 'Estados Unidos', children: [{ id: 'austin', label: 'Austin' }, { id: 'new-york', label: 'New York' }] },
    ] },
  ];
  readonly office = signal('');
  readonly officeLabel = computed(() => this.locations.flatMap(region => region.children ?? []).flatMap(country => country.children ?? []).find(office => office.id === this.office())?.label || '');
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Cascade Select · android · native capture — **Android**Captura nativa

Cascade Select · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
nodes	readonly NeuTreeNode[]	[]	Input	Nodos jerárquicos con hijos opcionales. Mantén IDs únicos en todo el árbol.
backLabel	string	'Back'	Input	Texto o nombre accesible utilizado para volver. No ejecuta la acción por sí solo.
placeholder	string	'Choose item'	Input	Ejemplo o indicación mientras el valor está vacío; conserva una etiqueta independiente.
closeLabel	string	'Dismiss options'	Input	Texto o nombre accesible utilizado para cerrar. No ejecuta la acción por sí solo.
rootLabel	string	'All categories'	Input	Encabezado del primer nivel del selector de categorías en cascada.
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
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.
invalid	boolean	false	Input	Marca el control como inválido. El formulario o la aplicación aporta la regla de validación.
touched	boolean	false	Input	Estado de interacción con el campo, aportado manualmente o mediante Signal Forms.
hint	string	''	Input	Ayuda del campo que aparece cuando no se muestra un mensaje de error.
required	boolean	false	Input	Presentación de campo obligatorio. Define la regla de validación real en el formulario de tu aplicación.
requiredLabel	string	'Required'	Input	Requisito traducido que se anuncia con la ayuda cuando required es true. Required por defecto; no valida el valor.
error	string	''	Input	Mensaje de error aportado por la aplicación; combínalo con el estado invalid del control.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
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
valueChange	string	Emite el valor actualizado de value. [(value)] enlaza este output junto con su input model.
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 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.