DEV Community

Cover image for Introducing ngx-mat-selection-list-search: A Simple Search for Angular Material Selection Lists
developer-1-nng
developer-1-nng

Posted on • Originally published at Medium

Introducing ngx-mat-selection-list-search: A Simple Search for Angular Material Selection Lists

#angular #npm #frontend

While working on an Angular project, I needed a search feature for mat-selection-list (from Angular Material). Initially, I came across mat-select-search, a great package for adding search functionality to mat-select. However, when I tried to use it with mat-selection-list, it didn't work.
I searched for existing libraries that provide this feature, but I couldn't find any. Instead of settling for a workaround, I decided to build a dedicated solution - and that's how ngx-mat-selection-list-search was born.

ngx-mat-selection-list-search is a lightweight, plug-and-play Angular package that seamlessly integrates a search bar into Angular Material's mat-selection-list.

💡 Key Features:
✅ Search/Filter for mat-selection-list without adding explicit filter logic.
✅ Loader and Debounce time on search.
✅ Select All / Clear All actions for convenience
✅ Customisable UI: Modify the placeholder, field appearance and no records found message/template
✅ Search on input or Search on enter

Installation
Getting started is simple! Install the package via npm:

npm install ngx-mat-selection-list-search
Enter fullscreen mode Exit fullscreen mode

or with yarn:

yarn add ngx-mat-selection-list-search

Usage Guide
Once installed, import the module into your Angular application:

import { NgxMatSelectionListSearchModule } from 'ngx-mat-selection-list-search';

@NgModule({
  imports: [
    NgxMatSelectionListSearchModule,
    // other modules...
  ]
})
export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

Now, integrate the search component inside your mat-selection-list:

<mat-selection-list>
  <ngx-mat-selection-list-search
    [placeholder]="'Search items'"
    [fieldAppearance]="'outline'"
    [debounceTime]="300"
    [selectAllAction]="true"
    [clearAllAction]="true">
  </ngx-mat-selection-list-search>

  <mat-list-option *ngFor="let item of items" [value]="item">
    {{ item }}
  </mat-list-option>
</mat-selection-list>
Enter fullscreen mode Exit fullscreen mode

Why Use ngx-mat-selection-list-search?
🔹 No need for custom filtering logic - it's all built-in
🔹 Enhances user experience with quick filtering and selection controls
🔹 Optimised for Angular Material - follows Material design principles
🔹 Easy to integrate with any existing mat-selection-list

Conclusion
ngx-mat-selection-list-search solves a common problem in Angular Material applications by bringing intuitive search and selection functionality to mat-selection-list. If you're using Angular Material and need a searchable selection list, this library is for you!
🚀 Try it out today and let me know your feedback!
👉 Check it out on npm
🔹 If you find it useful, don't forget to ⭐️ star the repo and share it with the Angular community!

Top comments (0)