Ngx-mat-searchbar NPM

NgxMatSearchbar

https://github.com/hncleary/ngx-mat-searchbar

What does it do?

Angular Material component providing an input field for searching / filtering. Includes prefixed search icon + suffixed clear button.

Try It

Clone the source repository and run npm run start to serve a demo of the component

How to use it?

Install ngx-mat-searchbar in your project

npm install ngx-mat-searchbar

Import the NgxMatSearchbarModule e.g. in your app.module.ts:

import { MatSelectModule } from '@angular/material';
import { NgxMatSearchbarModule } from 'ngx-mat-searchbar';

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

Use the ngx-mat-searchbar component, and trigger events on its change event

<ngx-mat-searchbar (change)="onFilterChange($event)"></ngx-mat-searchbar>

See the example in https://github.com/hncleary/ngx-mat-searchbar/tree/main/src/app

Inputs

  /** Text to display as the placeholder of the material form field */
  @Input() public placeholder = 'Search';
  /** Disable form input if true */
  @Input() public disabled = false;
  /** Time in milliseconds to debounce the change emit output */
  @Input() public debounce = 250;
  /** Material icon to display as a prefix to the search input */
  @Input() public matIconSearch = 'search';
  /** Material icon to display as a clear button suffix to the search input */
  @Input() public matIconClear = 'cancel';
  /** Appearance of search input form field */
  @Input() public appearance: 'fill' | 'outline' = 'fill';