Skip to content
This repository has been archived by the owner on Apr 20, 2020. It is now read-only.
/ mat-searchable Public archive

MatSearchable is a lightweight library for adding filtering and searching capabilities to the MatSelect component.

License

Notifications You must be signed in to change notification settings

bl4y/mat-searchable

Repository files navigation

MatSearchable

npm version

https://github.com/bl4y/mat-searchable

What is MatSearchable?

MatSearchable is a lightweight library for adding filtering and searching capabilities to the MatSelect component.

Intro

..yet another searching library?

Well, almost!

The most important trait of MatSearchable (compared to other extension libraries) is that it requires no refactorization of your current MatSelect implementation.

MatSearchable does not manipulate your original input data or require you to mess up your clean code. It leverages advanced DOM manipulation techniques, reaching identical performance to the built-in core directives, like ngFor.

Try it on StackBlitz: https://stackblitz.com/edit/mat-searchable-demo

How to use it?

Install the package:

npm install @bl4y/mat-searchable

Reference the module in your app.module.ts:

import { MatSearchableModule } from '@bl4y/mat-searchable';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    MatSearchableModule //! <- IMPORT THIS
  ]
})
export class AppModule { }

Add the neccessary directives and components to your current logic:

<mat-select matSearchable [clearSearchInput]="true">
  <mat-searchable-input placeholder="What do you want to search for?"></mat-searchable-input>
  <ng-container *ngFor="let country of countries">
    <mat-option *matSearchableItem [value]="country.code">
      {{ country.name }}
    </mat-option>
  </ng-container>
</mat-select>

Here is a diff to show how easy it is to extend the MatSelect functionality with MatSearchable: Diff

Pretty awesome, huh?

Inputs

Supported inputs of the MatSearchableInputComponent component:

/** Label of the input placeholder.  */
@Input()
placeholder = 'Search..';

Supported inputs of the MatSearchable directive:

/** Whether the input box should be cleared on opening the dropdown. */
@Input()
clearSearchInput = false;

Dependencies

  • @angular/core: >=5.0.0
  • @angular/common: >=5.0.0
  • @angular/forms: >=5.0.0
  • @angular/cdk: >=5.0.0
  • @angular/material: >=5.0.0
  • rxjs: >=5.5.2

Contributions

Contributions are always welcome, please open an issue or a pull request!

Support me!

If you feel like this library supported you and your project, you can contribute to it's maintenance by buying me a cup of coffee :)

About

MatSearchable is a lightweight library for adding filtering and searching capabilities to the MatSelect component.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published