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';

Development

This library was generated with Angular CLI version 18.1.0

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Library Build / NPM Package

Run npm run build-lib to build the library and generate an NPM package. The build artifacts will be stored in the dist/ngx-mat-searchbar/ folder.

Running unit tests

Run npm run tes-lib to execute the library unit tests via Karma