VadimDez / Ngx Filter Pipe
Licence: mit
𝗩 Angular 5+ pipeline for array filtering.
Stars: ✭ 129
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ngx Filter Pipe
Ng2 Smart Table
Angular Smart Data Table component
Stars: ✭ 1,590 (+1132.56%)
Mutual labels: filter, angular-2
Fsharp Data Processing Pipeline
Provides an extensible solution for creating Data Processing Pipelines in F#.
Stars: ✭ 13 (-89.92%)
Mutual labels: pipe, filter
Ng2 Search Filter
Angular 2 / Angular 4 / Angular 5 custom pipe npm module to make a search filter on any input, 🔥 100K+ downloads
Stars: ✭ 137 (+6.2%)
Mutual labels: pipe, filter
Active hash relation
ActiveHash Relation: Simple gem that allows you to run multiple ActiveRecord::Relation using hash. Perfect for APIs.
Stars: ✭ 115 (-10.85%)
Mutual labels: filter
Hosts Blocklists
Automatically updated, moderated and optimized lists for blocking ads, trackers, malware and other garbage
Stars: ✭ 1,749 (+1255.81%)
Mutual labels: filter
Fungen
Replace boilerplate code with functional patterns using 'go generate'
Stars: ✭ 122 (-5.43%)
Mutual labels: filter
Vue Filters Kit
A collection of useful custom filters for Vue.js(v2.x.x) apps.
Stars: ✭ 125 (-3.1%)
Mutual labels: filter
Searchable
Search/filter functionality for Laravel's Eloquent models
Stars: ✭ 113 (-12.4%)
Mutual labels: filter
Glslsmartdenoise
Fast glsl deNoise spatial filter, with circular gaussian kernel, full configurable
Stars: ✭ 121 (-6.2%)
Mutual labels: filter
Spark Infotheoretic Feature Selection
This package contains a generic implementation of greedy Information Theoretic Feature Selection (FS) methods. The implementation is based on the common theoretic framework presented by Gavin Brown. Implementations of mRMR, InfoGain, JMI and other commonly used FS filters are provided.
Stars: ✭ 123 (-4.65%)
Mutual labels: filter
Vue2 Bootstrap Table
A sortable and searchable table, as a Vue2 component, using bootstrap styling.
Stars: ✭ 120 (-6.98%)
Mutual labels: filter
Sieve
A simple, clean and elegant way to filter Eloquent models.
Stars: ✭ 123 (-4.65%)
Mutual labels: filter
Jsonapi.rb
Lightweight, simple and maintained JSON:API support for your next Ruby HTTP API.
Stars: ✭ 116 (-10.08%)
Mutual labels: filter
Moviecontentfilter
Watch movies with the freedom (not) to filter
Stars: ✭ 126 (-2.33%)
Mutual labels: filter
Processing Postfx
A shader based postFX library for processing.
Stars: ✭ 114 (-11.63%)
Mutual labels: filter
Angular5 Example Shopping App
Angular 5 Example Shopping App + Angular Material + Responsive
Stars: ✭ 120 (-6.98%)
Mutual labels: angular-2
Bbwebimage
A high performance Swift library for downloading, caching and editing web images asynchronously.
Stars: ✭ 128 (-0.78%)
Mutual labels: filter
Angular5+ Filter Pipe
Filter arrays
Angular 5+ pipeline for filtering arrays.
Demo Page
https://vadimdez.github.io/ngx-filter-pipe/
or see demo code
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.
Usage
Import FilterPipeModule
to your module
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
import { Component } from '@angular/core';
@Component({
selector: 'example-app',
template: `
<div>
<input type="text" [(ngModel)]="userFilter.name" placeholder="name">
<ul>
<li *ngFor="let user of users | filterBy: userFilter">{{ user.name }}</li>
<!-- in case you want to show empty message -->
<li *ngIf="(users | filterBy: userFilter).length === 0">No matching elements</li>
</ul>
</div>
`
})
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:
// your array
const languages = ['English', 'German', 'Russian', 'Italian', 'Ukrainian'];
// your $or filter
const filter = { $or: ['German', 'English'] };
In your template:
<div *ngFor="let language of languages | filterBy: filter">
{{ language }}
</div>
Result will be:
<div>English</div>
<div>German</div>
$or example with nessted values
In your component:
// your array
const languages = [
{ language: 'English' },
{ language: 'German' },
{ language: 'Italian' }
];
// your $or filter
const filter = {
language: {
$or: ['Italian', 'English']
}
};
In your template:
<div *ngFor="let object of languages | filterBy: filter">
{{ object.language }}
</div>
Result:
<div>English</div>
<div>Italian</div>
$or example with multiple predicates
const objects = [
{ name: 'John' },
{ firstName: 'John' }
]
const filter = { $or: [{ name: 'John' }, { firstName: 'John' }] }
In your template:
<div *ngFor="let object of objects | filterBy: filter">
{{ object | json }}
</div>
Result:
<div>{ name: 'John' }</div>
<div>{ firstName: 'John' }</div>
Use FilterPipe in a component
Inject FilterPipe
into your component and use it:
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].