VirtualList | Neural UI v2

Uso

Define itemKey como una clave única estable de texto o número. itemSize es la altura real de fila en píxeles; el Template debe respetarla. visibleRows controla la ventana. rangeChange informa del rango renderizado, no solicita datos. Sustituye items cuando cambien los datos; no uses índices como clave para registros reordenables.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

1 · Proyecto 1

2 · Proyecto 2

3 · Proyecto 3

4 · Proyecto 4

5 · Proyecto 5

6 · Proyecto 6

7 · Proyecto 7

8 · Proyecto 8

Eventos: 0

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

1 · Proyecto 1

2 · Proyecto 2

3 · Proyecto 3

4 · Proyecto 4

5 · Proyecto 5

6 · Proyecto 6

7 · Proyecto 7

8 · Proyecto 8

Eventos: 0

visibleRows

itemSize

empty

Opciones avanzadas · 1

<neu-virtual-list
  [items]="items()"
  [itemKey]="itemKey"
  [visibleRows]="6"
  [itemSize]="48"
  (rangeChange)="record('rangeChange', $event)"
  [emptyLabel]="'Sin proyectos'"
><ng-template
    [neuVirtualItem]="items()"
    [neuVirtualItemKey]="itemKey"
    let-item
    let-index="index"
    ><div class="remaining-virtual-row">
      {{ index + 1 }} · {{ item.label }}
    </div></ng-template
  ></neu-virtual-list
>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

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

