https://github.com/airizom/ngx-list-search

Drop in client side searching for Angular Material list components
https://github.com/airizom/ngx-list-search

angular angular-material filter npm-package search typescript

Last synced: 3 months ago
JSON representation

Drop in client side searching for Angular Material list components

• Host: GitHub
• URL: https://github.com/airizom/ngx-list-search
• Owner: Airizom
• License: mit
• Created: 2022-03-07T15:54:00.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-03-11T18:10:52.000Z (over 4 years ago)
• Last Synced: 2024-03-18T17:17:13.851Z (over 2 years ago)
• Topics: angular, angular-material, filter, npm-package, search, typescript
• Language: TypeScript
• Homepage: https://ngx-list-search.com/
• Size: 1.13 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# NgxListSearch

[![Main](https://github.com/Airizom/ngx-list-search/actions/workflows/main.yml/badge.svg)](https://github.com/Airizom/ngx-list-search/actions/workflows/main.yml)

[![Coverage Status](https://coveralls.io/repos/github/Airizom/ngx-list-search/badge.svg?branch=main)](https://coveralls.io/github/Airizom/ngx-list-search?branch=main)

[![npm version](https://badge.fury.io/js/ngx-list-search.svg)](https://badge.fury.io/js/ngx-list-search)

## About

Angular list search drop in component to provide searching on MatList, MatActionList and MatSelectionList [MatList](https://material.angular.io/components/list/overview)

## Usage

Install `ngx-list-search` in your project:

```

npm install ngx-list-search

```

Import `NgxListSearchModule` e.g. in your `app.module.ts`:

```typescript

import { MatListModule } from '@angular/material/list';

import { NgxListSearchModule } from 'ngx-list-search';

@NgModule({

  imports: [

    ...

    MatListModule,

    NgxListSearchModule

  ],

})

export class AppModule {}

```

Use the `ngx-list-search` component inside a `mat-list` element:

```html

    

    

        {{ item }}

    

```

## Demo

To see a working demo, please visit [https://ngx-list-search.com/](https://ngx-list-search.com/)

## Limitations

All searchable items must be in the DOM and not rendered with virtual scrolling.