1.0.3 • Published 2 years ago

ng-search-pipe v1.0.3

Weekly downloads
32
License
-
Repository
-
Last release
2 years ago

NgSearchPipe

Angular search pipe that filters and returns a vector of objects that contain the search string.

How to use?

Import to your module:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { NgSearchPipe } from 'ng-search-pipe'; // import here

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgSearchPipe // <--
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In your component just create a search string and pass it as a parameter in the pipe ngSearchPipe into your *ngFor. As you type, the vector of objects will be automatically searched:

<input type="text" [(ngModel)]="searchText">

<table>
  <tr *ngFor="let item of itens | ngSearchPipe:searchText">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.email }}</td>
  </tr>
</table>