export const items = signal([
  {
    "id": "item-0",
    "label": "Proyecto 1"
  },
  {
    "id": "item-1",
    "label": "Proyecto 2"
  },
  {
    "id": "item-2",
    "label": "Proyecto 3"
  },
  {
    "id": "item-3",
    "label": "Proyecto 4"
  },
  {
    "id": "item-4",
    "label": "Proyecto 5"
  },
  {
    "id": "item-5",
    "label": "Proyecto 6"
  },
  {
    "id": "item-6",
    "label": "Proyecto 7"
  },
  {
    "id": "item-7",
    "label": "Proyecto 8"
  },
  {
    "id": "item-8",
    "label": "Proyecto 9"
  },
  {
    "id": "item-9",
    "label": "Proyecto 10"
  },
  {
    "id": "item-10",
    "label": "Proyecto 11"
  },
  {
    "id": "item-11",
    "label": "Proyecto 12"
  },
  {
    "id": "item-12",
    "label": "Proyecto 13"
  },
  {
    "id": "item-13",
    "label": "Proyecto 14"
  },
  {
    "id": "item-14",
    "label": "Proyecto 15"
  },
  {
    "id": "item-15",
    "label": "Proyecto 16"
  },
  {
    "id": "item-16",
    "label": "Proyecto 17"
  },
  {
    "id": "item-17",
    "label": "Proyecto 18"
  },
  {
    "id": "item-18",
    "label": "Proyecto 19"
  },
  {
    "id": "item-19",
    "label": "Proyecto 20"
  },
  {
    "id": "item-20",
    "label": "Proyecto 21"
  },
  {
    "id": "item-21",
    "label": "Proyecto 22"
  },
  {
    "id": "item-22",
    "label": "Proyecto 23"
  },
  {
    "id": "item-23",
    "label": "Proyecto 24"
  },
  {
    "id": "item-24",
    "label": "Proyecto 25"
  },
  {
    "id": "item-25",
    "label": "Proyecto 26"
  },
  {
    "id": "item-26",
    "label": "Proyecto 27"
  },
  {
    "id": "item-27",
    "label": "Proyecto 28"
  },
  {
    "id": "item-28",
    "label": "Proyecto 29"
  },
  {
    "id": "item-29",
    "label": "Proyecto 30"
  },
  {
    "id": "item-30",
    "label": "Proyecto 31"
  },
  {
    "id": "item-31",
    "label": "Proyecto 32"
  },
  {
    "id": "item-32",
    "label": "Proyecto 33"
  },
  {
    "id": "item-33",
    "label": "Proyecto 34"
  },
  {
    "id": "item-34",
    "label": "Proyecto 35"
  },
  {
    "id": "item-35",
    "label": "Proyecto 36"
  },
  {
    "id": "item-36",
    "label": "Proyecto 37"
  },
  {
    "id": "item-37",
    "label": "Proyecto 38"
  },
  {
    "id": "item-38",
    "label": "Proyecto 39"
  },
  {
    "id": "item-39",
    "label": "Proyecto 40"
  },
  {
    "id": "item-40",
    "label": "Proyecto 41"
  },
  {
    "id": "item-41",
    "label": "Proyecto 42"
  },
  {
    "id": "item-42",
    "label": "Proyecto 43"
  },
  {
    "id": "item-43",
    "label": "Proyecto 44"
  },
  {
    "id": "item-44",
    "label": "Proyecto 45"
  },
  {
    "id": "item-45",
    "label": "Proyecto 46"
  },
  {
    "id": "item-46",
    "label": "Proyecto 47"
  },
  {
    "id": "item-47",
    "label": "Proyecto 48"
  },
  {
    "id": "item-48",
    "label": "Proyecto 49"
  },
  {
    "id": "item-49",
    "label": "Proyecto 50"
  },
  {
    "id": "item-50",
    "label": "Proyecto 51"
  },
  {
    "id": "item-51",
    "label": "Proyecto 52"
  },
  {
    "id": "item-52",
    "label": "Proyecto 53"
  },
  {
    "id": "item-53",
    "label": "Proyecto 54"
  },
  {
    "id": "item-54",
    "label": "Proyecto 55"
  },
  {
    "id": "item-55",
    "label": "Proyecto 56"
  },
  {
    "id": "item-56",
    "label": "Proyecto 57"
  },
  {
    "id": "item-57",
    "label": "Proyecto 58"
  },
  {
    "id": "item-58",
    "label": "Proyecto 59"
  },
  {
    "id": "item-59",
    "label": "Proyecto 60"
  },
  {
    "id": "item-60",
    "label": "Proyecto 61"
  },
  {
    "id": "item-61",
    "label": "Proyecto 62"
  },
  {
    "id": "item-62",
    "label": "Proyecto 63"
  },
  {
    "id": "item-63",
    "label": "Proyecto 64"
  },
  {
    "id": "item-64",
    "label": "Proyecto 65"
  },
  {
    "id": "item-65",
    "label": "Proyecto 66"
  },
  {
    "id": "item-66",
    "label": "Proyecto 67"
  },
  {
    "id": "item-67",
    "label": "Proyecto 68"
  },
  {
    "id": "item-68",
    "label": "Proyecto 69"
  },
  {
    "id": "item-69",
    "label": "Proyecto 70"
  },
  {
    "id": "item-70",
    "label": "Proyecto 71"
  },
  {
    "id": "item-71",
    "label": "Proyecto 72"
  },
  {
    "id": "item-72",
    "label": "Proyecto 73"
  },
  {
    "id": "item-73",
    "label": "Proyecto 74"
  },
  {
    "id": "item-74",
    "label": "Proyecto 75"
  },
  {
    "id": "item-75",
    "label": "Proyecto 76"
  },
  {
    "id": "item-76",
    "label": "Proyecto 77"
  },
  {
    "id": "item-77",
    "label": "Proyecto 78"
  },
  {
    "id": "item-78",
    "label": "Proyecto 79"
  },
  {
    "id": "item-79",
    "label": "Proyecto 80"
  },
  {
    "id": "item-80",
    "label": "Proyecto 81"
  },
  {
    "id": "item-81",
    "label": "Proyecto 82"
  },
  {
    "id": "item-82",
    "label": "Proyecto 83"
  },
  {
    "id": "item-83",
    "label": "Proyecto 84"
  },
  {
    "id": "item-84",
    "label": "Proyecto 85"
  },
  {
    "id": "item-85",
    "label": "Proyecto 86"
  },
  {
    "id": "item-86",
    "label": "Proyecto 87"
  },
  {
    "id": "item-87",
    "label": "Proyecto 88"
  },
  {
    "id": "item-88",
    "label": "Proyecto 89"
  },
  {
    "id": "item-89",
    "label": "Proyecto 90"
  },
  {
    "id": "item-90",
    "label": "Proyecto 91"
  },
  {
    "id": "item-91",
    "label": "Proyecto 92"
  },
  {
    "id": "item-92",
    "label": "Proyecto 93"
  },
  {
    "id": "item-93",
    "label": "Proyecto 94"
  },
  {
    "id": "item-94",
    "label": "Proyecto 95"
  },
  {
    "id": "item-95",
    "label": "Proyecto 96"
  },
  {
    "id": "item-96",
    "label": "Proyecto 97"
  },
  {
    "id": "item-97",
    "label": "Proyecto 98"
  },
  {
    "id": "item-98",
    "label": "Proyecto 99"
  },
  {
    "id": "item-99",
    "label": "Proyecto 100"
  },
  /* Additional 100 runtime items: see Source. */
]);

export const itemKey = () => { /* Handler in the complete example. */ };

Inputs de datos, callbacks y configuración estructurada

Estado y eventos

Define itemKey como una clave única estable de texto o número. itemSize es la altura real de fila en píxeles; el Template debe respetarla. visibleRows controla la ventana. rangeChange informa del rango renderizado, no solicita datos. Sustituye items cuando cambien los datos; no uses índices como clave para registros reordenables.

