FilterBar | Neural UI v2

Uso

filters contiene el catálogo completo con claves estables, etiquetas y estados active opcionales. filterChange emite solo los filtros activos: actualiza active por clave conservando las opciones inactivas y después filtra tus datos. multi=false conserva como máximo un filtro activo; clearable desactiva todos los filtros. FilterBar no consulta el servidor ni filtra una Table automáticamente.

Ejemplos

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

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.

Eventos: 0

multi

clearable

Opciones avanzadas · 2

<neu-filter-bar
  [filters]="localizedFilters()"
  [multi]="true"
  [clearable]="true"
  (filterChange)="onFilterChange($event)"
  [ariaLabel]="'Filtros de pedidos'"
  [clearLabel]="'Limpiar todo'"
/>

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 localizedFilters = signal([
  {
    "key": "open",
    "label": "Abiertos",
    "active": true
  },
  {
    "key": "closed",
    "label": "Cerrados"
  },
  {
    "key": "urgent",
    "label": "Urgentes"
  }
]);

Inputs de datos, callbacks y configuración estructurada

Estado y eventos

La aplicación mantiene el catálogo completo de filtros. filterChange contiene solo los activos; acepta el cambio actualizando active por clave sin sustituir ni eliminar opciones del catálogo. Un evento vacío significa que no hay filtros activos, no que el catálogo esté vacío.

Accesibilidad y teclado

Tab alcanza cada filtro; Intro/Espacio lo cambia. El estado pulsado refleja active aplicado.

Tecla	Acción
`Tab`	Enfoca cada filtro habilitado.
`Enter`	Propone cambiar el filtro enfocado; el valor active aplicado controla su estado pulsado.
`Space`	Propone cambiar el filtro enfocado; el valor active aplicado controla su estado pulsado.

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
`ariaLabel`	`string`	`'Filters'`	`[ariaLabel]`	Nombre accesible del control o región.
`clearable`	`boolean`	`true`	`[clearable]`	Muestra la acción de limpiar cuando hay un valor seleccionado.
`clearLabel`	`string`	`'Clear all'`	`[clearLabel]`	Etiqueta de la acción que limpia la selección.
`filters`	`readonly NeuFilterChip[]`	`[]`	`[filters]`	Filtros con claves estables, etiquetas y estados active aplicados.
`multi`	`boolean`	`true`	`[multi]`	Permite varios filtros activos; false conserva como máximo uno.

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
`filterChange`	`NeuFilterChip[]`	`(filterChange)="onFilterChange($event)"`	Propone el array completo de filtros actualizado, incluidos sus estados activos. Sustituye filters para aceptarlo.

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.

Este componente no expone proyección de contenido ni templates públicos de personalización.

Public Types

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

NeuFilterChipTypeScript

import type { NeuFilterChip } from '@neural-ui/core/filter-bar';

// Declaración pública (solo referencia)
export interface NeuFilterChip {
  active?: boolean;
  key: string;
  label: string;
}

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-focus-ring`	Anillo normal del foco de teclado	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-primary-dark`	Tono oscuro de marca; texto de Button outline y ghost en el tema claro	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#005fcc`
`--neu-border-color`	Valor del tema heredado que utiliza este componente	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`var(--neu-border)`
`--neu-radius-full`	Radio de esquina	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`9999px`
`--neu-surface-1`	Valor del tema heredado que utiliza este componente	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`var(--neu-surface)`
`--neu-text-primary`	Valor del tema heredado que utiliza este componente	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`var(--neu-text)`
`--neu-text-secondary`	Valor del tema heredado que utiliza este componente	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`var(--neu-text-muted)`

Componentes relacionados

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