README
wngx-filter
Angular 7 generic components for array filter in *ngFor directive.
Original project (migrate from): w-ng5 -> lib release compatible with version angular ^5x.
Objective
Filter records of your listings with simple strings using a single field or multiple fields on plan objects. Filter also by using fields in non-plan structured objects by observing one or more attributes or sub-attributes of these objects by browsing their OGNL properties.
Details
Details about this project and user tutorial
Composition package
- Generic Filter for using in directives ngFor
How to install and configure
For use this components, before, install this package with npm:
npm install wngx-filter --save
After, import module in app.module
...
import { WngxFilterModule, WfilterPipe } from 'wngx-filter';
In the next step, add in declare section of app.module:
imports: [
WngxFilterModule,
...
],
providers: [..., WfilterPipe, ...],
And, enjoy....
Sample use
A online examples can be accessed at:
Domain model using in Samples
export interface Phone {
ddd: string;
number: number;
}
export interface Role {
id: string;
description: string;
}
export interface IUser {
nome: string;
idade: number;
phone: Phone;
roles: Role[] | null;
}
Method provider data list of simple string for using in samples
getStrings() {
const retorno = [];
for (let i = 0; i < 10; i++) {
retorno.push(`Item ${i}`);
}
return retorno;
}
Method provider array complex data for using in samples:
getComplexType(): IUser[] {
const retorno: IUser[] = [];
for (let i = 0; i < 10; i++) {
retorno.push({nome: `Nome ${i}`, idade: i});
}
retorno.push({nome: `Nómê com acêntó`, idade: 10});
retorno.push({nome: `Nómê com trëma`, idade: 10});
retorno.push({nome: `Nómê com pável`, idade: 10});
return retorno;
}
Using in HTML
Filter simple string array (no complex type):
<label>String filter 0 - Simple string array (no complex type) </label>
<br>
<input type="text" [(ngModel)]="filter0">
<br>
<h5>Using simple string array filter</h5>
<ul>
<li *ngFor="let s of getStrings() | wfilter:filter0">
{{s}}
</li>
</ul>
<hr>
Field filter in Level 1 (fields 'nome' and 'idade' of IUser interface):
<label>String filter 1 - Field filter in Level 1</label>
<br>
<input type="text" [(ngModel)]="filter1">
<br>
<h5>Using complex type and field level 1 filter</h5>
<ul>
<li *ngFor="let s of getComplexType() | wfilter: [{field:'nome', value:filter1}, {field:'idade', value:filter1}]">
name: {{s.nome}} - idade: {{s.idade}} - phone.ddd: {{s.phone.ddd}} - phone.number: {{s.phone.number}}
</li>
</ul>
<hr>
Field filter in Level 2 (String & Number) (fields 'ddd' and 'number' of 'phone' atribute of IUser interface):
<label>String and Number filter 2 - Field filter in Level 2</label>
<br>
<input type="text" [(ngModel)]="filter2">
<br>
<h5>Using complex type and field level 2 filter</h5>
<ul>
<li *ngFor="let s of getComplexType() | wfilter: [{field:'phone.ddd', value:filter2}, {field:'phone.number', value:filter2}]">
name: {{s.nome}} - idade: {{s.idade}} - phone.ddd: {{s.phone.ddd}} - phone.number: {{s.phone.number}}
</li>
</ul>
<hr>
Filter in all fields of object in all levels (String & Number):
<label>String filter 3 - Any Fileds of Object filter</label>
<br>
<input type="text" [(ngModel)]="filter3">
<br>
<h5>Using complex type and any field filter</h5>
<ul>
<li *ngFor="let s of getComplexType() | wfilter: [{field:'nome',value:filter3},
{field:'idade',value:filter3},
{field:'phone.ddd',value:filter3},
{field:'phone.number',value:filter3}]">
name: {{s.nome}} - idade: {{s.idade}} - phone.ddd: {{s.phone.ddd}} - phone.number: {{s.phone.number}}
</li>
</ul>
<hr>
Filtering in declarative code
HTML:
<label>String filter 4 - Filter in declarative code</label>
<br>
<input type="text" [(ngModel)]="filter4">
<br>
<h5>Using filter in declarative code</h5>
<ul>
<li *ngFor="let s of getDataFilterDeclarativeCode(filter4)">
name: {{s.nome}} - idade: {{s.idade}} - phone.ddd: {{s.phone.ddd}} - phone.number: {{s.phone.number}}
</li>
</ul>
<hr>
Filter child fields of complex type array
Filter a Array complex type 'Roles' attribute of IUser interface
Typescript
getDataFilterDeclarativeCode(filter): IUser[] {
return this.pipe.transform(this.getComplexType(), // Get array data to filter
[
{field: 'nome', value: filter}, // Filter in nome field - level 1
{field: 'phone.number', value: filter}, // Filter in phone.number field - level 2
{field: 'roles', value: [
{field: 'id', value: filter}, // Filter in roles[?].id
{field: 'role', value: filter}, // Filter in roles[?].role
]}
]);
}
HTML
<ul>
<li *ngFor="let s of getComplexType() | wfilter:
[
{field:'nome',value:filter3},
{field:'roles', value:
[
{field: 'role', value: filter3}
]
}
]">
name: {{s.nome}} - idade: {{s.idade}} - phone.ddd: {{s.phone.ddd}} - phone.number: {{s.phone.number}}
<ul>
<li *ngFor="let r of s.roles">{{r.id}} - {{r.description}}</li>
</ul>
</li>
</ul>
Typescript code:
Import component in typescript file header, for example, my-component.ts:
import { WfilterPipe } from 'wngx-filter';
After, import the component in constructor of component
constructor(private pipe: WfilterPipe) {}
Then use the pipe to filter in any method:
getDataFilterDeclarativeCode(filter): IUser[] {
return this.pipe.transform(this.getComplexType(), // Get array data to filter
[
{field: 'nome', value: filter}, // Filter in nome field - level 1
{field: 'phone.number', value: filter} // Filter in phone.number field - level 2
]);
}
This component work with infinite attribute level filters ...
Project info - source code
This project is stored in wngx-library and was generated with Angular CLI version ^1.7.