Accesibilidad y teclado

Enfoca la región de scroll y usa el desplazamiento del navegador. Los controles del Template conservan su comportamiento nativo de teclado.

Tecla	Acción
`Tab`	Accede a la región de desplazamiento y a los controles enfocables de los templates de elementos.
`ArrowUp / ArrowDown`	Desplaza la región mediante el comportamiento nativo cuando tiene el foco.
`PageUp / PageDown`	Desplaza una página cada vez en la región enfocada.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

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

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`emptyLabel`	`string`	`'No results'`	`[emptyLabel]`	Etiqueta de colección vacía. Tradúcela para tu aplicación.
`itemKey`	`(item: T) => K`	Obligatorio	`[itemKey]`	Función que devuelve una clave única estable para cada fila virtual.
`items`	`readonly T[]`	`[]`	`[items]`	Colección aplicada de elementos. Claves y accesores estables identifican las entradas; el componente no modifica el array.
`itemSize`	`number`	`48`	`[itemSize]`	Altura fija de fila en píxeles. El contenido del Template debe respetarla.
`visibleRows`	`number`	`10`	`[visibleRows]`	Número de filas que determina la altura de la ventana virtual.

Outputs

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

Nombre	Valor emitido	Uso en el template	Descripción
`rangeChange`	`NeuVirtualListRange`	`(rangeChange)="onRangeChange($event)"`	Rango visible actual del área virtual.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
`NeuVirtualItemDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuVirtualItem]` template.d.ts `import type { NeuVirtualListKey } from '@neural-ui/core/virtual-list'; import { NeuVirtualItemDirective } from '@neural-ui/core/virtual-list'; // Declaración pública (solo referencia) export declare class NeuVirtualItemDirective<T, K extends NeuVirtualListKey = NeuVirtualListKey> { readonly neuVirtualItem: import("@angular/core").InputSignal<readonly T[] \| undefined>; readonly neuVirtualItemKey: import("@angular/core").InputSignal<((item: T) => K) \| undefined>; }`

NeuVirtualItemDirectiveVer ejemplo

Directiva pública de template

ng-template[neuVirtualItem]

Declaración

import type { NeuVirtualListKey } from '@neural-ui/core/virtual-list';

import { NeuVirtualItemDirective } from '@neural-ui/core/virtual-list';

// Declaración pública (solo referencia)
export declare class NeuVirtualItemDirective<T, K extends NeuVirtualListKey = NeuVirtualListKey> {
  readonly neuVirtualItem: import("@angular/core").InputSignal<readonly T[] | undefined>;
  readonly neuVirtualItemKey: import("@angular/core").InputSignal<((item: T) => K) | undefined>;
}

Contexto completo

import type { NeuVirtualItemContext } from '@neural-ui/core/virtual-list';

import { NeuVirtualItemDirective } from '@neural-ui/core/virtual-list';

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

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

NeuVirtualItemDirective

NeuVirtualItemDirective

1 · Proyecto 1

2 · Proyecto 2

3 · Proyecto 3

4 · Proyecto 4

5 · Proyecto 5

6 · Proyecto 6

7 · Proyecto 7

8 · Proyecto 8

Eventos: 0

Public Types

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

NeuVirtualItemContextTypeScript

import type { NeuVirtualListKey } from '@neural-ui/core/virtual-list';

import type { NeuVirtualItemContext } from '@neural-ui/core/virtual-list';

// Declaración pública (solo referencia)
interface NeuVirtualItemContext<T, K extends NeuVirtualListKey> {
  readonly $implicit: T;
  readonly index: number;
  readonly item: T;
  readonly key: K;
}

NeuVirtualListKeyTypeScript

NeuVirtualListRangeTypeScript

import type { NeuVirtualListRange } from '@neural-ui/core/virtual-list';

// Declaración pública (solo referencia)
interface NeuVirtualListRange {
  readonly end: number;
  readonly start: number;
}

NeuVirtualListScrollTargetTypeScript

import type { NeuVirtualListKey } from '@neural-ui/core/virtual-list';

import type { NeuVirtualListScrollTarget } from '@neural-ui/core/virtual-list';

// Declaración pública (solo referencia)
type NeuVirtualListScrollTarget<K extends NeuVirtualListKey> = {
    readonly index: number;
    readonly align?: 'nearest' | 'start' | 'center' | 'end';
} | {
    readonly key: K;
    readonly align?: 'nearest' | 'start' | 'center' | 'end';
};

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-text-muted`	Etiquetas secundarias y contenido de ayuda	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#475569`

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.