https://github.com/paulotokarskiglinski/ngx-search-pipe
Angular search pipe to filter an array of objects containing the search string.
https://github.com/paulotokarskiglinski/ngx-search-pipe
angular npm package pipe typescript
Last synced: about 1 month ago
JSON representation
Angular search pipe to filter an array of objects containing the search string.
- Host: GitHub
- URL: https://github.com/paulotokarskiglinski/ngx-search-pipe
- Owner: paulotokarskiglinski
- Created: 2023-03-27T20:00:29.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-21T23:56:12.000Z (about 1 month ago)
- Last Synced: 2025-03-22T00:26:49.606Z (about 1 month ago)
- Topics: angular, npm, package, pipe, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-search-pipe
- Size: 1.65 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ngx-search-pipe - A search pipe for Angular that filters a collection of objects based on a specified search term, designed to work seamlessly with signals. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-search-pipe - A search pipe for Angular that filters a collection of objects based on a specified search term, designed to work seamlessly with signals. (Table of contents / Third Party Components)
README
# NgxSearchPipe
Angular search pipe to filter a list of objects containing the search string.
Compatible with signals.
**How to use?**
Import to your standalone component or app module:
```javascript
// app.component.ts
import { NgxSearchPipeModule } from 'ngx-search-pipe';
@Component({
selector: 'app-root',
standalone: true,
imports: [
FormsModule,
RouterOutlet,
NgxSearchPipeModule // <--
],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent { }
```
```javascript
// app.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgxSearchPipeModule } from 'ngx-search-pipe'; // <--
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
NgxSearchPipeModule // <--
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
In your component just create a search `string` and pass it as a parameter to the pipe `ngxSearchPipe` into your `@for` or `*ngFor` loop. It also supports nested objects! As you type, the list of objects will be automatically filtered:
Angular +17 syntax with signals:
```html
@for (item of items() | ngxSearchPipe:searchText(); track $index) {
{{ item.id }}
{{ item.name }}
{{ item.email }}
{{ item.role.name }}
}
```
Older Angular versions:
```html
{{ item.id }}
{{ item.name }}
{{ item.email }}
{{ item.role.name }}
```