CascadeSelect

Uso

Cada padre abre sus hijos. El modelo cambia cuando se elige un nodo final seleccionable. Los nodos usan label, value y children opcional; los accessors admiten otras estructuras de dominio.

Usa la acción de volver o la ruta de navegación para cambiar de nivel sin crear un segundo valor de selección.

Signal Forms

Enlaza FormField al control que gestiona el valor y añade required al esquema del formulario. Selecciona un destino, sal del campo para marcarlo como visitado y restablécelo para comprobar el valor y la validación. La marca de obligatorio no valida por sí sola el formulario.

Guía de Signal Forms

Prueba y configura

Cambia las opciones e interactúa con el control. La vista previa, el valor de la aplicación y el template generado permanecen juntos. Un destino deshabilitado permite comprobar que no se pueden seleccionar opciones no disponibles.

null

<neu-cascade-select
  (opened)="record('opened', $event)"
  (closed)="record('closed', $event)"
  (groupChange)="record('groupChange', $event)"
  (optionActivated)="record('optionActivated', $event)"
  (touch)="record('touch', $event)"
  (valueChange)="record('valueChange', $event)"
  [options]="destinations"
  [(value)]="destination"
  [clearable]="true"
  [backAriaLabel]="'Volver'"
  [breadcrumbAriaLabel]="'Ruta del destino'"
  [clearAriaLabel]="'Limpiar selección'"
  [emptyLabel]="'No hay destinos'"
  [label]="'Destino'"
  [placeholder]="'Elige un destino'"
  [rootLabel]="'Destinos'"
/>

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

export const destinations = [
  {
    "value": "eu",
    "label": "Europa",
    "children": [
      {
        "value": "madrid",
        "label": "Madrid"
      },
      {
        "value": "lisbon",
        "label": "Lisboa"
      },
      {
        "value": "paris",
        "label": "París"
      },
      {
        "value": "rome",
        "label": "Roma",
        "disabled": true
      }
    ]
  },
  {
    "value": "americas",
    "label": "América",
    "children": [
      {
        "value": "bogota",
        "label": "Bogotá"
      },
      {
        "value": "lima",
        "label": "Lima"
      }
    ]
  }
];

export const destination = signal(null);

Valor y eventos

Usa una sola fuente de verdad: [(value)]="destination" o [value]="destination()" junto con (valueChange)="destination.set($event)". No combines las dos formas de enlace.

Los Inputs configuran el control. valueChange sincroniza su modelo; los demás Outputs comunican las acciones o fases documentadas. Las solicitudes de sugerencias, hijos o ventanas remotas requieren que la aplicación proporcione los datos.

Accesibilidad y teclado

Utiliza una etiqueta visible o un nombre accesible. Prueba la navegación por teclado, las opciones deshabilitadas, la selección y el cierre del panel. Los templates de opción deben conservar texto descriptivo y no introducir botones ni otro checkbox enfocable dentro de la opción.

API

La referencia muestra los Inputs, modelos, Outputs y Templates públicos del paquete de Core fijado. Pulsa un tipo con nombre para abrir su definición. Cada Template aplicable tiene un ejemplo ejecutable y su código real.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Models

Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

import { NeuCascadeSelectEmptyDirective } from '@neural-ui/core/cascade-select';

// Declaración pública (solo referencia)
export declare class NeuCascadeSelectEmptyDirective {
}

import { NeuCascadeSelectEmptyDirective } from '@neural-ui/core/cascade-select';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<void>;

import { NeuCascadeSelectFooterDirective } from '@neural-ui/core/cascade-select';

// Declaración pública (solo referencia)
export declare class NeuCascadeSelectFooterDirective {
}

import { NeuCascadeSelectFooterDirective } from '@neural-ui/core/cascade-select';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<void>;

import { NeuCascadeSelectHeaderDirective } from '@neural-ui/core/cascade-select';

// Declaración pública (solo referencia)
export declare class NeuCascadeSelectHeaderDirective {
}

import { NeuCascadeSelectHeaderDirective } from '@neural-ui/core/cascade-select';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<void>;

import { NeuCascadeSelectItemDirective } from '@neural-ui/core/cascade-select';

// Declaración pública (solo referencia)
export declare class NeuCascadeSelectItemDirective<T> {
}

import type { NeuCascadeSelectItemContext } from '@neural-ui/core/cascade-select';

import { NeuCascadeSelectItemDirective } from '@neural-ui/core/cascade-select';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<NeuCascadeSelectItemContext<T>>;

import { NeuCascadeSelectSelectedDirective } from '@neural-ui/core/cascade-select';

// Declaración pública (solo referencia)
export declare class NeuCascadeSelectSelectedDirective<T> {
}

import type { NeuCascadeSelectSelectedContext } from '@neural-ui/core/cascade-select';

import { NeuCascadeSelectSelectedDirective } from '@neural-ui/core/cascade-select';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<NeuCascadeSelectSelectedContext<T>>;

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuCascadeSelectItemContext } from '@neural-ui/core/cascade-select';

// Declaración pública (solo referencia)
export interface NeuCascadeSelectItemContext<T> {
  $implicit: T;
  depth: number;
  hasChildren: boolean;
}

import type { NeuCascadeSelectNode } from '@neural-ui/core/cascade-select';

// Declaración pública (solo referencia)
export interface NeuCascadeSelectNode<V = string> {
  children?: readonly NeuCascadeSelectNode<V>[];
  data?: unknown;
  disabled?: boolean;
  label: string;
  value: V;
}

import type { NeuCascadeSelectSelectedContext } from '@neural-ui/core/cascade-select';

// Declaración pública (solo referencia)
export interface NeuCascadeSelectSelectedContext<T> {
  $implicit: T | null;
}

import type { NeuOptionPath } from '@neural-ui/core/option-api';

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionAccessor<T, R = unknown> = Exclude<keyof T, string> | NeuOptionPath<T> | ((option: T) => R);

import type { NeuOptionActivatedEvent } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export interface NeuOptionActivatedEvent<T, V> {
  readonly option: T;
  readonly originalEvent?: Event;
  readonly source: 'pointer' | 'keyboard';
  readonly value: V;
}

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

import type { NeuOptionDisabledAccessor } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionDisabledAccessor<T> = NeuOptionAccessor<T, boolean>;

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

import type { NeuOptionLabelAccessor } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionLabelAccessor<T> = NeuOptionAccessor<T, string>;

import type { NeuOptionPath } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionPath<T> = Extract<keyof T, string> | `${Extract<keyof T, string>}.${string}`;

Estilos y tokens

Carga los estilos de Core una sola vez. Utiliza los tokens públicos para personalizaciones locales o un preset para cambios de toda la aplicación. Conserva la legibilidad de etiquetas, foco, opciones seleccionadas y estados deshabilitados en modo claro y oscuro.

Componentes relacionados

Elige el control según la interacción: una lista visible, un campo de búsqueda, una jerarquía o un conjunto de opciones exclusivas.

• Select
• Autocomplete
• TreeSelect