1.0.3 • Published 2 years ago
ng-search-pipe v1.0.3
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>