# wngx-filter

Angular 7 generic components for array filter in *ngFor directive.

Original project (migrate from): [w-ng5](https://www.npmjs.com/package/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](https://www.npmjs.com/package/wngx-filter):

    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](https://stackblitz.com/edit/angular-ivy-wngx-filter)
* [stackblitz - Article Demo Code](https://stackblitz.com/edit/article-demo)



### 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](https://github.com/wquintanilhadasilva/wngx-library) and was generated with [Angular CLI](https://github.com/angular/angular-cli) version ^1.7.