NgmLiveSearch

This library was generated with Angular CLI version 13.2.0.

Demo

https://stackblitz.com/edit/angular-ivy-kdr5j4?file=src/app/app.component.html

Version

For Angular version 14 use version 2 of this library

Installation

Install npm i ngm-live-search with npm

  cd my-project
  npm i npm i ngm-live-search

Usage/Examples

import { NgmLiveSearchModule } from "ngm-live-search";

@NgModule({
  imports: [
    .
    .
    .
    NgmLiveSearchModule
  ],
})
export class AppModule {}

Then in your component.html

<ngm-live-search (search)="yourSearch($event)" (searchClosed)="clearSearch()">
</ngm-live-search>

Then in your component.ts

export class YourComponent {
  /**
   * @params text: the text to search.
   */
  yourSearch(text: string) {
    // Call api or search locally on your data.
    // this.callApi() In case of call api.
    // this.localSearch() In case of local search.
  }

  clearSearch() {
    // Stop filtering your data
  }

  callApi() {}

  localSearch() {}
}

API Reference

Inputs

| Parameter | Type | Description | | :-------- | :-------------- | :----------------------------------- | | config | ISearchParams | debounceTime, minLength, clearOnBlur |

Outputs

| Parameter | Type | Description | | :------------- | :------- | :--------------------------- | | search | string | Returns the string to search | | searchClosed | string | on click on x button |