Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/josee9988/filter-pipe-ngx
๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐๐ป๐ถ๐๐ฒ๐ฟ๐๐ฎ๐น ๐ฝ๐ถ๐ฝ๐ฒ to ๐ณ๐ถ๐น๐๐ฒ๐ฟ your array of objects.โจ (accent marks and upper/lowercase ignored!) ๐งจ Filter your objects with high accuracy and speed ๐ฅ
https://github.com/josee9988/filter-pipe-ngx
angular angular11 angular6 angular7 angular8 angularuniversal arrayobject deburr filter filter-lists filtering filterlist lodash npm npm-module npmjs npmpackage pipe pipes stackblitz
Last synced: 26 days ago
JSON representation
๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐๐ป๐ถ๐๐ฒ๐ฟ๐๐ฎ๐น ๐ฝ๐ถ๐ฝ๐ฒ to ๐ณ๐ถ๐น๐๐ฒ๐ฟ your array of objects.โจ (accent marks and upper/lowercase ignored!) ๐งจ Filter your objects with high accuracy and speed ๐ฅ
- Host: GitHub
- URL: https://github.com/josee9988/filter-pipe-ngx
- Owner: Josee9988
- License: mit
- Created: 2020-04-30T09:12:06.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T23:30:44.000Z (almost 2 years ago)
- Last Synced: 2024-10-12T08:03:59.288Z (26 days ago)
- Topics: angular, angular11, angular6, angular7, angular8, angularuniversal, arrayobject, deburr, filter, filter-lists, filtering, filterlist, lodash, npm, npm-module, npmjs, npmpackage, pipe, pipes, stackblitz
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@josee9988/filter-pipe-ngx
- Size: 1.74 MB
- Stars: 10
- Watchers: 2
- Forks: 5
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# **FilterPipeNgx** for angular universal
**Simple angular pipe** that allows you to filter arrays of objects and simple arrays by a given text.
This *angular universal filter pipe* is able to filter by any field in your array of objects and can even ignore the **accent marks** or **upercase/lowercase** text.
Originally filter pipe based on [solodynamo/ng2-search-filter](https://github.com/solodynamo/ng2-search-filter), please do check his project.
[](https://www.npmjs.com/package/@josee9988/filter-pipe-ngx)
[](https://www.npmjs.com/package/@josee9988/filter-pipe-ngx)
[](/LICENSE)
[](https://www.npmjs.com/package/@josee9988/filter-pipe-ngx)
[](https://www.npmjs.com/package/@josee9988/filter-pipe-ngx)
---
# Installation
1. Install the pipe to your project.
```bash
npm i @josee9988/filter-pipe-ngx --save
```
2. Import the pipe to your `app.module.ts`.
```typescript
import {FilterModule} from '@josee9988/filter-pipe-ngx';
```
3. Declare and initialize the pipe to your project.
```typescript
// rest of your imports here...
@NgModule({
imports: [ // in the imports section
FilterModule, // add the pipe to your declarations
// rest of the code ...
```
---
# Examples of use
[
](https://stackblitz.com/edit/filter-pipe-ngx)
Example of other integration in another web.
## Stackblitz example
[
](https://stackblitz.com/edit/filter-pipe-ngx)
Check the **[stackblitz example](https://stackblitz.com/edit/filter-pipe-ngx)** or simply click the above image!
## Direct component example
```typescript
import {Component} from '@angular/core';
@Component({
selector: 'app-example-filter-pipe-products',
template: `
Name: {{arrayItem.name}}, Inventory: {{arrayItem.inventory}}, price: {{arrayItem.price}}
`
})
export class ExampleFilterPipeProducts {
yourArrayToBeFiltered: any[] = [
{name: 'chair', inventory: 5, price: 45.99},
{name: 'table', inventory: 10, price: 123.75},
{name: 'sofa', inventory: 2, price: 399.50},
{name: 'bed', inventory: 4, price: 592.12}];
searchText: string;
}
```
For deeper information about angular pipes [check the oficial documentation](https://angular.io/guide/pipes).
---
## Contributing
This project is actively looking for new contributors to develop new functions, maintain and improve the project. If you are interested make sure to fork the project and pull-request your improvements to be added as a contributor!
---
### Did you enjoyed the package? Help us raise these numbers!
[](#Contributing)
[](#Contributing)
[](#Contributing)
[](#Contributing)
[](https://github.com/sponsors/Josee9988)
Check the [npm page with the package](https://www.npmjs.com/package/@josee9988/filter-pipe-ngx).
---
_Made with a lot of โค๏ธโค๏ธ by **[@Josee9988](https://github.com/Josee9988)**_