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:
* stackblitz - Sample Code
* stackblitz - Article Demo Code

$3

``

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;
}

`

$3

Filter simple string array (no complex type):
`

String filter 0 - Simple string array (no complex type)







Using simple string array filter

• 
  {{s}}
  

---

`

Field filter in Level 1 (fields 'nome' and 'idade' of IUser interface):

`

String filter 1 - Field filter in Level 1







Using complex type and field level 1 filter

• 
  name: {{s.nome}} - idade: {{s.idade}} - phone.ddd: {{s.phone.ddd}} - phone.number: {{s.phone.number}}
  

---

`

Field filter in Level 2 (String & Number) (fields 'ddd' and 'number' of 'phone' atribute of IUser interface):

`
String and Number filter 2 - Field filter in Level 2







Using complex type and field level 2 filter

• 
  name: {{s.nome}} - idade: {{s.idade}} - phone.ddd: {{s.phone.ddd}} - phone.number: {{s.phone.number}}
  

---

`

Filter in all fields of object in all levels (String & Number):

`

String filter 3 - Any Fileds of Object filter







Using complex type and any field filter

• 
  name: {{s.nome}} - idade: {{s.idade}} - phone.ddd: {{s.phone.ddd}} - phone.number: {{s.phone.number}}
  

---

`

$3

HTML:

`

String filter 4 - Filter in declarative code







Using filter in declarative code

• 
  name: {{s.nome}} - idade: {{s.idade}} - phone.ddd: {{s.phone.ddd}} - phone.number: {{s.phone.number}}
  

---


`

$3

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

`


• 
  name: {{s.nome}} - idade: {{s.idade}} - phone.ddd: {{s.phone.ddd}} - phone.number: {{s.phone.number}}
  
  
  
  • {{r.id}} - {{r.description}}
  
  
  
  


`

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.