Filter Bar | Neural Native

Importación

component.ts

import { NeuFilterBarComponent } from '@neural-ui/native/filter-bar';

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.

Básico

Busca un proyecto y elige uno o varios estados. La lista y la cantidad de resultados se actualizan juntas; Limpiar recupera todos los proyectos.

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 { NeuEmptyStateComponent } from '@neural-ui/native/empty-state';
import { NeuFilterBarComponent } from '@neural-ui/native/filter-bar';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuCardComponent, NeuBadgeComponent, NeuEmptyStateComponent, NeuFilterBarComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="project-scroll" keyboardShouldPersistTaps="handled">
      <view class="project-browser">
        <view class="project-intro">
          <text class="project-title">Proyectos</text>
          <text class="project-hint">Busca por nombre o equipo y elige uno o varios estados.</text>
        </view>
        <neu-filter-bar label="Estado" [options]="filters"
          [(value)]="selected" [(query)]="query"
          searchLabel="Buscar proyectos" clearLabel="Limpiar" />
        <text class="result-count">{{ filteredProjects().length }} de {{ projects.length }} proyectos</text>
        <view class="project-list">
          @for (project of filteredProjects(); track project.id) {
            <neu-card [title]="project.title" [description]="project.team" variant="outlined">
              <neu-badge [label]="project.statusLabel" [tone]="project.tone" />
            </neu-card>
          } @empty {
            <neu-empty-state title="No hay proyectos coincidentes"
              description="Prueba otro nombre o limpia los filtros de estado."
              actionLabel="Ver todos los proyectos" (action)="resetFilters()" />
          }
        </view>
      </view>
    </scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
:host { flex: 1; min-height: 0; }
.project-scroll { flex: 1; min-height: 0; }
.project-browser { gap: 20px; padding-bottom: 20px; }
.project-intro { gap: 6px; }
.project-title { font-size: 24px; line-height: 32px; font-weight: 700; }
.project-hint { font-size: 14px; line-height: 20px; color: var(--neu-muted, #596477); }
.result-count { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--neu-muted, #596477); }
.project-list { gap: 12px; }
  `,
})
export class ExampleComponent {
  readonly filters: readonly NeuOption[] = [
    { id: 'active', label: 'En curso' },
    { id: 'review', label: 'En revisión' },
    { id: 'done', label: 'Completado' },
  ];
  readonly projects = [
    { id: 'mobile', title: 'App móvil', team: 'Equipo de producto', status: 'active', statusLabel: 'En curso', tone: 'brand' },
    { id: 'website', title: 'Renovación de la web', team: 'Equipo de plataforma', status: 'review', statusLabel: 'En revisión', tone: 'warning' },
    { id: 'research', title: 'Investigación con clientes', team: 'Equipo de clientes', status: 'active', statusLabel: 'En curso', tone: 'brand' },
    { id: 'brand', title: 'Identidad visual', team: 'Equipo de diseño', status: 'review', statusLabel: 'En revisión', tone: 'warning' },
    { id: 'payments', title: 'Integración de pagos', team: 'Equipo de plataforma', status: 'done', statusLabel: 'Completado', tone: 'success' },
  ] as const;
  readonly selected = signal<readonly string[]>(['active']);
  readonly query = signal('');
  readonly filteredProjects = computed(() => {
    const fold = (text: string) => text.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
    const query = fold(this.query().trim());
    const statuses = this.selected();
    return this.projects.filter(project =>
      fold(project.title + ' ' + project.team).includes(query) &&
      (!statuses.length || statuses.includes(project.status)));
  });
  resetFilters(): void {
    this.selected.set([]);
    this.query.set('');
  }
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Filter Bar · android · native capture — **Android**Captura nativa

Filter Bar · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	'Filters'	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.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.
searchLabel	string	'Search'	Input	Texto o nombre accesible utilizado para buscar. No ejecuta la acción por sí solo.
clearLabel	string	'Clear filters'	Input	Texto o nombre accesible utilizado para limpiar. 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)].
query	string	''	Model · bidireccional	Texto de búsqueda actual utilizado por el control. Enlaza una signal escribible mediante [(query)].

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.
queryChange	string	Emite el valor actualizado de query. [(query)] enlaza este output junto con su input model.

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[]>([]);
readonly query = 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.