ng-jamd-input-search-toolbar v0.0.9

NgJamdInputSearchToolbar

NgJamdInputSearchToolbar es una librería Angular que proporciona un componente reutilizable para implementar una barra de búsqueda con filtros. Es ideal para aplicaciones que requieren herramientas rápidas de búsqueda y navegación con múltiples opciones configurables.

Características

• Barra de búsqueda interactiva con entrada de texto y opciones de filtrado.
• Integración con formularios reactivos de Angular.
• Eventos personalizables para manejar búsquedas, selección de filtros y botones personalizados.
• Diseño flexible: Opciones para mostrar/ocultar la barra de búsqueda y los filtros.

Paso 1: Instalación

Instala la librería desde npm ejecutando el siguiente comando:

npm install ng-jamd-input-search-toolbar

Paso 2: Importa la librería

En tu archivo app.module.ts, importa el módulo:

import { NgJamdInputSearchToolbarModule } from 'ng-jamd-input-search-toolbar';

@NgModule({
  imports: [NgJamdInputSearchToolbarModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

Paso 3: Usar el componente

Añade el selector del componente en tu archivo HTML:

<ng-jamd-input-search-toolbar
  [toolbar]="{
    edit: true,
    delete: false,
    buttons: [{ id: 1, value: 'Nuevo', iconFaWSome: 'fa-solid fa-plus' }]
  }"
  [filters]="[
    { id: 1, tag: 'Nombre' },
    { id: 2, tag: 'Fecha' }
  ]"
  placeholder="Buscar aquí..."
  [toBack]="true"
  (onSearch)="onSearch($event)"
  (onFilter)="onFilter($event)"
  (onSearchFilter)="onSearchFilter($event)"
></ng-jamd-input-search-toolbar>

Configura tu componente de la siguiente forma:

export class AppComponent {
  onSearch(term: string) {
    console.log('Texto de búsqueda:', term);
  }

  onFilter(filter: number) {
    console.log('Filtro seleccionado:', filter);
  }

  onSearchFilter(result: { q: string; filter: number }) {
    console.log('Búsqueda con filtro:', result);
  }
}