Listbox | Neural Native

Importación

component.ts

import { NeuListboxComponent } from '@neural-ui/native/listbox';

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.

Una revisión compartida

Selecciona equipos visibles y prepara un resumen local. El equipo archivado permanece desactivado y el resumen utiliza nombres en lugar de IDs internos.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal, computed } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuAlertComponent } from '@neural-ui/native/alert';
import { NeuListboxComponent } from '@neural-ui/native/listbox';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuAlertComponent, NeuListboxComponent, 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">Una revisión compartida</text><text class="product-caption">Elige quién necesita participar</text></view>
    <view class="product-surface"><neu-listbox emptyLabel="No hay opciones" label="Invitar equipos" [options]="teams" [multiple]="true" [(value)]="selected" /></view>
    <view class="product-section"><text class="product-heading">Participantes en la revisión</text><text class="product-caption">{{ selectedLabels() || 'Elige al menos un equipo' }}</text>
    <view class="product-actions"><neu-button label="Preparar revisión" size="sm" [disabled]="!selected().length" (pressed)="prepared.set(selectedLabels())" /></view>
    @if (prepared()) { <neu-alert closeLabel="Cerrar aviso" title="Revisión preparada" [message]="prepared()" tone="success" /> }</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 teams: readonly NeuOption[] = [
    {
      "id": "design",
      "label": "Diseño",
      "description": "Interfaces de producto"
    },
    {
      "id": "engineering",
      "label": "Ingeniería",
      "description": "Desarrollo de aplicaciones"
    },
    {
      "id": "archive",
      "label": "Equipo archivado",
      "disabled": true
    }
  ];
  readonly selected = signal<readonly string[]>(['design']);
  readonly selectedLabels = computed(() => this.teams.filter(team => this.selected().includes(team.id)).map(team => team.label).join(', '));
  readonly prepared = signal('');
}

Selección única

Elige un único equipo predeterminado y consulta su ID debajo.

Ver y copiar el ejemplo completo

single-selection.component.ts

import { Component, signal } from '@angular/core';
import { NeuListboxComponent } from '@neural-ui/native/listbox';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuListboxComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-listbox emptyLabel="No hay opciones" label="Equipo predeterminado" [options]="teams" [(value)]="defaultTeam" [multiple]="false" /><text class="usage-caption">Predeterminado: {{ defaultTeam()[0] || 'Ninguno' }}</text>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly teams: readonly NeuOption[] = [
    {
      "id": "design",
      "label": "Diseño",
      "description": "Interfaces de producto"
    },
    {
      "id": "engineering",
      "label": "Ingeniería",
      "description": "Desarrollo de aplicaciones"
    },
    {
      "id": "archive",
      "label": "Equipo archivado",
      "disabled": true
    }
  ];
  readonly defaultTeam = signal<readonly string[]>(['design']);
}

Opciones personalizadas

Sustituye el contenido visual de cada opción. Listbox conserva el comportamiento de radio o checkbox y su marca de selección.

Ver y copiar el ejemplo completo

custom-items.component.ts

import { Component, signal } from '@angular/core';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { NeuListboxComponent } from '@neural-ui/native/listbox';
import { View, Text, ScrollView } from '@ng-native/components';
import { NeuListboxItemDirective } from '@neural-ui/native/listbox';

@Component({
  selector: 'app-example',
  imports: [NeuAvatarComponent, NeuListboxComponent, NeuListboxItemDirective, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-listbox emptyLabel="No hay opciones" label="Equipo del lanzamiento" [options]="teams" [(value)]="selected">
      <ng-template neuListboxItem let-option let-index="index" let-selected="selected">
        <view class="team-option"><neu-avatar [label]="option.label" size="sm" /><text [class]="selected ? 'selected-option' : 'usage-heading'">{{ index + 1 }}. {{ option.label }}</text></view>
      </ng-template>
    </neu-listbox>
    <text class="usage-caption">ID seleccionado: {{ selected()[0] || 'Ninguno' }}</text>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }

.team-option { flex-direction: row; align-items: center; gap: 10px; } .selected-option { color: var(--neu-on-accent, #ffffff); font-weight: 600; }
  `,
})
export class ExampleComponent {
  readonly teams = [
    { id: 'design', label: 'Diseño', description: 'Interfaces de producto' },
    { id: 'engineering', label: 'Ingeniería', description: 'Aplicaciones móviles' },
    { id: 'archive', label: 'Equipo archivado', description: 'No admite nuevos miembros', disabled: true },
  ];
  readonly selected = signal<readonly string[]>(['design']);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

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

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

Personalización

Importa estas directivas junto con el componente y añádelas a Component.imports. Los ejemplos anteriores incluyen la configuración completa.

personalization-imports.ts

import { NeuListboxItemDirective } from '@neural-ui/native/listbox';

Plantilla o región	Contexto	Uso
`ng-template[neuListboxItem]`	`$implicit: NeuOption; index: number; selected: boolean; disabled: boolean`	Sustituye el contenido de la opción. Listbox conserva su marca de selección y la acción de radio o checkbox. index sigue las opciones visibles.

Contextos de las plantillas

template-contexts.ts

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

let-item recibe $implicit; los campos con nombre utilizan let-index="index". Usa los tipos exportados al declarar un TemplateRef reutilizable. Mantén el contenido interno como presentación: el padre conserva la acción accesible y el comportamiento de selección.

Plantillas reutilizables

También puedes declarar <ng-template #row let-item> y enlazar [itemTemplate]="row". Un itemTemplate explícito tiene prioridad sobre la directiva proyectada; si no aportas ninguno, se muestra el contenido predeterminado.

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
options	readonly NeuOption[]	[]	Input	Opciones disponibles. Los valores seleccionados se refieren a sus IDs, no a las etiquetas visibles.
appearance	"cards" \| "plain"	'cards'	Input	Superficie de las opciones: cards utiliza opciones con relleno independientes; plain muestra filas compactas. Select utiliza plain en su desplegable. La selección, el estado disabled y las plantillas funcionan en ambos acabados.
itemTemplate	TemplateRef<NeuListboxItemContext> \| undefined	undefined	Input	Plantilla Angular reutilizable de opción. Su contexto aporta la opción original, el índice visible y los estados selected y disabled. Este input explícito tiene prioridad sobre neuListboxItem; Listbox conserva la selección y la accesibilidad.
multiple	boolean	false	Input	Permite varias opciones o archivos cuando se admite; consulta el tipo declarado del model.
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.
emptyLabel	string	'No options'	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
value	readonly 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	readonly 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 value = signal<readonly 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.

NeuListboxItemContext

NeuListboxItemContext.ts

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

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuListboxItemContext {
    readonly $implicit: NeuOption;
    /** Position in the displayed options, after filtering. */
    readonly index: number;
    readonly selected: boolean;
    readonly disabled: boolean;
}

Campo	Tipo	Requisito	Significado
$implicit	NeuOption	Obligatorio	Elemento original suministrado a la plantilla de fila; se recibe mediante let-item.
index	number	Obligatorio	Posición desde cero en la colección visible; se recibe mediante let-index="index". La sección de personalización explica cómo aplica este componente el filtrado, la ordenación o el reciclado de filas.
selected	boolean	Obligatorio	Indica si esta opción está seleccionada en el contexto de su plantilla.
disabled	boolean	Obligatorio	Impide activar o seleccionar este elemento.