Created
September 23, 2019 09:02
-
-
Save matthiasbaldi/bf932497c1324dc65f6fdba4362c5bfb to your computer and use it in GitHub Desktop.
Deep Angular Filter-Pipe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// this file has to look something like this... | |
import {NgModule,} from '@angular/core'; | |
import { MyComponent } from './my.component'; | |
import { FilterPipe } from './filter.pipe'; | |
@NgModule({ | |
declarations: [ | |
MyComponent | |
FilterPipe | |
] | |
}) | |
export class AppModule { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Pipe, PipeTransform } from '@angular/core'; | |
@Pipe({ | |
name: 'filter', | |
pure: false | |
}) | |
export class FilterPipe implements PipeTransform { | |
transform(items: any[], filterList: any[]): any[] { | |
return items | |
.filter(item => this.filterArgs(item, filterList)); | |
} | |
// iterate over filterList and apply every search item to items list | |
private filterArgs = (item, filterList) => { | |
return filterList | |
.every( arg => { | |
const resolved = this.resolve(arg.path, item).toString(); | |
return (resolved !== null && resolved.match(new RegExp(`${arg.search}`, 'i'))); | |
}); | |
} | |
// deep resolve the argument path from the given item | |
private resolve(path, obj) { | |
return path.reduce((prev, curr) => { | |
return prev ? prev[curr] : null | |
}, obj || self); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<table class="table"> | |
<tr *ngFor="let item of itemList | filter: filters"> | |
<!-- do something with your data --> | |
</tr> | |
</table> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from '@angular/core'; | |
@Component({ | |
selector: 'app-mycomponent', | |
templateUrl: './mycomponent.component.html' | |
}) | |
export class MyComponent { | |
// demo data | |
public itemList = [ | |
{ name: 'firstname', team: { | |
name: 'teamOne', email: 't1@mail.com', department: { | |
name: 'depOne', number: '1' | |
} }, id: 1 }, | |
{ name: 'firstname2', team: { | |
name: 'teamTwo', email: 't2@mail.com', department: { | |
name: 'depTwo', number: '2' | |
} }, id: 2 }, | |
{ name: 'firstname3', team: { | |
name: 'teamOne', email: 't1@mail.com', department: { | |
name: 'depThree', number: '3' | |
} }, id: 3 } | |
]; | |
// filter config | |
public filters: any = [ | |
{ path: ['team', 'name'], search: 'teamOne|teamTwo' }, | |
{ path: ['team', 'department', 'name'], search: 'depThree' } | |
]; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment