https://github.com/mustafaer/ngx-dynamic-search
Angular dynamic search pipe
https://github.com/mustafaer/ngx-dynamic-search
Last synced: 5 months ago
JSON representation
Angular dynamic search pipe
- Host: GitHub
- URL: https://github.com/mustafaer/ngx-dynamic-search
- Owner: mustafaer
- Created: 2023-05-05T08:31:11.000Z (about 3 years ago)
- Default Branch: development
- Last Pushed: 2025-07-20T12:14:02.000Z (11 months ago)
- Last Synced: 2025-10-06T01:59:50.626Z (8 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-dynamic-search
- Size: 931 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-dynamic-search - Angular pipe designed for dynamic, deep search filtering across complex nested objects and arrays. (Third Party Components / Pipes)
- awesome-angular - ngx-dynamic-search - Angular pipe designed for dynamic, deep search filtering across complex nested objects and arrays. (Third Party Components / Pipes)
README
# NGX DYNAMIC SEARCH
[](https://www.npmjs.com/package/ngx-dynamic-search)
[](https://www.npmjs.com/package/ngx-dynamic-search)
[](https://opensource.org/licenses/MIT)
**ngx-dynamic-search** is a high-performance, lightweight, and standalone Angular pipe designed for dynamic, deep search filtering across complex nested objects and arrays. It seamlessly integrates with modern Angular applications (Angular 14+), providing a robust solution for client-side filtering.
## 🚀 Features
* **🔍 Deep Search**: Recursively searches through nested objects and arrays to find matches anywhere in your data structure.
* **⚡ High Performance**: Optimized for speed, ensuring smooth filtering even with large datasets.
* **🛡️ Type Safe**: Gracefully handles `null`, `undefined`, `Date` objects, and various primitive types without crashing.
* **🧩 Standalone**: Built as a standalone pipe, making it easy to import and use in any Angular component without `NgModule` boilerplate.
* **⚙️ Customizable**: Supports case-sensitive search and the ability to exclude specific properties from the search scope.
## 📦 Installation
Install the library via npm:
```bash
npm install ngx-dynamic-search
```
## 🛠 Usage
### 1. Import the Pipe
Since `ngxDynamicSearch` is a standalone pipe, simply add it to the `imports` array of your standalone component.
```typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { DynamicSearchPipe } from 'ngx-dynamic-search';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, FormsModule, DynamicSearchPipe], // Import here
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
searchValue = '';
items = [
{
company: 'Alfreds Futterkiste',
contact: 'Maria Anders',
country: 'Germany',
details: { sector: 'Food', employees: 50 }
},
{
company: 'Centro comercial Moctezuma',
contact: 'Francisco Chang',
country: 'Mexico',
details: { sector: 'Retail', employees: 120 }
},
// ... more items
];
}
```
### 2. Use in Template
Apply the pipe to your `*ngFor` loop.
```html
Company
Contact
Country
{{item.company}}
{{item.contact}}
{{item.country}}
```
## 📚 API Reference
### `ngxDynamicSearch` Pipe
| Parameter | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `items` | `any[]` | - | The array of objects to filter. |
| `term` | `string` | - | The search string to match against object properties. |
| `isCaseSensitive` | `boolean` | `false` | (Optional) If `true`, performs a case-sensitive search. |
| `excludes` | `string[]` | `[]` | (Optional) An array of property keys to ignore during the search. |
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request or open an issue on [GitHub](https://github.com/mustafaer/ngx-dynamic-search).
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---