Ngx-search-bar-fz NPM

Ngx Search Bar

Installation

To install this library, run:

$ npm install ngx-search-bar-fz --save

and then from your Angular AppModule:

import { BrowserModule } from "@angular/platform-browser"
import { NgModule } from "@angular/core"

import { AppComponent } from "./app.component"

// Import your library
import { DATA_FOR_SEARCH_BAR, NgxSearchBarModule } from "ngx-search-bar-fz"

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,

    // Specify your library as an import
    NgxSearchBarModule,
  ],
  providers: [
    {
      provide: NGX_SEARCH_BAR_DATA,
      useValue: {
        BASE_URL: environment.serverBar,
        OPTIONS: {
          classContainerFilter: "main-style",
          fnScrollTop: () => {
            window.scrollTo(0, 0)
          },
          stickyTop: "55px",
        },
        OPTIONS_PAGINATE: {
          fnGetLength: (arg: any) => {
            return arg.data.total
          },
        },
      },
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Usage in templates is as simple as:

<ngx-search-bar
  [isChangeUrl]="false"
  nameInputSearch="name"
  placeholder="Search products"
  title="Products"
  [autoInit]="true"
  (data)="getData($event)"
  [isBarExpand]="false"
  maxWidth="50%"
  [isSticky]="true"
  path="products-admin/products">
  <!-- Optional filters -->
  <ngx-search-bar-form-filter [filters]="formFilter" [withParamsClean]="false">
    <div [formGroup]="formFilter" class="gap-2 pt-2 grid md:grid-cols-2 w-full">
      <mat-form-field class="w-full" appearance="outline">
        <mat-label>ID</mat-label>
        <input matInput placeholder="#" formControlName="id" />
      </mat-form-field>
      <!-- More filters -->
    </div>
  </ngx-search-bar-form-filter>

  <!-- Optional buttons -->
  <ng-container buttons>
    <button class="!bg-orange-500 !text-white" mat-raised-button [routerLink]="['/admin-products/products/create']">
      <i class="fa-solid fa-plus"></i>
      Producto
    </button>
  </ng-container>

  <div class="overflow-auto p-2">
    <!-- render information -->
  </div>
  <!-- Optional paginator -->
  <ngx-search-bar-paginator></ngx-search-bar-paginator>
</ngx-search-bar>

NgxSearchBarComponent

Inputs

Name	Type	Default	Description
placeholder	string	'Search'	Entry placeholder
title	string	null	Component Title
path	string	search	Route for requests
isChangeUrl	boolean	false	If the url should be changed when doing a search
autoInit	boolean	true	If it automatically starts searching
nameInputSearch	string	'search'	search Name of the search input to send to the backend
isBarExpand	boolean	false	If it is an expanded bar
size	number	1	grow bar css
maxWidth	string	'100%'	maximum width of the bar
isSticky	boolean	true	si siempre es visible arriba(le afecta el top con el input stickyTop)
fnScrollTop	Function	null	Function to return to the top by scrolling
notScroll	boolean	false	If you scroll up with the function

Outputs

Names	Type	Description
data	unknown	Event fired when data is received
loading	boolean	Event fired when load state is changed

Slots

Name	Description
ngx-search-bar-form-filter	Component for filters
ngx-search-bar-paginator	Component for paginator
buttons	Button slot next to filter button

Example img

NgxSearchBarFormFilterComponent

Inputs

Name	Type	Default	Description
filters	FormGroup	is required	filter form that is sent to the backend
textBtnApply	string	'Apply Filters'	Apply button text
textBtnClose	string	'Close Filters'	Close button text
withParamsClean	boolean	false	If it should clean the params
classPanel	string	null	Class for panel of filters