Ngx-Search Clearing

Ngx-Search Clearing is a library for Angular 7+ that provides a simple and easy-to-use search bar component with the ability to clear the input value.

Features

• Easily add a search bar with clear button to your Angular application
• Customize placeholder text and button icon
• Emit events when the search bar value changes or is cleared
• Compatible with Angular Reactive Forms

Installation

To install ngx-search-clearing, run the following command:

npm install ngx-search-clearing --save

Usage

1. Import the NgxSearchClearingModule in your AppModule or feature module:

import { NgxSearchClearingModule } from 'ngx-search-clearing';

// ...

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

2. Add the ngx-search-clearing component to your template:

<ngx-search-clearing [placeholder]="'Search...'" (search)="onSearch($event)" (clear)="onClear()"></ngx-search-clearing>

3. Handle search and clear events in your component:

export class AppComponent {
  onSearch(value: string) {
    console.log(`Search: ${value}`);
  }

  onClear() {
    console.log(`Clear`);
  }
}

API

Inputs

| Input | Type | Default Value | Description | | ----- | ---- | ------------- | ----------- | | placeholder | string | 'Search' | The search input placeholder text | | buttonIcon | string | 'search' | The clear button icon name |

Outputs

| Output | Type | Description | | ------ | ---- | ----------- | | search | EventEmitter | Emitted when the search input value changes | | clear | EventEmitter | Emitted when the clear button is clicked |

Conclusion

Ngx-Search Clearing is a simple and easy-to-use search bar component for Angular applications. With its customizable placeholder text and button icon and the ability to emit events when the search bar value changes or is cleared, it's a great tool for adding search functionality to your application.