https://github.com/VadimDez/ngx-filter-pipe

𝗩 Angular 5+ pipeline for array filtering.
https://github.com/VadimDez/ngx-filter-pipe

angular-2 array-filter filter filter-array pipe

Last synced: about 1 month ago
JSON representation

𝗩 Angular 5+ pipeline for array filtering.

• Host: GitHub
• URL: https://github.com/VadimDez/ngx-filter-pipe
• Owner: VadimDez
• License: mit
• Created: 2016-06-24T06:51:16.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-09-08T19:31:34.000Z (3 months ago)
• Last Synced: 2024-11-08T05:02:54.968Z (about 1 month ago)
• Topics: angular-2, array-filter, filter, filter-array, pipe
• Language: TypeScript
• Homepage: https://vadimdez.github.io/ngx-filter-pipe
• Size: 10.7 MB
• Stars: 146
• Watchers: 8
• Forks: 37
• Open Issues: 36
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• Awesome - Filtering Array

README

        
Angular5+ Filter Pipe




  

    

  

  

  

    

  

  

  

    

  

  

  

    

  

  

  

    

  

  

  

    

  



> Filter arrays

 

Angular 5+ pipeline for filtering arrays.



  



### Demo Page

[https://vadimdez.github.io/ngx-filter-pipe/](https://vadimdez.github.io/ngx-filter-pipe/)

or see demo code

[https://stackblitz.com/edit/ngx-filter-pipe](https://stackblitz.com/edit/ngx-filter-pipe)

### Usage

##### In HTML template

```

{{ collection | filterBy: searchTerm }}

```

### Arguments

| Param | Type | Details |

| --- | --- | --- |

| collection | `array` | The collection to filter |

| searchTerm  | `string` or `number` or `object` or `array` or `function` | Predicate used to filter items from `collection` |

## Install

```

npm install ngx-filter-pipe --save

```

*For Angular lower than 5 use version `1.0.2`*

## Setup

In case you're using ```SystemJS``` - see configuration [here](https://github.com/VadimDez/ngx-filter-pipe/blob/master/SYSTEMJS.md).

## Usage

Import `FilterPipeModule` to your module

```ts

import { NgModule } from '@angular/core';

import { BrowserModule  } from '@angular/platform-browser';

import { AppComponent } from './app';

 

import { FilterPipeModule } from 'ngx-filter-pipe';

import { FormsModule } from '@angular/forms';

@NgModule({

  imports: [BrowserModule, FormsModule, FilterPipeModule],

  declarations: [AppComponent],

  bootstrap: [AppComponent]

})

export class AppModule {}

```

And use pipe in your component

```ts

import { Component } from '@angular/core';

 

@Component({

  selector: 'example-app',

  template: `

    


        

        


          
{{ user.name }}

          

          

          
No matching elements

        

    
  

  `

})

 

export class AppComponent {

  users: any[] = [{ name: 'John' }, { name: 'Jane' }, { name: 'Mario' }];

  userFilter: any = { name: '' };

}

```


### $or matching

Use `$or` to filter by more then one values.

`$or` expects an `Array`.

In your component:

```ts

// your array

const languages = ['English', 'German', 'Russian', 'Italian', 'Ukrainian'];

// your $or filter

const filter = { $or: ['German', 'English'] };

```

In your template:

```html



  {{ language }}



```


Result will be:

```html

English

German

```


#### $or example with nessted values

In your component:

```ts

// your array

const languages = [

  { language: 'English' },

  { language: 'German' },

  { language: 'Italian' }

];

// your $or filter

const filter = {

  language: {

    $or: ['Italian', 'English']

  }

};

```

In your template:

```html



  {{ object.language }}



```


Result:

```html

English

Italian

```


#### $or example with multiple predicates

```

const objects = [

  { name: 'John' },

  { firstName: 'John' }

]

const filter = { $or: [{ name: 'John' }, { firstName: 'John' }] }

```

In your template:

```html



  {{ object | json }}



```


Result:

```html

{ name: 'John' }

{ firstName: 'John' }

```


### Use FilterPipe in a component

Inject `FilterPipe` into your component and use it:

```ts

class AppComponent {

  objects = [

    { name: 'John' },

    { name: 'Nick' },

    { name: 'Jane' }

  ];

  

  constructor(private filter: FilterPipe) {

    let result = this.filter.transform(this.objects, { name: 'J' });

    console.log(result); // [{ name: 'John' }, { name: 'Jane' }]

  }

}

```

## Test

Run tests

```

npm test

```

## Contribute

## License

[MIT](https://tldrlegal.com/license/mit-license) © [Vadym Yatsyuk](https://github.com/vadimdez)